price action

1 files changed, 28 insertions, 12 deletions

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 5df81dae..075ff8d1 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -25,6 +25,8 @@ import {
 } from '@heroicons/react/24/outline';
 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)
@@ -37,6 +39,10 @@ type Props = {
 const Information = ({ product }: Props) => {
   const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
     useProductDetail();
+
+  const [inputValue, setInputValue] = useState<string | null>(
+    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
+  );
   const variantOptions = product?.variants;
 
   // const querySLA = useQuery<IProductVariantSLA>({
@@ -59,12 +65,17 @@ const Information = ({ product }: Props) => {
     let code = vals.split(' ')[0];
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
+    setInputValue(variant?.code + ' - ' + variant?.attributes[0]);
+  };
+
+  const handleOnKeyUp = (e: any) => {
+    setInputValue(e.target.value);
   };
 
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
-        <label className='form-label mb-2 text-lg'>
+        <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
@@ -77,9 +88,8 @@ const Information = ({ product }: Props) => {
         >
           <InputGroup>
             <AutoCompleteInput
-              placeholder={
-                selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
-              }
+              value={inputValue as string}
+              onChange={(e) => handleOnKeyUp(e)}
             />
             <InputRightElement>
               <ChevronDownIcon className='h-6 w-6 text-gray-500' />
@@ -97,13 +107,18 @@ const Information = ({ product }: Props) => {
                   <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='grid grid-cols-3 items-end justify-items-end'>
+                    {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'>
+                          {currencyFormat(option?.price?.price)}
+                        </div>
+                      </>
+                    )}
+
                     <div className='text-danger-500 font-semibold mb-2'>
                       {currencyFormat(option?.price?.price_discount)}
                     </div>
@@ -134,7 +149,8 @@ const Information = ({ product }: Props) => {
                 height={50}
                 width={100}
                 src={product.manufacture.logo}
-                alt=''
+                alt={product.manufacture.name}
+                className='h-8 object-cover'
               />
             </Link>
           ) : (