update template detail product

1 files changed, 100 insertions, 26 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 75ae3c41..5d70e534 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -1,56 +1,130 @@
-import style from '../styles/information.module.css'
+import style from '../styles/information.module.css';
+import {
+  AutoComplete,
+  AutoCompleteInput,
+  AutoCompleteItem,
+  AutoCompleteList,
+} from '@choc-ui/chakra-autocomplete';
 
-import React from 'react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import { useQuery } from 'react-query'
+import React, { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { useQuery } from 'react-query';
 
-import { IProductDetail } from '~/types/product'
-import { IProductVariantSLA } from '~/types/productVariant'
-import { createSlug } from '~/libs/slug'
-import { getVariantSLA } from '~/services/productVariant'
-import { formatToShortText } from '~/libs/formatNumber'
+import { IProductDetail } from '~/types/product';
+import { IProductVariantSLA } from '~/types/productVariant';
+import { createSlug } from '~/libs/slug';
+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 { useProductDetail } from '../stores/useProductDetail';
 
-const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))
+const Skeleton = dynamic(() =>
+  import('@chakra-ui/react').then((mod) => mod.Skeleton)
+);
 
 type Props = {
-  product: IProductDetail
-}
+  product: IProductDetail;
+};
 
 const Information = ({ product }: Props) => {
+  const { selectedVariant, setSelectedVariant, setSla, setActive, } = useProductDetail()
+  const variantOptions = product?.variants;
+
   const querySLA = useQuery<IProductVariantSLA>({
-    queryKey: ['variant-sla', product.variants[0]?.id],
-    queryFn: () => getVariantSLA(product.variants[0].id),
-    enabled: product.variant_total === 1
-  })
+    queryKey: ['variant-sla', selectedVariant?.id],
+    queryFn: () => getVariantSLA(selectedVariant?.id),
+    enabled: selectedVariant?.id === 1,
+  });
+  const sla = querySLA?.data;
+
+  useEffect(() => {
+    setSla(querySLA?.data);
+  }, [selectedVariant]);
 
-  const sla = querySLA?.data
+  const handleOnChange = (vals: any) => {
+    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)}>
+          <InputGroup>
+            <AutoCompleteInput value={selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]} />
+            <InputRightElement>
+              <ChevronDownIcon className='h-6 w-6 text-gray-500' />
+            </InputRightElement>
+          </InputGroup>
+
+          <AutoCompleteList>
+            {variantOptions.map((option, cid) => (
+              <AutoCompleteItem
+                key={`option-${cid}`}
+                value={option.code + ' - ' + option.attributes[0]}
+                textTransform='capitalize'
+              >
+                <div className='flex gap-x-2 justify-between w-full'>
+                  <div className='text-small'>
+                    {option.code + ' - ' + option.attributes[0]}
+                  </div>
+                  <div className='grid grid-cols-3 items-start'>
+                    <div className='badge-solid-red text-xs'>
+                      {Math.floor(option?.price?.discount_percentage)}%
+                    </div>
+                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                      {currencyFormat(option?.price?.price)}
+                    </div>
+                    <div className='text-danger-500 font-semibold mb-2'>
+                      {currencyFormat(option?.price?.price_discount)}
+                    </div>
+                  </div>
+                </div>
+              </AutoCompleteItem>
+            ))}
+          </AutoCompleteList>
+        </AutoComplete>
+      </div>
       <div className={style['row']}>
-        <div className={style['label']}>SKU Number</div>
-        <div className={style['value']}>SKU-{product.id}</div>
+        <div className={style['label']}>Item Code</div>
+        <div className={style['value']}>{selectedVariant?.code}</div>
       </div>
       <div className={style['row']}>
         <div className={style['label']}>Manufacture</div>
         <div className={style['value']}>
           {!!product.manufacture.name ? (
             <Link
-              href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture.name,
+                product.manufacture.id.toString()
+              )}
               className='text-danger-500 hover:underline'
             >
               {product.manufacture.name}
             </Link>
-          ) : '-'}
+          ) : (
+            '-'
+          )}
         </div>
       </div>
       <div className={style['row']}>
         <div className={style['label']}>Terjual</div>
-        <div className={style['value']}>{product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}</div>
+        <div className={style['value']}>
+          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
+        </div>
+      </div>
+      <div className={style['row']}>
+        <div className={style['label']}>Persiapan Barang</div>
+        <div className={style['value']}>{sla?.sla_date}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Information
\ No newline at end of file
+export default Information;