fix: pdp and add to cart fixed

bigcommerce · Jan 3, 2023 · 685cbf3 · 685cbf3
1 parent 87b501e
commit 685cbf3
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 29 deletions.
diff --git a/apps/storefront/src/components/B3Tip.tsx b/apps/storefront/src/components/B3Tip.tsx
@@ -44,6 +44,7 @@ export const B3Tip = ({
                   display: `${handleItemClose ? 'block' : 'none'}`,
                 },
               }}
+              variant="filled"
               key={msg.id}
               severity={msg.type}
               onClose={() => handleItemClose && handleItemClose(msg.id)}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx
@@ -153,20 +153,22 @@ export const OrderShoppingList = (props: orderShoppingListProps) => {
           {dialogTitle}
         </DialogTitle>
         <Divider />
-        <DialogContent>
-          <Box
-            sx={{
-              height: isLoading ? '100%' : 'auto',
-            }}
-          >
-            <B3Sping
-              isSpinning={isLoading}
-              background="rgba(255,255,255,0.2)"
+        <B3Sping
+          isSpinning={isLoading}
+          isFlex={false}
+        >
+          <DialogContent>
+            <Box
+              sx={{
+                height: '430px',
+              }}
             >
+
               <MenuList
                 sx={{
-                  minHeight: '200px',
+                  maxHeight: '400px',
                   width: '100%',
+                  overflowY: 'auto',
                 }}
               >
                 {
@@ -183,19 +185,19 @@ export const OrderShoppingList = (props: orderShoppingListProps) => {
                   ))
                 }
               </MenuList>
-            </B3Sping>
-          </Box>
-
-          <Button
-            variant="text"
-            onClick={handleCreate}
-            sx={{
-              textTransform: 'none',
-            }}
-          >
-            + Create New
-          </Button>
-        </DialogContent>
+            </Box>
+
+            <Button
+              variant="text"
+              onClick={handleCreate}
+              sx={{
+                textTransform: 'none',
+              }}
+            >
+              + Create New
+            </Button>
+          </DialogContent>
+        </B3Sping>
 
         <Divider />
 

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx
@@ -33,12 +33,29 @@ import {
 import {
   B3Dialog,
   B3Sping,
+  B3LinkTipContent,
 } from '@/components'
 
 import {
   ProductsProps,
 } from '../shared/config'
 
+interface successTipOptions{
+  message: string,
+  link?: string,
+  linkText?: string,
+  isOutLink?: boolean,
+}
+
+const successTip = (options: successTipOptions) => () => (
+  <B3LinkTipContent
+    message={options.message}
+    link={options.link}
+    linkText={options.linkText}
+    isOutLink={options.isOutLink}
+  />
+)
+
 interface ShoppingProductsProps {
   products: ProductsProps[],
   currencyToken: string,
@@ -267,7 +284,15 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
         snackbar.error(res.detail)
       } else {
         handleCancelClicked()
-        snackbar.success(`${products.length} products were added to cart`)
+        snackbar.success('', {
+          jsx: successTip({
+            message: `${products.length} products were added to cart`,
+            link: '/cart.php',
+            linkText: 'VIEW CART',
+            isOutLink: true,
+          }),
+          isClose: true,
+        })
       }
     } finally {
       setLoading(false)
@@ -284,7 +309,7 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
       isOpen={isOpen}
       handleLeftClick={handleCancelClicked}
       handRightClick={handRightClick}
-      title="Add to list"
+      title="Add to cart"
       rightSizeBtn="Add to cart"
       maxWidth="xl"
     >
@@ -294,15 +319,25 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
             m: '0 0 1rem 0',
           }}
         >
-          <Alert severity="success">{`${successProducts} products were added to cart`}</Alert>
+          <Alert
+            variant="filled"
+            severity="success"
+          >
+            {`${successProducts} products were added to cart`}
+          </Alert>
         </Box>
 
         <Box
           sx={{
             m: '1rem 0',
           }}
         >
-          <Alert severity="error">{`${products.length} products were not added to cart, since they do not have enogh stock, please change quantity. `}</Alert>
+          <Alert
+            variant="filled"
+            severity="error"
+          >
+            {`${products.length} products were not added to cart, since they do not have enough stock, please change quantity. `}
+          </Alert>
         </Box>
         <B3Sping
           isSpinning={loading}

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx
@@ -28,6 +28,25 @@ import {
 import {
   ProductsProps,
 } from '../shared/config'
+import {
+  B3LinkTipContent,
+} from '@/components'
+
+interface successTipOptions{
+  message: string,
+  link?: string,
+  linkText?: string,
+  isOutLink?: boolean,
+}
+
+const successTip = (options: successTipOptions) => () => (
+  <B3LinkTipContent
+    message={options.message}
+    link={options.link}
+    linkText={options.linkText}
+    isOutLink={options.isOutLink}
+  />
+)
 
 interface ShoppingDetailFooterProps {
   shoppingListInfo: any,
@@ -105,6 +124,7 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
       validateSuccessArr,
     }
   }
+
   const handleAddProductsToCart = async () => {
     setLoading(true)
     try {
@@ -164,8 +184,16 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => {
         })
         if (res.status === 422) {
           snackbar.error(res.detail)
-        } else {
-          snackbar.success(`${validateSuccessArr.length} products were added to cart`)
+        } else if (validateFailureArr.length === 0) {
+          snackbar.success('', {
+            jsx: successTip({
+              message: `${validateSuccessArr.length} products were added to cart`,
+              link: '/cart.php',
+              linkText: 'VIEW CART',
+              isOutLink: true,
+            }),
+            isClose: true,
+          })
         }
       }
       setValidateFailureProducts(validateFailureArr)