dertail product

1 files changed, 65 insertions, 26 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 075ff8d1..8655517d 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -1,32 +1,24 @@
-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, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { useQuery } from 'react-query';
+import { useEffect, useRef, useState } from 'react';
 
-import { IProductDetail } from '~/types/product';
-import { IProductVariantSLA } from '~/types/productVariant';
+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 { 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 { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
-import Image from 'next/image';
-import useDevice from '@/core/hooks/useDevice';
-import { optimizedAppearDataAttribute } from 'framer-motion';
 
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
@@ -43,7 +35,13 @@ const Information = ({ product }: Props) => {
   const [inputValue, setInputValue] = useState<string | null>(
     selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
   );
-  const variantOptions = product?.variants;
+
+  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],
@@ -59,13 +57,29 @@ const Information = ({ product }: Props) => {
 
   useEffect(() => {
     getsla();
+    setInputValue(
+      selectedVariant?.code +
+        (selectedVariant?.attributes[0]
+          ? ' - ' + selectedVariant?.attributes[0]
+          : '')
+    );
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
     let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
-    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
+    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) => {
@@ -88,11 +102,15 @@ const Information = ({ product }: Props) => {
         >
           <InputGroup>
             <AutoCompleteInput
+              ref={inputRef}
               value={inputValue as string}
               onChange={(e) => handleOnKeyUp(e)}
             />
             <InputRightElement>
-              <ChevronDownIcon className='h-6 w-6 text-gray-500' />
+              <ChevronDownIcon
+                className='h-6 w-6 text-gray-500'
+                onClick={() => inputRef?.current?.focus()}
+              />
             </InputRightElement>
           </InputGroup>
 
@@ -100,26 +118,47 @@ const Information = ({ product }: Props) => {
             {variantOptions.map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
-                value={option.code + ' - ' + option.attributes[0]}
+                value={
+                  option.code +
+                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
+                }
+                _selected={
+                  option.id === selectedVariant?.id
+                    ? {
+                        bg: 'gray.300',
+                      }
+                    : undefined
+                }
                 textTransform='capitalize'
               >
-                <div className='flex gap-x-2 justify-between w-full'>
+                <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.code +
+                      (option?.attributes[0]
+                        ? ' - ' + option?.attributes[0]
+                        : '')}
                   </div>
-                  <div className='grid grid-cols-3 items-end justify-items-end'>
+                  <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='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                        <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='text-danger-500 font-semibold mb-2'>
+                    <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
                       {currencyFormat(option?.price?.price_discount)}
                     </div>
                   </div>