247 lines
10 KiB
JavaScript
247 lines
10 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
|
import DefaultLayout from "../../../components/Layout/DefaultLayout";
|
|
import {observer} from "mobx-react-lite";
|
|
import {Button, Divider, Form, Image, Input, Modal, Spin} from "antd";
|
|
import Constraint from "../../../components/Constraint";
|
|
import Ask from "../../../components/Ask";
|
|
import Location from "../../../components/Location";
|
|
import DownloadApps from "../../../components/DownloadApps";
|
|
import Sheet from 'react-modal-sheet';
|
|
import Countdown, { zeroPad } from "react-countdown";
|
|
import {useRouter} from "next/router";
|
|
import BottomSheet from "../../../components/BottomSheet";
|
|
import { botsRepository } from '../../../repository/bots';
|
|
import { useStore } from '../../../components/StoreProvider';
|
|
import { format } from 'date-fns';
|
|
import Link from 'next/link';
|
|
|
|
const Payment = observer(() => {
|
|
const [form] = Form.useForm();
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
const { qrCode } = router.query;
|
|
const [orderId, setOrderId] = useState('');
|
|
const [price, setPrice] = useState(0);
|
|
const [checkInTime, setCheckInTime] = useState('');
|
|
const [open, setOpen] = useState(false);
|
|
const [openOrderOut, setOpenOrderOut] = useState(false);
|
|
const [notOrder, setNotOrder] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isNotComplete, setIsNotComplete] = useState(false);
|
|
|
|
const onOpenSheet = () => setOpen(true);
|
|
const onCloseSheet = () => setOpen(false);
|
|
const onNotOrder = () => {
|
|
setNotOrder(true);
|
|
setOpenOrderOut(false);
|
|
};
|
|
|
|
const { data: location } = botsRepository.hooks.useGetLocationByQR(qrCode)
|
|
|
|
const expiredOrder = async () => {
|
|
try {
|
|
await botsRepository.api.updateStatusExpiredOrder(orderId)
|
|
setIsNotComplete(true)
|
|
setOpenOrderOut(true)
|
|
} catch (err) {
|
|
console.log("session epxired failed")
|
|
setIsNotComplete(true)
|
|
setOpenOrderOut(true)
|
|
}
|
|
}
|
|
|
|
const renderer = ({minutes, seconds, completed}) => {
|
|
if (completed) {
|
|
console.log("session complite")
|
|
} else {
|
|
return <span>{zeroPad(minutes)}:{zeroPad(seconds)}</span>;
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== undefined) {
|
|
let price = localStorage.getItem("price");
|
|
let getCheckInTime = localStorage.getItem("checkInTime");
|
|
let orderId = localStorage.getItem("idOrder")
|
|
setOrderId(orderId);
|
|
setPrice(price)
|
|
const checkInTime = format(new Date(getCheckInTime), "mm")
|
|
console.log(checkInTime, "time")
|
|
}
|
|
}, [])
|
|
|
|
const handleSubmitPhoneNumber = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
setOpen(false);
|
|
setIsLoading(true);
|
|
|
|
const body = {
|
|
phoneNumber: values.phoneNumber,
|
|
};
|
|
|
|
await store.lockey.createPayment(body);
|
|
form.resetFields();
|
|
setIsLoading(false)
|
|
} catch (err) {
|
|
console.log(err);
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isNotComplete ? (
|
|
<div className="flex items-center justify-center bg-[#FF4F34] h-10 text-base">
|
|
<span className={'text-white'}>Batas Penyelesaian pesanan Anda Habis</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center bg-[#00AED6] h-10 text-base">
|
|
<span className={'text-white'}>selesaikan pesananmu dalam <Countdown
|
|
date={Date.now(checkInTime) + 300000}
|
|
renderer={renderer}
|
|
onComplete={expiredOrder}/>
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className={'bg-white m-2 py-4 px-6 rounded-lg'}>
|
|
<Location
|
|
location={location}
|
|
/>
|
|
|
|
<Form form={form} layout={'vertical'}>
|
|
<div className={'mt-5'}>
|
|
<Form.Item name="phoneNumber"
|
|
label={<span className={'font-semibold text-xl'}>Nomor Telepon Pembayaran</span>}
|
|
rules={[
|
|
{required: true, message: "Silahkan masukan Nomor Ponsel!"},
|
|
{min: 10, max: 14, message: "Nomor Ponsel tidak sesuai!"},
|
|
]}>
|
|
<Input
|
|
type={'number'}
|
|
className={'rounded-lg'}
|
|
size={'large'}
|
|
suffix={<Image src={'/assets/icons/gopay.svg'} width={80} height={30} preview={false} alt={'icon gopay'} />}
|
|
placeholder={'08xxxxxxxxx'}
|
|
disabled={
|
|
notOrder === true
|
|
}/>
|
|
</Form.Item>
|
|
|
|
<p>Dengan melanjutkan, saya telah membaca dan menyetujui <span
|
|
className={'text-[#FF9400] underline underline-offset-2 hover:cursor-pointer'}
|
|
onClick={() => router.push('/policy-terms')}>Syarat & Ketentuan</span> di
|
|
CariParkir.</p>
|
|
|
|
<Divider dashed className={'my-8 border-[#c1c1c1]'} style={{width: '2px 0 0'}}/>
|
|
</div>
|
|
|
|
<div className={'flex justify-between'}>
|
|
<h3 className={'text-lg font-bold'}>Total Pembayaran</h3>
|
|
<h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. {price}</h3>
|
|
</div>
|
|
|
|
<Form.Item shouldUpdate>
|
|
{() => (
|
|
<Button
|
|
disabled={
|
|
!form.isFieldsTouched(true) ||
|
|
!!form.getFieldsError().filter(({ errors }) => errors.length).length ||
|
|
notOrder === true
|
|
}
|
|
block
|
|
className={`${!form.isFieldsTouched(true) ||
|
|
!!form.getFieldsError().filter(({errors}) => errors.length).length || openOrderOut === true ? 'bg-[#919191]' : 'bg-black'}
|
|
text-white text-xl h-12 rounded-lg`}
|
|
onClick={onOpenSheet}>Bayar</Button>
|
|
)}
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
|
|
{/*ADA KENDALA*/}
|
|
<Constraint
|
|
location={location}
|
|
/>
|
|
|
|
{/*BUTUH BANTUAN*/}
|
|
<Ask/>
|
|
|
|
{/*DOWNLOAD APPS*/}
|
|
<DownloadApps/>
|
|
|
|
{/*MODAL LOADING*/}
|
|
<Modal
|
|
className={'rounded-3xl'}
|
|
open={isLoading}
|
|
footer={null}
|
|
closable={false}
|
|
maskClosable={false}
|
|
bodyStyle={{paddingLeft: 5, paddingRight: 5}}>
|
|
<div className={'flex flex-col justify-center items-center'}>
|
|
<div className='flex justify-center items-center'>
|
|
<Image src={'/assets/icons/Load_Logo_CP.gif'} width={35} height={48} alt={'gif'} preview={false} />
|
|
</div>
|
|
<span className={'text-center font-semibold'}>Mohon tunggu</span>
|
|
<span className={'text-center text-sm'}>Saat ini pemesanan LOCKEY anda sedang di proses. </span>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/*CONFIRMATION SHEET*/}
|
|
<BottomSheet onOpen={open} onClose={() => setOpen(false)}>
|
|
<div className={'px-5 max-w-lg'}>
|
|
<div className={'flex justify-center'}>
|
|
<Image src={'/assets/images/confirmation.svg'} width={200} height={200}
|
|
alt={'confirmation'} preview={false} />
|
|
</div>
|
|
|
|
<h3 className={'text-lg font-bold'}>Konfirmasi Pembayaran?</h3>
|
|
<p>Tidak berlaku pembatalan atau pengembalian dana setelah pembayaran selesai. </p>
|
|
|
|
<div className={'flex justify-between gap-4'}>
|
|
<Button size={'large'} className={'w-full rounded-lg'}
|
|
onClick={onCloseSheet}>Cancel</Button>
|
|
<Button size={'large'} htmlType={'submit'} className={'w-full rounded-lg bg-black text-white'}
|
|
onClick={handleSubmitPhoneNumber}>Bayar</Button>
|
|
</div>
|
|
</div>
|
|
</BottomSheet>
|
|
|
|
{/*ORDER OUT*/}
|
|
<BottomSheet onOpen={openOrderOut} onClose={() => setOpenOrderOut(false)}>
|
|
<div className={'px-5 max-w-lg'}>
|
|
<div className={'flex justify-center'}>
|
|
<Image src={'/assets/images/Illustration-order-out.svg'} width={200} height={200}
|
|
alt={'confirmation'} preview={false} />
|
|
</div>
|
|
|
|
<h3 className={'text-lg font-bold'}>Ingin pesan kembali?</h3>
|
|
<p>Anda akan mendapatkan LOCKEY terbaru, jika ingin memesan kembali.</p>
|
|
|
|
<div className={'flex justify-between gap-4'}>
|
|
<Button size={'large'} className={'w-full rounded-lg'}
|
|
onClick={onNotOrder}>Tidak</Button>
|
|
<Button
|
|
size={'large'}
|
|
className={'w-full rounded-lg bg-black text-white'}
|
|
onClick={() => router.push(`/${qrCode}/order`)}
|
|
>
|
|
Pesan Ulang
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</BottomSheet>
|
|
</>
|
|
)
|
|
})
|
|
|
|
Payment.getLayout = function Layout(page) {
|
|
return <DefaultLayout isGradient={true}>
|
|
{page}
|
|
</DefaultLayout>;
|
|
}
|
|
;
|
|
|
|
export default Payment;
|