<iman> update mobile image

3 files changed, 105 insertions, 90 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 29710df8..96ae2027 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -35,10 +35,12 @@ const Image = ({ product }: Props) => {
   }, [flashSale?.remaining_time]);
 
   const duration = moment.duration(count, 'seconds');
-  console.log('product', product);
   const image = useMemo(() => {
-    if (isMobile && product.image_mobile) {
+    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]);
 
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index d3b50302..a480bbdd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -10,12 +10,13 @@ import { sellingProductFormat } from '@/core/utils/formatValue';
 import { createSlug } from '@/core/utils/slug';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import useUtmSource from '~/hooks/useUtmSource';
+import useDevice from '@/core/hooks/useDevice';
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const router = useRouter();
   const utmSource = useUtmSource();
   const [discount, setDiscount] = useState(0);
-
+  const { isDesktop, isMobile } = useDevice();
   let voucherPastiHemat = 0;
   voucherPastiHemat = product?.newVoucherPastiHemat[0];
 
@@ -26,9 +27,13 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   });
 
   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]);
 
   const URL = {
     product: