initial commit

components/Constraint/index.js

@@ -0,0 +1,107 @@
+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;