121 lines
5.0 KiB
JavaScript
121 lines
5.0 KiB
JavaScript
import React, { useRef, useState } from 'react';
|
|
import Image from "next/image";
|
|
import {Button, Form, Input, Spin} from "antd";
|
|
import Transaction from "../Transaction";
|
|
import { botsRepository } from '../../repository/bots';
|
|
|
|
const Constraint = ({ location }) => {
|
|
const [form] = Form.useForm();
|
|
const [orderId, setOrderId] = useState('');
|
|
const [order, setOrder] = useState('');
|
|
const [orderNotFound, setOrderNotFound] = useState(false);
|
|
const [show, setShow] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const inputRef = useRef(null)
|
|
|
|
const handleChangeCheckTransaction = (e) => {
|
|
const value = e.target.value
|
|
setOrderId(value)
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const value = await form.getFieldValue()
|
|
if (inputRef.current) {
|
|
setShow(true)
|
|
}
|
|
const res = await botsRepository.api.useCheckTransactionByOrderId(value?.order_id);
|
|
const resultTransaction = res?.data;
|
|
setOrderNotFound(false);
|
|
setOrder(resultTransaction);
|
|
setTimeout(() => {
|
|
setLoading(false)
|
|
}, 1000);
|
|
|
|
} catch (err) {
|
|
if (err) {
|
|
setLoading(false)
|
|
}
|
|
setOrderNotFound(true);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={'bg-white px-7 pt-4 pb-8 mt-6'}>
|
|
<Image src={'/assets/images/logo.svg'} width={100} height={50} alt={'logo'} />
|
|
|
|
<h3 className={'text-lg font-bold'}>Ada kendala dengan transaksimu?</h3>
|
|
<p>Cek transaksi dengan Order ID pembayaran:</p>
|
|
|
|
<Form form={form} layout={'vertical'} onFinish={onSubmit}>
|
|
<Form.Item name="order_id" rules={[
|
|
{ required: true, message: "Silahkan masukan Order ID!" },
|
|
]}>
|
|
<Input
|
|
className={'rounded-lg'}
|
|
size={'large'}
|
|
placeholder={'CB-20220924-IaNr'}
|
|
value={orderId}
|
|
onChange={handleChangeCheckTransaction} />
|
|
</Form.Item>
|
|
|
|
<Form.Item shouldUpdate>
|
|
{() => (
|
|
<Button
|
|
disabled={
|
|
!form.isFieldsTouched(true) ||
|
|
!!form.getFieldsError().filter(({ errors }) => errors.length).length
|
|
}
|
|
block
|
|
className={`${!form.isFieldsTouched(true) ||
|
|
!!form.getFieldsError().filter(({ errors }) => errors.length).length ? 'bg-[#919191]' : 'bg-black'}
|
|
text-white text-xl h-12 rounded-lg`}
|
|
htmlType={'submit'}
|
|
ref={inputRef}
|
|
>
|
|
Cek
|
|
</Button>
|
|
)}
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
{orderNotFound || order === undefined ? (
|
|
loading ? (<Spin className='flex justify-center'/>) : (
|
|
<div>
|
|
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
|
|
|
|
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
|
|
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40} alt={'icons'}/>
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>{orderId}</span>
|
|
<span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
) : order ? (
|
|
loading ? (<Spin className='flex justify-center'/>) : (
|
|
<div>
|
|
<h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
|
|
|
|
<div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
|
|
<Image src={'/assets/icons/cariparkir.svg'} width={40} height={40} alt={'icons'} />
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>{orderId}</span>
|
|
</div>
|
|
</div>
|
|
<Transaction
|
|
show={show}
|
|
orderData={order}
|
|
location={location}
|
|
/>
|
|
</div>
|
|
)
|
|
) : ''}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Constraint;
|