new product template

1 files changed, 32 insertions, 9 deletions

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}`}
@@ -114,6 +131,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']}>
           {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}