Add utm source function on product card

3 files changed, 34 insertions, 2 deletions

diff --git a/src-migrate/constants/utm-source.ts b/src-migrate/constants/utm-source.ts
new file mode 100644
index 00000000..95c03ed2
--- /dev/null
+++ b/src-migrate/constants/utm-source.ts
@@ -0,0 +1,8 @@
+export const UTM_SOURCE = {
+  '/': 'web.home',
+  '/shop/product/[slug]': 'web.other-product',
+  '/shop/search': 'web.search',
+  '/shop/brands/[slug]': 'web.brand',
+  '/shop/category/[slug]': 'web.category',
+  '/shop/cart': 'web.cart',
+};
diff --git a/src-migrate/hooks/useUtmSource.ts b/src-migrate/hooks/useUtmSource.ts
new file mode 100644
index 00000000..a72fae36
--- /dev/null
+++ b/src-migrate/hooks/useUtmSource.ts
@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { UTM_SOURCE } from '~/constants/utm-source';
+
+const useUtmSource = () => {
+  const router = useRouter();
+  const [source, setSource] = useState<string>();
+
+  useEffect(() => {
+    console.log(router.pathname);
+    
+    if (router.pathname) {
+      setSource(UTM_SOURCE[router.pathname as keyof typeof UTM_SOURCE]);
+    }
+  }, [router.pathname]);
+
+  return source;
+};
+
+export default useUtmSource;
diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index 8487cd94..4ddebda5 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -1,8 +1,10 @@
 import style from '../styles/product-card.module.css'
 
+import clsx from 'clsx'
 import Link from 'next/link'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import Image from '~/components/ui/image'
+import useUtmSource from '~/hooks/useUtmSource'
 import clsxm from '~/libs/clsxm'
 import formatCurrency from '~/libs/formatCurrency'
 import { formatToShortText } from '~/libs/formatNumber'
@@ -15,8 +17,10 @@ type Props = {
 }
 
 const ProductCard = ({ product, layout = 'vertical' }: Props) => {
+  const utmSource = useUtmSource()
+
   const URL = {
-    product: createSlug('/shop/product/', product.name, product.id.toString()),
+    product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`,
     manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()),
   }