1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / payment /
Filename : PaymentComponent.js
back
'use client'
import React, { useMemo, useState } from 'react'
import BkashPayment from './includes/BkashPayment'
import {
    useCart,
    useConfirmOrder,
    useCartContext,
} from '@/api/cart-api'
import PaymentItem from './includes/PaymentItem'
import { itemValidateWillPayment } from '@/helpers/cart-helpers'

import useAlert from '@/components/alert/alertInfo'
import { wholesaleItemValidateWillPayment } from '@/helpers/cart-helpers'
import BankPaymentPopup from './includes/BankPaymentPopup'
import { useSettings } from '@/api/generale'
import { CartProductSummary } from '@/helpers/cart-helpers'
import OrderDisclaimer from '@/components/pages/payment/includes/OrderDisclaimer'
import PageCardComponent from '@/components/mixed/PageCardComponent'
import PaymentMethods from '@/components/pages/payment/includes/PaymentMethods'
import { BkashProcessPayment } from '@/components/pages/payment/includes'
import * as res from 'autoprefixer'

const PaymentComponent = ({ searchParams: query, balance }) => {
    const [paymentLoading, setPaymentLoading] = useState(false)
    const [show, setShow] = useState(false)
    const [disclaimer, setDisclaimer] = useState(false)
    const [bkashOption, setBkashOption] = useState({
        amount: '',
        type: 'new_order',
        reference: '',
        errorRedirect: '',
        successRedirect: '',
    })

    const isProcess = useMemo(() => {
        const { amount, reference, type } = bkashOption
        return !!(amount && reference && type)
    }, [bkashOption])

    const settings = useSettings()
    const { cart, currentCheckedItems, isLoading } = useCartContext()

    const { paymentMethod: { mutateAsync: paymentMethod } } = useCart()
    const confirmOrder = useConfirmOrder()

    const { warning, info } = useAlert()

    const walletBalance = useMemo(() => {
        const cart_total = cart?.cart_total || 0
        const coupon_discount = cart?.coupon_discount || 0
        const advanced_rate = cart?.advanced_rate || 0
        const initial_payment = cart?.initial_payment || 0
        const due_payment = cart?.due_payment || 0
        let balance_amount = balance?.amount || 0

        if (Number(balance_amount) >= Number(initial_payment)) {
            balance_amount = initial_payment
        }

        return {
            cart_total,
            coupon_discount,
            advanced_rate,
            balance_amount,
            initial_payment: Number(initial_payment) - Number(balance_amount),
            due_payment: due_payment,
        }
    }, [cart?.initial_payment, cart?.advanced_rate, cart?.cart_total, cart?.coupon_discount, cart?.due_payment, balance])

    const shipping = cart?.shipping || {}

    const currency = settings?.currency_icon || '৳'
    const current_rate = settings?.payment_advanched_rate || 0
    const advanced_rates = settings?.advanced_rates || null
    const disclaimer_msg = settings?.alibaba1688_order_disclaimer || null
    const active_bank_payment = parseInt(settings?.active_bank_payment) || null

    const shippingRate = 750
    const payment_method = cart?.payment_method || false

    const { totalPrice, advanced } = CartProductSummary(
        cart,
        advanced_rates,
        current_rate,
    )

    const selectPaymentMethod = async (method) => {
        if (method) {
            await paymentMethod({ method })
        }
    }

    const paymentConfirm = (event) => {
        event.preventDefault()
        const activeCart = query?.active === 'wholesale' ? 'Wholesale' : 'Retail'
        if (!currentCheckedItems?.length) {
            info(`Your ${activeCart} cart is empty`)
            return false
        }

        if (!payment_method && !!Number(due_payment)) {
            warning('Select your payment method')
            return ''
        }

        if (!shipping?.phone) {
            warning('Select your shipping information')
            return ''
        }

        if (!totalPrice) {
            warning('You have no Item. Please select your item from checkout')
            return ''
        }
        let process = false
        if (activeCart.toLowerCase() === 'wholesale') {
            process = wholesaleItemValidateWillPayment(currentCheckedItems, settings, warning)
        } else {
            process = itemValidateWillPayment(currentCheckedItems, settings)
        }

        if (payment_method === 'bank' && !!Number(walletBalance?.initial_payment)) {
            setShow(true)
            return false
        }

        if (process && activeCart.toLowerCase() === 'wholesale' && disclaimer_msg) {
            setDisclaimer(true)
            return false
        }

        if (process) {
            confirm_process()
        }
    }

    const confirm_process = () => {
        setPaymentLoading(true)
        const ProviderType = 'Alibaba1688'
        confirmOrder.mutateAsync({
            process: true,
            ProviderType,
        })
            .then((res) => {
                const resData = res?.data || null
                if (resData?.status) {
                    if (resData?.pay_method === 'bkash') {
                        setBkashOption(resData)
                    } else {
                        setPaymentLoading(false)
                        window.location.assign(resData?.successRedirect)
                    }
                } else if (!!resData?.errorRedirect && typeof window !== 'undefined') {
                    setPaymentLoading(false)
                    window.location.assign(resData?.errorRedirect)
                }
            })
    }

    // console.log({currentCheckedItems})

    return (
        <>
            {
                isProcess && <BkashProcessPayment
                    amount={bkashOption.amount}
                    type={bkashOption.type}
                    reference={bkashOption.reference}
                    successRedirect={bkashOption.successRedirect}
                    errorRedirect={bkashOption.errorRedirect}
                    balance_amount={''} />
            }

            <BankPaymentPopup
                cart={cart}
                walletBalance={walletBalance}
                ProviderType={query?.active === 'wholesale' ? 'Alibaba1688' : ''}
                show={show}
                setShow={setShow}
            />

            <OrderDisclaimer
                disclaimer_msg={disclaimer_msg}
                confirm_process={confirm_process}
                loading={paymentLoading}
                show={disclaimer}
                setShow={setDisclaimer}
            />

            <PageCardComponent
                isLoading={isLoading}
                title={'Complete your payment'}
                className={'max-w-[768px] mx-auto lg:px-5'}
            >
                <div className={'grid grid-cols-12 gap-2 items-start'}>
                    <div className={'col-span-12  lg:col-span-12'}>
                        <div>
                            <PaymentItem
                                walletBalance={walletBalance}
                                cart={cart}
                                currentCheckedItems={currentCheckedItems}
                                currency={currency}
                                shippingRate={shippingRate}
                                settings={settings}
                            />
                        </div>

                        {
                            !!currentCheckedItems.length &&
                            <>
                                {
                                    !!Number(walletBalance?.initial_payment) &&
                                    <PaymentMethods
                                        walletBalance={walletBalance}
                                        active_bank_payment={active_bank_payment}
                                        payment_method={payment_method}
                                        selectPaymentMethod={selectPaymentMethod}
                                    />
                                }
                                <div className={'max-w-[768px] mx-auto'}>
                                    {
                                        <BkashPayment
                                            walletBalance={walletBalance}
                                            advanced={advanced}
                                            payment_method={payment_method}
                                            paymentConfirm={paymentConfirm}
                                            confirmLoading={paymentLoading}
                                            showBankPayment={show}
                                        />
                                    }
                                </div>
                            </>
                        }

                    </div>

                </div>
            </PageCardComponent>
        </>
    )
}

export default PaymentComponent