fix: update order details issues

bigcommerce · Jan 3, 2023 · 413c547 · 413c547
1 parent 7138b17
commit 413c547
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 43 deletions.
diff --git a/apps/storefront/index.html b/apps/storefront/index.html
@@ -166,7 +166,7 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
             </small>
             </label>
 
-            <textarea class="form-input" id="attribute_textarea_134" name="attribute[134]" required="" maxlength="255" style="width: 561px; height: 118px;"></textarea>
+            <textarea class="form-input" id="attribute_textarea_134" name="attribute[134]" required="" maxlength="255" style="width: 100%; height: 118px;"></textarea>
           </div>
 
           <div class="form-field" data-product-attribute="input-checkbox">

diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -5,7 +5,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Divider,
 } from '@mui/material'
 
 import {
@@ -75,7 +74,7 @@ export const B3Dialog:<T> ({
   children,
   loading = false,
   row,
-  isShowBordered = false,
+  isShowBordered = true,
   showRightBtn = true,
   maxWidth = 'sm',
   fullWidth = false,
@@ -135,11 +134,9 @@ export const B3Dialog:<T> ({
           </DialogTitle>
           )
         }
-        <Divider />
         <DialogContent>
           {children}
         </DialogContent>
-        <Divider />
         <DialogActions
           sx={
             isShowBordered ? {

diff --git a/apps/storefront/src/components/B3LinkTipContent.tsx b/apps/storefront/src/components/B3LinkTipContent.tsx
@@ -1,38 +1,57 @@
 import {
-  Link,
   Box,
 } from '@mui/material'
 
+import {
+  useNavigate,
+} from 'react-router-dom'
+
 interface B3SuccessTipContentProps{
   message: string,
   link?: string,
   linkText?: string,
+  isOutLink?: boolean,
 }
 
 export const B3LinkTipContent = ({
   message,
-  link,
+  link = '',
   linkText = 'View',
-}: B3SuccessTipContentProps) => (
-  <Box>
-    <Box
-      sx={{
-        display: 'inline',
-        marginRight: link ? '20px' : '0',
-      }}
-    >
-      {message}
-    </Box>
-    {link && (
-      <Link
-        href={link}
+  isOutLink = false,
+}: B3SuccessTipContentProps) => {
+  const navigate = useNavigate()
+
+  const handleLink = () => {
+    if (isOutLink) {
+      window.location.href = link
+    } else {
+      navigate(link)
+    }
+  }
+
+  return (
+    <Box>
+      <Box
         sx={{
-          color: 'inherit',
-          textDecoration: 'none',
+          display: 'inline',
+          marginRight: link ? '20px' : '0',
         }}
       >
-        {linkText}
-      </Link>
-    )}
-  </Box>
-)
+        {message}
+      </Box>
+      {link && (
+        <Box
+          onClick={handleLink}
+          sx={{
+            color: 'inherit',
+            display: 'inline',
+            textDecoration: 'none',
+            cursor: 'pointer',
+          }}
+        >
+          {linkText}
+        </Box>
+      )}
+    </Box>
+  )
+}
diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
@@ -341,6 +341,10 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
                       size="small"
                       sx={{
                         width: isMobile ? '60%' : '100%',
+                        '& .MuiFormHelperText-root': {
+                          marginLeft: '0',
+                          marginRight: '0',
+                        },
                       }}
                       error={!!product.helperText}
                       helperText={product.helperText}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx b/apps/storefront/src/pages/orderDetail/components/OrderCheckboxProduct.tsx
@@ -308,6 +308,10 @@ export const OrderCheckboxProduct = (props: OrderCheckboxProductProps) => {
                 size="small"
                 sx={{
                   width: isMobile ? '60%' : '100%',
+                  '& .MuiFormHelperText-root': {
+                    marginLeft: '0',
+                    marginRight: '0',
+                  },
                 }}
                 error={!!product.helperText}
                 helperText={product.helperText}

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -35,6 +35,10 @@ import {
   B3LinkTipContent,
 } from '@/components'
 
+import {
+  useMobile,
+} from '@/hooks'
+
 import {
   snackbar,
 } from '@/utils'
@@ -75,6 +79,22 @@ interface OrderDialogProps {
   currencyInfo: OrderCurrency,
 }
 
+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}
+  />
+)
+
 export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
   open,
   products = [],
@@ -94,6 +114,8 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
 
   const [returnFormFields] = useState(getReturnFormFields())
 
+  const [isMobile] = useMobile()
+
   const {
     control,
     handleSubmit,
@@ -167,14 +189,6 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
     return isValid
   }
 
-  const successTip = () => (
-    <B3LinkTipContent
-      message="Products are added to cart"
-      link="/cart.php"
-      linkText="VIEW CART"
-    />
-  )
-
   const handleReorder = async () => {
     setIsRequestLoading(true)
 
@@ -222,7 +236,12 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
       } else {
         setOpen(false)
         snackbar.success('', {
-          jsx: successTip,
+          jsx: successTip({
+            message: 'Products are added to cart',
+            link: '/cart.php',
+            linkText: 'VIEW CART',
+            isOutLink: true,
+          }),
         })
       }
     } finally {
@@ -231,11 +250,10 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
   }
 
   const handleSaveClick = () => {
-    if (checkedArr.length === 0) {
-      return
-    }
-
     if (type === 'shoppingList') {
+      if (checkedArr.length === 0) {
+        return
+      }
       handleClose()
       setOpenShoppingList(true)
     }
@@ -293,7 +311,13 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
         items: params,
       })
 
-      snackbar.success('Products were added to your shopping list')
+      snackbar.success('', {
+        jsx: successTip({
+          message: 'Products were added to your shopping list',
+          link: '/shoppingLists',
+          linkText: 'VIEW SHOPPING LIST',
+        }),
+      })
 
       setOpenShoppingList(false)
     } finally {
@@ -356,7 +380,7 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
         >
           <Typography
             sx={{
-              margin: '1rem 0',
+              margin: isMobile ? '0 0 1rem' : '1rem 0',
             }}
           >
             {currentDialogData?.description || ''}

diff --git a/apps/storefront/src/pages/orderDetail/shared/config.ts b/apps/storefront/src/pages/orderDetail/shared/config.ts
@@ -45,7 +45,7 @@ export const getReturnFormFields = () => [
   }, {
     name: 'return_comments',
     label: 'Comment',
-    required: true,
+    required: false,
     xs: 12,
     rows: 5,
     variant: 'filled',

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx
@@ -441,6 +441,10 @@ export const ReAddToCart = (props: ShoppingProductsProps) => {
                             size="small"
                             sx={{
                               width: isMobile ? '60%' : '100%',
+                              '& .MuiFormHelperText-root': {
+                                marginLeft: '0',
+                                marginRight: '0',
+                              },
                             }}
                           />
                         </FlexItem>