Add utm source function on product card

1 files changed, 78 insertions, 56 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 1cec0804..9908a573 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,34 +1,46 @@
-import Image from '@/core/components/elements/Image/Image'
-import Link from '@/core/components/elements/Link/Link'
-import currencyFormat from '@/core/utils/currencyFormat'
-import { sellingProductFormat } from '@/core/utils/formatValue'
-import { createSlug } from '@/core/utils/slug'
-import whatsappUrl from '@/core/utils/whatsappUrl'
-import ImageNext from 'next/image'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import clsx from 'clsx';
+import ImageNext from 'next/image';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+import Image from '@/core/components/elements/Image/Image';
+import Link from '@/core/components/elements/Link/Link';
+import currencyFormat from '@/core/utils/currencyFormat';
+import { sellingProductFormat } from '@/core/utils/formatValue';
+import { createSlug } from '@/core/utils/slug';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import useUtmSource from '~/hooks/useUtmSource';
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
-  const router = useRouter()
+  const router = useRouter();
+  const utmSource = useUtmSource();
 
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     manufacture: product.manufacture?.name,
-    url: createSlug('/shop/product/', product.name, product.id, true)
-  })
+    url: createSlug('/shop/product/', product.name, product.id, true),
+  });
 
   const image = useMemo(() => {
-    if (product.image) return product.image + '?ratio=square'
-    return '/images/noimage.jpeg'
-  }, [product.image])
+    if (product.image) return product.image + '?ratio=square';
+    return '/images/noimage.jpeg';
+  }, [product.image]);
+
+  const URL = {
+    product:
+      createSlug('/shop/product/', product?.name, product?.id) +
+      `?utm_source=${utmSource}`,
+    manufacture: createSlug(
+      '/shop/brands/',
+      product?.manufacture?.name,
+      product?.manufacture.id
+    ),
+  };
 
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'>
-        <Link
-          href={createSlug('/shop/product/', product?.name, product?.id)}
-          className='border-b border-gray_r-4 relative'
-        >
+        <Link href={URL.product} className='border-b border-gray_r-4 relative'>
           <Image
             src={image}
             alt={product?.name}
@@ -58,7 +70,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                       height={5}
                     />
                     <span className='text-white text-[9px] md:text-[10px] font-semibold'>
-                      {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
+                      {product?.flashSale?.tag != 'false' ||
+                      product?.flashSale?.tag
                         ? product?.flashSale?.tag
                         : 'FLASH SALE'}
                     </span>
@@ -75,27 +88,21 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
         </Link>
         <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
           {product?.manufacture?.name ? (
-            <Link
-              href={createSlug(
-                '/shop/brands/',
-                product?.manufacture?.name,
-                product?.manufacture.id
-              )}
-              className='mb-1'
-            >
+            <Link href={URL.manufacture} className='mb-1'>
               {product.manufacture.name}
             </Link>
           ) : (
             <div>-</div>
           )}
           <Link
-            href={createSlug('/shop/product/', product?.name, product?.id)}
+            href={URL.product}
             className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
             title={product?.name}
           >
             {product?.name}
           </Link>
-          {product?.flashSale?.id > 0 && product?.lowestPrice.discountPercentage > 0 ? (
+          {product?.flashSale?.id > 0 &&
+          product?.lowestPrice.discountPercentage > 0 ? (
             <>
               <div className='flex gap-x-1 mb-1 items-center'>
                 <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
@@ -109,7 +116,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.lowestPrice.priceDiscount > 0 ? (
                   currencyFormat(product?.lowestPrice.priceDiscount)
                 ) : (
-                  <a rel='noopener noreferrer' target='_blank' href={callForPriceWhatsapp}>
+                  <a
+                    rel='noopener noreferrer'
+                    target='_blank'
+                    href={callForPriceWhatsapp}
+                  >
                     Call for Inquiry
                   </a>
                 )}
@@ -122,11 +133,17 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   {currencyFormat(product?.lowestPrice.price)}
                   <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
                     Inc. PPN:{' '}
-                    {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
+                    {currencyFormat(
+                      product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
+                    )}
                   </div>
                 </>
               ) : (
-                <a rel='noopener noreferrer' target='_blank' href={callForPriceWhatsapp}>
+                <a
+                  rel='noopener noreferrer'
+                  target='_blank'
+                  href={callForPriceWhatsapp}
+                >
                   Call for Inquiry
                 </a>
               )}
@@ -134,7 +151,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
 
           <div className='flex w-full items-center gap-x-1 '>
-            {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+            {product?.stockTotal > 0 && (
+              <div className='badge-solid-red'>Ready Stock</div>
+            )}
             {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
             {product?.qtySold > 0 && (
               <div className='text-gray_r-9 text-[11px]'>
@@ -144,17 +163,14 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   if (variant == 'horizontal') {
     return (
       <div className='flex bg-white'>
         <div className='w-4/12'>
-          <Link
-            href={createSlug('/shop/product/', product?.name, product?.id)}
-            className='relative'
-          >
+          <Link href={URL.product} className='relative'>
             <Image
               src={image}
               alt={product?.name}
@@ -184,26 +200,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             </div>
           )}
           {product?.manufacture?.name ? (
-            <Link
-              href={createSlug(
-                '/shop/brands/',
-                product?.manufacture?.name,
-                product?.manufacture.id
-              )}
-              className='mb-1'
-            >
+            <Link href={URL.manufacture} className='mb-1'>
               {product.manufacture.name}
             </Link>
           ) : (
             <div>-</div>
           )}
           <Link
-            href={createSlug('/shop/product/', product?.name, product?.id)}
+            href={URL.product}
             className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
           >
             {product?.name}
           </Link>
-          {product?.flashSale?.id > 0 && product?.lowestPrice?.discountPercentage > 0 ? (
+          {product?.flashSale?.id > 0 &&
+          product?.lowestPrice?.discountPercentage > 0 ? (
             <>
               {product?.lowestPrice.discountPercentage > 0 && (
                 <div className='flex gap-x-1 mb-1 items-center'>
@@ -220,7 +230,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 {product?.lowestPrice?.priceDiscount > 0 ? (
                   currencyFormat(product?.lowestPrice?.priceDiscount)
                 ) : (
-                  <a rel='noopener noreferrer' target='_blank' href={callForPriceWhatsapp}>
+                  <a
+                    rel='noopener noreferrer'
+                    target='_blank'
+                    href={callForPriceWhatsapp}
+                  >
                     Call for Inquiry
                   </a>
                 )}
@@ -233,11 +247,17 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                   {currencyFormat(product?.lowestPrice.price)}
                   <div className='text-gray_r-9 text-[11px] sm:text-caption-2 font-normal mt-2'>
                     Inc. PPN:{' '}
-                    {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
+                    {currencyFormat(
+                      product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
+                    )}
                   </div>
                 </>
               ) : (
-                <a rel='noopener noreferrer' target='_blank' href={callForPriceWhatsapp}>
+                <a
+                  rel='noopener noreferrer'
+                  target='_blank'
+                  href={callForPriceWhatsapp}
+                >
                   Call for Inquiry
                 </a>
               )}
@@ -245,7 +265,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
 
           <div className='flex w-full items-center gap-x-1 '>
-            {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+            {product?.stockTotal > 0 && (
+              <div className='badge-solid-red'>Ready Stock</div>
+            )}
             {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
             {product?.qtySold > 0 && (
               <div className='text-gray_r-9 text-[11px]'>
@@ -255,8 +277,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           </div>
         </div>
       </div>
-    )
+    );
   }
-}
+};
 
-export default ProductCard
+export default ProductCard;