结账页地址模块类型和默认值优化

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

@@ -4,11 +4,12 @@ import {type Ref, useState, useEffect, useCallback, useImperativeHandle, useMemo
 import { useRouter } from 'next/navigation';
 import { useForm, FormProvider } from "react-hook-form";
 import { useCustomToast } from "@/utils/hooks/useToast";
-import {useCheckoutAddress} from "@/utils/hooks/useCheckoutAddress"
+import {useCheckoutAddress, addressIsSame} from "@/utils/hooks/useCheckoutAddress"
 import {useLoginModal} from "@/providers/LoginModalProvider";
 import { useGetCustomerAddress } from "@utils/hooks/useGetCustomerAddress";
 import { EMAIL_REGEX } from "@utils/constants";
 import type { 
+    BillAddressFormData,
     ShipAddressFormData,
     FullAddressFormData,
     CreateCheckoutAddressVariables,
@@ -41,50 +42,44 @@ export interface RefCheckoutAddressHandle {
 /**
  * 地址表单默认值
  */
-function getBillingAddressFormData(billingAddress:CartAddress) {
-    const billingCountry = billingAddress.country || 'US';
-    const billingPhoneNumber =  normalizePhoneForForm(billingAddress.phone, billingCountry) || "";
-    const res = {
-        "billingAddressId": billingAddress.id,
-        "billingEmail": billingAddress.email,
-        "billingFirstName": billingAddress.firstName,
-        "billingLastName": billingAddress.lastName,
+function getBillingAddressFormData(billingAddress:CartAddress | null) {
+    let res:Omit<BillAddressFormData,'billingSameAsShipping'> = {
+        "billingAddressId": "",
+        "billingEmail": '',
+        "billingFirstName": "",
+        "billingLastName": "",
         "billingCompanyName": "",
-        "billingAddress": billingAddress.address,
-        "billingCountry": billingCountry,
-        "billingState": billingAddress.state,
-        "billingCity": billingAddress.city,
-        "billingPostcode": billingAddress.postcode,
-        "billingPhoneNumber": billingPhoneNumber,
-    };
-
-    return res;
-}
-function getShippingAddressFormData(shippingAddress:CartAddress) {
-    const shippingCountry = shippingAddress.country || 'US';
-    const shippingPhoneNumber =  normalizePhoneForForm(shippingAddress.phone, shippingCountry) || "";
-    const res = {
-        "shippingAddressId": shippingAddress.id,
-        "shippingEmail": shippingAddress.email,
-        "shippingFirstName": shippingAddress.firstName,
-        "shippingLastName": shippingAddress.lastName,
-        "shippingCompanyName": "",
-        "shippingAddress": shippingAddress.address,
-        "shippingCountry": shippingCountry,
-        "shippingState": shippingAddress.state,
-        "shippingCity": shippingAddress.city,
-        "shippingPostcode": shippingAddress.postcode,
-        "shippingPhoneNumber": shippingPhoneNumber,
+        "billingAddress": "",
+        "billingCountry": "US",
+        "billingState": "",
+        "billingCity": "",
+        "billingPostcode": "",
+        "billingPhoneNumber": "",
     };
+    if(billingAddress) {
+        const billingCountry = billingAddress.country || 'US';
+        const billingPhoneNumber =  normalizePhoneForForm(billingAddress.phone, billingCountry) || "";
+        res = {
+            "billingAddressId": billingAddress.id,
+            "billingEmail": billingAddress.email,
+            "billingFirstName": billingAddress.firstName,
+            "billingLastName": billingAddress.lastName,
+            "billingCompanyName": "",
+            "billingAddress": billingAddress.address,
+            "billingCountry": billingCountry,
+            "billingState": billingAddress.state,
+            "billingCity": billingAddress.city,
+            "billingPostcode": billingAddress.postcode,
+            "billingPhoneNumber": billingPhoneNumber,
+        };
+    }
 
     return res;
 }
-function getAddressFormDataFromCart(cartDetail:CartDetail, loginEmail?: string) {
-    const shippingAddress = cartDetail.shippingAddress;
-    const billingAddress = cartDetail.billingAddress;
-    const defaultValues = {
+function getShippingAddressFormData(shippingAddress:CartAddress | null) {
+    let res: ShipAddressFormData = {
         "shippingAddressId": "",
-        "shippingEmail": loginEmail ?? '',
+        "shippingEmail": "",
         "shippingFirstName": "",
         "shippingLastName": "",
         "shippingCompanyName": "",
@@ -93,62 +88,46 @@ function getAddressFormDataFromCart(cartDetail:CartDetail, loginEmail?: string)
         "shippingState": "",
         "shippingCity": "",
         "shippingPostcode": "",
-        "shippingPhoneNumber": "",
-        "billingAddressId": "",
-        "billingEmail": loginEmail ?? '',
-        "billingFirstName": "",
-        "billingLastName": "",
-        "billingCompanyName": "",
-        "billingAddress": "",
-        "billingCountry": "US",
-        "billingState": "",
-        "billingCity": "",
-        "billingPostcode": "",
-        "billingPhoneNumber": "",
-        "billingSameAsShipping": true
+        "shippingPhoneNumber": ""
+    };
+    if(shippingAddress) {
+        const shippingCountry = shippingAddress.country || 'US';
+        const shippingPhoneNumber =  normalizePhoneForForm(shippingAddress.phone, shippingCountry) || "";
+        res = {
+            "shippingAddressId": shippingAddress.id,
+            "shippingEmail": shippingAddress.email,
+            "shippingFirstName": shippingAddress.firstName,
+            "shippingLastName": shippingAddress.lastName,
+            "shippingCompanyName": "",
+            "shippingAddress": shippingAddress.address,
+            "shippingCountry": shippingCountry,
+            "shippingState": shippingAddress.state,
+            "shippingCity": shippingAddress.city,
+            "shippingPostcode": shippingAddress.postcode,
+            "shippingPhoneNumber": shippingPhoneNumber,
+        };
     }
-    if(billingAddress) {
-        const bs = getBillingAddressFormData(billingAddress);
-        defaultValues.billingAddressId = bs.billingAddressId;
-        defaultValues.billingEmail = bs.billingEmail;
-        defaultValues.billingFirstName = bs.billingFirstName;
-        defaultValues.billingLastName = bs.billingLastName;
-        defaultValues.billingCompanyName = bs.billingCompanyName;
-        defaultValues.billingAddress = bs.billingAddress;
-        defaultValues.billingCountry = bs.billingCountry;
-        defaultValues.billingState = bs.billingState;
-        defaultValues.billingCity = bs.billingCity;
-        defaultValues.billingPostcode = bs.billingPostcode;
-        defaultValues.billingPhoneNumber = bs.billingPhoneNumber;
-        // defaultValues.billingSameAsShipping = true;
+
+    return res;
+}
+function getAddressFormDataFromCart(cartDetail:CartDetail, loginEmail?: string) {
+    const shippingAddress = cartDetail.shippingAddress;
+    const billingAddress = cartDetail.billingAddress;
+
+    const bs = getBillingAddressFormData(billingAddress);
+    const ss = getShippingAddressFormData(shippingAddress);
+    if(loginEmail && !bs.billingEmail) {
+        bs.billingEmail = loginEmail;
     }
-    if(shippingAddress) {
-        const ss = getShippingAddressFormData(shippingAddress);
-        defaultValues.shippingAddressId = ss.shippingAddressId;
-        defaultValues.shippingEmail = ss.shippingEmail;
-        defaultValues.shippingFirstName = ss.shippingFirstName;
-        defaultValues.shippingLastName = ss.shippingLastName;
-        defaultValues.shippingCompanyName = ss.shippingCompanyName;
-        defaultValues.shippingAddress = ss.shippingAddress;
-        defaultValues.shippingCountry = ss.shippingCountry;
-        defaultValues.shippingState = ss.shippingState;
-        defaultValues.shippingCity = ss.shippingCity;
-        defaultValues.shippingPostcode = ss.shippingPostcode;
-        defaultValues.shippingPhoneNumber = ss.shippingPhoneNumber;
+    if(loginEmail && !ss.shippingEmail) {
+        ss.shippingEmail = loginEmail;
     }
-    if( defaultValues.billingEmail === defaultValues.shippingEmail &&
-        defaultValues.billingFirstName === defaultValues.shippingFirstName &&
-        defaultValues.billingLastName === defaultValues.shippingLastName &&
-        defaultValues.billingCompanyName === defaultValues.shippingCompanyName &&
-        defaultValues.billingAddress === defaultValues.shippingAddress &&
-        defaultValues.billingCountry === defaultValues.shippingCountry &&
-        defaultValues.billingState === defaultValues.shippingState &&
-        defaultValues.billingCity === defaultValues.shippingCity &&
-        defaultValues.billingPostcode === defaultValues.shippingPostcode &&
-        defaultValues.billingPhoneNumber === defaultValues.shippingPhoneNumber
-    ) {
-        defaultValues.billingSameAsShipping = true;
+    const defaultValues: FullAddressFormData = {
+        ...ss,
+        ...bs,
+        "billingSameAsShipping": addressIsSame(bs,ss)
     }
+    
     return defaultValues;
 }
 /**
@@ -305,11 +284,38 @@ export function CheckoutAddress({
                     return;
                 }
 
-                addressForm.resetField('shippingAddressId',{
-                    defaultValue: createAddressData.shippingAddressId
-                });
-                addressForm.resetField('billingAddressId',{
-                    defaultValue: createAddressData.billingAddressId
+                const shipAddressAfterSave: ShipAddressFormData = {
+                    shippingAddressId: createAddressData.shippingAddressId,
+                    shippingEmail: createAddressData.shippingEmail,
+                    shippingFirstName: createAddressData.shippingFirstName,
+                    shippingLastName: createAddressData.shippingLastName,
+                    shippingCompanyName: createAddressData.shippingCompanyName || '',
+                    shippingAddress: createAddressData.shippingAddress,
+                    shippingCountry: createAddressData.shippingCountry,
+                    shippingState: createAddressData.shippingState,
+                    shippingCity: createAddressData.shippingCity,
+                    shippingPostcode: createAddressData.shippingPostcode,
+                    shippingPhoneNumber: createAddressData.shippingPhoneNumber,
+                };
+                const billAddressAfterSave: Omit<BillAddressFormData,'billingSameAsShipping'> = {
+                    billingAddressId: createAddressData.billingAddressId,
+                    billingFirstName: createAddressData.billingFirstName,
+                    billingLastName: createAddressData.billingLastName,
+                    billingEmail: createAddressData.billingEmail,
+                    billingCompanyName: createAddressData.billingCompanyName || '',
+                    billingAddress: createAddressData.billingAddress,
+                    billingCity: createAddressData.billingCity,
+                    billingState: createAddressData.billingState,
+                    billingCountry: createAddressData.billingCountry,
+                    billingPostcode: createAddressData.billingPostcode,
+                    billingPhoneNumber: createAddressData.billingPhoneNumber
+                };
+                // 重置表单，更新默认值
+                addressForm.reset({
+                    ...shipAddressAfterSave,
+                    ...billAddressAfterSave,
+                    billingSameAsShipping: addressIsSame(billAddressAfterSave,shipAddressAfterSave)
+
                 });
 
         

src/components/layout/navbar/NavbarSearchIcon.tsx

@@ -21,11 +21,11 @@ export default function NavbarSearchIcon() {
             cy="8.75"
             r="8"
             stroke="rgba(0, 0, 0, 1)"
-            stroke-width="1.5"
+            strokeWidth="1.5"
           ></circle>
           <path
             stroke="rgba(0, 0, 0, 1)"
-            stroke-width="1.5"
+            strokeWidth="1.5"
             d="M14.25 15.25L17.25 18.25"
           ></path>
         </svg>

src/types/checkout/type.ts

@@ -461,33 +461,6 @@ export interface State {
 }
 
 
-export interface ShipAddressFormData { 
-    shippingAddressId: string | number,
-    shippingEmail: string,
-    shippingFirstName: string,
-    shippingLastName: string,
-    shippingCompanyName: string,
-    shippingAddress: string,
-    shippingCountry: string,
-    shippingState: string,
-    shippingCity: string,
-    shippingPostcode: string,
-    shippingPhoneNumber: string,
-}
-export interface BillAddressFormData { 
-    billingAddressId: string | number,
-    billingEmail: string,
-    billingFirstName: string,
-    billingLastName: string,
-    billingCompanyName: string,
-    billingAddress: string,
-    billingCountry: string,
-    billingState: string,
-    billingCity: string,
-    billingPostcode: string,
-    billingPhoneNumber: string,
-}
-
 export interface CreatePaymentReplay{
     id: number;
     success: boolean;

src/utils/hooks/useCheckoutAddress.ts

@@ -12,7 +12,7 @@ import {normalizePhoneForForm} from "@/utils/phoneNumberTools";
 /**
  * 对比shipping address与billing address的数据是否完全相同
  */
-export function addressIsSame(billAddress: BillAddressFormData | null, shipAddress: ShipAddressFormData | null) {
+export function addressIsSame(billAddress: Omit<BillAddressFormData,'billingSameAsShipping'> | null, shipAddress: ShipAddressFormData | null) {
     if(billAddress === null && shipAddress === null) {
         return true;
     } else if(billAddress !== null && shipAddress !== null) {