结账页地址板块 -- v3 地址最终结果展示问题

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

@@ -2,6 +2,23 @@
 
 import { ShipAddressFormData } from "@/types/checkout/type";
 
+function isAddressAvailable(address: ShipAddressFormData | null): boolean {
+    if(address && 
+        address.shippingEmail && 
+        address.shippingFirstName && 
+        address.shippingLastName && 
+        address.shippingPhoneNumber && 
+        address.shippingAddress && 
+        address.shippingCountry && 
+        address.shippingState && 
+        address.shippingCity && 
+        address.shippingPostcode
+    ) {
+        return true;
+    }
+    return false;
+}
+
 export default function AddressResultDisplay({
     shippingAddress,
     onAddressModalOpenClick,
@@ -9,10 +26,23 @@ export default function AddressResultDisplay({
     shippingAddress: ShipAddressFormData | null;
     onAddressModalOpenClick: () => void;
 }) {
-    
+    const addressIsAvailable: boolean = isAddressAvailable(shippingAddress);
     return (
         <>
-        {shippingAddress ?
+        {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]"
+                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">
+                    <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>
+         
+                <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>
+            </div>
+            :
             <div className="w-full box-border px-3.75 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]"
                 onClick={onAddressModalOpenClick}
             >
@@ -38,18 +68,7 @@ export default function AddressResultDisplay({
                         {shippingAddress.shippingCountry}
                     </span>
                 </div>
-            </div>
-            :
-            <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]">
-                <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">
-                    <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>
-         
-                <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>
-            </div>
+            </div>       
         }
         </>
     );

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

@@ -1,35 +0,0 @@
-import { useForm, SubmitHandler } from "react-hook-form"
-
-
-interface IFormInput {
-  firstName: string
-  lastName: string
-  age: number
-}
-
-
-export default function Test() {
-  const { register, handleSubmit, formState:{errors} } = useForm<IFormInput>({
-    defaultValues: {
-      age: 0,
-      firstName: 'bill',
-    }
-  })
-  const onSubmit: SubmitHandler<IFormInput> = (data) => console.log(data)
-  const {onBlur,onChange,name,ref} = register("firstName", { required: 'this is required', maxLength: 20 });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input className="ly-input" 
-          onChange={onChange}
-          onBlur={onBlur}
-          name={name}
-          ref={ref}
-      />
-      {errors.firstName && <span className="ly-error">{errors.firstName.message}</span>}
-      <input className="ly-input" {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
-      <input className="ly-input" type="number" {...register("age", { min: 18, max: 99 })} />
-      <input type="submit" />
-    </form>
-  )
-}