From 60497cfbdf29df106d3d4270bfd480f270f16098 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 25 Mar 2024 16:52:42 +0700
Subject: generate recomendation

---
 .../components/products-recomendatison.jsx         | 278 ++++++++++++++++++---
 1 file changed, 247 insertions(+), 31 deletions(-)

(limited to 'src/pages/my/recomendation/components/products-recomendatison.jsx')

diff --git a/src/pages/my/recomendation/components/products-recomendatison.jsx b/src/pages/my/recomendation/components/products-recomendatison.jsx
index c20aaa5b..72b858e8 100644
--- a/src/pages/my/recomendation/components/products-recomendatison.jsx
+++ b/src/pages/my/recomendation/components/products-recomendatison.jsx
@@ -1,19 +1,79 @@
 import Menu from '@/lib/auth/components/Menu';
-import { useState } from 'react';
-import * as XLSX from 'xlsx'; 
+import { useEffect, useState } from 'react';
+import * as XLSX from 'xlsx';
+import GenerateRecomendations from '../api/recomendation';
+import axios from 'axios';
+import { Button, Link } from '@chakra-ui/react';
+import Image from 'next/image';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import formatCurrency from '~/libs/formatCurrency';
 
 const ProductsRecomendation = ({ id }) => {
   const [excelData, setExcelData] = useState(null);
+  const [products, setProducts] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [variantsOpen, setVariantsOpen] = useState([]);
 
-  const handleSubmit = (e) => {
+  const mappingProducts = async ({ index, product, result, variants }) => {
+    const resultMapping = {
+      index : index,
+      product: product,
+      result: {
+        id: result?.id || '-',
+        name: result?.displayName || '-',
+        code: result?.code || '-',
+        image: result?.image || '-',
+        price: result?.lowestPrice.priceDiscount || '-',
+        manufacture: result?.manufacture.name || '-',
+        variantTotal: result?.variantTotal || '-',
+        variants: variants || '-',
+      },
+    };
+
+    return resultMapping;
+  };
+
+  const searchRecomendation = async ({ product, index }) => {
+    let variants = [];
+    const searchProduct = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/generate-recomendation?q=${product}`
+    );
+
+    const result =
+      searchProduct.data.response.numFound > 0
+        ? searchProduct.data.response.products[0]
+        : null;
+
+    if (result?.variantTotal > 1) {
+      const searchVariants = await axios.post(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=${result.id}`
+      );
+      variants = searchVariants.data[0].variants;
+    }
+
+    const resultMapping = await mappingProducts({ index, product, result, variants });
+
+    return resultMapping;
+  };
+
+  const handleSubmit = async (e) => {
+    setIsLoading(true);
     e.preventDefault();
     if (excelData) {
-      // Lakukan operasi pencarian atau operasi lainnya di sini
-      console.log('ini data excel',excelData); // Contoh: Menampilkan data excel ke konsol
+      const results = await Promise.all(
+        excelData.map(async (row, i) => {
+          const index = i + 1;
+          const product = row[0];
+          return await searchRecomendation({ product, index });
+        })
+      ).then((results) => setProducts(results));
+      setIsLoading(false);
     } else {
       console.log('No excel data available');
     }
   };
+
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     const reader = new FileReader();
@@ -27,36 +87,107 @@ const ProductsRecomendation = ({ id }) => {
     };
     reader.readAsArrayBuffer(file);
   };
+
+  const handleVariantsOpen = ({ variants }) => {
+    setVariantsOpen(variants);
+    setIsOpen(true);
+  };
+  const hadnliChooseVariants = ({ id, variant }) => {
+    let foundIndex = products.findIndex((item) => item.result.id === id);
+    if (foundIndex !== -1) {
+      products[foundIndex].result.code = variant?.code;
+      products[foundIndex].result.name = variant?.name;
+    } else {
+      console.log('Data not found.');
+    }
+    setIsOpen(false);
+  };
   return (
-    <div className='container mx-auto flex py-10'>
-      <div className='w-3/12 pr-4'>
-        <Menu />
-      </div>
-      <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-        <div className='flex mb-6 items-center justify-between'>
-          <h1 className='text-title-sm font-semibold'>
-            Generate Recomendation
-          </h1>
-        </div>
-        <div className='group'>
-          <h1 className='text-sm  font-semibold'>Contoh Excel</h1>
+    <>
+      <BottomPopup
+        active={isOpen}
+        close={() => setIsOpen(false)}
+        className='w-full md:!w-[60%]'
+        title='List Variants'
+      >
+        <div className='container'>
           <table className='table-data'>
             <thead>
               <tr>
-                <th>Product</th>
-                <th>Qty</th>
+                <th>Part Number</th>
+                <th>Variants </th>
+                <th>Harga </th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>Tekiro Long Nose Pliers Tang Lancip</td>
-                <td>10</td>
-              </tr>
+              {variantsOpen?.map((variant, index) => (
+                <tr key={index}>
+                  <td>{variant.code}</td>
+                  <td>{variant.attributes.join(', ') || '-'}</td>
+                  <td>
+                    {variant.price.discountPercentage > 0 && (
+                      <div className='flex items-center gap-x-1'>
+                        <div className={style['disc-badge']}>
+                          {Math.floor(variant.price.discountPercentage)}%
+                        </div>
+                        <div className={style['disc-price']}>
+                          Rp {formatCurrency(variant.price.price)}
+                        </div>
+                      </div>
+                    )}
+                    {variant.price.priceDiscount > 0 &&
+                      `Rp ${formatCurrency(variant.price.priceDiscount)}`}
+                    {variant.price.priceDiscount === 0 && '-'}
+                  </td>
+                  <td>
+                    <Button
+                      size='sm'
+                      w='100%'
+                      onClick={() =>
+                        hadnliChooseVariants({
+                          id: variant.parent.id,
+                          variant: variant,
+                        })
+                      }
+                    >
+                      Pilih
+                    </Button>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>
-        <div className='container mx-auto mt-8'>
-          <form onSubmit={handleSubmit}>
+      </BottomPopup>
+      <div className='container mx-auto flex py-10'>
+        <div className='w-3/12 pr-4'>
+          <Menu />
+        </div>
+        <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+          <div className='flex mb-6 items-center justify-between'>
+            <h1 className='text-title-sm font-semibold'>
+              Generate Recomendation
+            </h1>
+          </div>
+          <div className='group'>
+            <h1 className='text-sm  font-semibold'>Contoh Excel</h1>
+            <table className='table-data'>
+              <thead>
+                <tr>
+                  <th>Product</th>
+                  <th>Qty</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Tekiro Long Nose Pliers Tang Lancip</td>
+                  <td>10</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className='container mx-auto mt-8'>
             <div className='mb-4'>
               <label htmlFor='excelFile' className='text-sm  font-semibold'>
                 Upload Excel File (.xlsx)
@@ -69,16 +200,101 @@ const ProductsRecomendation = ({ id }) => {
                 className='mt-1 p-2 block w-full border border-gray-300 rounded-md focus:outline-none focus:border-blue-500'
               />
             </div>
-            <button
-              type='submit'
-              className='bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600'
+            <Button
+              colorScheme='red'
+              w='l'
+              isDisabled={isLoading}
+              onClick={handleSubmit}
             >
               Generate
-            </button>
-          </form>
+            </Button>
+          </div>
+          <div className='grup mt-8'>
+            {products && products.length > 0 && (
+              <div className='group'>
+                <table className='table-data'>
+                  <thead>
+                    <tr>
+                      <th>Product</th>
+                      <th>Item code</th>
+                      <th>Keterangan</th>
+                      <th>Brand</th>
+                      <th>Harga</th>
+                      <th>Image</th>
+                      <th>lainnya</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {products.map((product, index) => (
+                      <tr key={index}>
+                        <td>{product?.product}</td>
+                        <td>
+                          {product?.result?.code === '-' &&
+                            product.result.variantTotal > 1 && (
+                              <Button
+                                border='2px'
+                                borderColor='yellow.300'
+                                size='sm'
+                                onClick={() =>
+                                  handleVariantsOpen({
+                                    variants: product?.result?.variants,
+                                  })
+                                }
+                              >
+                                Lihat Variants
+                              </Button>
+                            )}
+                          {product?.result.code !== '-' &&
+                          product?.result.variantTotal > 1 ? (
+                            <>
+                              {product?.result.code}
+                              <Button
+                                variant='link'
+                                colorScheme='yellow'
+                                size='sm'
+                                onClick={() =>
+                                  handleVariantsOpen({
+                                    variants: product?.result?.variants,
+                                  })
+                                }
+                              >
+                                Variants lainya
+                              </Button>
+                            </>
+                          ) : (
+                            <>{product?.result.code}</>
+                          )}
+                        </td>
+                        <td>{product?.result.name}</td>
+                        <td>{product?.result.manufacture}</td>
+                        <td>
+                          {product?.result.price !== '-'
+                            ? `Rp ${formatCurrency(product?.result.price)}`
+                            : '-'}
+                        </td>
+                        <td>
+                          {product?.result.image !== '-' ? (
+                            <Image
+                              src={product?.result.image}
+                              width={100}
+                              height={100}
+                              alt={product?.result.name}
+                            />
+                          ) : (
+                            '-'
+                          )}
+                        </td>
+                        <td></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
-- 
cgit v1.2.3

