74 lines
3.4 KiB
JavaScript
74 lines
3.4 KiB
JavaScript
import React, {useEffect, useRef, useState} from 'react';
|
|
import {Badge, Divider, Tag, Image} from "antd";
|
|
import {DownCircleOutlined} from "@ant-design/icons";
|
|
import autoAnimate from "@formkit/auto-animate";
|
|
import { format } from "date-fns";
|
|
|
|
const Transaction = ({show, orderData, location}) => {
|
|
const [collapse, setCollapse] = useState(false);
|
|
const parentRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (parentRef.current) {
|
|
autoAnimate(parentRef.current);
|
|
}
|
|
}, [parentRef])
|
|
|
|
return (
|
|
<>
|
|
<div className={`${show ? 'block' : 'hidden'} bg-white mt-3 border-[#E5E9F2] shadow rounded-lg`} ref={parentRef}>
|
|
<div className={'flex justify-between items-center p-3'}>
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>{orderData?.order_id}</span>
|
|
<span className={'text-[#B7BAC2]'}>{format(new Date(orderData?.date_modified), 'dd/MM/yyyy mm:ss')}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<Tag color={'warning'} className={'p-2 rounded'}>{orderData?.status}</Tag>
|
|
</div>
|
|
</div>
|
|
|
|
{!collapse && <Divider className={'m-0'}/>}
|
|
|
|
{collapse && (
|
|
<>
|
|
<div className={'flex justify-between gap-2 bg-slate-50 border-2 border-x'}>
|
|
<div className={'flex flex-col pl-3 py-3 gap-2'}>
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>Lokasi</span>
|
|
<span className={'text-[#515257]'}>{location?.data?.[0]?.name}</span>
|
|
</div>
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>Total Harga</span>
|
|
<span className={'text-[#FF6103]'}>Rp.{orderData?.total}</span>
|
|
</div>
|
|
{orderData?.payment_method?.toLowerCase() == "gopay" ? (
|
|
<div>
|
|
<Image src={'/assets/images/gopay.svg'} preview={false} alt={'gopay'} />
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Image src={'/assets/images/astrapay.png'} preview={false} alt={'gopay'} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className={'flex flex-col items-center w-44 pr-3 py-3'}>
|
|
<span className={'font-semibold'}>Status Parkir</span>
|
|
<Badge color={'#FF9400'} text={<span className={'text-[#FF9400]'}>In-Location</span>}/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className={'flex items-center gap-2 hover:cursor-pointer p-3'} onClick={() => setCollapse(!collapse)}>
|
|
<span className={'text-[#96969a] text-sm'}>Lihat Detail</span>
|
|
<DownCircleOutlined rotate={collapse ? 180 : 0} className={'text-[#96969a]'}/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Transaction;
|