结账页样式

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

@@ -30,37 +30,37 @@ export default function AddressResultDisplay({
     return (
         <>
         {shippingAddress === null || !addressIsAvailable ?
-            <div className="box-border w-full h-15 flex items-center px-3.75 relative bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]"
+            <div className="box-border w-full h-15 flex items-center px-4 relative bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]"
                 onClick={onAddressModalOpenClick}
             >
-                <svg className="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <svg className="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                     <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"  d="M6.01652 15.917C4.48522 16.3764 3.53809 17.0111 3.53809 17.712C3.53809 19.1141 7.32661 20.2507 12 20.2507C16.6734 20.2507 20.4619 19.1141 20.4619 17.712C20.4619 17.0111 19.5148 16.3764 17.9835 15.917"></path>
                     <path d="M12.0002 16.8657C12.0002 16.8657 17.5005 13.271 17.5005 9.11522C17.5005 6.15182 15.0379 3.74951 12.0002 3.74951C8.96254 3.74951 6.5 6.15182 6.5 9.11522C6.5 13.271 12.0002 16.8657 12.0002 16.8657Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path>
                     <path d="M11.9983 11.3653C13.1666 11.3653 14.1138 10.4181 14.1138 9.24979C14.1138 8.08144 13.1666 7.13428 11.9983 7.13428C10.83 7.13428 9.88281 8.08144 9.88281 9.24979C9.88281 10.4181 10.83 11.3653 11.9983 11.3653Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path>
                 </svg>
-                <span className="text-ly-12 text-ly-errorcolor">Fill in your shipping address for fast delivery</span>
+                <span className="text-ly-14 text-ly-errorcolor">Fill in your shipping address for fast delivery</span>
          
-                <svg className="absolute top-1/2 right-3.75 -translate-y-1/2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="0" y="0" width="16" height="16"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M6.32031 4.27051L10.4202 8.37036L6.32031 12.4702"></path></svg>
+                <svg className="absolute top-1/2 right-4 -translate-y-1/2 w-6 h-6" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="0" y="0" width="16" height="16"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M6.32031 4.27051L10.4202 8.37036L6.32031 12.4702"></path></svg>
             </div>
             :
-            <div className="w-full box-border px-3.75 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]"
+            <div className="w-full box-border px-4 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]"
                 onClick={onAddressModalOpenClick}
             >
-                <div className="border-b-1 flex h-11.25 items-center justify-between">
-                    <p className="text-ly-13 font-medium">
+                <div className="border-b-1 flex h-12.5 items-center justify-between">
+                    <p className="text-ly-14 font-medium">
                         {shippingAddress.firstName} {shippingAddress.lastName}
-                        <span className="border-r border-ly-gray h-3.5 mx-2"></span> 
+                        <span className="border-r border-ly-gray h-3.5 mx-4"></span> 
                         {shippingAddress.phone}
                     </p>
-                    <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="0" y="0" width="16" height="16"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M6.32031 4.27051L10.4202 8.37036L6.32031 12.4702"></path></svg>
+                    <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="0" y="0" width="16" height="16"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M6.32031 4.27051L10.4202 8.37036L6.32031 12.4702"></path></svg>
                 </div>
-                <div className="flex items-center h-10">
-                    <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <div className="flex items-center h-14">
+                    <svg className="w-6 h-6 mr-3" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                         <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"  d="M6.01652 15.917C4.48522 16.3764 3.53809 17.0111 3.53809 17.712C3.53809 19.1141 7.32661 20.2507 12 20.2507C16.6734 20.2507 20.4619 19.1141 20.4619 17.712C20.4619 17.0111 19.5148 16.3764 17.9835 15.917"></path>
                         <path d="M12.0002 16.8657C12.0002 16.8657 17.5005 13.271 17.5005 9.11522C17.5005 6.15182 15.0379 3.74951 12.0002 3.74951C8.96254 3.74951 6.5 6.15182 6.5 9.11522C6.5 13.271 12.0002 16.8657 12.0002 16.8657Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path>
                         <path d="M11.9983 11.3653C13.1666 11.3653 14.1138 10.4181 14.1138 9.24979C14.1138 8.08144 13.1666 7.13428 11.9983 7.13428C10.83 7.13428 9.88281 8.08144 9.88281 9.24979C9.88281 10.4181 10.83 11.3653 11.9983 11.3653Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path>
                     </svg>
-                    <span className="text-ly-12 ml-2.5">
+                    <span className="text-ly-14 leading-ly-20">
                         {shippingAddress.address}, 
                         {shippingAddress.city}, 
                         {shippingAddress.state}, 

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

@@ -1,15 +1,17 @@
 "use client";
 
 import {type Ref, useState, useEffect, useCallback, useImperativeHandle, useMemo } from "react";
+import clsx from "clsx";
 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 { 
     ShipAddressFormData,
+    BillAddressFormData,
     FullAddressFormData,
     CreateCheckoutAddressVariables,
 } from "@/types/checkout/type";
@@ -20,11 +22,8 @@ import {clientFetch} from "@/lib/restApiClient";
 import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";
 import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
 import {normalizePhoneForForm} from "@/utils/phoneNumberTools";
-import AddressResultDisplay from "./AddressResultDisplay";
 import ShippingAddressCheckout from "./ShippingAddressCheckout";
 import BillingAddressCheckout from "./BillingAddressCheckout";
-import CommonModal from "@/components/theme/ui/CommonModal";
-
 
 
 export interface RefCheckoutAddressHandle {
@@ -41,50 +40,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 +86,45 @@ 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;
 }
 /**
@@ -240,7 +216,6 @@ export function CheckoutAddress({
     const [myAddressList, setMyAddressList] = useState<CustomerAddressItem[]>([]);
     const [showShipFormField, setShowShipFormField] = useState(false);
     const [showBillFormField, setShowBillFormField] = useState(false);
-    const [addressFormModalOpen, setAddressFormModalOpen] = useState(false);
 
 
     useImperativeHandle(ref, () => {
@@ -267,25 +242,6 @@ export function CheckoutAddress({
     },[]);
 
 
-    const openAddressFormModal = () => {
-        setAddressFormModalOpen(true);
-        setShowShipFormField(false);
-        setShowBillFormField(false);
-        if(cartData.billingAddress && cartData.shippingAddress) {
-            addressForm.reset({
-                ...getAddressFormDataFromCart(cartData)
-            });
-        }
-
-        
-    };
-    const closeAddressFormModal = () => {
-        setAddressFormModalOpen(false);
-        setShowShipFormField(false);
-        setShowBillFormField(false);
-        // 重置表单
-        addressForm.reset();
-    };
     const addressFormOnSubmit = async (formData: FullAddressFormData) => { 
         // console.log('addressFormOnSubmit ---- ',formData); return;
         const saveAddressParam = generateSaveCheckoutAddressParam(formData);
@@ -305,11 +261,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)
+
                 });
 
         
@@ -343,11 +326,13 @@ export function CheckoutAddress({
                     billingAddress: newBillingAddress,
                     shippingAddress: newShippingAddress
                 });
+
+                showShipFormFieldChange(false);
+                showBillFormFieldChange(false);
                
             } else {
                 showToast(saveRes.msg, 'danger');
             }
-            setAddressFormModalOpen(false);
         } catch(err) {
             // 错误处理
             console.error("save address error", err);
@@ -436,6 +421,35 @@ export function CheckoutAddress({
         
     };
 
+    const isBillSameAsShip = addressForm.watch("billingSameAsShipping");
+    const showSaveBtn = () => {
+        let res = false;
+        if(
+            (noShipAddress || noBillAddress) ||
+            (!isBillSameAsShip && noBillAddress) ||
+            showShipFormField || showBillFormField
+        ) {
+            res = true;
+        }
+
+        return res;
+    };
+    const showCancelBtn = () => {
+        let res = false;
+        if(
+            showShipFormField || showBillFormField
+        ) {
+            res = true;
+        }
+
+        return res;
+    };
+    const cancelHandler = () => {
+        showShipFormFieldChange(false);
+        showBillFormFieldChange(false);
+        // 重置表单
+        addressForm.reset();
+    };
     // function tt() {
     //     const arr = [
     //         ['US','3803800217'], 
@@ -456,56 +470,60 @@ export function CheckoutAddress({
     //     });
     // }
     return (<>
-        <AddressResultDisplay shippingAddress={cartData.shippingAddress || null} 
-            onAddressModalOpenClick={openAddressFormModal}
-        />
-        <CommonModal
-            isOpen={addressFormModalOpen}
-            onClose={closeAddressFormModal}
-            header={
-                <div className="w-full box-border p-3.75 h-14.5 flex justify-between items-center">
-                    <span>Shipping Address</span>
-                    <button className="w-6 h-6" onClick={closeAddressFormModal}>
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" className="h-6 transition-all ease-in-out hover:scale-110"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
-                    </button>
-                </div>
-            }
-            body={
-                <div className="box-border w-full h-full p-3.75">
-                    <div>
-                        <FormProvider {...addressForm}>
-                            <form>
-                                <ShippingAddressCheckout 
-                                    noAddress={noShipAddress}
-                                    isGuest={cartData.isGuest}
-                                    customerAddressList={myAddressList}
-                                    showFormField={showShipFormField}
-                                    onShowFormFieldChange={showShipFormFieldChange}
-                                    onEmailChange={verifyEmailIsRegistered}
-                                />
-                                <BillingAddressCheckout 
-                                    noAddress={noBillAddress}
-                                    isGuest={cartData.isGuest}
-                                    customerAddressList={myAddressList}
-                                    showFormField={showBillFormField}
-                                    onShowFormFieldChange={showBillFormFieldChange}
-                                />
-                            </form>
-                        </FormProvider>
-                    </div>
-                </div>
-            }
-            footer={
-                <div className="box-border w-full p-3.75">
-                <button className="block flex justify-center items-center w-full h-12 bg-ly-green rounded-3xl text-white text-ly-16 font-bold"
-                    onClick={addressForm.handleSubmit(addressFormOnSubmit)}
-                >
-                    Save
-                </button>
-                </div>
-            }
-        />
-            
 
+
+        <div >
+            <FormProvider {...addressForm}>
+                <form>
+                    <ShippingAddressCheckout 
+                        noAddress={noShipAddress}
+                        isGuest={cartData.isGuest}
+                        customerAddressList={myAddressList}
+                        showFormField={showShipFormField}
+                        onShowFormFieldChange={showShipFormFieldChange}
+                        onEmailChange={verifyEmailIsRegistered}
+                    />
+                    <BillingAddressCheckout 
+                        noAddress={noBillAddress}
+                        isGuest={cartData.isGuest}
+                        customerAddressList={myAddressList}
+                        showFormField={showBillFormField}
+                        onShowFormFieldChange={showBillFormFieldChange}
+                    />
+                </form>
+            </FormProvider>
+        </div>
+            
+        
+        {/**
+         * save 按钮
+         * noShipAddress || noBillAddress 显示
+         * billingSameAsShipping是false && noBillAddress 显示
+         * change shipping address 显示
+         * change billing address 显示
+         * 
+         * cancel 按钮
+         * change shipping address 显示
+         * change billing address 显示
+         */}
+        <div className="box-border w-full">
+            <button className={clsx("justify-center items-center w-full h-12 mt-4 bg-ly-green rounded-3xl text-white text-ly-16 font-bold",
+                showSaveBtn() ? 'flex' : 'hidden'
+            )}
+                type="button"
+                onClick={addressForm.handleSubmit(addressFormOnSubmit)}
+            >
+                Save
+            </button>
+
+            <button className={clsx("flex justify-center items-center w-full h-12 mt-3 border-1 rounded-3xl text-ly-16 font-bold",
+                showCancelBtn() ? 'flex' : 'hidden'
+            )}
+                type="button"
+                onClick={cancelHandler}
+            >
+                Cancel
+            </button>
+        </div>
     </>);
 };

src/app/(checkout)/checkout/_components/CheckoutWrapper.tsx

@@ -323,9 +323,9 @@ export default function CheckoutWrapper({
             console.log('checkoutWrapper unmout==========================');
         }
     },[]);
-    return (<>
-        <section className="w-full">
-            <div>
+    return (<div className="w-full flex justify-center items-start mt-6 mb-30">
+        <section className="flex-initial w-164 mr-16">
+            <div className="pb-6 border-b-1">
                 <CheckoutAddress 
                     ref={checkoutAddressRef}
                     loginEmail={loginEmail}
@@ -337,16 +337,26 @@ export default function CheckoutWrapper({
                   
             </div>
 
-
-            <div className="mt-6 box-border px-4">
-                <CheckoutProducts 
-                    cartData={cartData}
-                    onCartChange={onCartDataChange}
+            <div className="mt-6 box-border pb-6 border-b-1">
+                <CheckoutCoupon 
+                    couponCode={cartData.couponCode || ''}
+                    discountAmount={cartData.formattedDiscountAmount}
+                    onCouponChange={onCartDataChange}
                 />
             </div>
 
-            <div className="mt-6 box-border px-4">
-                <h3 className="text-ly-24 font-medium" onClick={testEruda}>Shipping Method</h3>
+            {!cartData.isGuest &&
+                <div className="mt-6 box-border pb-6 border-b-1">
+                    <CheckoutGiftCardGate 
+                        giftcardNumber={cartData.giftcardNumber || ''}
+                        formattedGiftcardAmount={cartData.formattedGiftcardAmount} 
+                        onChangeGiftcard={onCartDataChange}
+                    />
+                </div>
+            }
+
+            <div className="mt-6 box-border">
+                <h3 className="text-ly-20 font-medium" onClick={testEruda}>Shipping Method</h3>
            
                 <ShippingMethodCheckout 
                     ref={methodShiippingRef}  
@@ -358,22 +368,16 @@ export default function CheckoutWrapper({
                 />
             </div>
             {cartData.shippingInsuranceEnabled &&
-                <div className="mt-3 box-border px-4">
+                <div className="mt-4 box-border pb-6 border-b-1">
                     <LostInsurance 
                         cartData={cartData}
                         onSwitchInsurance={onCartDataChange}
                     />
                 </div>
             }
-            <div className="mt-6 box-border px-4">
-                <CheckoutCoupon 
-                    couponCode={cartData.couponCode || ''}
-                    discountAmount={cartData.formattedDiscountAmount}
-                    onCouponChange={onCartDataChange}
-                />
-            </div>
+            
 
-            <div className="mt-6 box-border px-4">
+            <div className="mt-6 box-border pb-6 border-b-1">
                 <RewardPointsRedeemMoney 
                     isGuest={cartData.isGuest}
                     cartUsedPoints={cartData.rewardPointsUsed}
@@ -384,34 +388,19 @@ export default function CheckoutWrapper({
             </div>
             
             
-
-            {!cartData.isGuest &&
-                <div className="mt-6 box-border px-4">
-                    <CheckoutGiftCardGate 
-                        giftcardNumber={cartData.giftcardNumber || ''}
-                        formattedGiftcardAmount={cartData.formattedGiftcardAmount} 
-                        onChangeGiftcard={onCartDataChange}
-                    />
-                </div>
-            }
-            <div className="mt-6 box-border px-4">
+            <div className="mt-6 box-border pb-6 border-b-1">
                 <CheckoutVipPlus 
                     cartData={cartData} 
                     onSwitchVip={onCartDataChange}
                 />
             </div>
             
-            <div className="mt-6 box-border px-4">
-                <h3 className="text-ly-24 font-medium">Promotion Details</h3>
-                <div className="w-full box-border mt-3">
-                    <PromotionsDetails cartData={cartData} />
-                </div>
-            </div>
+           
 
-            <div className="mt-6 box-border px-4">
-                <h3 className="text-ly-24 font-medium">Payment Method</h3>
+            <div className="mt-6 box-border">
+                <h3 className="text-ly-20 font-medium">Payment Method</h3>
                 { paymentMethodLoading && <LoadingPaymentMethod /> }
-                { (!paymentMethodLoading && paymentMethodError) && <p className="mt-3 text-red-500 text-ly-12">{paymentMethodError}</p>}
+                { (!paymentMethodLoading && paymentMethodError) && <p className="mt-4 text-red-500 text-ly-12">{paymentMethodError}</p>}
                 {(!paymentMethodLoading && !paymentMethodError) &&
                 <PaymentMethodCheckout 
                     ref={methodPaymentRef}
@@ -424,8 +413,22 @@ export default function CheckoutWrapper({
                 
                 
             </div>
-            <div className="mt-3 box-border px-4 pb-8">
-                <p className="text-ly-12 text-[#666666] leading-ly-20">By providing your information, you agree to Wiggins'sPrivacy Policyand Terms of Use.</p>
+
+        </section>
+        <section className="flex-none box-border w-120 border-1 p-4">
+            <div className="box-border">
+                <CheckoutProducts 
+                    cartData={cartData}
+                    onCartChange={onCartDataChange}
+                />
+            </div>
+            <div className="mt-8 box-border">
+                <h3 className="text-ly-20 font-medium">Promotion Details</h3>
+                <div className="w-full box-border mt-4">
+                    <PromotionsDetails cartData={cartData} />
+                </div>
+            </div>
+            <div className="mt-4 box-border">
                 <div className="mt-6 w-full">
                     { paymentMethodLoading && <LoadingCheckoutPlaceOrder />}
                     
@@ -453,6 +456,6 @@ export default function CheckoutWrapper({
                 </div>
             </div>
 
-        </section>  
-    </>);
+        </section>
+    </div>);
 };

src/app/(checkout)/checkout/_components/GiftCard/CheckoutGiftCardGate.tsx

@@ -107,7 +107,7 @@ export default function CheckoutGiftCardGate({
     return (
         <>
             <div className="relative box-border w-full flex justify-between items-center">
-                <span className="text-ly-24 font-medium">Gift Card</span>
+                <span className="text-ly-20 font-medium">Gift Card</span>
                
                 
                 <div className="flex items-center">

src/app/(checkout)/checkout/_components/LostInsurance/LostInsurance.tsx

@@ -56,19 +56,19 @@ export default function LostInsurance({
         title = `Fixed $${cartData.shippingInsuranceValue} Package Insurance`;
     }
     return (<>
-        <div className="relative box-border w-full bg-[#F9F9F9] p-3">
+        <div className="relative box-border w-full bg-[#F9F9F9] p-4">
             <div className="flex justify-between items-center">
-                <span className="text-ly-13">
+                <span className="text-ly-14">
                     {title}
                 </span>
-                <span className="text-ly-12">
+                <span className="text-ly-14">
                     {cartData.formattedShippingInsuranceAmount}
                 </span>
             </div>
-            <div className="mt-2 w-57 text-ly-12 leading-3.5 text-ly-placeholder">
+            <div className="mt-2.5 text-ly-14 leading-4.5 text-ly-placeholder">
                 Increased compensation for courier packages issued within 30 days.
             </div>
-            <div className="absolute bottom-3 right-3 flex justify-between items-center">
+            <div className="absolute bottom-4 right-4 flex justify-between items-center">
                 <label className="group relative w-9 h-5.5 flex-none">
                     <input className="absolute w-full h-full top-0 left-0 opacity-0 z-10"
                         type="checkbox" checked={cartData.useShippingInsurance}

src/app/(checkout)/checkout/_components/PromotionsDetails.tsx

@@ -15,61 +15,61 @@ export default function PromotionsDetails({cartData}:{
     return (
         <div className="w-full box-border">
             <ul className="w-full">
-                <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                     <span>Subtotal</span>
                     <span>{cartData.formattedSubtotal}</span>
                 </li>
                 {cartData.shippingAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>Shipping Method</span>
                         <span>{cartData.formattedShippingAmount}</span>
                     </li>
                 }
                 {cartData.earnableRewardPoints > 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>You Earn</span>
                         <span>{cartData.earnableRewardPoints} Reward Points</span>
                     </li>
                 }
                 {cartData.shippingInsuranceAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>{title}</span>
                         <span>{cartData.formattedShippingInsuranceAmount}</span>
                     </li>
                 }
                 {cartData.vipPlusAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>Vip Plus Fee</span>
                         <span>{cartData.formattedVipPlusAmount}</span>
                     </li>
                 }
                 {cartData.rewardPointsAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>You Redeem ({cartData.rewardPointsUsed} Reward Points)</span>
                         <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedRewardPointsAmount}</span>
                     </li>
                 }
                 {cartData.discountAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>Coupon</span>
                         <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedDiscountAmount}</span>
                     </li>
                 }
                 {cartData.vipDiscountAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>Plus</span>
                         <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedVipDiscountAmount}</span>
                     </li>
                 }
                 {cartData.giftcardAmount !== 0 &&
-                    <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                    <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0">
                         <span>Gift Card</span>
                         <span className="flex items-center flex-none h-6 bg-ly-gold px-2 text-ly-14">-{cartData.formattedGiftcardAmount}</span>
                     </li>
                 }
-                <li className="flex justify-between items-center text-ly-12 mt-4 first:mt-0">
+                <li className="flex justify-between items-center text-ly-14 mt-4 first:mt-0 pt-6 border-t-1 border-[#f0f0f0]">
                     <span>Grand Total</span>
-                    <span>{cartData.formattedGrandTotal}</span>
+                    <span className="text-ly-24 font-bold">{cartData.formattedGrandTotal}</span>
                 </li>
             </ul>
         </div>

src/app/(checkout)/checkout/_components/RewardPointsRedeemMoney/RewardPointsRedeemMoney.tsx

@@ -97,13 +97,13 @@ export default function RewardPointsRedeemMoney({
     return (
         <>
             {isGuest ?
-                <div className="text-ly-12 p-2.5 bg-ly-middlegray">
+                <div className="text-ly-14 p-2.5 bg-ly-middlegray">
                     Please <button className="underline" onClick={guestUserClick}>LOGIN</button> to use reward points
                 </div>
             :
             <div className="w-full">
                 <div className="relative box-border w-full flex justify-between items-center">
-                    <span className="text-ly-24 font-medium">Reward points redeem</span>
+                    <span className="text-ly-20 font-medium">Reward points redeem</span>
                 
                     
                     <div className="flex items-center">
@@ -113,26 +113,26 @@ export default function RewardPointsRedeemMoney({
                         </span>
                         }
                         
-                        <button className="w-6 h-6 flex-none">
+                        {/* <button className="w-6 h-6 flex-none">
                             <svg className="block w-full h-full" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="0" y="0" width="16" height="16"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M6.32031 4.27051L10.4202 8.37036L6.32031 12.4702"></path></svg>
-                        </button>
+                        </button> */}
                     </div>
                 </div>
                 
-                <div className="w-full mt-3">
-                    <div className="box-border w-full bg-ly-middlegray p-3 rounded-md">
+                <div className="w-full mt-4">
+                    <div className="box-border w-full bg-ly-middlegray p-4 rounded-md">
                         
-                        <p className="text-ly-12">
+                        <p className="text-ly-14">
                             You have <span className="font-bold">{hasRewardPoints} Reward Points</span>  available.  100 point = $1. Input points value below to redeem.
                         </p>
-                        <div className="flex justify-between items-center mt-3 box-border w-full border-1 h-12 rounded-sm pl-3 pr-2 bg-white">
-                            <input className="focus:outline-none"
+                        <div className="flex justify-between items-center mt-3 box-border w-full border-1 h-12 rounded-sm pl-4 pr-1 bg-white">
+                            <input className="focus:outline-none text-ly-14"
                                 type="text"
                                 value={usedPoints === '0' ? '' : usedPoints}
                                 placeholder="Reward Points"
                                 onChange={pointsInputChange}
                             />
-                            <button className="flex items-center text-ly-14 rounded-sm bg-ly-green text-white px-2 h-8"
+                            <button className="flex items-center text-ly-14 rounded-sm bg-ly-green text-white px-4 h-9"
                                 onClick={submitPointsUse}
                             >
                                 {cartUsedPoints > 0 ? 'Cancel' : 'Apply'}

src/app/(checkout)/checkout/_components/VipPlus/CheckoutVipPlus.tsx

@@ -157,7 +157,7 @@ export default function CheckoutVipPlus({
             </div>
         }
         {!cartData.isVip &&
-            <div className="relative box-border w-full ly-vipplus-bg p-3.75">
+            <div className="relative box-border w-full ly-vipplus-bg p-6">
                 
                 <div className="flex items-center text-ly-12 font-bold">
                     Asteriahair Plus
@@ -169,15 +169,15 @@ export default function CheckoutVipPlus({
                     <span>Pay {staticVipData.price} save</span>
                     <span className="ml-1 text-ly-middlegreen">extra {staticVipData.discount} off every order</span>
                 </div>
-                <div className="mt-2 text-ly-12">
+                <div className="mt-2 text-ly-14">
                     {staticVipData.days} days validity
                 </div>
                 <div className="flex items-center mt-3">
                     <span className="text-ly-16 font-bold">{staticVipData.price}</span>
-                    <span className="ml-2.5 text-ly-12 text-ly-deepgray line-through">{staticVipData.linePrice}</span>
+                    <span className="ml-2.5 text-ly-14 text-ly-deepgray line-through">{staticVipData.linePrice}</span>
                 </div>
                 
-                <div className="absolute bottom-3.75 right-3.75 flex justify-between items-center">
+                <div className="absolute bottom-6 right-6 flex justify-between items-center">
                     <label className="group relative w-9 h-5.5 flex-none">
                         <input className="absolute w-full h-full top-0 left-0 opacity-0 z-10"
                             type="checkbox" checked={vipChecked}
@@ -196,20 +196,20 @@ export default function CheckoutVipPlus({
             destroyOnClose={true}
             isOpen={isShow}
             onClose={toggleModal}
-            contentClassName={"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-xl bg-white px-3"}
+            contentClassName={"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-144.5 rounded-xl bg-white px-6"}
             body={
                 <div className="relative py-4">
                     <div className="text-center text-ly-16 font-bold">Asteriahair Plus</div>  
-                    <p className="text-center text-ly-12 leading-5 mt-3">
+                    <p className="text-center text-ly-14 leading-5 mt-5">
                         In order to provide customers with a better shopping experience, Asteriahair has specially launched Asteriahair PLUS membership (no refund after purchase). PLUS members can enjoy unlimited free shipping, 5% off on each order within 180 days, exclusive instant discounts, exclusive customer service, free returns and other membership privileges.
                     </p>
-                    <p className="text-center text-ly-12 leading-5 mt-2">
+                    <p className="text-center text-ly-14 leading-5 mt-3">
                         We hope to establish a long-term win-win relationship with you through PLUS. At the same time, we will continue to enrich the rights and interests of PLUS members and provide you with more complete services.
                     </p>
-                    <p className="text-center text-ly-12 leading-5 mt-2">
+                    <p className="text-center text-ly-14 leading-5 mt-3">
                         Thank you for choosing Asteriahair. We are dedicated to creating the ultimate shopping experience for you!(The final right of interpretation belongs to Asteriahair)
                     </p>
-                    <p className="text-center text-ly-12 leading-5 mt-2">
+                    <p className="text-center text-ly-14 leading-5 mt-3">
                         Note: PLUS membership can't be used for wholesale orders, clearance and flash sale products.
                     </p>
                     <button className="absolute top-4 right-4 w-6 h-6" onClick={() => toggleModal(false)}>

src/app/(checkout)/checkout/cart/_components/PromiseInCart.tsx

@@ -6,17 +6,17 @@ export function PromiseInCart() {
 
 
     return (
-        <div className="flex items-center justify-between w-full box-border bg-[#EAE9E1] h-10 px-5">
-            <div className="flex-none w-17.5 text-center text-ly-12 leading-4">
-                30 Days <br/>Free Return
+        <div className="flex items-center justify-center w-full box-border bg-[#EAE9E1] h-10">
+            <div className="flex-none text-center text-ly-14 leading-4">
+                30 Days Free Return
             </div>
-            <div className="relative text-center text-ly-12 leading-4 px-8">
-                <span className=" absolute left-0 top-1/2 -translate-y-1/2 h-5 border-[#cccccc] border-l-1"></span>
-                24-48 Hrs <br/>Free Fast Shipping
-                <span className=" absolute right-0 top-1/2 -translate-y-1/2 h-5 border-[#cccccc] border-l-1"></span>
+            <span className="h-5 border-[#cccccc] border-l-1 mx-32.5"></span>
+            <div className="flex-none text-center text-ly-14 leading-4 ">
+                24-48 Hrs Free Fast Shipping
             </div>
-            <div className="flex-none w-17.5 text-center text-ly-12 leading-4">
-                Buy Now <br/>& Pay Later
+            <span className="h-5 border-[#cccccc] border-l-1 mx-32.5"></span>
+            <div className="flex-none text-center text-ly-14 leading-4">
+                Buy Now & Pay Later
             </div>
         </div>
     );

src/app/(checkout)/checkout/cart/page.tsx

@@ -4,7 +4,6 @@ import { GET_CART_ITEM, GET_CUSTOMER_ORDERS } from "@/graphql";
 import { auth } from "@/utils/auth/auth-helper";
 import type { GetCartItemData } from "@/types/cart/type";
 import type { OrderListData, OrderListDataVariables, OrderDetails } from "@/types/customer/type";
-import TitleHeader from "@components/layout/navbar/TitleHeader";
 import { EmptyCart } from "./_components/EmptyCart";
 import { PromiseInCart } from "./_components/PromiseInCart";
 import { CartWrapper } from "./_components/CartWrapper";
@@ -55,10 +54,9 @@ export default async function CheckoutPage() {
     if(cartDetails) {
         cartDatahash = createHash('sha256').update(JSON.stringify(cartDetails)).digest('hex');
     }
-    const title = "My Cart" + (cartDetails?.itemsQty ? ' ('+cartDetails?.itemsQty+')' : '');
+
     return (
         <>
-            <TitleHeader title={title} />
             <PromiseInCart />
             {(unpaidOrder && !unpaidOrderExpiried) &&
 

src/app/(checkout)/checkout/page.tsx

@@ -5,7 +5,7 @@ import CheckoutWrapper from "./_components/CheckoutWrapper";
 import { GET_CART_ITEM } from "@/graphql";
 import { auth } from "@/utils/auth/auth-helper";
 import type { GetCartItemData } from "@/types/cart/type";
-import TitleHeader from "@components/layout/navbar/TitleHeader";
+
 
 /**
  * 进入结账页 
@@ -34,7 +34,6 @@ export default async function CheckoutPage() {
     const cartDatahash = createHash('sha256').update(JSON.stringify(cartDetails)).digest('hex');
     return (
         <>
-            <TitleHeader title="Checkout" />
             <CheckoutWrapper key={cartDatahash}
                 cartDetailData={cartDetails}
                 loginEmail={session?.user?.email || ""}

src/app/(checkout)/layout.tsx

@@ -1,16 +1,20 @@
 
 import { type ReactNode } from "react";
+import Footer from "@/components/layout/footer";
+import Navbar from "@/components/layout/navbar";
+
 export default async function CheckoutLayout({
-  children,
+    children,
 }: {
-  children: ReactNode;
+    children: ReactNode;
 }) {
-  return (
-    <>
-
-      <div className="mx-auto w-full">
-        {children}
-      </div>
-    </>
-  );
+    return (
+        <>
+            <Navbar />
+            <div className="mx-auto w-full">
+                {children}
+            </div>
+            <Footer />
+        </>
+    );
 }

src/app/globals.css

@@ -9,27 +9,6 @@ body {
   scrollbar-color: #6b7280 transparent;
 }
 
-html::-webkit-scrollbar,
-body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-html::-webkit-scrollbar-track,
-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-html::-webkit-scrollbar-thumb,
-body::-webkit-scrollbar-thumb {
-  background-color: #6b7280;
-  border-radius: 9999px;
-}
-
-.dark html::-webkit-scrollbar-thumb,
-.dark body::-webkit-scrollbar-thumb {
-  background-color: #d4d4d4;
-}
 
 /**
  * 移动端适配核心：clamp() 根字号  在390px设计稿下 16px ≈ 4.1025641vw = 1rem
@@ -213,7 +192,7 @@ body {
   }
   /*输入框样式*/
   .ly-input{
-    @apply block w-full box-border text-ly-12 px-4 leading-4 border-1 border-ly-inputborder h-11.5 placeholder:text-ly-placeholder focus:outline-none
+    @apply block w-full box-border text-ly-16 px-4 leading-4 border-1 border-ly-inputborder h-14 placeholder:text-ly-placeholder focus:outline-none
   }
 
   .fade-in{

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/components/theme/ui/CommonModal.tsx

@@ -48,7 +48,7 @@ export default function CommonModal({
     const [rootPddingTop, setRootPddingTop] = useState(0);
 
     const baseClassNname = "absolute box-border transition-transform duration-300 ease-out";
-    let applyClassName = "bottom-0 left-0 h-17/20 w-full bg-white rounded-t-xl";
+    let applyClassName = "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3/5 w-130 bg-white rounded-xl";
     if(contentClassName) {
         applyClassName = contentClassName;
     }

src/components/theme/ui/PhoneNumberInput/PhoneNumberInput.tsx

@@ -168,9 +168,9 @@ function PhoneNumberInput({
                 value={value}
                 ref={ref}
             />
-            <div className="flex gap-4 box-border border-1 border-ly-inputborder rounded-lg">
-                <div className="px-3.75" onClick={handleShowCodeList}>
-                    <div className="h-11.5 text-ly-12 flex items-center">
+            <div className="flex gap-4 box-border border-1 border-ly-inputborder">
+                <div className="px-4" onClick={handleShowCodeList}>
+                    <div className="h-14 text-ly-16 flex items-center">
                         
                         <Image alt="china flag" width={24} height={18} className="w-6 h-4.5 mr-2"
                             src={`/image/flags/4x3/${displayCountryCode.toLowerCase()}.svg`}
@@ -180,7 +180,7 @@ function PhoneNumberInput({
                     </div>
                 </div>
                 
-                <input className="flex-auto h-11.5 pr-3 placeholder:text-ly-placeholder text-ly-12 focus:outline-none" 
+                <input className="flex-auto h-14 pr-4 placeholder:text-ly-placeholder text-ly-16 focus:outline-none" 
                     value={phoneNumber}
                     type="text"
                     placeholder={placeholder}
@@ -200,7 +200,7 @@ function PhoneNumberInput({
             >
                 <ul>
                     {phoneCodeList.map((item) => {
-                        return (<li className="text-ly-12 flex items-center h-8 gap-2" key={item.code} 
+                        return (<li className="text-ly-16 flex items-center h-9 gap-2" key={item.code} 
                             onClick={() => {
                                 phoneCodeSelect(item.phoneCode, item.code);
                                 // phoneCodeChange(item.code);

src/components/theme/ui/kernel/confirm/host.tsx

@@ -30,12 +30,12 @@ export function ConfirmHost() {
         onClick={(e) => e.stopPropagation()}
         >
             {/* <div className="fixed z-1000 flex justify-center items-center bg-black/40 inset-0"> */}
-                <div className="w-4/5 p-4 bg-white rounded-lg">
+                <div className="w-80 p-3 bg-white rounded-xl">
                     <h3 className="text-center text-ly-18 font-bold mb-6">{current.title}</h3>
-                    <p className="text-ly-14 font-medium">{current.content}</p>
-                    <div className="w-full flex justify-end gap-3 mt-6">
-                        {!current.noOk && <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-green text-ly-12 font-medium text-white" onClick={() => close(true)}>OK</button>}
-                        {!current.noCancel && <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-gray text-ly-12 font-medium" onClick={() => close(false)}>Cancel</button>}
+                    <p className="text-ly-16 leading-5 text-center">{current.content}</p>
+                    <div className="w-full flex justify-between gap-3 mt-6">
+                        {!current.noOk && <button className="w-35.5 h-12 flex justify-center items-center rounded-3xl border-1 text-ly-16 font-medium" onClick={() => close(true)}>Yes</button>}
+                        {!current.noCancel && <button className="w-35.5 h-12 flex justify-center items-center rounded-3xl bg-ly-green text-white text-ly-16 font-medium" onClick={() => close(false)}>Cancel</button>}
                     </div>
                 </div>
             {/* </div> */}

src/types/checkout/type.ts

@@ -461,32 +461,7 @@ 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;

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) {