pages/[qrCode]/payment-order/index.js

@@ -1,7 +1,8 @@
 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 Image from "next/image";
+import {Button, Divider, Form, Input, Modal, Spin} from "antd";
 import Constraint from "../../../components/Constraint";
 import Ask from "../../../components/Ask";
 import Location from "../../../components/Location";
@@ -11,14 +12,11 @@ import Countdown from "react-countdown";
 import {useRouter} from "next/router";
 import BottomSheet from "../../../components/BottomSheet";
 import { botsRepository } from '../../../repository/bots';
-import { useStore } from '../../../components/StoreProvider';
 
 const Payment = observer(() => {
     const [form] = Form.useForm();
     const router = useRouter();
-    const store = useStore();
     const { qrCode } = router.query;
-    const [price, setPrice] = useState(0);
     const [open, setOpen] = useState(false);
     const [openOrderOut, setOpenOrderOut] = useState(false);
     const [notOrder, setNotOrder] = useState(false);
@@ -42,32 +40,6 @@ const Payment = observer(() => {
         }
     };
 
-    useEffect(() => {
-        if (typeof window !== undefined) {
-            let price = localStorage.getItem("price")
-            setPrice(price)
-        }
-    }, [])
-
-    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 ? (
@@ -94,7 +66,7 @@ const Payment = observer(() => {
 
                 <Form form={form} layout={'vertical'}>
                     <div className={'mt-5'}>
-                        <Form.Item name="phoneNumber"
+                        <Form.Item name="phone"
                                    label={<span className={'font-semibold text-xl'}>Nomor Telepon Pembayaran</span>}
                                    rules={[
                                        {required: true, message: "Silahkan masukan Nomor Ponsel!"},
@@ -121,7 +93,7 @@ const Payment = observer(() => {
 
                     <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>
+                        <h3 className={'text-lg font-bold text-[#FF6103]'}>Rp. 99.000</h3>
                     </div>
 
                     <Form.Item shouldUpdate>
@@ -155,16 +127,14 @@ const Payment = observer(() => {
 
             {/*MODAL LOADING*/}
             <Modal
-                className={'rounded-3xl'}
+                className={'rounded-lg'}
                 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 flex-col justify-center'}>
-                    <div className='flex justify-center items-center'>
+                    <Spin size={'large'}/>
-                        <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>
@@ -175,7 +145,7 @@ const Payment = observer(() => {
                 <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} />
+                               alt={'confirmation'}/>
                     </div>
 
                     <h3 className={'text-lg font-bold'}>Konfirmasi Pembayaran?</h3>
@@ -184,8 +154,11 @@ const Payment = observer(() => {
                     <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'}
+                        <Button size={'large'} className={'w-full rounded-lg bg-black text-white'}
-                            onClick={handleSubmitPhoneNumber}>Bayar</Button>
+                                onClick={() => {
+                                    setOpen(false)
+                                    setIsLoading(true)
+                                }}>Bayar</Button>
                     </div>
                 </div>
             </BottomSheet>

repository/order.js

@@ -7,9 +7,9 @@ const url = {
 const hooks = {}
 
 const api = {
-    // async usePayment(data) {
+    async usePayment(data) {
-    //     return await http.post(url.payment, data)
+        return await http.post(url.payment, data)
-    // },
+    },
 }
 
 export const orderRepository = {

store/lockey.js

@@ -1,6 +1,5 @@
 import {http} from "../utils/http";
 import {botsRepository} from "../repository/bots";
-import { orderRepository } from "../repository/order";
 
 export class LockeyStore {
     constructor(context) {
@@ -10,8 +9,4 @@ export class LockeyStore {
     createOrder(body) {
         return http.post(botsRepository.url.createOrder(), body);
     }
-
-    createPayment(body) {
-        return http.post(orderRepository.url.payment(), body);
-    }
 }