108 lines
4.2 KiB
JavaScript
108 lines
4.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Image from "next/image";
|
|
import {Button, Form, Input} 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 handleChangeCheckTransaction = (e) => {
|
|
const value = e.target.value
|
|
setOrderId(value)
|
|
}
|
|
|
|
const onSubmit = async () => {
|
|
setShow(true)
|
|
if (show) {
|
|
try {
|
|
const res = await botsRepository.api.useCheckTransactionByOrderId(orderId);
|
|
const resultTransaction = res?.data;
|
|
setOrderNotFound(false);
|
|
setOrder(resultTransaction);
|
|
|
|
} catch (err) {
|
|
setOrderNotFound(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
console?.log(order, "ini ordernya")
|
|
|
|
return (
|
|
<div className={'bg-white px-7 pt-4 pb-8 mt-6'}>
|
|
<Image src={'/assets/images/logo.svg'} width={100} height={50}/>
|
|
|
|
<h3 className={'text-lg font-bold'}>Ada kendala dengan transaksimu?</h3>
|
|
<p>Cek transaksi dengan Order ID pembayaran:</p>
|
|
|
|
<Form form={form} layout={'vertical'}>
|
|
<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`}
|
|
onClick={onSubmit}
|
|
>
|
|
Cek
|
|
</Button>
|
|
)}
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
{orderNotFound || order === undefined ? (
|
|
<>
|
|
<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}/>
|
|
<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>
|
|
</>
|
|
) : order ? (
|
|
<>
|
|
<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}/>
|
|
<div className={'flex flex-col'}>
|
|
<span className={'font-semibold'}>{orderId}</span>
|
|
</div>
|
|
</div>
|
|
<Transaction
|
|
show={show}
|
|
orderData={order}
|
|
location={location}
|
|
/>
|
|
</>
|
|
) : ''}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Constraint;
|