Konfirm Retail Page

src/pages/Membership/DetailUser.js

@@ -509,7 +509,7 @@ export const DetailUser = observer(() => {
                     );
                     console.log(store.membership.dataDetail.userDetail.id);
                     console.log(
-                      store.membership.dataDetail.userDetail.image_identity
+                      store.membership.dataDetail.userDetail.image_identity,"gambar id"
                     );
                     console.log(store.membership.dataDetail.username);
                     setVisibleModal(true);

src/pages/Membership/Konfirmasi.js

@@ -17,6 +17,7 @@ import {
   Typography,
   DatePicker,
   Form,
+  Divinder,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -34,8 +35,10 @@ import { appConfig } from "../../config/app";
 import { capitalize } from "lodash";
 import { PAYBACK_STATUS } from "../../constants/payback";
 import moment from "moment";
+import { useHistory } from "react-router-dom";
 
 export const Konfirmasi = observer(() => {
+  const history = useHistory();
   const { Option } = Select;
   const { Title } = Typography;
   const [form] = Form.useForm();
@@ -43,6 +46,10 @@ export const Konfirmasi = observer(() => {
   const modalLoader = useContext(ModalLoaderContext);
   const [filterMembership, setFilterMembership] = useState([]);
   const [filterSubCategories, setFilterSubCategories] = useState([]);
+  const [visibleModalToko, setVisibleModalToko] = useState(false);
+  const [VisibleModalIdentitas, setVisibleModalIdentitas] = useState(false);
+  const [toko, setToko] = useState({});
+  const [identitas, setIdentitas] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -71,7 +78,7 @@ export const Konfirmasi = observer(() => {
       key: "userData_name",
     },
     {
-      title: "Picture",
+      title: "Foto Identitas",
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
@@ -83,15 +90,30 @@ export const Konfirmasi = observer(() => {
       ),
     },
     {
-      title: "Amount",
+      title: "Foto Toko",
-      dataIndex: "amount",
+      dataIndex: "image_prove",
-      key: "amount",
+      key: "image_prove",
-      width: "20%",
+      render: (text, record) => (
-      render: (text) =>
+        // <Image
-        new Intl.NumberFormat("id-ID", {
+        //   src={`${appConfig.apiUrl}/config/image/${text}`}
-          style: "currency",
+        //   style={{ width: "5vw" }}
-          currency: "IDR",
+        //   alt={record.id}
-        }).format(text),
+        // />
+        <Button
+          onClick={async () => {
+            // await store.transaction.getDataHistoryTopUp(record.id);
+            // await store.transaction.getDetailHistoryTransaction(record.id);
+            // await store.authentication.getProfit(record.id);
+            //await store.transaction.getDataHistoryTransaction()
+            // history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+            // console.log(record.id);
+            setToko(record);
+            setVisibleModalToko(true);
+          }}
+        >
+          Lihat Foto
+        </Button>
+      ),
     },
     {
       title: "Action",
@@ -279,6 +301,20 @@ export const Konfirmasi = observer(() => {
       Apply
     </Button>,
   ];
+  const gambar = [
+    {
+      mobil:
+        "https://www.toyota.astra.co.id/sites/default/files/2021-11/4-avanza-silver-mica-metallic.png",
+    },
+    {
+      mobil:
+        "https://foto.kontan.co.id/B0DdG0ycDkrB5FyHTkyjMhz4opk=/smart/2021/04/22/1618664119p.jpg",
+    },
+    {
+      mobil:
+        "https://static.wixstatic.com/media/bce131_b85b43380cb44ad493776b810c0389ac~mv2.png/v1/fill/w_688,h_408,al_c/bce131_b85b43380cb44ad493776b810c0389ac~mv2.png",
+    },
+  ];
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -444,12 +480,41 @@ export const Konfirmasi = observer(() => {
                                   {PAYBACK_STATUS[item.status]}
                                 </Tag>
                               )}
+                              <Button
+                                style={{ marginRight: 10, marginTop: 7 }}
+                                onClick={async () => {
+                                  // await store.transaction.getDataHistoryTopUp(record.id);
+                                  // await store.transaction.getDetailHistoryTransaction(record.id);
+                                  // await store.authentication.getProfit(record.id);
+                                  //await store.transaction.getDataHistoryTransaction()
+                                  // history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                                  // console.log(record.id);
+                                  setIdentitas(item);
+                                  setVisibleModalIdentitas(true);
+                                }}
+                              >
+                                Foto Identitas
+                              </Button>
+                              <Button
+                                onClick={async () => {
+                                  // await store.transaction.getDataHistoryTopUp(record.id);
+                                  // await store.transaction.getDetailHistoryTransaction(record.id);
+                                  // await store.authentication.getProfit(record.id);
+                                  //await store.transaction.getDataHistoryTransaction()
+                                  // history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                                  // console.log(record.id);
+                                  setToko(item);
+                                  setVisibleModalToko(true);
+                                }}
+                              >
+                                Foto Toko
+                              </Button>
                             </p>
                           </div>
                         }
                       />
                       <div style={{ marginRight: 16 }}>
-                        <p
+                        {/* <p
                           style={{
                             fontSize: 9,
                             margin: 0,
@@ -459,7 +524,7 @@ export const Konfirmasi = observer(() => {
                             src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
                             style={{ width: "10vw" }}
                           />
-                        </p>
+                        </p> */}
                       </div>
                     </List.Item>
                     <Divider plain style={{ margin: 0 }} />
@@ -471,6 +536,144 @@ export const Konfirmasi = observer(() => {
         </div>
       </Card>
       <Modal
+        visible={
+          visibleModalToko === true ? visibleModalToko : VisibleModalIdentitas
+        }
+        //title={`Are you sure buy ${barang?.product_name}?`}
+        okText={"Confirm"}
+        onCancel={() => {
+          form.resetFields();
+          setVisibleModalToko(false);
+          setVisibleModalIdentitas(false);
+        }}
+        width={1000}
+        footer={false}
+        // footer={footerLayoutFilter}
+        // footer={[
+        //   <Button
+        //     key="back"
+        //     style={{
+        //       backgroundColor: "#e74e5e",
+        //       color: "#fff",
+        //     }}
+        //     onClick={() => {
+        //       form.resetFields();
+        //       handleCancel();
+        //     }}
+        //   >
+        //     Cancel
+        //   </Button>,
+        //   <Button
+        //     key="Buy Prod"
+        //     style={{
+        //       backgroundColor: "#4e79e7",
+        //       color: "#fff",
+        //     }}
+        //     onClick={() => {
+        //       form
+        //         .validateFields()
+        //         .then((values) => {
+        //           console.log(values, "isi form");
+        //           handleBuyProduct(values, barang.product_code);
+        //           form.resetFields();
+        //         })
+        //         .catch((info) => {
+        //           console.error("Validate Failed:", info);
+        //         });
+        //     }}
+        //   >
+        //     Buy Prod
+        //   </Button>,
+        //   <Button
+        //     key="Buy Stag"
+        //     type="primary"
+        //     onClick={() => {
+        //       form
+        //         .validateFields()
+        //         .then((values) => {
+        //           console.log(values, "isi form");
+        //           handleBuyStag(values, barang.product_code);
+        //           form.resetFields();
+        //         })
+        //         .catch((info) => {
+        //           console.error("Validate Failed:", info);
+        //         });
+        //     }}
+        //   >
+        //     Buy Staging
+        //   </Button>,
+        // ]}
+        // cancelText="Cancel"
+        // onCancel={() => {
+        //   form.resetFields();
+        //   handleCancel();
+        // }}
+        // onOk={() => {
+        //   form
+        //     .validateFields()
+        //     .then((values) => {
+        //       console.log(values, "isi form");
+        //       handleBuyProduct(values, item.product_code);
+        //       form.resetFields();
+        //     })
+        //     .catch((info) => {
+        //       console.error("Validate Failed:", info);
+        //     });
+        // }}
+      >
+        {visibleModalToko === true ? (
+          <Row>
+            {gambar.map((gmbr, idx) => (
+              <Card
+                style={
+                  store.ui.mediaQuery.isDesktop
+                    ? {
+                        width: "29vw",
+                        borderColor: "salmon",
+                        marginLeft: "10px",
+                      }
+                    : {
+                        width: "75vw",
+                        borderColor: "salmon",
+                        marginBottom: "10px",
+                      }
+                }
+              >
+                <Image src={`${gmbr.mobil}`} alt={idx} />
+              </Card>
+            ))}
+          </Row>
+        ) : (
+          <Image
+            src={`${appConfig.apiUrl}/config/image/${identitas.image_prove}`}
+            alt={identitas.id}
+          />
+        )}
+
+        {/* <Form form={form} layout="vertical">
+          <Form.Item
+            name="destination"
+            label="Destination"
+            rules={[
+              {
+                required: true,
+                message: "Please input Destination Number!",
+              },
+              // {
+              //   pattern: /^(?:\d*)$/,
+              //   message: "Value should contain just number",
+              // },
+              // {
+              //   pattern: /^[\d]{1,12}$/,
+              //   message: "Value should be 1 - 12 character",
+              // },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form> */}
+      </Modal>
+      {/* <Modal
         visible={store.payback.visibleModalFilterPayback}
         title={"Filter"}
         footer={footerLayoutFilter}
@@ -522,7 +725,7 @@ export const Konfirmasi = observer(() => {
             </Form>
           </Col>
         </Row>
-      </Modal>
+      </Modal> */}
     </div>
   );
 });

src/pages/Membership/MembershipModal.js

@@ -81,7 +81,9 @@ export const MembershipModal = ({
     );
   };
 
-  const handleCancel1 = () => { setPreviewVisible(false) };
+  const handleCancel1 = () => {
+    setPreviewVisible(false);
+  };
 
   const beforeUpload = (file) => {
     let isLt2M;
@@ -112,20 +114,36 @@ export const MembershipModal = ({
   };
 
   const uploadHandler = async (args) => {
+    // if (fileList === "") {
     const file = args.file;
     const res = await store.payback.uploadImages(file);
     console.log(res, "ini respon 1");
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
-    setResponseFilename(res.body.filename);
+    //setResponseFilename(res.body.filename);
+    console.log(initialData.image_identity)
+    initialData.image_identity !== ""
+      ? file === ""
+        ? setResponseFilename(initialData.image_identity)
+        : setResponseFilename(res.body.filename)
+      : setResponseFilename(res.body.filename);
     setFileList([
-      {
+          {
-        uid: "-1",
+            uid: "-1",
-        name: res.body.filename,
+            name: res.body.filename,
-        status: "done",
+            status: "done",
-        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+            url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-      },
+          },
-    ]);
+        ]);
     setLoading(false);
+    // } else {
+    //   const file = args.file;
+    //   const res = await store.payback.uploadImages(file);
+    //   console.log(res, "ini respon 1");
+    //   setImage(`${appConfig.apiUrl}/config/image/${initialData.image_identity}`);
+    //   setResponseFilename(initialData.image_identity);
+    //   setFileList([initialData.image_identity]);
+    //   setLoading(false);
+    // }
   };
 
   const uploadHandlerStore = async (args) => {
@@ -141,7 +159,7 @@ export const MembershipModal = ({
         name: res.body.filename,
         status: "done",
         url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-      }
+      },
     ]);
 
     setLoadingStore(false);

src/pages/Product/Category.js

@@ -46,7 +46,7 @@ export const Category = observer(() => {
   ];
 
   return (
-    <div className={[""].join(" ")}>
+    <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 20 }}>

src/pages/Product/Product.js

@@ -177,7 +177,7 @@ export const Product = observer(() => {
   };
 
   return (
-    <div className={[""].join(" ")}>
+    <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
         data={
           store.authentication.userData.role === "Admin" ||