fix: pdp page optimization

bigcommerce · Dec 21, 2022 · ccaad8e · ccaad8e
1 parent c7fbe8b
commit ccaad8e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/apps/storefront/src/main.css b/apps/storefront/src/main.css
@@ -116,7 +116,7 @@ input[type=number]::-webkit-outer-spin-button
 }
 
 #shoppingListBtn {
-  padding: 10px 15px;
+  padding: 9px 15px;
   display: inline-block;
   cursor: pointer;
   background-color: transparent;
@@ -126,3 +126,8 @@ input[type=number]::-webkit-outer-spin-button
   border-radius: 4px;
   border: 1px solid #a18568;
 }
+
+#add-to-cart-wrapper .form-action {
+  display: flex;
+  align-items: self-start;
+}
diff --git a/apps/storefront/src/pages/orderDetail/components/CreateShoppingList.tsx b/apps/storefront/src/pages/orderDetail/components/CreateShoppingList.tsx
@@ -97,6 +97,12 @@ const CreateShoppingList = ({
   const handleConfirm = () => {
     handleSubmit(async (data) => {
       setLoading(true)
+      const {
+        description,
+      } = data
+      if (description.indexOf('\n') > -1) {
+        data.description = description.split('\n').join('\\n')
+      }
       const createShoppingData = {
         ...data,
         status: 0,

diff --git a/apps/storefront/src/pages/shoppingLists/ShoppingListsCard.tsx b/apps/storefront/src/pages/shoppingLists/ShoppingListsCard.tsx
@@ -63,8 +63,17 @@ const ShoppingListsCard = (props: OrderItemCardProps) => {
     role,
   } = props
 
-  const getPermissions = (status: number) => {
-    if (role === 2) {
+  const getEditPermissions = (status: number) => {
+    if (+role === 2) {
+      if (status === 30 || status === 0) return false
+      return true
+    }
+
+    return false
+  }
+
+  const getDeletePermissions = (status: number) => {
+    if (+role === 2) {
       if (status === 20 || status === 30) return false
       return true
     }
@@ -106,11 +115,16 @@ const ShoppingListsCard = (props: OrderItemCardProps) => {
           >
             <ShoppingStatus status={shoppingList.status} />
           </Box>
-          <Typography>
+          <Box
+            sx={{
+              width: '100%',
+              wordBreak: 'break-all',
+            }}
+          >
             {
               shoppingList.description
             }
-          </Typography>
+          </Box>
 
           <FlexItem>
             <FontBold>
@@ -151,7 +165,7 @@ const ShoppingListsCard = (props: OrderItemCardProps) => {
             }}
           >
             {
-              !getPermissions(shoppingList.status) && (
+              !getEditPermissions(shoppingList.status) && (
               <IconButton
                 aria-label="edit"
                 size="small"
@@ -176,7 +190,7 @@ const ShoppingListsCard = (props: OrderItemCardProps) => {
               <ContentCopyIcon fontSize="inherit" />
             </IconButton>
             {
-              !getPermissions(shoppingList.status) && (
+              !getDeletePermissions(shoppingList.status) && (
               <IconButton
                 aria-label="delete"
                 size="small"

diff --git a/packages/hooks/useB3PDPOpen.ts b/packages/hooks/useB3PDPOpen.ts
@@ -2,7 +2,7 @@ import {
   useEffect,
 } from 'react'
 
-const removeElement = (_element: any) => {
+const removeElement = (_element: CustomFieldItems) => {
   const _parentElement = _element.parentNode
   if (_parentElement) {
     _parentElement.removeChild(_element)
@@ -12,11 +12,12 @@ const removeElement = (_element: any) => {
 export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, role: string | number) => {
   useEffect(() => {
     const addToCartAll = document.querySelectorAll(el)
-    let shoppingBtnDom: any = null
+    const wishlistSdd = document.querySelector('form[data-wishlist-add]')
+    let shoppingBtnDom: CustomFieldItems | null = null
     if (!addToCartAll.length) return
     if (document.querySelectorAll('#shoppingListBtn').length) return
     if (isB2BUser && (+role === 0 || +role === 1)) {
-      addToCartAll.forEach((node: any) => {
+      addToCartAll.forEach((node: CustomFieldItems) => {
         shoppingBtnDom = document.createElement('div')
         shoppingBtnDom.setAttribute('id', 'shoppingListBtn')
         shoppingBtnDom.innerHTML = 'Add to Shopping List'
@@ -25,11 +26,13 @@ export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, rol
           capture: true,
         })
       })
+      if (wishlistSdd) (wishlistSdd as CustomFieldItems).style.display = 'none'
     } else {
       const shoppingListBtn = document.querySelectorAll('#shoppingListBtn')
       shoppingListBtn.forEach((item: any) => {
         removeElement(item)
       })
+      if (wishlistSdd) (wishlistSdd as CustomFieldItems).style.display = 'block'
     }
 
     return () => {