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

"use client";

import { useRouter } from 'next/navigation'
import PaypalButton from "./PaymentButton/PaypalButton";
import { overlayLoading } from "@/components/theme/ui/kernel/loading/api";
import { PlaceOrderFunction } from "@/types/checkout/type";
import { useCustomToast } from "@/utils/hooks/useToast";
import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder";
import { confirmDialog } from "@/components/theme/ui/kernel/confirm/api";
export default function CheckoutPlaceOrder({
    paymentMethod,
    clickPlaceOrder, // 校验运输方式，地址 
}: {
    paymentMethod: string;
    clickPlaceOrder: PlaceOrderFunction;
}) {
    const router = useRouter();
    const { showToast } = useCustomToast();
    const { createPaymentCallback } = usePlaceOrder();
    const paypalCreateOrder = async () => {

        const placeOrderRes = await clickPlaceOrder();
        if(placeOrderRes.valid && placeOrderRes.data !== null) {
            return {
                error: false,
                msg: '',
                orderId: placeOrderRes.data.gatewayOrderId,
                webOrderId: placeOrderRes.data.orderId
            };
        } else {
            return {
                error: true,
                msg: '',
                orderId: '',
                webOrderId: ''
            };

        }
    };

    const airwallexPlaceOrder = async () => {

        const placeOrderRes = await clickPlaceOrder({
            paymentSuccessUrl: window.location.origin + '/paymentresult/result'
        });
        overlayLoading.stop();
        if(placeOrderRes.valid && placeOrderRes.data !== null) {
            window.location.href = placeOrderRes.data.gatewayOrderId;
        }
    };

    const cardAirwallexPlaceOrder = async () => {
        const placeOrderRes = await clickPlaceOrder();
        if(placeOrderRes.valid && placeOrderRes.data !== null && placeOrderRes.otherData !== null) {
            const webOrderId = placeOrderRes.data.orderId;
            const cardNumberElement = placeOrderRes.otherData;
            const paymentIntentIdClientSecret = placeOrderRes.data.gatewayOrderId.split(':');
            const paymentIntentId = paymentIntentIdClientSecret[0];
            const paymentIntentClientSecret = paymentIntentIdClientSecret[1];

            cardNumberElement.confirm({
                intent_id: paymentIntentId,
                client_secret: paymentIntentClientSecret,
            }).then((result) => { 
                overlayLoading.stop();
                console.log('cardNumberElement.confirm result ---- ', result);
                // 支付成功 跳转页面
                router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=success');
            }).catch((error) => {
                overlayLoading.stop();
                console.log('cardNumberElement.confirm error ---- ', error);
                // 支付失败
                router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=failure');
            });
        }
    };

    const afterpayPlaceOrder = async () => { 
        if(window.AfterPay) { 
            const placeOrderRes = await clickPlaceOrder({
                paymentSuccessUrl: window.location.origin + '/paymentresult/result',
                paymentCancelUrl: window.location.origin + '/paymentresult/result'
            });
            
            if(placeOrderRes.valid && placeOrderRes.data !== null) {
                const afterpayToken = placeOrderRes.data.gatewayOrderId;
                const webOrderId = placeOrderRes.data.orderId;
                window.AfterPay.initialize({countryCode: "US"});
                // To avoid triggering browser anti-popup rules, the AfterPay.open()
                // function must be directly called inside the click event listener
                window.AfterPay.open();
                // If you don't already have a checkout token at this point, you can
                // AJAX to your backend to retrieve one here. The spinning animation
                // will continue until `AfterPay.transfer` is called.
                // If you fail to get a token you can call AfterPay.close()
                window.AfterPay.onComplete = async (event) => {
                    console.log('window.AfterPay.onComplete event ---- ', event);
                    let status: "success" | "cancel" | "failure" = event.data.status === "SUCCESS" ? 'success' : 'cancel';
                    const resCallback = await createPaymentCallback({
                        orderId: Number(webOrderId),
                        gatewayOrderId: event.data.orderToken,
                        status: status,
                    });
                    overlayLoading.stop();
                    if (event.data.status == "SUCCESS") {
                        // The customer confirmed the payment schedule.
                        // The token is now ready to be captured from your server backend.
                        // 跳转结果页 成功
                        if(!resCallback.error) {
                            // 后端capture成功，跳转到成功落地页 
                            router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=success');
                        } else {
                            // capture 失败，提示错误
                            confirmDialog({
                                title: "Somthing Wrong",
                                content: resCallback.msg + " Please contact customer service." + " OrderId: "+ webOrderId,
                                noCancel: true,
                            }).then(() => { 
                                router.replace('/');
                            });
                            
                        }
                        
                    } else {
                        // The customer cancelled the payment or closed the popup window.
                        // 跳转结果页 取消
                        router.replace('/paymentresult/result?orderId=' + webOrderId + '&return_result=cancel');
                    }
                }
                window.AfterPay.transfer({token: afterpayToken});
            }
        } else {
            overlayLoading.stop();
            showToast("Please wait for the Afterpay to load completely.","warning");
        }
    };

    return (
        <>
            <div className="relative w-full">
                {paymentMethod === 'paypal_smart_button' && 
                    <PaypalButton
                        createOrder={paypalCreateOrder}
                    />
                }
                {(paymentMethod === 'awxklarna' || paymentMethod === '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={airwallexPlaceOrder}
                    >
                        Place Order
                    </button>
                }
                {paymentMethod === 'airwallex' && 
                    <button className="flex items-center justify-center w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold"
                        onClick={cardAirwallexPlaceOrder}
                    >
                        Place Order
                    </button>
                }
                {paymentMethod === 'afterpay' &&
                    <button className="flex items-center justify-center w-full h-12 bg-ly-green text-white rounded-3xl text-ly-16 font-bold"
                        onClick={afterpayPlaceOrder}
                    >
                        Place Order
                    </button>
                }
                

            </div>
        </>
    );
}