nshop-front-m/src/app/(checkout)/checkout/_components/ContinueToPay/ContinueToPayOrderInfo.tsx

"use client";

import { useState } from "react";
import Image from "next/image";
import { useRouter } from 'next/navigation';
import {useConfig} from "@/utils/hooks/useConfig";
import { OrderDetails } from "@/types/customer/type";
import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";
import ProductsModalPendingOrder from "./ProductsModalPendingOrder";
import dynamic from "next/dynamic";
import {getAddressFromOrderDetailAddressList} from "@/utils/orderDetailTools";

const CountDown = dynamic(() => import("@/components/common/CountDown"), {
  ssr: false,
});
export default function ContinueToPayOrderInfo({
    orderDetail
}: {
    orderDetail: OrderDetails;
}) { 
    
    const router = useRouter();
    const {currencies,getCurrentCurrencyItem} = useConfig();
    const currentCurrency = getCurrentCurrencyItem();
    const currencySymbol = currentCurrency.symbol;
    const orderCurrency = currencies.find(item => item.code === orderDetail.orderCurrencyCode) || null;
    const orderSymbol = orderCurrency?.symbol || currencySymbol;
    
    
    
    const [productsModalOpen, setProductsModalOpen] = useState(false);

    const countDownEnd = (new Date(orderDetail.createdAt)).getTime() + 24*3600*1000;

    const shippingAddress = getAddressFromOrderDetailAddressList(orderDetail.addresses,"order_shipping");
    const billingAddress = getAddressFromOrderDetailAddressList(orderDetail.addresses,"order_billing");

    const totalQty = orderDetail.totalQtyOrdered > 1 ? String(orderDetail.totalQtyOrdered) + 'Items' : '1 Item';
    const productItems = orderDetail.items.edges.map((item) => {
        return item.node;
    });

    // 倒计时结束跳转到首页
    const handleCountDownEnd = () => { 
        confirmDialog({
            title: "Order Timeout",
            content: "This order timeout, has been canceled. Will redirect to home page.",
            noCancel: true,
        }).then(() => {
            router.replace('/');
        });  
    };

    const closeProductsModal = () => {
        setProductsModalOpen(false);
    };
    const openProductsModal = () => { 
        setProductsModalOpen(true);
    };

    return(
        <>
            <div className="sticky top-15 z-10 box-border w-full h-14 px-4 flex items-center justify-between bg-ly-green">
                <span className="text-ly-14 font-medium text-white">Awaiting For Payment</span>
                <CountDown
                    endTime={countDownEnd}
                    onCountDownEnd={handleCountDownEnd}
                />
            </div>
            
            <div className="mt-6 box-border px-4">
                <h3 className="text-ly-24 font-medium">Shipping Address</h3>
                <div className="w-full mt-3 box-border rounded-md border-1 px-3.75 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]">
                    <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>  

            </div>

            <div className="mt-6 box-border px-4">
                <h3 className="text-ly-24 font-medium">Billing Address</h3>
                <div className="w-full mt-3 box-border rounded-md border-1 px-3.75 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]">
                    <div className="border-b-1 flex h-11.25 items-center justify-between">
                        <p className="text-ly-13 font-medium">
                            {billingAddress.firstName} {billingAddress.lastName}
                            <span className="border-r border-ly-gray h-3.5 mx-2"></span> 
                            {billingAddress.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">
                            {billingAddress.address}, 
                            {billingAddress.city}, 
                            {billingAddress.state}, 
                            {billingAddress.postcode}, 
                            {billingAddress.country}
                        </span>
                    </div>
                </div>  

            </div>
             

            <div className="w-full box-border px-4 mt-6">
                <div className="flex items-center">
                    
                    <span className="text-ly-12 flex-none mr-1">
                        Order Summary({totalQty})
                    </span>
                    <button className="flex-none w-4 h-4" onClick={openProductsModal}>
                        <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>             
                </div>
                <div className="relative w-full box-border pr-9 mt-3.5">
                    <div className="w-full box-border flex overflow-x-auto">
                        {productItems.map((product) => { 
                            return(
                                <div key={product.id} className="relative flex-none w-16 h-21.5 mr-3 last:mr-0">
                                    <Image src="https://cdn.asteriahair.com/media/catalog/product/6/_/6_3_2.png" alt="product" fill={true} />
                                </div>
                            )
                        })}

                    </div>

                    <button className="absolute top-1/2 right-1 w-4 h-4 -translate-y-1/2"
                        onClick={openProductsModal}
                    >
                        <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"><path   fill="rgba(0, 0, 0, 1)"  d="M14 8.66667L2 8.66667L2 7.33333L14 7.33333L14 8.66667ZM1.33333 7.33333L2 7.33333L2 8.66667L1.33333 8.66667L1.33333 7.33333ZM14 8.66667C13.6318 8.66667 13.3333 8.36819 13.3333 8C13.3333 7.63181 13.6318 7.33333 14 7.33333C14.3682 7.33333 14.6667 7.63181 14.6667 8C14.6667 8.36819 14.3682 8.66667 14 8.66667Z"></path><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.3333333333333333" strokeLinejoin="round" strokeLinecap="square"  d="M10 4L14 8L10 12"></path></svg>
                    </button>
                    
                </div>
            </div>

            <div className="box-border px-4 w-full mt-6">
                <h3 className="text-ly-24 font-medium">Promotion Details</h3>
                <div className="flex justify-between mt-3 first:mt-0">
                    <p className="text-ly-12 leading-ly-20">Subtotal</p>
                    <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.subTotal}</p>
                </div>
                {orderDetail.rewardPointsEarned > 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">You Earn</p>
                        <p className="text-ly-12 leading-ly-20">{orderDetail.rewardPointsEarned} Reward Points</p>
                    </div>
                }
                {orderDetail.shippingAmount !== 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Shipping</p>
                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.shippingAmount}</p>
                    </div>
                }
                {Number(orderDetail?.shippingInsuranceAmount) > 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Shipping</p>
                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{Number(orderDetail.shippingInsuranceAmount)}</p>
                    </div>
                }
                {orderDetail.taxAmount !== 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Tax</p>
                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.taxAmount}</p>
                    </div>
                }
                {(orderDetail.vipPlusAmount !== '0.00' && orderDetail.vipPlusAmount !== null)  &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Plus Fee</p>
                        <p className="text-ly-12 leading-ly-20">{orderSymbol}{orderDetail.vipPlusAmount}</p>
                    </div>
                }
                {orderDetail.discountAmount !== 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Discount</p>
                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.discountAmount}</p>
                    </div>
                }
                {(orderDetail.giftcardAmount !== '0.00' && orderDetail.giftcardAmount !== null) &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Gift Card</p>
                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.giftcardAmount}</p>
                    </div>
                }
                {(orderDetail.vipDiscountAmount !== '0.00' && orderDetail.vipDiscountAmount !== null) &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Plus Save</p>
                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.vipDiscountAmount}</p>
                    </div>
                }
                {orderDetail.rewardPointsAmount > 0 &&
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">You Redeem ({orderDetail.rewardPointsUsed} Reward Points)</p>
                        <p className="text-ly-12 leading-ly-20">-{orderSymbol}{orderDetail.rewardPointsAmount}</p>
                    </div>
                }

                {/* <div className="flex justify-between mt-3 first:mt-0">
                    <p className="text-ly-12 leading-ly-20">You Earn</p>
                    <p className="text-ly-12 leading-ly-20">600 Reward Points</p>
                </div> */}
                <div className="flex justify-between mt-3 first:mt-0">
                    <p className="text-ly-16 leading-ly-24">Total</p>
                    <p className="text-ly-16 leading-ly-24 font-bold">{orderSymbol}{orderDetail.grandTotal}</p>
                </div>
            </div>


            {/** 产品弹窗 */}
            <ProductsModalPendingOrder 
                isOpen={productsModalOpen}
                products={productItems}
                currencySymbol={orderSymbol}
                onClose={() => closeProductsModal()}
            />
        </>
    );
}