nshop-front-m/src/app/(checkout)/checkout/_components/CheckoutAddress/AddressResultDisplay.tsx

"use client";

import {CartAddress} from "@/types/cart/type";

function isAddressAvailable(address: CartAddress | null): boolean {
    if(address && 
        address.email && 
        address.firstName && 
        address.lastName && 
        address.phone && 
        address.address && 
        address.country && 
        address.state && 
        address.city && 
        address.postcode
    ) {
        return true;
    }
    return false;
}

export default function AddressResultDisplay({
    shippingAddress,
    onAddressModalOpenClick,
} : {
    shippingAddress: CartAddress | null;
    onAddressModalOpenClick: () => void;
}) {
    const addressIsAvailable: boolean = isAddressAvailable(shippingAddress);
    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]"
                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}
            >
                <div className="border-b-1 flex h-11.25 items-center justify-between">
                    <p className="text-ly-13 font-medium">
                        {shippingAddress.firstName} {shippingAddress.lastName}
                        <span className="border-r border-ly-gray h-3.5 mx-2"></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>
                </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">
                        <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">
                        {shippingAddress.address}, 
                        {shippingAddress.city}, 
                        {shippingAddress.state}, 
                        {shippingAddress.postcode}, 
                        {shippingAddress.country}
                    </span>
                </div>
            </div>       
        }
        </>
    );
}