1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / chinawholesale-frontend-next / src / components / pages / dashboard / orders /
Filename : OrdersComponents.js
back
'use client'
import React, { useState } from 'react'
import { useCustomerOrders } from '@/api/api-dashboard'
import useResponsive from '@/utils/responsive'
import MobileOrders from './mobile/MobileOrders'
import { Pagination, Table, Tooltip } from 'antd'
import dayjs from 'dayjs'
import CurrencyIcon from '@/components/mixed/CurrencyIcon'
import TrackingInfo from './mobile/TrackingInfo'
import { useRouter } from 'next/navigation'
import { useQueryString } from '@/hooks/helper-hooks'
import { countHours } from '@/helpers/helpers'
import Link from 'next/link'
import PageCardComponent from '@/components/mixed/PageCardComponent'
import ExpressButton from '@/components/buttons/ExpressButton'
import { EyeIcon, TimeLineIcon } from '@/components/icons'

export default function OrdersComponents({ searchParams: query }) {

    const [item, setItem] = useState({})
    const [showTracking, setShowTracking] = useState(false)

    const { smMax } = useResponsive()
    const router = useRouter()
    const { parsed } = useQueryString()

    const { data, isLoading } = useCustomerOrders(query)

    const handlePagination = (page, pageSize) => {
        let redirect = parsed({ ...query, page: page, limit: pageSize })
        router.replace(`/dashboard/orders?${redirect}`)
    }

    const handleTableChange = ({ pageSize, current, total, ...newPagination }, filters) => {
        const redirect = parsed({
            ...query,
            ...newPagination,
            limit: pageSize,
            page: current,
            ...filters,
        })
        router.replace(`/dashboard/orders?${redirect}`)
    }

    const handleTracking = (record) => {
        setItem(record)
        setShowTracking(true)
    }

    const dataSource = data?.data?.data || []
    const total = data?.data?.meta?.total || 0
    const current = data?.data?.meta?.current_page || 1
    const pageSize = parseInt(data?.data?.meta?.per_page) || 1

    return (
        <>
            {showTracking && (
                <TrackingInfo
                    item={item}
                    show={showTracking}
                    setShow={setShowTracking}
                />
            )}
            <PageCardComponent title={'My Orders'}>
                {
                    smMax ? (
                            <>
                                <MobileOrders
                                    orders={dataSource || []}
                                    handleTracking={handleTracking}
                                />
                                {
                                    dataSource?.length > 0 &&
                                    <div className={'flex justify-center items-center mt-6'}>
                                        <Pagination
                                            current={current || 1}
                                            total={total || 0}
                                            pageSize={pageSize}
                                            onChange={handlePagination} />
                                    </div>
                                }
                            </>
                        )
                        :
                        <Table
                            rowKey={(record) => record.id}
                            dataSource={dataSource}
                            loading={isLoading}
                            pagination={{
                                current,
                                pageSize,
                                total,
                                showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
                            }}
                            scroll={{
                                x: 800,
                            }}
                            onChange={handleTableChange}
                            bordered
                            columns={[
                                {
                                    title: 'Date',
                                    align: 'center',
                                    width: 120,
                                    render: (record) => {
                                        return record?.created_at
                                            ? dayjs(record.created_at).format('DD-MM-YYYY')
                                            : 'N/A'
                                    },
                                },
                                {
                                    title: 'Order No',
                                    align: 'center',
                                    width: 120,
                                    render: (record) => {
                                        return record?.order
                                            ? record?.order?.order_number
                                            : 'N/A'
                                    },
                                },
                                {
                                    title: 'Item No',
                                    align: 'center',
                                    width: 120,
                                    dataIndex: 'item_number',
                                },
                                {
                                    title: 'Products Value',
                                    width: 130,
                                    align: 'center',
                                    render: (record) => {
                                        const product_calc = (Number(record.product_value) + Number(record.DeliveryCost) - Number(record.coupon_contribution))
                                        return (
                                            <CurrencyIcon price={product_calc} />
                                        )
                                    },
                                },
                                {
                                    title: 'First Payment',
                                    width: 120,
                                    align: 'center',
                                    dataIndex: 'first_payment',
                                    render: (first_payment) => {
                                        return <CurrencyIcon price={first_payment} />
                                    },
                                },
                                {
                                    title: 'Due Payment',
                                    width: 120,
                                    align: 'center',
                                    dataIndex: 'due_payment',
                                    render: (due_payment) => {
                                        return <CurrencyIcon price={due_payment} />
                                    },
                                },
                                {
                                    title: 'Status',
                                    width: 190,
                                    align: 'center',
                                    dataIndex: 'status',
                                    render: (status) => {
                                        if (['refunded', 'adjustment', 'delivered'].includes(status)) {
                                            return <span style={{ textTransform: 'capitalize' }}>Completed</span>
                                        }
                                        return <span style={{ textTransform: 'capitalize' }}>{status}</span>
                                    },
                                },
                                {
                                    title: 'Action',
                                    width: 120,
                                    key: 'action',
                                    align: 'center',
                                    render: (item, order) => {
                                        if (order.status === 'waiting-for-payment') {
                                            const counting = countHours(order?.created_at)
                                            const hours_count = counting.hours_count

                                            return (
                                                <div className={'flex flex-col justify-center items-center'}>
                                                    <Link href={`/dashboard/orders/${order.order.transaction_id}`}>
                                                        <ExpressButton
                                                            type={'green'}
                                                            label={'Pay Now'}
                                                        />
                                                    </Link>
                                                    {hours_count > 0 &&
                                                        <p className={'text-center m-0 font-medium text-[12px]'}>{counting.human} left</p>}
                                                </div>
                                            )
                                        }
                                        return (
                                            <div className={'flex justify-center items-center gap-1'}>
                                                <Tooltip title="Show Details">
                                                    <ExpressButton
                                                        type={'bitcoin'}
                                                        onClick={() => router.push(`/dashboard/wallet/${order.id}`)}
                                                        icon={<EyeIcon size={20} />}
                                                        // disabled={order?.shipping_service}
                                                        className={'rounded-full w-8 h-8'}
                                                    />
                                                </Tooltip>
                                                {
                                                    (order.status !== 'submit-for-query') &&
                                                    <Tooltip title="Show Tracking">
                                                        <ExpressButton
                                                            type={'twitter'}
                                                            className={'rounded-full w-8 h-8'}
                                                            onClick={() => handleTracking(order)}
                                                            icon={<TimeLineIcon size={20} />}
                                                        />
                                                    </Tooltip>
                                                }
                                            </div>
                                        )
                                    },
                                },
                            ]}
                        />
                }
            </PageCardComponent>
        </>
    )
}