feat: add link of product page to the cart item component

Author: pooriaset

src/app/[locale]/(main)/(container)/cart/page.tsx

@@ -5,6 +5,7 @@ import CartItemController from '@/components/CartItemController/CartItemControll
 import { getFragmentData } from '@/graphql/types';
 import {
   CartItemContentFragmentDoc,
+  ProductContentSliceFragmentDoc,
   ProductVariationContentSliceFragmentDoc,
   StockStatusEnum,
 } from '@/graphql/types/graphql';
@@ -153,13 +154,22 @@ const Page = () => {
                     ProductVariationContentSliceFragmentDoc,
                     _item.variation?.node,
                   )!;
+
+                  const product = getFragmentData(
+                    ProductContentSliceFragmentDoc,
+                    _item.product?.node,
+                  );
+
                   const isOutOfStock =
                     variant.stockStatus === StockStatusEnum.OutOfStock;
 
                   return (
                     <Grid item xs={12} key={_item?.key}>
                       <Stack spacing={2}>
-                        <CartItem value={variant} />
+                        <CartItem
+                          value={variant}
+                          href={`/products/${product?.databaseId}`}
+                        />
                         <Stack direction="row" spacing={1}>
                           <Box width={200}>
                             <CartItemController

src/components/CartItem/CartItem.tsx

@@ -1,21 +1,32 @@
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Link, Stack, Typography } from '@mui/material';
 import React, { FC } from 'react';
 import Attributes from './components/Attributes';
 import Image from '../common/Image';
 import { ProductVariationContentSliceFragment } from '@/graphql/types/graphql';
 
 export interface CartItemProps {
   value: ProductVariationContentSliceFragment;
+  href?: string;
 }
-const CartItem: FC<CartItemProps> = ({ value }) => {
+const CartItem: FC<CartItemProps> = ({ value, href = '#' }) => {
   return (
     <Stack gap={2} direction="row">
-      <Image width={80} height={80} src={value?.image?.sourceUrl} alt="Image" />
+      <Link href={href}>
+        <Image
+          width={80}
+          height={80}
+          src={value?.image?.sourceUrl}
+          alt="Image"
+        />
+      </Link>
       <Box flexGrow={1}>
         <Stack gap={2}>
-          <Typography variant="body1" sx={{ fontWeight: 600 }}>
-            {value?.name}
-          </Typography>
+          <Link href={href}>
+            <Typography variant="body1" sx={{ fontWeight: 600 }}>
+              {value?.name}
+            </Typography>
+          </Link>
+
           <Attributes
             size={value?.attributes?.nodes?.[0]?.value?.toUpperCase()}
           />