<iman> add feature SNI-TKDR

4 files changed, 280 insertions, 37 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 6ded6373..fed11eb0 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -4,7 +4,8 @@ import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
 import { InfoIcon } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
-
+import ImageNext from 'next/image';
+import { useEffect, useState } from 'react';
 import { PROMO_CATEGORY } from '~/constants/promotion'
 import formatCurrency from '~/libs/formatCurrency'
 import { createSlug } from '~/libs/slug'
@@ -20,6 +21,31 @@ type Props = {
 }
 
 const CartItem = ({ item, editable = true }: Props) => {
+  const [isSni, setIsSni] = useState(false);
+  const [isTkdn, setTkdn] = useState(false);
+
+  useEffect(() => {
+    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.wrapper}>
       {item.cart_type === 'promotion' && (
@@ -46,7 +72,7 @@ const CartItem = ({ item, editable = true }: Props) => {
         {editable && <CartItemSelect item={item} />}
         <div className='w-4' />
 
-        <CartItem.Image item={item} />
+        <CartItem.Image item={item} isSni={isSni} isTkdn={isTkdn} />
 
         <div className={style.details}>
           <CartItem.Name item={item} />
@@ -98,7 +124,7 @@ const CartItem = ({ item, editable = true }: Props) => {
   )
 }
 
-CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
+CartItem.Image = function CartItemImage({ item, isSni, isTkdn }: { item: CartItemProps, isSni: boolean, isTkdn: boolean }) {
   const image = item?.image || item?.parent?.image
 
   return (
@@ -116,6 +142,31 @@ CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
           className={style.image}
         >
           {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          
+          <div className="relative top-2 right-4 flex">
+            {/* <div className="gambarB mr-1 bg-red-100"> */}
+              {!isSni && (
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="w-4 h-3 object-contain object-top sm:h-4"
+                  width={50}
+                  height={50}
+                />
+              )}
+            {/* </div> */}
+            {/* <div className="gambarC bg-red-500"> */}
+              {!isTkdn && (
+                <ImageNext
+                  src="/images/TKDN.png"
+                  alt="TKDN"
+                  className="w-10 h-5 object-contain object-top ml-1 mr-1 sm:h-10"
+                  width={50}
+                  height={50}
+                />
+              )}
+            {/* </div> */}
+          </div>
           {!image && <div className={style.noImage}>No Image</div>}
         </Link>
       )}
@@ -153,4 +204,4 @@ CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: nu
   ))
 }
 
-export default CartItem
\ No newline at end of file
+export default CartItem
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 4ddebda5..c3f05176 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,8 +1,8 @@
 import style from '../styles/product-card.module.css'
-
+import ImageNext from 'next/image';
 import clsx from 'clsx'
 import Link from 'next/link'
-import { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import Image from '~/components/ui/image'
 import useUtmSource from '~/hooks/useUtmSource'
 import clsxm from '~/libs/clsxm'
@@ -18,6 +18,46 @@ type Props = {
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
   const utmSource = useUtmSource()
+  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 () => {
+    };
+  }, []);
 
   const URL = {
     product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
@@ -40,6 +80,8 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
         [style['image-h']]: layout === 'horizontal',
       })}>
         <Link href={URL.product}>
+          
+        <div className="relative">
           <Image
             src={image}
             alt={product.name}
@@ -47,6 +89,32 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             height={128}
             className='object-contain object-center h-full w-full'
           />
+          <div className="absolute top-0 right-0 flex  mt-2">
+            <div className="gambarB ">
+              {!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  ">
+              {!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>
+
           {product.variant_total > 1 && (
             <div className={style['variant-badge']}>{product.variant_total} Varian</div>
           )}
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
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;