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

"use client";

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



export default function CheckoutCoupon({
    couponCode,
    discountAmount,
    onCouponChange
}: {
    couponCode: string;
    discountAmount: string;
    onCouponChange: (payload:CartDetail) => void;
}) {
    const {saveCheckoutCart} = useSaveCheckoutCart();
    const { showToast } = useCustomToast();

    const [codeValue, setCodeValue] = useState(couponCode);

    const amount = Number(discountAmount.replace(/^\D+/ig,''));

    const codeInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCodeValue(e.target.value);
    };

    const submitCouponCode = async () => {
        const code = couponCode && couponCode === codeValue ? '' : codeValue; 

        overlayLoading.start();
        const saveRes = await saveCheckoutCart({ 
            // shippingMethod: '-1',
            // paymentMethod: '-1',
            couponCode: code,// '' 表示取消应用
            // giftCardNumber: '-1',
            // memberDiscount: '-1'
        });
        overlayLoading.stop();
        if(!saveRes.error) {
            if(!code) setCodeValue('');
            if(saveRes.data) {
                const newCartDetail = formatCartDetail(saveRes.data);
                onCouponChange(newCartDetail);
            }
        } else {
            showToast(saveRes.msg, 'danger');
        }

    };
    return (
        <>
            <div className="relative box-border w-full flex justify-between items-center">
                <span className="text-ly-24 font-medium">Discount</span>
               
                
                <div className="flex items-center">
                    {amount > 0 &&
                    <span className="flex items-center text-ly-14 px-2 flex-none h-6 bg-ly-gold mr-2">
                        {'-'+discountAmount}
                    </span>
                    }
                    <button className="w-6 h-6 flex-none">
                        <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>
            
            <div className="w-full mt-3">
                <div className="box-border w-full bg-[#ecf7f4] p-3 rounded-md">
                    
                    <div className="flex justify-between items-center">
                        <p className="flex items-center text-ly-12">
                            <svg className="w-4 h-4 mr-1" 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 d="M1.33691 6.33333L1.33691 2.66667C1.33691 2.65575 1.33718 2.64485 1.33772 2.63395C1.33825 2.62306 1.33905 2.61218 1.34012 2.60133C1.34119 2.59046 1.34253 2.57964 1.34413 2.56884C1.34573 2.55805 1.3476 2.54731 1.34972 2.53661C1.35185 2.52591 1.35424 2.51527 1.35689 2.50469C1.35954 2.49409 1.36245 2.48358 1.36562 2.47314C1.36879 2.4627 1.37221 2.45235 1.37588 2.44208C1.37956 2.43181 1.38349 2.42163 1.38766 2.41155C1.39184 2.40146 1.39626 2.39149 1.40092 2.38162C1.40559 2.37176 1.41049 2.36202 1.41563 2.35241C1.42078 2.34278 1.42615 2.33329 1.43176 2.32394C1.43737 2.31457 1.44321 2.30535 1.44927 2.29628C1.45533 2.28721 1.46161 2.27829 1.46811 2.26953C1.47461 2.26077 1.48132 2.25217 1.48824 2.24373C1.49516 2.23531 1.50229 2.22705 1.50961 2.21895C1.51694 2.21087 1.52446 2.20297 1.53217 2.19527C1.53989 2.18755 1.54779 2.18003 1.55587 2.1727C1.56396 2.16537 1.57222 2.15825 1.58065 2.15133C1.58909 2.1444 1.59769 2.13769 1.60645 2.13119C1.61521 2.1247 1.62413 2.11842 1.6332 2.11236C1.64227 2.1063 1.65149 2.10046 1.66084 2.09484C1.6702 2.08924 1.6797 2.08386 1.68931 2.07872C1.69893 2.07357 1.70868 2.06867 1.71854 2.064C1.72841 2.05934 1.73838 2.05493 1.74847 2.05075C1.75854 2.04657 1.76871 2.04265 1.77898 2.03897C1.78926 2.03529 1.79962 2.03187 1.81006 2.0287C1.8205 2.02554 1.83101 2.02263 1.84159 2.01998C1.85217 2.01733 1.86281 2.01494 1.87351 2.01281C1.88422 2.01068 1.89497 2.00881 1.90576 2.00722C1.91655 2.00561 1.92738 2.00428 1.93823 2.0032C1.9491 2.00214 1.95998 2.00134 1.97087 2.0008C1.98177 2.00027 1.99267 2 2.00357 2L14.0036 2C14.0145 2 14.0254 2.00027 14.0363 2.0008C14.0472 2.00134 14.0581 2.00214 14.0689 2.0032C14.0798 2.00428 14.0906 2.00561 14.1014 2.00722C14.1122 2.00881 14.1229 2.01068 14.1336 2.01281C14.1443 2.01494 14.155 2.01733 14.1656 2.01998C14.1761 2.02263 14.1867 2.02554 14.1971 2.0287C14.2075 2.03187 14.2179 2.03529 14.2282 2.03897C14.2384 2.04265 14.2486 2.04657 14.2587 2.05075C14.2688 2.05493 14.2788 2.05934 14.2886 2.064C14.2985 2.06867 14.3082 2.07357 14.3178 2.07872C14.3275 2.08386 14.337 2.08924 14.3463 2.09484C14.3557 2.10046 14.3649 2.1063 14.374 2.11236C14.383 2.11841 14.3919 2.12469 14.4007 2.13119C14.4095 2.13769 14.4181 2.1444 14.4265 2.15133C14.4349 2.15825 14.4432 2.16537 14.4513 2.1727C14.4594 2.18003 14.4673 2.18755 14.475 2.19527C14.4827 2.20297 14.4902 2.21087 14.4975 2.21895C14.5049 2.22705 14.512 2.23531 14.5189 2.24373C14.5258 2.25217 14.5325 2.26077 14.539 2.26953C14.5455 2.27829 14.5518 2.28721 14.5579 2.29628C14.5639 2.30535 14.5698 2.31457 14.5754 2.32394C14.581 2.33329 14.5864 2.34278 14.5915 2.35241C14.5967 2.36202 14.6016 2.37176 14.6062 2.38162C14.6109 2.39149 14.6153 2.40146 14.6195 2.41155C14.6237 2.42162 14.6276 2.4318 14.6313 2.44208C14.635 2.45235 14.6384 2.4627 14.6415 2.47314C14.6447 2.48358 14.6476 2.49409 14.6503 2.50467C14.6529 2.51525 14.6553 2.5259 14.6574 2.53661C14.6596 2.54731 14.6614 2.55805 14.663 2.56884C14.6646 2.57964 14.666 2.59046 14.667 2.60133C14.6681 2.61218 14.6689 2.62306 14.6694 2.63395C14.67 2.64485 14.6702 2.65575 14.6702 2.66667L14.6702 6.33333C14.643 6.33333 14.6157 6.334 14.5885 6.33534C14.5612 6.33667 14.534 6.33869 14.5069 6.34136C14.4797 6.34403 14.4527 6.34737 14.4257 6.35138C14.3987 6.35537 14.3719 6.36003 14.3451 6.36536C14.3183 6.37069 14.2917 6.37666 14.2653 6.38328C14.2388 6.38991 14.2125 6.39717 14.1864 6.40509C14.1603 6.41302 14.1344 6.42156 14.1088 6.43077C14.0831 6.43995 14.0576 6.44977 14.0324 6.4602C14.0072 6.47064 13.9823 6.48169 13.9576 6.49334C13.933 6.50502 13.9086 6.51727 13.8846 6.53013C13.8605 6.54298 13.8368 6.55644 13.8134 6.57045C13.79 6.58447 13.767 6.59906 13.7443 6.61422C13.7216 6.62937 13.6993 6.64508 13.6774 6.66133C13.6555 6.67756 13.634 6.69434 13.6129 6.71166C13.5918 6.72895 13.5712 6.74677 13.551 6.76508C13.5308 6.78341 13.511 6.8022 13.4917 6.82148C13.4724 6.84078 13.4536 6.86053 13.4353 6.88073C13.417 6.90094 13.3992 6.92159 13.3819 6.94267C13.3646 6.96375 13.3478 6.98525 13.3316 7.00717C13.3153 7.02908 13.2996 7.05137 13.2845 7.07405C13.2693 7.09672 13.2547 7.11977 13.2407 7.14316C13.2267 7.16655 13.2132 7.19028 13.2004 7.21434C13.1875 7.23839 13.1753 7.26275 13.1636 7.28741C13.1519 7.31206 13.1409 7.33698 13.1304 7.36219C13.12 7.38739 13.1102 7.41284 13.101 7.43852C13.0918 7.4642 13.0833 7.49009 13.0753 7.51619C13.0674 7.5423 13.0601 7.56858 13.0535 7.59503C13.0469 7.62148 13.0409 7.64809 13.0356 7.67484C13.0303 7.70161 13.0256 7.72847 13.0216 7.75545C13.0176 7.78244 13.0143 7.8095 13.0116 7.83664C13.0089 7.86378 13.0069 7.89098 13.0056 7.91822C13.0042 7.94545 13.0036 7.97272 13.0036 8C13.0036 8.02728 13.0042 8.05455 13.0056 8.08178C13.0069 8.10902 13.0089 8.13622 13.0116 8.16336C13.0143 8.1905 13.0176 8.21756 13.0216 8.24455C13.0256 8.27153 13.0303 8.29839 13.0356 8.32516C13.0409 8.35191 13.0469 8.37852 13.0535 8.40497C13.0601 8.43142 13.0674 8.4577 13.0753 8.48381C13.0833 8.50991 13.0918 8.5358 13.101 8.56148C13.1102 8.58716 13.12 8.61259 13.1304 8.6378C13.1409 8.663 13.1519 8.68794 13.1636 8.71259C13.1753 8.73725 13.1875 8.76161 13.2004 8.78566C13.2132 8.80972 13.2267 8.83345 13.2407 8.85684C13.2547 8.88023 13.2693 8.90326 13.2845 8.92595C13.2996 8.94863 13.3153 8.97092 13.3316 8.99283C13.3478 9.01473 13.3646 9.03623 13.3819 9.05733C13.3992 9.07841 13.417 9.09906 13.4353 9.11927C13.4536 9.13947 13.4724 9.15922 13.4917 9.17852C13.511 9.1978 13.5308 9.21659 13.551 9.23492C13.5712 9.25323 13.5918 9.27105 13.6129 9.28834C13.634 9.30566 13.6555 9.32244 13.6774 9.33867C13.6993 9.35492 13.7216 9.37062 13.7443 9.38578C13.767 9.40094 13.79 9.41553 13.8134 9.42955C13.8368 9.44356 13.8605 9.45702 13.8846 9.46988C13.9086 9.48273 13.933 9.49498 13.9576 9.50664C13.9823 9.51831 14.0072 9.52936 14.0324 9.5398C14.0576 9.55023 14.0831 9.56005 14.1088 9.56923C14.1344 9.57842 14.1603 9.58698 14.1864 9.59491C14.2125 9.60283 14.2388 9.61009 14.2653 9.61672C14.2917 9.62334 14.3183 9.62931 14.3451 9.63464C14.3719 9.63997 14.3987 9.64462 14.4257 9.64862C14.4527 9.65263 14.4797 9.65597 14.5069 9.65864C14.534 9.66131 14.5612 9.66333 14.5885 9.66466C14.6157 9.666 14.643 9.66667 14.6702 9.66667L14.6702 13.3333C14.6702 13.3442 14.67 13.3552 14.6694 13.366C14.6689 13.3769 14.6681 13.3878 14.667 13.3987C14.666 13.4095 14.6646 13.4204 14.663 13.4312C14.6614 13.442 14.6596 13.4527 14.6574 13.4634C14.6553 13.4741 14.6529 13.4847 14.6503 13.4953C14.6476 13.5059 14.6447 13.5164 14.6415 13.5269C14.6384 13.5373 14.635 13.5477 14.6313 13.5579C14.6276 13.5682 14.6237 13.5784 14.6195 13.5885C14.6153 13.5985 14.6109 13.6085 14.6062 13.6184C14.6016 13.6282 14.5967 13.638 14.5915 13.6476C14.5864 13.6572 14.581 13.6667 14.5754 13.6761C14.5698 13.6854 14.5639 13.6946 14.5579 13.7037C14.5518 13.7128 14.5455 13.7217 14.539 13.7305C14.5325 13.7392 14.5258 13.7478 14.5189 13.7563C14.512 13.7647 14.5049 13.773 14.4975 13.781C14.4902 13.7891 14.4827 13.797 14.475 13.8047C14.4673 13.8125 14.4594 13.82 14.4513 13.8273C14.4432 13.8346 14.4349 13.8418 14.4265 13.8487C14.4181 13.8556 14.4095 13.8623 14.4007 13.8688C14.3919 13.8753 14.383 13.8816 14.3739 13.8876C14.3649 13.8937 14.3557 13.8995 14.3463 13.9052C14.337 13.9108 14.3275 13.9161 14.3178 13.9213C14.3082 13.9264 14.2985 13.9313 14.2886 13.936C14.2788 13.9407 14.2688 13.9451 14.2587 13.9493C14.2486 13.9534 14.2384 13.9574 14.2282 13.961C14.2179 13.9647 14.2075 13.9681 14.1971 13.9713C14.1867 13.9745 14.1761 13.9774 14.1656 13.98C14.155 13.9827 14.1443 13.9851 14.1336 13.9872C14.1229 13.9893 14.1122 13.9912 14.1014 13.9928C14.0906 13.9944 14.0798 13.9957 14.0689 13.9968C14.0581 13.9979 14.0472 13.9987 14.0363 13.9992C14.0254 13.9997 14.0145 14 14.0036 14L2.00357 14C1.99267 14 1.98177 13.9997 1.97087 13.9992C1.95998 13.9987 1.9491 13.9979 1.93823 13.9968C1.92738 13.9957 1.91655 13.9944 1.90576 13.9928C1.89497 13.9912 1.88422 13.9893 1.87351 13.9872C1.86281 13.9851 1.85217 13.9827 1.84159 13.98C1.83101 13.9774 1.8205 13.9745 1.81006 13.9713C1.79962 13.9681 1.78926 13.9647 1.77898 13.961C1.76871 13.9574 1.75853 13.9534 1.74845 13.9493C1.73838 13.9451 1.72841 13.9407 1.71854 13.936C1.70868 13.9313 1.69893 13.9264 1.68931 13.9213C1.6797 13.9161 1.6702 13.9108 1.66084 13.9052C1.65149 13.8995 1.64227 13.8937 1.6332 13.8876C1.62413 13.8816 1.61521 13.8753 1.60645 13.8688C1.59769 13.8623 1.58909 13.8556 1.58065 13.8487C1.57222 13.8418 1.56396 13.8346 1.55587 13.8273C1.54779 13.82 1.53989 13.8125 1.53217 13.8047C1.52446 13.797 1.51694 13.7891 1.50961 13.781C1.50229 13.773 1.49516 13.7647 1.48824 13.7563C1.48132 13.7478 1.47461 13.7392 1.46811 13.7305C1.46161 13.7217 1.45533 13.7128 1.44927 13.7037C1.44321 13.6946 1.43737 13.6854 1.43176 13.6761C1.42615 13.6667 1.42078 13.6572 1.41563 13.6476C1.41049 13.638 1.40559 13.6282 1.40092 13.6184C1.39626 13.6085 1.39184 13.5985 1.38766 13.5885C1.38348 13.5784 1.37956 13.5682 1.37588 13.5579C1.37221 13.5477 1.36879 13.5373 1.36562 13.5269C1.36245 13.5164 1.35954 13.5059 1.35689 13.4953C1.35424 13.4847 1.35185 13.4741 1.34972 13.4634C1.34759 13.4527 1.34573 13.442 1.34413 13.4312C1.34253 13.4204 1.34119 13.4095 1.34012 13.3987C1.33905 13.3878 1.33825 13.3769 1.33772 13.366C1.33718 13.3552 1.33691 13.3442 1.33691 13.3333L1.33691 9.66667C1.36418 9.66666 1.39143 9.66597 1.41867 9.66463C1.4459 9.66327 1.47308 9.66125 1.50022 9.65856C1.52736 9.65588 1.55441 9.65253 1.58139 9.64852C1.60836 9.6445 1.63521 9.63983 1.66195 9.6345C1.68869 9.62917 1.71528 9.62319 1.74173 9.61655C1.76818 9.60991 1.79445 9.60262 1.82054 9.5947C1.84663 9.58678 1.87251 9.57822 1.89818 9.56903C1.92385 9.55983 1.94928 9.55002 1.97447 9.53956C1.99965 9.52911 2.02457 9.51806 2.04922 9.50639C2.07386 9.49472 2.0982 9.48247 2.12225 9.46961C2.1463 9.45675 2.17001 9.4433 2.19339 9.42927C2.21677 9.41525 2.2398 9.40066 2.26247 9.3855C2.28514 9.37034 2.30743 9.35464 2.32932 9.33839C2.35122 9.32214 2.3727 9.30536 2.39378 9.28806C2.41485 9.27077 2.43549 9.25295 2.45568 9.23462C2.47588 9.21631 2.49562 9.19752 2.5149 9.17822C2.53417 9.15894 2.55297 9.13919 2.57128 9.11898C2.58958 9.09878 2.60738 9.07812 2.62467 9.05705C2.64197 9.03597 2.65874 9.01447 2.67498 8.99256C2.69122 8.97066 2.70691 8.94838 2.72206 8.9257C2.7372 8.90303 2.75177 8.87998 2.76579 8.85659C2.7798 8.8332 2.79324 8.80948 2.80609 8.78544C2.81893 8.76139 2.83118 8.73703 2.84284 8.71239C2.8545 8.68773 2.86554 8.66281 2.87598 8.63761C2.88641 8.61242 2.89622 8.58698 2.9054 8.56131C2.91459 8.53564 2.92313 8.50975 2.93104 8.48366C2.93896 8.45756 2.94623 8.4313 2.95285 8.40484C2.95948 8.37839 2.96545 8.3518 2.97076 8.32505C2.97607 8.29831 2.98073 8.27145 2.98473 8.24447C2.98873 8.2175 2.99207 8.19045 2.99474 8.16331C2.99741 8.13617 2.99941 8.10898 3.00076 8.08175C3.0021 8.05452 3.00276 8.02727 3.00276 8C3.00276 7.97273 3.0021 7.94548 3.00076 7.91825C2.99941 7.89102 2.99741 7.86383 2.99474 7.83669C2.99207 7.80955 2.98873 7.7825 2.98473 7.75553C2.98073 7.72855 2.97607 7.70169 2.97076 7.67495C2.96545 7.6482 2.95948 7.62161 2.95285 7.59516C2.94623 7.5687 2.93896 7.54244 2.93104 7.51634C2.92313 7.49023 2.91459 7.46436 2.9054 7.43869C2.89622 7.41302 2.88641 7.38758 2.87598 7.36237C2.86554 7.33719 2.8545 7.31227 2.84284 7.28761C2.83118 7.26297 2.81893 7.23861 2.80609 7.21456C2.79324 7.19052 2.7798 7.1668 2.76579 7.14341C2.75177 7.12002 2.73719 7.09697 2.72204 7.0743C2.70691 7.05162 2.69122 7.02934 2.67498 7.00744C2.65874 6.98553 2.64197 6.96403 2.62467 6.94295C2.60738 6.92188 2.58958 6.90122 2.57128 6.88102C2.55297 6.86081 2.53417 6.84106 2.5149 6.82178C2.49562 6.80248 2.47588 6.78369 2.45568 6.76538C2.43549 6.74705 2.41485 6.72923 2.39378 6.71194C2.3727 6.69464 2.35122 6.67786 2.32932 6.66161C2.30743 6.64536 2.28514 6.62966 2.26247 6.6145C2.2398 6.59934 2.21678 6.58475 2.1934 6.57072C2.17002 6.5567 2.1463 6.54325 2.12225 6.53039C2.0982 6.51753 2.07386 6.50527 2.04922 6.49359C2.02457 6.48192 1.99965 6.47087 1.97447 6.46044C1.94928 6.44998 1.92385 6.44017 1.89818 6.43097C1.87251 6.42177 1.84663 6.41322 1.82054 6.4053C1.79445 6.39738 1.76818 6.39009 1.74173 6.38345C1.71528 6.37681 1.68869 6.37083 1.66195 6.3655C1.63521 6.36017 1.60836 6.3555 1.58139 6.35148C1.55441 6.34747 1.52736 6.34411 1.50022 6.34144C1.47308 6.33875 1.4459 6.33673 1.41867 6.33537C1.39143 6.33403 1.36418 6.33334 1.33691 6.33333ZM6.00357 6L6.00357 7.33333L10.0036 7.33333L10.0036 6L6.00357 6ZM6.00357 8.66667L6.00357 10L10.0036 10L10.0036 8.66667L6.00357 8.66667Z" fill="#036141">
                                </path>
                            </svg>
                            Fall Style Preview
                        </p>
                        <span className="text-ly-12 font-bold underline">Code:SR120</span>
                    </div>
                    
                    <p className="text-ly-12 leading-4 mt-3">
                        $179-$15|$299-$25|$399-$35|$499-$45 <br/>
                        $599-$55|$699-$65|$899-$85|$1199-$120
                    </p>
                    <p className="text-ly-12 leading-4 mt-3">* Not valid on promotional wigs.</p>
                </div>
                <div className="flex justify-between items-center mt-3 box-border w-full border-1 h-12 rounded-sm pl-3 pr-2">
                    <input className="focus:outline-none"
                        type="text"
                        value={codeValue}
                        placeholder="Coupon Code"
                        onChange={codeInputChange}
                    />
                    <button className="flex items-center text-ly-14 rounded-sm bg-ly-green text-white px-2 h-8"
                        onClick={submitCouponCode}
                    >
                        {couponCode && codeValue === couponCode ? 'Remove' : 'Apply'}
                    </button>
                </div>
            </div>

        </>
    );
}