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

Feature/SNI TKDN

Approved-by: trisusilo

9 files changed, 202 insertions, 19 deletions

diff --git a/public/images/TKDN.png b/public/images/TKDN.png
new file mode 100644
index 00000000..dba43d15
--- /dev/null
+++ b/public/images/TKDN.png
diff --git a/public/images/sni-logo.png b/public/images/sni-logo.png
new file mode 100644
index 00000000..a5ade90c
--- /dev/null
+++ b/public/images/sni-logo.png
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;
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 38ed35f8..357f3fd9 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import ImageNext from 'next/image';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 
 import Image from '@/core/components/elements/Image/Image';
 import Link from '@/core/components/elements/Link/Link';
@@ -15,6 +15,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const router = useRouter();
   const utmSource = useUtmSource();
 
+
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     manufacture: product.manufacture?.name,
@@ -41,11 +42,39 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'>
         <Link href={URL.product} className='border-b border-gray_r-4 relative'>
+        <div className="relative">
           <Image
             src={image}
             alt={product?.name}
-            className='w-full object-contain object-center h-36 sm:h-48'
+            className="gambarA w-full object-contain object-center h-36 sm:h-48"
           />
+          <div className="absolute top-0 right-0 flex  mt-3">
+            <div className="gambarB ">
+              {product.isSni && (
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="w-4 h-5 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-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+
           {router.pathname != '/' && product?.flashSale?.id > 0 && (
             <div className='absolute bottom-0 w-full grid'>
               <div className='absolute bottom-0 w-full h-full'>
@@ -171,11 +200,37 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
       <div className='flex bg-white'>
         <div className='w-4/12'>
           <Link href={URL.product} className='relative'>
+          <div className="relative">
             <Image
               src={image}
               alt={product?.name}
-              className='w-full object-contain object-center h-36'
+              className="gambarA w-full object-contain object-center h-36 sm:h-48"
             />
+            <div className="absolute top-0 right-0 flex  mt-3">
+              <div className="gambarB ">
+                {product.isSni && (
+                  <ImageNext
+                    src="/images/sni-logo.png"
+                    alt="SNI Logo"
+                    className="w-4 h-5 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-11 h-6 object-contain object-top  ml-1 sm:h-6"
+                    width={50}
+                    height={50}
+                  />
+                )}
+              </div>
+            </div>
+        </div>
             {product.variantTotal > 1 && (
               <div className='absolute badge-gray bottom-1.5 left-1.5'>
                 {product.variantTotal} Varian
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index b68bb4cd..9962b46e 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -2,7 +2,8 @@ import Spinner from '@/core/components/elements/Spinner/Spinner';
 import useTransaction from '../hooks/useTransaction';
 import TransactionStatusBadge from './TransactionStatusBadge';
 import Divider from '@/core/components/elements/Divider/Divider';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ImageNext from 'next/image';
 import {
   downloadPurchaseOrder,
   downloadQuotation,
@@ -49,6 +50,10 @@ const Transaction = ({ id }) => {
   const [idAWB, setIdAWB] = useState(null);
   const openUploadPo = () => setUploadPo(true);
   const closeUploadPo = () => setUploadPo(false);
+ 
+
+  
+
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -610,11 +615,39 @@ const Transaction = ({ id }) => {
                           )}
                           className='w-[20%] flex-shrink-0'
                         >
-                          <Image
+                          
+                        <div className="relative">
+                        <Image
                             src={product?.parent?.image}
                             alt={product?.name}
                             className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
                           />
+            <div className="absolute top-0 right-4 flex  mt-3">
+              <div className="gambarB ">
+                {product.isSni && (
+                  <ImageNext
+                    src="/images/sni-logo.png"
+                    alt="SNI Logo"
+                    className="w-2 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 sm:h-4"
+                    width={50}
+                    height={50}
+                  />
+                )}
+              </div>
+            </div>
+        </div>
+                          
                         </Link>
                         <div className='px-2 text-left'>
                           <Link
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 9f1b5733..9f65fc3c 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -7,9 +7,14 @@ import { createSlug } from '@/core/utils/slug'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { updateItemCart } from '@/core/utils/cart'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import ImageNext from 'next/image';
+import { useMemo, useEffect, useState } from 'react';
 
 const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
   const router = useRouter()
+ 
+
+  
 
   const addItemToCart = () => {
     toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 })
@@ -27,11 +32,39 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
   const Card = () => (
     <div className='flex gap-x-3'>
       <div className='w-4/12 flex items-center gap-x-2'>
-        <Image
+       
+      <div className="relative">
+      <Image
           src={product.parent.image}
           alt={product.parent.name}
           className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
         />
+          <div className="absolute top-0 right-4 flex  mt-3">
+            <div className="gambarB ">
+              {product.isSni && (
+                <ImageNext
+                  src="/images/sni-logo.png"
+                  alt="SNI Logo"
+                  className="w-2 h-5 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-5 h-6 object-contain object-top  ml-1 mr-1 sm:h-6"
+                  width={50}
+                  height={50}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
       </div>
       <div className='w-8/12 flex flex-col'>
         <p className='product-card__title wrap-line-ellipsis-2'>{product.parent.name}</p>
diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js
index 199a7f35..dd90ac7d 100644
--- a/src/utils/solrMapping.js
+++ b/src/utils/solrMapping.js
@@ -36,6 +36,8 @@ export const productMappingSolr = (products, pricelist) => {
         tag: product?.flashsale_tag_s || 'FLASH SALE',
       },
       qtySold: product?.qty_sold_f || 0,
+      isTkdn:product?.tkdn_b || false,
+      isSni:product?.sni_b || false,
     };
 
     if (product.manufacture_id_i && product.manufacture_name_s) {