nshop-front-pc/src/app/(checkout)/checkout/_components/LostInsurance/LostInsurance.tsx

"use client";


import { useCustomToast } from "@/utils/hooks/useToast";
import {useSaveCheckoutCart} from "@/utils/hooks/useSaveCheckoutCart";
import { formatCartDetail } from "@/utils/cartDetailTools";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import type {CartDetail} from "@/types/cart/type";

/**
 * 先通过 shippingInsuranceEnabled 判断网站是否开通丢件险功能
 * 再通过 useShippingInsurance 判断用户是否勾选丢件险 
 */

export default function LostInsurance({
    cartData,
    onSwitchInsurance
}: {
    cartData: CartDetail
    onSwitchInsurance: (payload:CartDetail) => void;
}) {

    
    const { showToast } = useCustomToast();
    const {saveCheckoutCart} = useSaveCheckoutCart();
    const clickSwitchButton = async (bool: boolean) => {
        const isInsurance = bool ? '1' : '';
        await setInsurance(isInsurance);
    };
    const setInsurance = async (insurance: string) => {
        overlayLoading.start();
        const saveRes = await saveCheckoutCart({ 
            useShippingInsurance: insurance
        });
        overlayLoading.stop();
        if(!saveRes.error) {
            if(saveRes.data) {
                const newCartDetail = formatCartDetail(saveRes.data);
                onSwitchInsurance(newCartDetail);
            }
            return true;
        } else {
            showToast(saveRes.msg, 'danger');
            return false;
        }
    };

    let title = "";
    if(cartData.shippingInsuranceType === "percentage") {
        title = `${cartData.shippingInsuranceValue}% Package Insurance`;
    } else if(cartData.shippingInsuranceType === "fixed") {
        //title = `${currencySymbol}${cartData.shippingInsuranceAmount} Package Insurance`;
        title = `Fixed $${cartData.shippingInsuranceValue} Package Insurance`;
    }
    return (<>
        <div className="relative box-border w-full bg-[#ECF7F4] px-4 py-3">
            <div className="flex justify-between items-center">
                <span className="text-ly-14">
                    {title}
                </span>
                <span className="text-ly-14">
                    {cartData.formattedShippingInsuranceAmount}
                </span>
            </div>
            <div className="flex items-center justify-between mt-3">
                <div className="text-ly-12 text-ly-placeholder">
                    Increased compensation for courier packages issued within 30 days.
                </div>
                <div className="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}
                            onChange={(e) => clickSwitchButton(e.target.checked)}
                        />
                        <span className="transition-all box-border block px-0.5 w-full h-full rounded-full flex items-center bg-[#c2c2c2] group-has-[:checked]:bg-[#363636]">
                            <span className="transition-all block w-4.5 h-4.5 rounded-full bg-white group-has-[:checked]:ml-3.5"></span>
                        </span>
                    </label>
                    
                </div>
            </div>

            
        </div>
        
    </>);
}