Fixed issues with cart window & demo header + Breadcrumbs Kafka

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}
         />

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 />

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>
         </>

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>
         </>

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>
         </>