From 7b07d1a1d87c16e72e3bb64d5646a1bfc97e355a Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Wed, 22 Dec 2021 22:48:34 +0700
Subject: [PATCH] fix: add API payback confirmation

---
 src/pages/Payback/Payback.js        | 175 +++++++++++++++-------------
 src/pages/Payback/PaybackCreated.js |   2 +-
 src/store/payback.js                |  13 +++
 3 files changed, 109 insertions(+), 81 deletions(-)

diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 96768ba..2b77216 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -1,44 +1,45 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
+import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/icons";
+import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
 import {appConfig} from "../../config/app";
+import {capitalize} from "lodash";
 
 const {Search} = Input;
 
 export const Payback = observer(() => {
-  const store = useStore();
-  const modalLoader = useContext(ModalLoaderContext);
+    const store = useStore();
+    const modalLoader = useContext(ModalLoaderContext);
 
-  useEffect(() => {
-    const init = async () => {
-      try {
-          modalLoader.setLoading(true);
-          await store.payback.getDataConfirmation();
-          modalLoader.setLoading(false);
-      } catch (e) {
-        modalLoader.setLoading(false);
-        if (e.response?.body?.message) {
-          message.error(e.response.body.message);
-          return;
-        }
-        message.error(e.message);
-      }
-    };
+    useEffect(() => {
+        const init = async () => {
+            try {
+                modalLoader.setLoading(true);
+                await store.payback.getDataConfirmation();
+                modalLoader.setLoading(false);
+            } catch (e) {
+                modalLoader.setLoading(false);
+                if (e.response?.body?.message) {
+                    message.error(e.response.body.message);
+                    return;
+                }
+                message.error(e.message);
+            }
+        };
 
-    init();
-  }, []);
+        init();
+    }, []);
 
-  const columns = [
-    {
-      title: "Picture",
-      dataIndex: "image_prove",
-      key: "image_prove",
-      render: (text, record) => (
+    const columns = [
+        {
+            title: "Picture",
+            dataIndex: "image_prove",
+            key: "image_prove",
+            render: (text, record) => (
           <Image
               src={`${appConfig.apiUrl}/config/image/${text}`}
               style={{width: '5vw'}}
@@ -66,7 +67,19 @@ export const Payback = observer(() => {
               <Space size="middle">
                   <Button
                       onClick={async () => {
-                          await handleAction(record, "accept");
+                          Modal.confirm({
+                              title: `Are you sure Accept this submission?`,
+                              icon: <CheckOutlined/>,
+                              okText: "Accept",
+                              cancelText: "Cancel",
+                              okType: "primary",
+                              onOk() {
+                                  handleAction(record.id, "accept");
+                              },
+                              onCancel() {
+                                  console.log("Cancel");
+                              },
+                          })
                       }}
                       icon={<CheckCircleOutlined/>}
                       style={{
@@ -79,7 +92,20 @@ export const Payback = observer(() => {
                   </Button>
                   <Button
                       onClick={async () => {
-                          await handleAction(record, "reject");
+                          Modal.confirm({
+                              title: `Are you sure Reject this submission?`,
+                              icon: <StopOutlined/>,
+                              okText: "Reject",
+                              cancelText: "Cancel",
+                              okType: "primary",
+                              onOk() {
+                                  handleAction(record.id, "reject");
+                              },
+                              onCancel() {
+                                  console.log("Cancel");
+                              },
+                          })
+
                       }}
                       icon={<CloseOutlined/>}
                       style={{
@@ -98,63 +124,52 @@ export const Payback = observer(() => {
   if (store.authentication.userData.role === "Retail") columns.pop();
 
   const routeData = [
-    {
-      route: LINKS.HOME,
-      name: "Home",
-    },
-    {
-      route: LINKS.PAYBACK,
-      name: <span style={{fontWeight: "bold"}}>Payback</span>,
-    },
+      {
+          route: LINKS.HOME,
+          name: "Home",
+      },
+      {
+          route: LINKS.PAYBACK,
+          name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>,
+      },
   ];
 
-  const onSubmit = async (data) => {
-    modalLoader.setLoading(true);
-    try {
-      // await store.payback.create(data);
-      // message.success("Success Add New Member");
-      // await store.payback.getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error("Failed Add Member");
-    }
-    modalLoader.setLoading(false);
-  };
+    const handleAction = async (id, type) => {
+        modalLoader.setLoading(true);
+        try {
+            const response = await store.payback.confirmPayback(id, {status: capitalize(type)});
+            if (response.body.status !== 201) {
+                message.error(`Failed ${capitalize(type)} Payback`);
+            }
+            message.success(`Success ${capitalize(type)} Payback`);
+        } catch (e) {
+            console.error(e, "apa errornya");
+            message.error("Failed Handler Action Payback");
+        }
+        modalLoader.setLoading(false);
+    };
 
-  const handleAction = async (record, type) => {
-  };
-
-  return (
-    <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
-      <Card>
-        <div>
-          <Row style={{marginBottom: 20}}>
-            <Col span={12}>
-              <Button>
-                <FilterOutlined/>
-                Filter
-              </Button>
-            </Col>
-            <Col span={12} style={{textAlign: "right"}}>
-              <Search
-                placeholder="input search text"
-                style={{
-                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+    return (
+        <div className={["ppob-container"].join(" ")}>
+            <BreadcumbComponent data={routeData}/>
+            <Card>
+                <div>
+                    <Row style={{marginBottom: 20}}>
+                        <Col span={12}>
+                            <Button>
+                                <FilterOutlined/>
+                                Filter
+                            </Button>
+                        </Col>
+                        <Col span={12} style={{textAlign: "right"}}>
+                            <Search
+                                placeholder="input search text"
+                                style={{
+                                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               />
-              {/* {store.authentication.userData.role !== "Admin" && (
-                <Button
-                  onClick={() => {
-                    setInitialData({});
-                    setVisibleModal(true);
-                  }}
-                >
-                  <PlusSquareOutlined /> New
-                </Button>
-              )} */}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index 7a0984e..70dd3e6 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -70,7 +70,7 @@ export const PaybackCreated = observer(() => {
     },
     {
       route: LINKS.PAYBACK_CREATED,
-      name: <span style={{fontWeight: "bold"}}>Payback User</span>,
+      name: <span style={{fontWeight: "bold"}}>Payback Created</span>,
     },
   ];
 
diff --git a/src/store/payback.js b/src/store/payback.js
index 104c406..592c673 100644
--- a/src/store/payback.js
+++ b/src/store/payback.js
@@ -80,4 +80,17 @@ export class Payback {
       console.error(e);
     }
   }
+
+  async confirmPayback(id, data) {
+    try {
+      const response = await http.put(`/transaction/deposit-return/confirmation/${id}`).send(data);
+      await Promise.all([
+        this.getDataConfirmation(),
+        this.getDataCreated()
+      ])
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }