From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 .../modules/product-detail/components/Image.tsx    | 37 ++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src-migrate/modules/product-detail/components/Image.tsx

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
new file mode 100644
index 00000000..361580ea
--- /dev/null
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { InfoIcon } from 'lucide-react'
+import { Tooltip } from '@chakra-ui/react'
+
+import { IProductDetail } from '~/types/product'
+import ImageUI from '~/components/ui/image'
+
+type Props = {
+  product: IProductDetail
+}
+
+const Image = ({ product }: Props) => {
+  return (
+    <div className='h-[340px] border border-gray-200 rounded-lg p-2 relative'>
+      <ImageUI
+        src={product.image || '/images/noimage.jpeg'}
+        alt={product.name}
+        width={512}
+        height={512}
+        className='object-contain object-center h-full'
+        classNames={{ wrapper: 'h-full' }}
+      />
+      <div className='absolute hidden md:block top-4 right-4'>
+        <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">
+            <InfoIcon size={20} />
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default Image
\ No newline at end of file
-- 
cgit v1.2.3


From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 16 Jan 2024 16:08:43 +0700
Subject: Update improve product detail performance

---
 src-migrate/modules/product-detail/components/Image.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 361580ea..2c5e989b 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -11,14 +11,16 @@ type Props = {
 
 const Image = ({ product }: Props) => {
   return (
-    <div className='h-[340px] border border-gray-200 rounded-lg p-2 relative'>
+    <div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'>
       <ImageUI
         src={product.image || '/images/noimage.jpeg'}
         alt={product.name}
-        width={512}
-        height={512}
-        className='object-contain object-center h-full'
-        classNames={{ wrapper: 'h-full' }}
+        width={256}
+        height={256}
+        className='object-contain object-center h-full w-full'
+        classNames={{ wrapper: 'h-full w-full' }}
+        loading='eager'
+        priority
       />
       <div className='absolute hidden md:block top-4 right-4'>
         <Tooltip
-- 
cgit v1.2.3


From 7072d220bc86b56e76716d114e28af98219e3f69 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 17 Jan 2024 09:54:59 +0700
Subject: Update image for performance

---
 src-migrate/modules/product-detail/components/Image.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 2c5e989b..6ec715d8 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -18,7 +18,6 @@ const Image = ({ product }: Props) => {
         width={256}
         height={256}
         className='object-contain object-center h-full w-full'
-        classNames={{ wrapper: 'h-full w-full' }}
         loading='eager'
         priority
       />
-- 
cgit v1.2.3


From 5ac82c38ed3ec4db1fe4ae96e7493a55154716ef Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 18 Jan 2024 16:24:54 +0700
Subject: Update product detail page

---
 .../modules/product-detail/components/Image.tsx    | 69 ++++++++++++++++++++--
 1 file changed, 65 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 6ec715d8..2ab3ff59 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,27 +1,53 @@
-import React from 'react'
+import style from '../styles/image.module.css';
+
+import React, { useEffect, 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 moment from 'moment';
 
 type Props = {
   product: IProductDetail
 }
 
 const Image = ({ product }: Props) => {
+  const flashSale = product.flash_sale
+
+  const [count, setCount] = useState(flashSale?.remaining_time || 0);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (flashSale?.remaining_time && flashSale.remaining_time > 0) {
+      setCount(flashSale.remaining_time);
+
+      interval = setInterval(() => {
+        setCount((prevCount) => prevCount - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [flashSale?.remaining_time]);
+
+  const duration = moment.duration(count, 'seconds')
+
   return (
-    <div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'>
+    <div className={style['wrapper']}>
       <ImageUI
         src={product.image || '/images/noimage.jpeg'}
         alt={product.name}
         width={256}
         height={256}
-        className='object-contain object-center h-full w-full'
+        className={style['image']}
         loading='eager'
         priority
       />
-      <div className='absolute hidden md:block top-4 right-4'>
+
+      <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.'
@@ -31,6 +57,41 @@ const Image = ({ product }: Props) => {
           </div>
         </Tooltip>
       </div>
+
+      {flashSale.remaining_time > 0 && (
+        <div className='absolute bottom-0 w-full h-14'>
+          <div className="relative w-full h-full">
+            <ImageUI
+              src='/images/GAMBAR-BG-FLASH-SALE.jpg'
+              alt='Flash Sale Indoteknik'
+              width={200}
+              height={100}
+              className={style['flashsale-bg']}
+            />
+
+            <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['flashsale-text']}>
+                  <ImageUI
+                    src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                    alt='Icon Flash Sale'
+                    width={20}
+                    height={20}
+                  />
+                  {product.flash_sale.tag}
+                </div>
+              </div>
+              <div className={style['countdown']}>
+                <span>{duration.hours().toString().padStart(2, '0')}</span>
+                <span>{duration.minutes().toString().padStart(2, '0')}</span>
+                <span>{duration.seconds().toString().padStart(2, '0')}</span>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      )}
     </div>
   )
 }
-- 
cgit v1.2.3


From 97d079e4b64aa02a51e5ab877a73f7f23c7c6296 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 22 Jan 2024 14:51:31 +0700
Subject: Add watermark on product image

---
 src-migrate/modules/product-detail/components/Image.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 2ab3ff59..fffe1480 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,6 +1,6 @@
 import style from '../styles/image.module.css';
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { InfoIcon } from 'lucide-react'
 import { Tooltip } from '@chakra-ui/react'
 
@@ -35,10 +35,15 @@ const Image = ({ product }: Props) => {
 
   const duration = moment.duration(count, 'seconds')
 
+  const image = useMemo(() => {
+    if (product.image) return product.image + '?watermark=true'
+    return '/images/noimage.jpeg'
+  }, [product.image])
+
   return (
     <div className={style['wrapper']}>
       <ImageUI
-        src={product.image || '/images/noimage.jpeg'}
+        src={image}
         alt={product.name}
         width={256}
         height={256}
-- 
cgit v1.2.3


From 8ddb3b49117d60f4e389161b356a12f3355b5a78 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 25 Jan 2024 14:51:22 +0700
Subject: Add square ratio on product image

---
 src-migrate/modules/product-detail/components/Image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index fffe1480..b69cc87f 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -36,7 +36,7 @@ const Image = ({ product }: Props) => {
   const duration = moment.duration(count, 'seconds')
 
   const image = useMemo(() => {
-    if (product.image) return product.image + '?watermark=true'
+    if (product.image) return product.image + '?ratio=square'
     return '/images/noimage.jpeg'
   }, [product.image])
 
-- 
cgit v1.2.3


From 87bc6b410b875d6f811e21e1e1d6f974e7cac653 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 5 Mar 2024 13:22:30 +0700
Subject: Update background flash sale

---
 src-migrate/modules/product-detail/components/Image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index b69cc87f..3d7777f8 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -67,7 +67,7 @@ const Image = ({ product }: Props) => {
         <div className='absolute bottom-0 w-full h-14'>
           <div className="relative w-full h-full">
             <ImageUI
-              src='/images/GAMBAR-BG-FLASH-SALE.jpg'
+              src='/images/BG-FLASH-SALE.jpg'
               alt='Flash Sale Indoteknik'
               width={200}
               height={100}
-- 
cgit v1.2.3


From f9f1fdf83c2b6ed5c1d85d7418d45aeed9b05c77 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 5 Jun 2024 15:24:42 +0700
Subject: <iman> add feature SNI-TKDR

---
 .../modules/product-detail/components/Image.tsx    | 89 +++++++++++++++++++---
 1 file changed, 79 insertions(+), 10 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 3d7777f8..1b80efa8 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -1,5 +1,5 @@
 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'
@@ -17,6 +17,47 @@ const Image = ({ product }: Props) => {
 
   const [count, setCount] = useState(flashSale?.remaining_time || 0);
 
+  const [isSni, setIsSni] = useState(false);
+  const [isTkdn, setTkdn] = useState(false);
+
+  useEffect(() => {
+    // Lakukan pemanggilan API untuk memeriksa isSni
+    const fetchSniData = async () => {
+      try {
+        const response = await fetch('URL_API_SNI');
+        const data = await response.json();
+        if (data && data.sni) {
+          setIsSni(true);
+        } else {
+          setIsSni(false);
+        }
+      } catch (error) {
+        console.error('Error fetching SNI data:', error);
+        setIsSni(false);
+      }
+    };
+
+    // Lakukan pemanggilan API untuk memeriksa isTkdn
+    const fetchTkdnData = async () => {
+      try {
+        const response = await fetch('URL_API_TKDN');
+        const data = await response.json();
+        if (data && data.tkdn) {
+          setTkdn(true);
+        } else {
+          setTkdn(false);
+        }
+      } catch (error) {
+        console.error('Error fetching TKDN data:', error);
+        setTkdn(false);
+      }
+    };
+    fetchSniData();
+    fetchTkdnData();
+    return () => {
+    };
+  }, []);
+
   useEffect(() => {
     let interval: NodeJS.Timeout;
 
@@ -42,15 +83,43 @@ const Image = ({ product }: Props) => {
 
   return (
     <div className={style['wrapper']}>
-      <ImageUI
-        src={image}
-        alt={product.name}
-        width={256}
-        height={256}
-        className={style['image']}
-        loading='eager'
-        priority
-      />
+      {/* <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 ">
+              {!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  ">
+              {!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
-- 
cgit v1.2.3


From 755b61a8a7a082cc13f7ecb4a79807f90e60b3d6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 5 Jun 2024 16:50:38 +0700
Subject: <iman> add feature SNI-TKDN

---
 .../modules/product-detail/components/Image.tsx    | 46 ++--------------------
 1 file changed, 3 insertions(+), 43 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Image.tsx')

diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx
index 1b80efa8..30ca0d34 100644
--- a/src-migrate/modules/product-detail/components/Image.tsx
+++ b/src-migrate/modules/product-detail/components/Image.tsx
@@ -14,49 +14,9 @@ type Props = {
 
 const Image = ({ product }: Props) => {
   const flashSale = product.flash_sale
-
   const [count, setCount] = useState(flashSale?.remaining_time || 0);
 
-  const [isSni, setIsSni] = useState(false);
-  const [isTkdn, setTkdn] = useState(false);
-
-  useEffect(() => {
-    // Lakukan pemanggilan API untuk memeriksa isSni
-    const fetchSniData = async () => {
-      try {
-        const response = await fetch('URL_API_SNI');
-        const data = await response.json();
-        if (data && data.sni) {
-          setIsSni(true);
-        } else {
-          setIsSni(false);
-        }
-      } catch (error) {
-        console.error('Error fetching SNI data:', error);
-        setIsSni(false);
-      }
-    };
-
-    // Lakukan pemanggilan API untuk memeriksa isTkdn
-    const fetchTkdnData = async () => {
-      try {
-        const response = await fetch('URL_API_TKDN');
-        const data = await response.json();
-        if (data && data.tkdn) {
-          setTkdn(true);
-        } else {
-          setTkdn(false);
-        }
-      } catch (error) {
-        console.error('Error fetching TKDN data:', error);
-        setTkdn(false);
-      }
-    };
-    fetchSniData();
-    fetchTkdnData();
-    return () => {
-    };
-  }, []);
+  
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -95,7 +55,7 @@ const Image = ({ product }: Props) => {
           />
           <div className="absolute top-4 right-10 flex  ">
             <div className="gambarB ">
-              {!isSni && (
+              {product.isSni && (
                 <ImageNext
                   src="/images/sni-logo.png"
                   alt="SNI Logo"
@@ -106,7 +66,7 @@ const Image = ({ product }: Props) => {
               )}
             </div>
             <div className="gambarC  ">
-              {!isTkdn && (
+              {product.isTkdn && (
                 <ImageNext
                   src="/images/TKDN.png"
                   alt="TKDN"
-- 
cgit v1.2.3