Merged in feature/SNI-TKDN (pull request #138)

Feature/SNI TKDN

Approved-by: trisusilo

3 files changed, 73 insertions, 13 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 4ddebda5..0febfadb 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,7 @@ type Props = {
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
   const utmSource = useUtmSource()
+  
 
   const URL = {
     product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
@@ -40,6 +41,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 +50,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 ">
+              {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>
+
           {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..30ca0d34 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'
@@ -14,9 +14,10 @@ type Props = {
 
 const Image = ({ product }: Props) => {
   const flashSale = product.flash_sale
-
   const [count, setCount] = useState(flashSale?.remaining_time || 0);
 
+  
+
   useEffect(() => {
     let interval: NodeJS.Timeout;
 
@@ -42,15 +43,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 ">
+              {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
diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts
index 08de98e0..428b6e45 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -11,6 +11,8 @@ export interface IProduct {
   stock_total: number;
   variant_total: number;
   description: string;
+  is_sni: boolean;
+  is_tkdn: boolean;
   categories: {
     id: string;
     name: string;