Merge branch 'new-release' into Feature/pengajuan-tempo

1 files changed, 199 insertions, 29 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 75ae3c41..b9f4be91 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -1,56 +1,226 @@
-import style from '../styles/information.module.css'
+import {
+  AutoComplete,
+  AutoCompleteInput,
+  AutoCompleteItem,
+  AutoCompleteList,
+} from '@choc-ui/chakra-autocomplete';
+import style from '../styles/information.module.css';
 
-import React from 'react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import { useQuery } from 'react-query'
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
 
-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 { InputGroup, InputRightElement } from '@chakra-ui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
+import { formatToShortText } from '~/libs/formatNumber';
+import { createSlug } from '~/libs/slug';
+import { getVariantSLA } from '~/services/productVariant';
+import { IProductDetail } from '~/types/product';
+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 querySLA = useQuery<IProductVariantSLA>({
-    queryKey: ['variant-sla', product.variants[0]?.id],
-    queryFn: () => getVariantSLA(product.variants[0].id),
-    enabled: product.variant_total === 1
-  })
+  const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
+    useProductDetail();
 
-  const sla = querySLA?.data
+  const [inputValue, setInputValue] = useState<string | null>(
+    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+  );
+  const [disableFilter, setDisableFilter] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [variantOptions, setVariantOptions] = useState<any[]>(
+    product?.variants
+  );
+  // let variantOptions = product?.variants;
+
+  // const querySLA = useQuery<IProductVariantSLA>({
+  //   queryKey: ['variant-sla', selectedVariant?.id],
+  //   queryFn: () => getVariantSLA(selectedVariant?.id),
+  //   enabled: !!selectedVariant?.id,
+  // });
+  // const sla = querySLA?.data;
+
+  const getsla = async () => {
+    const querySLA = await getVariantSLA(selectedVariant?.id);
+    setSla(querySLA);
+  };
+
+  useEffect(() => {
+    if (selectedVariant) {
+      getsla();
+      setInputValue(
+        selectedVariant?.code +
+          (selectedVariant?.attributes[0]
+            ? ' - ' + selectedVariant?.attributes[0]
+            : '')
+      );
+    }
+  }, [selectedVariant]);
+
+  const handleOnChange = (vals: any) => {
+    setDisableFilter(true);
+    let code = vals.replace(/\s-\s.*$/, '').trim();
+    let variant = variantOptions.find((item) => item.code === code);
+    setSelectedVariant(variant);
+    setInputValue(
+      variant?.code +
+        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+    );
+    if (variant) {
+      const filteredOptions = product?.variants.filter(
+        (item) => item !== variant
+      );
+      const newOptions = [variant, ...filteredOptions];
+      setVariantOptions(newOptions);
+    }
+  };
+
+  const handleOnKeyUp = (e: any) => {
+    setDisableFilter(false);
+    setInputValue(e.target.value);
+  };
 
   return (
     <div className={style['wrapper']}>
+      <div className='realtive mb-5'>
+        <label className='form-label mb-2 text-lg text-red-600'>
+          Pilih Variant * :{' '}
+          <span className='text-gray_r-9 text-sm'>
+            {product?.variant_total} Variants
+          </span>{' '}
+        </label>
+        <AutoComplete
+          disableFilter={disableFilter}
+          openOnFocus
+          className='form-input'
+          onChange={(vals) => handleOnChange(vals)}
+        >
+          <InputGroup>
+            <AutoCompleteInput
+              ref={inputRef}
+              value={inputValue as string}
+              onChange={(e) => handleOnKeyUp(e)}
+              onFocus={() => setDisableFilter(true)}
+            />
+            <InputRightElement className='mr-4'>
+              <ChevronDownIcon
+                className='h-6 w-6 text-gray-500'
+                onClick={() => inputRef?.current?.focus()}
+              />
+            </InputRightElement>
+          </InputGroup>
+
+          <AutoCompleteList>
+            {variantOptions.map((option, cid) => (
+              <AutoCompleteItem
+                key={`option-${cid}`}
+                value={
+                  option.code +
+                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
+                }
+                _selected={
+                  option.id === selectedVariant?.id
+                    ? {
+                        bg: 'gray.300',
+                      }
+                    : undefined
+                }
+                textTransform='capitalize'
+              >
+                <div
+                  key={cid}
+                  className='flex gap-x-2 w-full justify-between px-3 items-center p-2'
+                >
+                  <div className='text-small'>
+                    {option.code +
+                      (option?.attributes[0]
+                        ? ' - ' + option?.attributes[0]
+                        : '')}
+                  </div>
+                  <div
+                    className={
+                      option?.price?.discount_percentage
+                        ? 'flex gap-x-4 items-center justify-between'
+                        : ''
+                    }
+                  >
+                    {option?.price?.discount_percentage > 0 && (
+                      <>
+                        <div className='badge-solid-red text-xs'>
+                          {Math.floor(option?.price?.discount_percentage)}%
+                        </div>
+                        <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                          {currencyFormat(option?.price?.price)}
+                        </div>
+                      </>
+                    )}
+                    <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
+                      {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())}
-              className='text-danger-500 hover:underline'
+              href={createSlug(
+                '/shop/brands/',
+                product.manufacture.name,
+                product.manufacture.id.toString()
+              )}
             >
-              {product.manufacture.name}
+              <Image
+                height={50}
+                width={100}
+                src={product.manufacture.logo}
+                alt={product.manufacture.name}
+                className='h-8 object-fit'
+              />
             </Link>
-          ) : '-'}
+          ) : (
+            '-'
+          )}
+        </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) : '-'}</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;