Merge branch 'new-release' into feature/integrasi_biteship

2 files changed, 66 insertions, 60 deletions

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 30ca0d34..96ae2027 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,22 +1,22 @@
 import style from '../styles/image.module.css';
 import ImageNext from 'next/image';
-import React, { useEffect, useMemo, useState } from 'react'
-import { InfoIcon } from 'lucide-react'
-import { Tooltip } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useState } from 'react';
+import { InfoIcon } from 'lucide-react';
+import { Tooltip } from '@chakra-ui/react';
 
-import { IProductDetail } from '~/types/product'
-import ImageUI from '~/components/ui/image'
+import { IProductDetail } from '~/types/product';
+import ImageUI from '~/components/ui/image';
 import moment from 'moment';
-
+import useDevice from '@/core/hooks/useDevice';
 type Props = {
-  product: IProductDetail
-}
+  product: IProductDetail;
+};
 
 const Image = ({ product }: Props) => {
-  const flashSale = product.flash_sale
+  const flashSale = product.flash_sale;
   const [count, setCount] = useState(flashSale?.remaining_time || 0);
 
-  
+  const { isDesktop, isMobile } = useDevice();
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -34,59 +34,60 @@ const Image = ({ product }: Props) => {
     };
   }, [flashSale?.remaining_time]);
 
-  const duration = moment.duration(count, 'seconds')
-
+  const duration = moment.duration(count, 'seconds');
   const image = useMemo(() => {
-    if (product.image) return product.image + '?ratio=square'
-    return '/images/noimage.jpeg'
-  }, [product.image])
+    if (!isDesktop && product.image_mobile) {
+      return product.image_mobile + '?ratio=square';
+    } else {
+      if (product.image) return product.image + '?ratio=square';
+      return '/images/noimage.jpeg';
+    }
+  }, [product.image, product.image_mobile]);
 
   return (
     <div className={style['wrapper']}>
       {/* <div className="relative"> */}
-          <ImageUI
-            src={image}
-            alt={product.name}
-            width={256}
-            height={256}
-            className={style['image']}
-            loading='eager'
-            priority
-          />
-          <div className="absolute top-4 right-10 flex  ">
-            <div className="gambarB ">
-              {product.isSni && (
-                <ImageNext
-                  src="/images/sni-logo.png"
-                  alt="SNI Logo"
-                  className="w-12 h-8 object-contain object-top   sm:h-6"
-                  width={50}
-                  height={50}
-                />
-              )}
-            </div>
-            <div className="gambarC  ">
-              {product.isTkdn && (
-                <ImageNext
-                  src="/images/TKDN.png"
-                  alt="TKDN"
-                  className="w-16 h-8 object-contain object-top  ml-1 mr-1 sm:h-6"
-                  width={50}
-                  height={50}
-                />
-              )}
-            </div>
-          </div>
-        {/* </div> */}
-      
-      
+      <ImageUI
+        src={image}
+        alt={product.name}
+        width={256}
+        height={256}
+        className={style['image']}
+        loading='eager'
+        priority
+      />
+      <div className='absolute top-4 right-10 flex  '>
+        <div className='gambarB '>
+          {product.isSni && (
+            <ImageNext
+              src='/images/sni-logo.png'
+              alt='SNI Logo'
+              className='w-12 h-8 object-contain object-top   sm:h-6'
+              width={50}
+              height={50}
+            />
+          )}
+        </div>
+        <div className='gambarC  '>
+          {product.isTkdn && (
+            <ImageNext
+              src='/images/TKDN.png'
+              alt='TKDN'
+              className='w-16 h-8 object-contain object-top  ml-1 mr-1 sm:h-6'
+              width={50}
+              height={50}
+            />
+          )}
+        </div>
+      </div>
+      {/* </div> */}
 
       <div className={style['absolute-info']}>
         <Tooltip
           placement='bottom-end'
           label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
         >
-          <div className="text-gray-600">
+          <div className='text-gray-600'>
             <InfoIcon size={20} />
           </div>
         </Tooltip>
@@ -94,7 +95,7 @@ const Image = ({ product }: Props) => {
 
       {flashSale.remaining_time > 0 && (
         <div className='absolute bottom-0 w-full h-14'>
-          <div className="relative w-full h-full">
+          <div className='relative w-full h-full'>
             <ImageUI
               src='/images/BG-FLASH-SALE.jpg'
               alt='Flash Sale Indoteknik'
@@ -105,7 +106,9 @@ const Image = ({ product }: Props) => {
 
             <div className={style['flashsale']}>
               <div className='flex items-center gap-x-3'>
-                <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div>
+                <div className={style['disc-badge']}>
+                  {Math.floor(product.lowest_price.discount_percentage)}%
+                </div>
                 <div className={style['flashsale-text']}>
                   <ImageUI
                     src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
@@ -122,12 +125,11 @@ const Image = ({ product }: Props) => {
                 <span>{duration.seconds().toString().padStart(2, '0')}</span>
               </div>
             </div>
-
           </div>
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Image
\ No newline at end of file
+export default Image;
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index ec606423..b9f4be91 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -35,7 +35,7 @@ const Information = ({ product }: Props) => {
   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[]>(
@@ -68,6 +68,7 @@ const Information = ({ product }: Props) => {
   }, [selectedVariant]);
 
   const handleOnChange = (vals: any) => {
+    setDisableFilter(true);
     let code = vals.replace(/\s-\s.*$/, '').trim();
     let variant = variantOptions.find((item) => item.code === code);
     setSelectedVariant(variant);
@@ -85,6 +86,7 @@ const Information = ({ product }: Props) => {
   };
 
   const handleOnKeyUp = (e: any) => {
+    setDisableFilter(false);
     setInputValue(e.target.value);
   };
 
@@ -98,6 +100,7 @@ const Information = ({ product }: Props) => {
           </span>{' '}
         </label>
         <AutoComplete
+          disableFilter={disableFilter}
           openOnFocus
           className='form-input'
           onChange={(vals) => handleOnChange(vals)}
@@ -107,8 +110,9 @@ const Information = ({ product }: Props) => {
               ref={inputRef}
               value={inputValue as string}
               onChange={(e) => handleOnKeyUp(e)}
+              onFocus={() => setDisableFilter(true)}
             />
-            <InputRightElement>
+            <InputRightElement className='mr-4'>
               <ChevronDownIcon
                 className='h-6 w-6 text-gray-500'
                 onClick={() => inputRef?.current?.focus()}