Merged in CR/image-mobile (pull request #373)

CR/image mobile

3 files changed, 153 insertions, 142 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 0febfadb..a439cdc8 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,95 +1,108 @@
-import style from '../styles/product-card.module.css'
+import style from '../styles/product-card.module.css';
 import ImageNext from 'next/image';
-import clsx from 'clsx'
-import Link from 'next/link'
-import React, { useEffect, useMemo, useState } from 'react'
-import Image from '~/components/ui/image'
-import useUtmSource from '~/hooks/useUtmSource'
-import clsxm from '~/libs/clsxm'
-import formatCurrency from '~/libs/formatCurrency'
-import { formatToShortText } from '~/libs/formatNumber'
-import { createSlug } from '~/libs/slug'
-import { IProduct } from '~/types/product'
-
+import clsx from 'clsx';
+import Link from 'next/link';
+import React, { useEffect, useMemo, useState } from 'react';
+import Image from '~/components/ui/image';
+import useUtmSource from '~/hooks/useUtmSource';
+import clsxm from '~/libs/clsxm';
+import formatCurrency from '~/libs/formatCurrency';
+import { formatToShortText } from '~/libs/formatNumber';
+import { createSlug } from '~/libs/slug';
+import { IProduct } from '~/types/product';
+import useDevice from '@/core/hooks/useDevice';
 type Props = {
-  product: IProduct
-  layout?: 'vertical' | 'horizontal'
-}
+  product: IProduct;
+  layout?: 'vertical' | 'horizontal';
+};
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
-  const utmSource = useUtmSource()
-  
+  const utmSource = useUtmSource();
+  const { isDesktop, isMobile } = useDevice();
 
   const URL = {
-    product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
-    manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
-  }
+    product:
+      createSlug('/shop/product/', product.name, product.id.toString()) +
+      `?utm_source=${utmSource}`,
+    manufacture: createSlug(
+      '/shop/brands/',
+      product.manufacture.name,
+      product.manufacture.id.toString()
+    ),
+  };
 
   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={clsxm(style['wrapper'], {
-      [style['wrapper-v']]: layout === 'vertical',
-      [style['wrapper-h']]: layout === 'horizontal',
-    })}
+    <div
+      className={clsxm(style['wrapper'], {
+        [style['wrapper-v']]: layout === 'vertical',
+        [style['wrapper-h']]: layout === 'horizontal',
+      })}
     >
-      <div className={clsxm('relative', {
-        [style['image-v']]: layout === 'vertical',
-        [style['image-h']]: layout === 'horizontal',
-      })}>
+      <div
+        className={clsxm('relative', {
+          [style['image-v']]: layout === 'vertical',
+          [style['image-h']]: layout === 'horizontal',
+        })}
+      >
         <Link href={URL.product}>
-          
-        <div className="relative">
-          <Image
-            src={image}
-            alt={product.name}
-            width={128}
-            height={128}
-            className='object-contain object-center h-full w-full'
-          />
-          <div className="absolute top-0 right-0 flex  mt-2">
-            <div className="gambarB ">
-              {product.isSni && (
-                <ImageNext
-                  src="/images/sni-logo.png"
-                  alt="SNI Logo"
-                  className="w-3 h-4 object-contain object-top   sm:h-4"
-                  width={50}
-                  height={50}
-                />
-              )}
-            </div>
-            <div className="gambarC  ">
-              {product.isTkdn && (
-                <ImageNext
-                  src="/images/TKDN.png"
-                  alt="TKDN"
-                  className="w-5 h-4 object-contain object-top  ml-1 mr-1 sm:h-6"
-                  width={50}
-                  height={50}
-                />
-              )}
+          <div className='relative'>
+            <Image
+              src={image}
+              alt={product.name}
+              width={128}
+              height={128}
+              className='object-contain object-center h-full w-full'
+            />
+            <div className='absolute top-0 right-0 flex  mt-2'>
+              <div className='gambarB '>
+                {product.isSni && (
+                  <ImageNext
+                    src='/images/sni-logo.png'
+                    alt='SNI Logo'
+                    className='w-3 h-4 object-contain object-top   sm:h-4'
+                    width={50}
+                    height={50}
+                  />
+                )}
+              </div>
+              <div className='gambarC  '>
+                {product.isTkdn && (
+                  <ImageNext
+                    src='/images/TKDN.png'
+                    alt='TKDN'
+                    className='w-5 h-4 object-contain object-top  ml-1 mr-1 sm:h-6'
+                    width={50}
+                    height={50}
+                  />
+                )}
+              </div>
             </div>
           </div>
-        </div>
 
           {product.variant_total > 1 && (
-            <div className={style['variant-badge']}>{product.variant_total} Varian</div>
+            <div className={style['variant-badge']}>
+              {product.variant_total} Varian
+            </div>
           )}
         </Link>
       </div>
 
-      <div className={clsxm({
-        [style['content-v']]: layout === 'vertical',
-        [style['content-h']]: layout === 'horizontal',
-      })}>
-        <Link
-          href={URL.manufacture}
-          className={style['brand']}
-        >
+      <div
+        className={clsxm({
+          [style['content-v']]: layout === 'vertical',
+          [style['content-h']]: layout === 'horizontal',
+        })}
+      >
+        <Link href={URL.manufacture} className={style['brand']}>
           {product.manufacture.name}
         </Link>
 
@@ -113,17 +126,15 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
         <div className='h-1.5' />
 
         <div className={style['price-inc']}>
-          Inc PPN:
-          Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
+          Inc PPN: Rp{' '}
+          {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
         </div>
 
         <div className='h-1' />
 
         <div className='flex items-center gap-x-2.5'>
           {product.stock_total > 0 && (
-            <div className={style['ready-stock']}>
-              Ready Stock
-            </div>
+            <div className={style['ready-stock']}>Ready Stock</div>
           )}
           {product.qty_sold > 0 && (
             <div className={style['sold']}>
@@ -131,14 +142,11 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             </div>
           )}
         </div>
-
       </div>
     </div>
-  )
-}
-
-const classPrefix = ({ layout }: Props) => {
+  );
+};
 
-}
+const classPrefix = ({ layout }: Props) => {};
 
-export default ProductCard
\ No newline at end of file
+export default ProductCard;
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/types/product.ts b/src-migrate/types/product.ts
index 31ea0ce1..e43a5ebb 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -3,6 +3,7 @@ import { IProductVariantDetail } from './productVariant';
 export interface IProduct {
   id: number;
   image: string;
+  image_mobile: string;
   code: string;
   display_name: string;
   name: string;