<iman> add feature SNI-TKDR

1 files changed, 76 insertions, 21 deletions

diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx
index b396160f..4d1808c2 100644
--- a/src-migrate/modules/product-promo/components/Item.tsx
+++ b/src-migrate/modules/product-promo/components/Item.tsx
@@ -1,34 +1,89 @@
-import style from '../styles/item.module.css'
+import style from '../styles/item.module.css';
+import ImageNext from 'next/image';
+import { useEffect, useState } from 'react';
+import { Tooltip } from '@chakra-ui/react';
 
-import { Tooltip } from '@chakra-ui/react'
-
-import Image from '~/components/ui/image'
-import { IProductVariantPromo } from '~/types/promotion'
+import Image from '~/components/ui/image';
+import { IProductVariantPromo } from '~/types/promotion';
 
 type Props = {
-  variant: IProductVariantPromo,
-  isFree?: boolean
-}
-
-const ProductPromoItem = ({
-  variant,
-  isFree = false
-}: Props) => {
+  variant: IProductVariantPromo;
+  isFree?: boolean;
+};
+
+const ProductPromoItem = ({ variant, isFree = false }: Props) => {
+  const [isSni, setIsSni] = useState(false);
+  const [isTkdn, setTkdn] = useState(false);
+
+  useEffect(() => {
+    // Lakukan pemanggilan API untuk memeriksa isSni dan isTkdn
+    const fetchData = async () => {
+      try {
+        const responseSni = await fetch('URL_API_SNI');
+        const dataSni = await responseSni.json();
+        setIsSni(dataSni && dataSni.sni);
+
+        const responseTkdn = await fetch('URL_API_TKDN');
+        const dataTkdn = await responseTkdn.json();
+        setTkdn(dataTkdn && dataTkdn.tkdn);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        setIsSni(false);
+        setTkdn(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {};
+  }, []);
+
   return (
     <div className={style.item}>
       <div className={style.image}>
-        <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} />
+        <div className="relative">
+          <Image
+            src={variant.image || '/images/noimage.jpeg'}
+            alt={variant.display_name}
+            width={120}
+            height={120}
+            quality={100}
+          />
+          <div className="absolute top-0 right-0 flex mt-2">
+            {!isSni && (
+              <div className="w-2 h-4 sm:h-6 mr-1">
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="object-contain object-top"
+                  width={50}
+                  height={50}
+                />
+              </div>
+            )}
+            {!isTkdn && (
+              <div className="w-4 h-5 sm:h-6 ml-1">
+                <ImageNext
+                  src="/images/TKDN.png"
+                  alt="TKDN"
+                  className="object-contain object-top"
+                  width={50}
+                  height={50}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
         <div className={style.quantity}>
           {variant.qty} pcs {isFree ? '(free)' : ''}
         </div>
       </div>
-      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
-        <div className={style.name}>
-          {variant.name}
-        </div>
+      <Tooltip label={variant.display_name} placement="top" fontSize="sm">
+        <div className={style.name}>{variant.name}</div>
       </Tooltip>
     </div>
-  )
-}
+  );
+};
 
-export default ProductPromoItem
\ No newline at end of file
+export default ProductPromoItem;