From 31ee2a0507e73cfe285ae12a4d76189825d8529a Mon Sep 17 00:00:00 2001
From: pranav-kural <pranavkural042@gmail.com>
Date: Tue, 24 Sep 2024 00:56:28 -0400
Subject: [PATCH 1/3] fixed issue with cart window

---
 app/components/cart/MutateCartButton.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/cart/MutateCartButton.tsx b/app/components/cart/MutateCartButton.tsx
index 1887fe5..e5f6687 100644
--- a/app/components/cart/MutateCartButton.tsx
+++ b/app/components/cart/MutateCartButton.tsx
@@ -135,13 +135,19 @@ export const MutateCartButton: FC<MutateCartButtonProps> = ({
           className
         )}>
         <PlusCircleIcon
-          onClick={incrementProductQuantity}
+          onClick={(e) => {
+            e.stopPropagation();
+            incrementProductQuantity();
+          }}
           size={iconConfig?.plusIconSize}
           strokeWidth={iconConfig?.plusIconStrokeWidth}
         />
         <span className="ml-2 mr-2">{cartItem.quantity}</span>
         <MinusCircleIcon
-          onClick={decrementProductQuantity}
+          onClick={(e) => {
+            e.stopPropagation();
+            decrementProductQuantity();
+          }}
           size={iconConfig?.minusIconSize}
           strokeWidth={iconConfig?.minusIconStrokeWidth}
         />

From db90d8f04ccd38dd4515c5ba1238684254b03b6c Mon Sep 17 00:00:00 2001
From: pranav-kural <pranavkural042@gmail.com>
Date: Tue, 24 Sep 2024 00:57:07 -0400
Subject: [PATCH 2/3] Modified header buttons for mobile screen design

---
 app/components/header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx
index a0dc208..9a02437 100644
--- a/app/components/header/Header.tsx
+++ b/app/components/header/Header.tsx
@@ -18,7 +18,7 @@ export const Header = () => {
         </Link>
         <NavMenu />
       </div>
-      <div className="absolute top-[20px] right-[10px] md:right-[30px]">
+      <div className="absolute top-[40px] sm:top-[30px] md:top-[20px] right-[10px] md:right-[30px]">
         <div className="w-full h-full flex flex-row gap-2 md:gap-4 items-center justify-center">
           <UserButtons />
           <CartDropdownMenu />

From b47f1e92eeb71726e36763c7ce1fc3096b2540a7 Mon Sep 17 00:00:00 2001
From: pranav-kural <pranavkural042@gmail.com>
Date: Tue, 24 Sep 2024 01:07:33 -0400
Subject: [PATCH 3/3] Kafka pipeline integration in the breadcrumb components

---
 .../header/breadcrumb/CategoryPart.tsx         | 18 +++++++++++++++++-
 .../header/breadcrumb/ProductPart.tsx          | 18 +++++++++++++++++-
 .../header/breadcrumb/SubCategoryPart.tsx      | 18 +++++++++++++++++-
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/app/components/header/breadcrumb/CategoryPart.tsx b/app/components/header/breadcrumb/CategoryPart.tsx
index 0fe4d46..c01c94d 100644
--- a/app/components/header/breadcrumb/CategoryPart.tsx
+++ b/app/components/header/breadcrumb/CategoryPart.tsx
@@ -1,5 +1,7 @@
 'use client';
 import {useGetCategoryQuery} from '@/app/lib/api/categories-slice';
+import {dispatchUserEvent} from '@/app/lib/kafka/dispatch/user-events';
+import {useUser} from '@clerk/nextjs';
 import {HomeIcon} from 'lucide-react';
 import Link from 'next/link';
 import {FC, useMemo} from 'react';
@@ -13,6 +15,8 @@ export const BreadcrumbCategoryPart: FC<BreadcrumbCategoryPartProps> = ({
 }) => {
   // fetch data
   const categoryFetch = useGetCategoryQuery(categoryId);
+  // user data for recording events
+  const {user} = useUser();
 
   // Method to get the categories part of the breadcrumb
   const getCategoriesPart = useMemo(() => {
@@ -28,7 +32,19 @@ export const BreadcrumbCategoryPart: FC<BreadcrumbCategoryPartProps> = ({
           <Link
             key="category"
             href={`/category/${categoryId}`}
-            className="cursor-pointer">
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.preventDefault();
+              if (user) {
+                dispatchUserEvent({
+                  user_id: user.id,
+                  event_type: 'click',
+                  core_component: 'breadcrumb',
+                  description: `Clicked on category in breadcrumb for category ${categoryFetch.data?.name}`,
+                  metadata: {category_id: categoryId},
+                });
+              }
+            }}>
             {categoryFetch.data.name}
           </Link>
         </>
diff --git a/app/components/header/breadcrumb/ProductPart.tsx b/app/components/header/breadcrumb/ProductPart.tsx
index a33aa2a..acfe380 100644
--- a/app/components/header/breadcrumb/ProductPart.tsx
+++ b/app/components/header/breadcrumb/ProductPart.tsx
@@ -1,5 +1,7 @@
 'use client';
 import {useGetProductQuery} from '@/app/lib/api/products-api-slice';
+import {dispatchUserEvent} from '@/app/lib/kafka/dispatch/user-events';
+import {useUser} from '@clerk/nextjs';
 import Link from 'next/link';
 import {FC, useMemo} from 'react';
 
@@ -16,6 +18,8 @@ export const BreadcrumbProductPart: FC<BreadcrumbProductPartProps> = ({
 }) => {
   // fetch data
   const productFetch = useGetProductQuery(productId);
+  // user data for recording events
+  const {user} = useUser();
 
   // Method to get the products part of the breadcrumb
   const getProductsPart = useMemo(() => {
@@ -28,7 +32,19 @@ export const BreadcrumbProductPart: FC<BreadcrumbProductPartProps> = ({
           <Link
             key="product"
             href={`/category/${categoryId}/subcategory/${subCategoryId}/product/${productId}`}
-            className="cursor-pointer">
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.preventDefault();
+              if (user) {
+                dispatchUserEvent({
+                  user_id: user.id,
+                  event_type: 'click',
+                  core_component: 'breadcrumb',
+                  description: `Clicked on product in breadcrumb for product ${productFetch.data?.name}`,
+                  metadata: {product_id: productId},
+                });
+              }
+            }}>
             {productFetch.data.name}
           </Link>
         </>
diff --git a/app/components/header/breadcrumb/SubCategoryPart.tsx b/app/components/header/breadcrumb/SubCategoryPart.tsx
index 038752f..eabcb33 100644
--- a/app/components/header/breadcrumb/SubCategoryPart.tsx
+++ b/app/components/header/breadcrumb/SubCategoryPart.tsx
@@ -1,5 +1,7 @@
 'use client';
 import {useGetSubCategoryQuery} from '@/app/lib/api/categories-slice';
+import {dispatchUserEvent} from '@/app/lib/kafka/dispatch/user-events';
+import {useUser} from '@clerk/nextjs';
 import Link from 'next/link';
 import {FC, useMemo} from 'react';
 
@@ -13,6 +15,8 @@ export const BreadcrumbSubCategortPart: FC<BreadcrumbSubCategortPartProps> = ({
   subCategoryId,
 }) => {
   const subCategoryFetch = useGetSubCategoryQuery(subCategoryId);
+  // user data for recording events
+  const {user} = useUser();
 
   // Method to get the subcategories part of the breadcrumb
   const getSubCategoriesPart = useMemo(() => {
@@ -25,7 +29,19 @@ export const BreadcrumbSubCategortPart: FC<BreadcrumbSubCategortPartProps> = ({
           <Link
             key="subcategory"
             href={`/category/${categoryId}/subcategory/${subCategoryId}`}
-            className="cursor-pointer">
+            className="cursor-pointer"
+            onClick={(e) => {
+              e.preventDefault();
+              if (user) {
+                dispatchUserEvent({
+                  user_id: user.id,
+                  event_type: 'click',
+                  core_component: 'breadcrumb',
+                  description: `Clicked on subcategory in breadcrumb for subcategory ${subCategoryFetch.data?.name}`,
+                  metadata: {subcategory_id: subCategoryId},
+                });
+              }
+            }}>
             {subCategoryFetch.data.name}
           </Link>
         </>