结账页地址模块运输运输地址和账单地址同步问题

src/app/(checkout)/checkout/_components/CheckoutAddress/BillingAddressCheckout.tsx

@@ -45,6 +45,7 @@ export default function BillingAddressCheckout ({
         getValues,
         setValue,
         register,
+        clearErrors,
         formState: { errors },
         control 
     } = useFormContext() // retrieve all hook methods
@@ -82,6 +83,23 @@ export default function BillingAddressCheckout ({
         ]
     });
 
+    useEffect(() => {
+        if (billingSameAsShipping) {
+            clearErrors([
+                "billingEmail",
+                "billingFirstName",
+                "billingLastName",
+                "billingCompanyName",
+                "billingAddress",
+                "billingCountry",
+                "billingState",
+                "billingCity",
+                "billingPostcode",
+                "billingPhoneNumber",
+            ]);
+        }
+    }, [billingSameAsShipping, clearErrors]);
+    /*
     const shippingFields = useWatch({
         control,
         name: [
@@ -119,12 +137,12 @@ export default function BillingAddressCheckout ({
         setValue("billingCompanyName", shippingCompanyName);
         setValue("billingAddress", shippingAddress);
         setValue("billingCountry", shippingCountry);
-        setValue("billingState", shippingState);
         setValue("billingCity", shippingCity);
         setValue("billingPostcode", shippingPostcode);
         setValue("billingPhoneNumber", shippingPhoneNumber);
+        setValue("billingState", shippingState,{shouldValidate: true}); // 必须触发校验，因为使用浏览器自动填充的时候，可能导致billingState校验不通过，导致无法下单
     }, [billingSameAsShipping, shippingFields, setValue]);
-    
+    */
     
 
     const selectedCountry = useMemo(() => {
@@ -304,7 +322,7 @@ export default function BillingAddressCheckout ({
                         type="email"
                         placeholder="Enter your email address"
                         {...register("billingEmail", {
-                            required: "Email is required",
+                            required: !billingSameAsShipping ? "Email is required" : false,
                             pattern: {
                                 value: EMAIL_REGEX,
                                 message: "Please enter a valid email address",
@@ -323,7 +341,7 @@ export default function BillingAddressCheckout ({
                                 type="text"
                                 placeholder="First name"
                                 {...register("billingFirstName", {
-                                    required: "First name is required",
+                                    required: !billingSameAsShipping ? "First name is required" : false,
                                     pattern: {
                                         value: IS_VALID_INPUT,
                                         message: "Invalid First Name",
@@ -337,7 +355,7 @@ export default function BillingAddressCheckout ({
                                 type="text"
                                 placeholder="Last name"
                                 {...register("billingLastName", {
-                                    required: "Last name is required",
+                                    required: !billingSameAsShipping ? "Last name is required" : false,
                                     pattern: {
                                         value: IS_VALID_INPUT,
                                         message: "Invalid Last Name",
@@ -355,7 +373,7 @@ export default function BillingAddressCheckout ({
                         type="text"
                         placeholder="Please Input Your Detailed Address With Apt. No"
                         {...register("billingAddress", {
-                            required: "Address is required",
+                            required: !billingSameAsShipping ? "Address is required" : false,
                         })}
                         error={errors.billingAddress && errors.billingAddress.message as string}
                     />
@@ -369,7 +387,7 @@ export default function BillingAddressCheckout ({
                             <div className="w-41.25 flex-none">
                                 <Select placeholder="Country/Region"
                                     {...register("billingCountry", {
-                                        required: "Country/Region field is required",
+                                        required: !billingSameAsShipping ? "Country/Region field is required" : false,
                                         onChange: () => {
                                             setValue('billingState','',{
                                                 shouldDirty: true,
@@ -391,7 +409,7 @@ export default function BillingAddressCheckout ({
                                 (
                                     <Select placeholder="State/Province"
                                         {...register("billingState", {
-                                            required: "State/Province field is required"
+                                            required: !billingSameAsShipping ? "State/Province field is required" : false
                                         })}
                                         options={statesOptions}
                                         error={errors.billingState && errors.billingState.message as string}
@@ -402,7 +420,7 @@ export default function BillingAddressCheckout ({
                                         type="text"
                                         placeholder="State/Province"
                                         {...register("billingState", {
-                                            required: "State/Province field is required"
+                                            required: !billingSameAsShipping ? "State/Province field is required" : false
                                         })}
                                         error={errors.billingState && errors.billingState.message as string}
                                     />
@@ -417,7 +435,7 @@ export default function BillingAddressCheckout ({
                                     type="text"
                                     placeholder="Zip/Postal Code"
                                     {...register("billingPostcode", {
-                                        required: "Postcode field is required",
+                                        required: !billingSameAsShipping ? "Postcode field is required" : false,
                                         pattern: {
                                             value: IS_VALID_INPUT,
                                             message: "Invalid Postcode",
@@ -431,7 +449,7 @@ export default function BillingAddressCheckout ({
                                     type="text"
                                     placeholder="City"
                                     {...register("billingCity", {
-                                        required: "City field is required",
+                                        required: !billingSameAsShipping ? "City field is required" : false,
                                         pattern: {
                                             value: IS_VALID_INPUT,
                                             message: "Invalid City",
@@ -451,7 +469,7 @@ export default function BillingAddressCheckout ({
                         name="billingPhoneNumber"
                         control={control}
                         rules={{
-                            required: "Phone Number is required",
+                            required: !billingSameAsShipping ? "Phone Number is required" : false,
                             pattern: {
                                 value: IS_VALID_FULL_PHONE,
                                 message: "Invalid Phone Number",

src/app/(checkout)/checkout/_components/CheckoutAddress/ShippingAddressCheckout.tsx

@@ -46,7 +46,7 @@ export default function ShippingAddressCheckout({
         formState: { errors },
         control,
     } = useFormContext() // retrieve all hook methods
-    console.log('errors ----- ', errors);
+    
     
     const countriesOptions = useMemo(() => {
         return countries.map((country) => ({

src/components/theme/ui/Select.tsx

@@ -12,7 +12,8 @@ export default function Select({
     onBlur,
     name,
     error,
-    ref
+    ref,
+    autoComplete = "off"
 }: {
     placeholder?: string;
     options: Option[];
@@ -21,6 +22,7 @@ export default function Select({
     name: string;
     error?: string;
     ref?: React.Ref<HTMLSelectElement>;
+    autoComplete?: string;
 }) {
 
     return (
@@ -30,6 +32,7 @@ export default function Select({
                 onBlur={onBlur}
                 name={name}
                 ref={ref}
+                autoComplete={autoComplete}
             >
                 {placeholder && <option value="">{placeholder}</option>}
                 {options.map((option) => (