fix: quote items are not clickable

bigcommerce · Jun 6, 2023 · 378a50f · 378a50f
1 parent 69cf780
commit 378a50f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -147,33 +147,33 @@ export default function B3Nav({ closeSidebar }: B3NavProps) {
         if (item.name === 'Quotes') {
           const { pathname } = location
           return (
-            <Badge
-              badgeContent={
-                quoteDetailHasNewMessages && pathname.includes('quoteDetail')
-                  ? ''
-                  : 0
-              }
-              variant="dot"
-              sx={{
-                width: '100%',
-                '& .MuiBadge-badge.MuiBadge-dot': {
-                  width: 8,
-                  height: 8,
-                  bgcolor: '#FFFFFF',
-                  right: 14,
-                  top: 22,
-                },
-              }}
-            >
-              <ListItem key={item.path} disablePadding>
+            <ListItem key={item.path} disablePadding>
+              <Badge
+                badgeContent={
+                  quoteDetailHasNewMessages && pathname.includes('quoteDetail')
+                    ? ''
+                    : 0
+                }
+                variant="dot"
+                sx={{
+                  width: '100%',
+                  '& .MuiBadge-badge.MuiBadge-dot': {
+                    width: 8,
+                    height: 8,
+                    bgcolor: '#FFFFFF',
+                    right: 14,
+                    top: 22,
+                  },
+                }}
+              >
                 <ListItemButton
                   onClick={() => handleClick(item)}
                   selected={activePath(item.path)}
                 >
                   <ListItemText primary={item.name} />
                 </ListItemButton>
-              </ListItem>
-            </Badge>
+              </Badge>
+            </ListItem>
           )
         }
         return (

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'
-import { Box, styled, Typography } from '@mui/material'
+import { Box, Link, styled, Typography } from '@mui/material'
 
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
 import { TableColumnItem } from '@/components/table/B3Table'
@@ -128,8 +128,16 @@ function QuoteDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
               loading="lazy"
             />
             <Box>
-              <Typography variant="body1" color="#212121">
-                {row.productName}
+              <Typography variant="body1">
+                <Link
+                  href={row.productsSearch?.productUrl || '#'}
+                  underline="none"
+                  sx={{
+                    color: '#212121',
+                  }}
+                >
+                  {row.productName}
+                </Link>
               </Typography>
               <Typography variant="body1" color="#616161">
                 {row.sku}

diff --git a/apps/storefront/src/pages/quote/components/QuoteTable.tsx b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react'
 import { Delete, Edit } from '@mui/icons-material'
-import { Box, styled, TextField, Typography } from '@mui/material'
+import { Box, Link, styled, TextField, Typography } from '@mui/material'
 import { ceil } from 'lodash'
 
 import { B3PaginationTable } from '@/components/table/B3PaginationTable'
@@ -334,8 +334,16 @@ function QuoteTable(props: ShoppingDetailTableProps, ref: Ref<unknown>) {
               loading="lazy"
             />
             <Box>
-              <Typography variant="body1" color="#212121">
-                {row.productName}
+              <Typography variant="body1">
+                <Link
+                  href={row.productsSearch?.productUrl || '#'}
+                  underline="none"
+                  sx={{
+                    color: '#212121',
+                  }}
+                >
+                  {row.productName}
+                </Link>
               </Typography>
               <Typography variant="body1" color="#616161">
                 {row.variantSku}