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

"use client";

import Image from "next/image";
import { use } from "react";
import { useForm, get } from "react-hook-form";
import {RepayOrderPaymentMethodsData} from "@/types/checkout/type";
import {GraphqlRequestResult} from "@/types/graphqlFetch/type";
import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder";
import PaypalButton from "../PaymentButton/PaypalButton";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";

interface PaymentReplayResult {
    orderId: string;
    webOrderId: string;
    error: boolean;
    msg: string;
}
export function PaymentMethodContinueTpPay({
    paymentMethodsDataPromise,
    defaultPaymentMethod,
    orderId,
}: {
    paymentMethodsDataPromise: Promise<GraphqlRequestResult<RepayOrderPaymentMethodsData>>;
    defaultPaymentMethod: {method: string; methodTitle: string;}
    orderId: string;
}) {
    const paymentMethodsData = use(paymentMethodsDataPromise);
    const paymentMethods =  paymentMethodsData.data?.collectionRepayOrderPaymentMethods || [];

    const { paymentRepay } = usePlaceOrder(); 
  
    const {
        register,
        watch,
        formState: { errors }
    } = useForm({
        mode: "onChange",
        reValidateMode: "onChange", 
        defaultValues:{
            paymentMethod: defaultPaymentMethod.method
        }
    });

    // 参考 https://github.com/react-hook-form/error-message/blob/master/src/ErrorMessage.tsx
    const paymentMethodError = get(errors, "paymentMethod");
    const selectedPaymentMethod = watch("paymentMethod");
    console.log('selectedPaymentMethod -------- ',selectedPaymentMethod);
    const handleCreateOrder = async () => {
        return await paymentRepay({
            orderId: Number(orderId),
            paymentMethod: selectedPaymentMethod
        });

    };
    const handleClickPay = async () => {
        return true;
    };
    const airwallexRepay = async () => {
        overlayLoading.start();
        const res = await paymentRepay({
            orderId: Number(orderId),
            paymentMethod: selectedPaymentMethod,
            paymentSuccessUrl: window.location.origin + '/paymentresult/result'
        });
        
        console.log("airwallexPlaceOrder res ---- ", res);
        
        if(!res.error && res.orderId) {
            // 创建订单成功了，跳转支付页面
            window.location.href = res.orderId;
        } else {
            //创建订单出错了
            overlayLoading.stop();
            confirmDialog({
                title: "Warning",
                content: res.msg + " Create order failed. Please try again.",
                noCancel: true,
            }).then(() => {});
        }
    };
    return (
        <>
            <form name="shipping method" className="w-full box-border px-4 mt-4">
                <div className="mt-3 w-full">
                    {paymentMethodsData.error && <p className="text-red-500 text-ly-12">{paymentMethodsData.error}</p>}
                    {
                        paymentMethods.map((item) => {
                            return (
                                <label htmlFor={"paymentmethod-" + item.method} key={item.method}
                                    className="group box-border flex items-center relative bg-ly-lightgray mt-3 p-3 rounded-sm has-checked:bg-white has-checked:border-1 has-checked:border-ly-green"
                                >
                                    <p className="pr-2 flex-none relative">
                                        <Image className="block h-8 w-auto"
                                            src={item.icon || ''} alt={"Payment Method " + item.title}
                                            width={32}
                                            height={32}
                                        />
                                    </p>
                                    <p className="text-ly-12 text-[#666666] ml-1">{item.description}</p>

                                    <div className="absolute top-1/2 -translate-y-1/2 right-3 flex items-center">
                                        <svg className="check w-4 h-4 hidden group-has-[:checked]:block" 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="1" y="1" width="14" height="14" rx="1"    fill="#000000" ></rect><path    stroke="rgba(255, 255, 255, 1)" strokeWidth="1.5"  strokeLinecap="square"  d="M5.3335 8L7.3335 10L11.3335 6"></path></svg>
                                        <svg className="uncheck w-4 h-4 block group-has-[:checked]:hidden" 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="1" y="1" width="14" height="14" rx="1"    fill="#FFFFFF" ></rect><path   fill="rgba(0, 0, 0, 1)"  d="M2 0.5L14 0.5C14.8284 0.5 15.5 1.17157 15.5 2L15.5 14C15.5 14.8284 14.8284 15.5 14 15.5L2 15.5C1.17157 15.5 0.5 14.8284 0.5 14L0.5 2C0.5 1.17157 1.17157 0.5 2 0.5ZM2 1.5C1.72386 1.5 1.5 1.72386 1.5 2L1.5 14C1.5 14.2761 1.72386 14.5 2 14.5L14 14.5C14.2761 14.5 14.5 14.2761 14.5 14L14.5 2C14.5 1.72386 14.2761 1.5 14 1.5L2 1.5Z"></path></svg>
                                    </div>
                                    <input id={"paymentmethod-" + item.method}
                                        className="absolute w-6 h-6 opacity-0"
                                        type="radio"
                                        value={item.method}
                                        {...register('paymentMethod', {
                                            required: 'Please select a shipping method.',
                                        })}
                                    />
                                </label>
                            )
                        })
                    }      
                    
                    {paymentMethodError && <p className="text-red-500 text-ly-12">{paymentMethodError.message}</p>}  
                </div> 
            </form>
            
            <div className="w-full box-border px-4 mt-3">
                <p className="text-ly-12 text-[#666666] leading-4.75">
                    By providing your information, you agree to Wiggins'sPrivacy Policyand Terms of Use.
                </p>

                <div className="mt-6 w-full">
                    {selectedPaymentMethod === 'paypal_smart_button' && 
                        <PaypalButton
                            createOrder={handleCreateOrder}
                            onPaymentClick={handleClickPay}
                            isRePay={true}
                        />
                    }
                    {(selectedPaymentMethod === 'awxklarna' || selectedPaymentMethod === 'awxafterpay') &&
                        <button className="flex items-center justify-center w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold"
                            onClick={airwallexRepay}
                        >
                            Place Order
                        </button>
                    }

                </div>
            </div>
        </>
    );
  
}