1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / checkout /
Filename : CheckoutComponent.js
back
'use client'
import React from 'react'
import CheckoutSidebar from './includes/CheckoutSidebar'
import Swal from 'sweetalert2'
import { useCartContext, useCart } from '@/api/cart-api'
import CheckoutItem from './includes/CheckoutItem'
import { useSettings } from '@/api/generale'
import PageCardComponent from '@/components/mixed/PageCardComponent'

const CheckoutComponent = ({ searchParams: newQuery }) => {

    const settings = useSettings()

    const { cart, currentCartItems, currentCheckedItems, isLoading } = useCartContext()

    const { removeCart: { mutateAsync: removeCart, isPending } } = useCart()
    const currency = settings?.currency_icon

    const removeItemFromCart = (e) => {
        e.preventDefault()
        if (currentCheckedItems?.length > 0) {
            Swal.fire({
                icon: 'warning',
                text: 'Are you want to remove?',
                showCancelButton: true,
                confirmButtonText: 'Remove',
                denyButtonText: `Don't remove`,
            }).then(async (result) => {
                if (result.isConfirmed) {
                    await removeCart({ remove: true })
                }
            })
        } else {
            Swal.fire({
                icon: 'info',
                text: 'Please select your item first!',
                confirmButtonText: 'Understood!',
            }).then()
        }
    }

    return (
        <>
            <PageCardComponent
                title={'Checkout'}
            >
                <div className={'grid grid-cols-12 gap-2 items-start'}>
                    <div className={'col-span-12  lg:col-span-9'}>
                        {
                            isLoading ?
                                <>loading...</>
                                :
                                <CheckoutItem
                                    settings={settings}
                                    newQuery={newQuery}
                                    currency={currency}
                                    cart={cart}
                                    cartItems={currentCartItems}
                                    checkedItem={currentCheckedItems}
                                    removeLoading={isPending}
                                    removeItemFromCart={removeItemFromCart}
                                />
                        }
                    </div>
                    <div className={'col-span-12 lg:col-span-3'}>
                        <CheckoutSidebar
                            query={newQuery}
                            cart={cart}
                            cartItems={currentCartItems}
                            settings={settings}
                        />
                    </div>
                </div>
            </PageCardComponent>
        </>
    )
}

export default CheckoutComponent