From f8133c76306d9f70e01ac510c74dcfabe7f79b37 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Mon, 26 Aug 2024 10:47:28 +0700
Subject: new product template

---
 .../product-detail/components/Information.tsx      | 41 +++++++++++++++++-----
 .../product-detail/components/PriceAction.tsx      | 33 ++++++++++++-----
 .../product-detail/components/ProductDetail.tsx    |  4 +--
 .../product-detail/styles/price-action.module.css  |  2 +-
 src-migrate/types/product.ts                       |  1 +
 5 files changed, 61 insertions(+), 20 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5d70e534..c7f21d62 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -18,7 +18,11 @@ import { getVariantSLA } from '~/services/productVariant';
 import { formatToShortText } from '~/libs/formatNumber';
 import currencyFormat from '@/core/utils/currencyFormat';
 import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
-import { CheckIcon, ChevronDownIcon, FingerPrintIcon } from '@heroicons/react/24/outline';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  FingerPrintIcon,
+} from '@heroicons/react/24/outline';
 import { useProductDetail } from '../stores/useProductDetail';
 
 const Skeleton = dynamic(() =>
@@ -30,39 +34,52 @@ type Props = {
 };
 
 const Information = ({ product }: Props) => {
-  const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail()
+  const { selectedVariant, setSelectedVariant, setSla, setActive } =
+    useProductDetail();
   const variantOptions = product?.variants;
 
   const querySLA = useQuery<IProductVariantSLA>({
     queryKey: ['variant-sla', selectedVariant?.id],
     queryFn: () => getVariantSLA(selectedVariant?.id),
-    enabled: selectedVariant?.id === 1,
+    refetchOnWindowFocus: false,
   });
   const sla = querySLA?.data;
+  console.log('sla', querySLA, selectedVariant);
 
   useEffect(() => {
     setSla(querySLA?.data);
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
-    let code = vals.split(" ")[0];
+    let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
-  }
+  };
 
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
-        <label className='form-label mb-2 text-lg'>Pilih Variant * : <span className='text-gray_r-9 text-sm'>{product?.variant_total} Variants</span>  </label>
-        <AutoComplete openOnFocus className='form-input' onChange={vals => handleOnChange(vals)}>
+        <label className='form-label mb-2 text-lg'>
+          Pilih Variant * :{' '}
+          <span className='text-gray_r-9 text-sm'>
+            {product?.variant_total} Variants
+          </span>{' '}
+        </label>
+        <AutoComplete
+          openOnFocus
+          className='form-input'
+          onChange={(vals) => handleOnChange(vals)}
+        >
           <InputGroup>
-            <AutoCompleteInput value={selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]} />
+            <AutoCompleteInput placeholder={
+                selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+              }/>
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
             </InputRightElement>
           </InputGroup>
 
-          <AutoCompleteList>
+          <AutoCompleteList >
             {variantOptions.map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
@@ -113,6 +130,12 @@ const Information = ({ product }: Props) => {
           )}
         </div>
       </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Berat Barang</div>
+        <div className={style['value']}>
+          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
+        </div>
+      </div>
       <div className={style['row']}>
         <div className={style['label']}>Terjual</div>
         <div className={style['value']}>
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 405eb12b..b46afac9 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -39,6 +39,18 @@ const PriceAction = ({ product }: Props) => {
     }
   }, [product, setActive, selectedVariant]);
 
+  let voucherPastiHemat = 0;
+
+  if (
+    product?.voucher_pasti_hemat
+      ? product?.voucher_pasti_hemat.length
+      : voucherPastiHemat > 0
+  ) {
+    const stringVoucher = product?.voucher_pasti_hemat[0];
+    const validJsonString = stringVoucher.replace(/'/g, '"');
+    voucherPastiHemat = JSON.parse(validJsonString);
+  }
+
   return (
     <div
       className='block md:sticky top-[150px] bg-white py-0 md:py-6 z-10'
@@ -88,16 +100,21 @@ const PriceAction = ({ product }: Props) => {
           <label htmlFor='quantity' className='hidden'>
             Quantity
           </label>
-          <input
-            type='number'
-            id='quantity'
-            value={quantityInput}
-            onChange={(e) => setQuantityInput(e.target.value)}
-            className={style['quantity-input']}
-          />
+          <div className='flex items-center space-x-2'>
+            <input
+              type='number'
+              id='quantity'
+              value={quantityInput}
+              onChange={(e) => setQuantityInput(e.target.value)}
+              className={style['quantity-input']}
+            />
+          </div>
         </div>
         <div>
-          <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''} > Stock : {sla?.qty} </span>
+          <span className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}>
+            {' '}
+            Stock : {sla?.qty}{' '}
+          </span>
         </div>
       </div>
       <div className='h-4' />
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 0997466c..c19c288a 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -107,13 +107,13 @@ const ProductDetail = ({ product }: Props) => {
               <ProductPromoSection productId={activeVariantId} />
             )}
 
-            <div className={style['section-card']}>
+            {/* <div className={style['section-card']}>
               <h2 className={style['heading']}>
                 Variant ({product.variant_total})
               </h2>
               <div className='h-4' />
               <VariantList variants={product.variants} />
-            </div>
+            </div> */}
 
             <div className='h-0 md:h-6' />
 
diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css
index 651de958..de69f5f1 100644
--- a/src-migrate/modules/product-detail/styles/price-action.module.css
+++ b/src-migrate/modules/product-detail/styles/price-action.module.css
@@ -8,7 +8,7 @@
     @apply flex gap-x-2.5;
 }
 .quantity-input {
-    @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none;
+    @apply px-2 rounded text-center border border-gray-300 w-24 h-10 focus:outline-none;
 }
 
 .contact-us {
diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts
index 681cdc8e..927a0ca3 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -31,6 +31,7 @@ export interface IProduct {
     id: number;
     name: string;
   };
+  voucher_pasti_hemat : any;
 }
 
 export interface IProductDetail extends IProduct {
-- 
cgit v1.2.3