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

3 files changed, 75 insertions, 67 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 b9f4be91..5e1ea186 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -96,7 +96,7 @@ const Information = ({ product }: Props) => {
         <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
+            {product?.variants?.length} Variants
           </span>{' '}
         </label>
         <AutoComplete
@@ -190,13 +190,19 @@ const Information = ({ product }: Props) => {
                 product.manufacture.id.toString()
               )}
             >
-              <Image
-                height={50}
-                width={100}
-                src={product.manufacture.logo}
-                alt={product.manufacture.name}
-                className='h-8 object-fit'
-              />
+              {product?.manufacture.logo ? (
+                <Image
+                  height={50}
+                  width={100}
+                  src={product.manufacture.logo}
+                  alt={product.manufacture.name}
+                  className='h-8 object-fit'
+                />
+              ) : (
+                <p className='font-bold text-red-500'>
+                  {product.manufacture.name}
+                </p>
+              )}
             </Link>
           ) : (
             '-'
diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx
index 413c643a..0b27b1b3 100644
--- a/src-migrate/modules/product-detail/components/PriceAction.tsx
+++ b/src-migrate/modules/product-detail/components/PriceAction.tsx
@@ -162,7 +162,7 @@ const PriceAction = ({ product }: Props) => {
           </span> */}
         </div>
         <div>
-          {product?.is_in_bu && (
+          {selectedVariant?.is_in_bu && (
             <Link href='/panduan-pick-up-service' className='group'>
               <Image
                 src='/images/PICKUP-NOW.png'