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

"use client";

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


// 金额明细
export default function PromotionsDetails({cartData}:{
    cartData: CartDetail
}) { 

    let title = "Insurance for Lost";
    if(cartData.shippingInsuranceType === "percentage") {
        title = `Insurance for Lost (${cartData.shippingInsuranceValue}%)`;
    }
    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">
                    <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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">
                    <span>Grand Total</span>
                    <span>{cartData.formattedGrandTotal}</span>
                </li>
            </ul>
        </div>
    );
}