fix: quick order pad does not work for B2C users

1.https://bigc-b2b.atlassian.net/jira/software/c/projects/BUN/issues/BUN-1377
bigcommerce · Aug 15, 2023 · 5e7afc6 · 5e7afc6
1 parent 4c184e8
commit 5e7afc6
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 34 deletions.
diff --git a/apps/storefront/src/components/layout/B3StatusNotification.tsx b/apps/storefront/src/components/layout/B3StatusNotification.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { Alert, Box } from '@mui/material'
 
 import { StatusNotifications } from '@/constants'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import { B3SStorage } from '@/utils'
 
@@ -30,9 +31,7 @@ export default function B3StatusNotification(props: B3StatusNotificationProps) {
   const blockPendingAccountOrderCreation = B3SStorage.get(
     'blockPendingAccountOrderCreation'
   )
-  const blockPendingAccountViewPrice = B3SStorage.get(
-    'blockPendingAccountViewPrice'
-  )
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
   const loginType = JSON.parse(sessionStorage.getItem('loginType') || 'false')
 
   const [tip, setTip] = useState<string>('')
@@ -91,7 +90,7 @@ export default function B3StatusNotification(props: B3StatusNotificationProps) {
         setBcColor('#ED6C02')
       }
     }
-  }, [])
+  }, [blockPendingAccountViewPrice])
 
   return isShow ? (
     <B3StatusNotificationContainer

diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
@@ -3,6 +3,7 @@ export { default as useDomHooks } from './dom/useDomHooks'
 export { default as useMyQuote } from './dom/useMyQuote'
 export * from './dom/useOpenPDP'
 export { default as useRegisteredbctob2b } from './dom/useRegisteredbctob2b'
+export { default as useBlockPendingAccountViewPrice } from './useBlockPendingAccountViewPrice'
 export { default as useCardListColumn } from './useCardListColumn'
 export { default as useDebounce } from './useDebounce'
 export * from './useGetCountry'

diff --git a/apps/storefront/src/hooks/useBlockPendingAccountViewPrice.ts b/apps/storefront/src/hooks/useBlockPendingAccountViewPrice.ts
@@ -0,0 +1,11 @@
+import { useSelector } from 'react-redux'
+
+import { globalStateSelector } from '../store'
+
+const useBlockPendingAccountViewPrice = () => {
+  const { blockPendingAccountViewPrice } = useSelector(globalStateSelector)
+
+  return [blockPendingAccountViewPrice]
+}
+
+export default useBlockPendingAccountViewPrice
diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -6,7 +6,12 @@ import { throttle } from 'lodash'
 
 import { CustomButton } from '@/components'
 import { GlobaledContext } from '@/shared/global'
-import { currencyFormat, displayFormat, snackbar } from '@/utils'
+import {
+  b2bPrintInvoice,
+  currencyFormat,
+  displayFormat,
+  snackbar,
+} from '@/utils'
 
 import { Address, OrderCurrency, OrderProductItem } from '../../../types'
 import {
@@ -79,6 +84,7 @@ interface OrderCardProps {
   itemKey: string
   orderId: string
   role: number | string
+  ipStatus: number
   invoiceId?: number | string | undefined | null
 }
 
@@ -100,6 +106,7 @@ function OrderCard(props: OrderCardProps) {
     orderId,
     role,
     invoiceId,
+    ipStatus,
   } = props
 
   const {
@@ -145,7 +152,11 @@ function OrderCard(props: OrderCardProps) {
 
   const handleOpenDialog = (name: string) => {
     if (name === 'viewInvoice') {
-      navigate(`/invoice?invoiceId=${invoiceId}`)
+      if (ipStatus !== 0) {
+        navigate(`/invoice?invoiceId=${invoiceId}`)
+      } else {
+        b2bPrintInvoice(orderId, 'b2b_print_invoice')
+      }
     } else if (name === 'printInvoice') {
       window.open(`/account.php?action=print_invoice&order_id=${orderId}`)
     } else {
@@ -259,11 +270,11 @@ interface OrderData {
 export default function OrderAction(props: OrderActionProps) {
   const { detailsData } = props
   const {
-    state: { isB2BUser, role },
+    state: { isB2BUser, role, emailAddress },
   } = useContext(GlobaledContext)
 
   const {
-    state: { addressLabelPermission },
+    state: { addressLabelPermission, createdEmail },
   } = useContext(OrderDetailsContext)
 
   const {
@@ -392,7 +403,8 @@ export default function OrderAction(props: OrderActionProps) {
           key: 'aboutInvoice',
           name: isB2BUser ? 'viewInvoice' : 'printInvoice',
           variant: 'outlined',
-          isCanShow: !isB2BUser || +ipStatus === 1,
+          isCanShow:
+            (!isB2BUser || +ipStatus !== 0) && createdEmail === emailAddress,
         },
       ],
       infos: {
@@ -420,6 +432,7 @@ export default function OrderAction(props: OrderActionProps) {
             {...item}
             itemKey={item.key}
             role={role}
+            ipStatus={ipStatus}
             invoiceId={invoiceId}
           />
         ))}

diff --git a/apps/storefront/src/pages/quickorder/components/QuickAdd.tsx b/apps/storefront/src/pages/quickorder/components/QuickAdd.tsx
@@ -4,6 +4,7 @@ import { useB3Lang } from '@b3/lang'
 import { Box, Grid, Typography } from '@mui/material'
 
 import { B3CustomForm, B3Sping, CustomButton } from '@/components'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import { B3SStorage, snackbar } from '@/utils'
 import { getQuickAddRowFields } from '@/utils/b3Product/shared/config'
@@ -51,6 +52,8 @@ export default function QuickAdd(props: AddToListContentProps) {
     setFormFields(formFields)
   }, [rows])
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const handleAddRowsClick = () => {
     setRows(rows + level)
   }
@@ -288,11 +291,8 @@ export default function QuickAdd(props: AddToListContentProps) {
   }
 
   const handleAddToList = () => {
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx
@@ -10,7 +10,7 @@ import {
 } from '@mui/material'
 
 import { B3Upload, CustomButton, successTip } from '@/components'
-import { useMobile } from '@/hooks'
+import { useBlockPendingAccountViewPrice, useMobile } from '@/hooks'
 import { addProductToCart, createCart, getCartInfo } from '@/shared/service/bc'
 import { B3SStorage, snackbar } from '@/utils'
 
@@ -31,6 +31,8 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
   const [addBtnText, setAddBtnText] = useState<string>('Add to cart')
   const [isLoading, setIsLoading] = useState(false)
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const handleSplitOptionId = (id: string | number) => {
     if (typeof id === 'string' && id.includes('attribute')) {
       const idRight = id.split('[')[1]
@@ -402,11 +404,8 @@ export default function QuickOrderPad(props: QuickOrderPadProps) {
   }
 
   const handleOpenUploadDiag = () => {
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/pages/quote/components/AddToQuote.tsx b/apps/storefront/src/pages/quote/components/AddToQuote.tsx
@@ -5,6 +5,7 @@ import { v1 as uuid } from 'uuid'
 
 import { B3CollapseContainer, B3Upload, CustomButton } from '@/components'
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import { GlobaledContext } from '@/shared/global'
 import { searchB2BProducts, searchBcProducts } from '@/shared/service/b2b'
 import {
@@ -38,6 +39,8 @@ export default function AddToQuote(props: AddToListProps) {
   const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const getNewQuoteProduct = (products: CustomFieldItems[]) =>
     products.map((product) => {
       const {
@@ -261,11 +264,8 @@ export default function AddToQuote(props: AddToListProps) {
   }
 
   const handleOpenUploadDiag = () => {
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx b/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx
@@ -3,6 +3,7 @@ import UploadFileIcon from '@mui/icons-material/UploadFile'
 import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
 
 import { B3Upload, CustomButton } from '@/components'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import {
   addProductToBcShoppingList,
   addProductToShoppingList,
@@ -30,6 +31,8 @@ export default function AddToShoppingList(props: AddToListProps) {
   const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const addItemsToShoppingList = isB2BUser
     ? addProductToShoppingList
     : addProductToBcShoppingList
@@ -180,11 +183,8 @@ export default function AddToShoppingList(props: AddToListProps) {
   }
 
   const handleOpenUploadDiag = () => {
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx b/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx
@@ -4,6 +4,7 @@ import { useB3Lang } from '@b3/lang'
 import { Box, Grid, Typography } from '@mui/material'
 
 import { B3CustomForm, B3Sping, CustomButton } from '@/components'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import { QuoteListitemProps } from '@/pages/quote/shared/config'
 import { GlobaledContext } from '@/shared/global'
 import { B3LStorage, B3SStorage, compareOption, snackbar } from '@/utils'
@@ -39,6 +40,8 @@ export default function QuickAdd(props: AddToListContentProps) {
     state: { isB2BUser },
   } = useContext(GlobaledContext)
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const b3Lang = useB3Lang()
 
   const [rows, setRows] = useState(level)
@@ -319,11 +322,8 @@ export default function QuickAdd(props: AddToListContentProps) {
   }
 
   const handleAddToList = () => {
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
@@ -3,6 +3,7 @@ import SearchIcon from '@mui/icons-material/Search'
 import { Box, InputAdornment, TextField, Typography } from '@mui/material'
 
 import { B3Sping, CustomButton } from '@/components'
+import { useBlockPendingAccountViewPrice } from '@/hooks'
 import { searchB2BProducts, searchBcProducts } from '@/shared/service/b2b'
 import { B3SStorage, calculateProductListPrice, snackbar } from '@/utils'
 import { conversionProductsList } from '@/utils/b3Product/shared/config'
@@ -37,6 +38,8 @@ export default function SearchProduct({
   const [optionsProduct, setOptionsProduct] =
     useState<ShoppingListProductItem>()
 
+  const [blockPendingAccountViewPrice] = useBlockPendingAccountViewPrice()
+
   const handleSearchTextChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.target.value)
   }
@@ -46,11 +49,8 @@ export default function SearchProduct({
       return
     }
 
-    const blockPendingAccountViewPrice = B3SStorage.get(
-      'blockPendingAccountViewPrice'
-    )
     const companyStatus = B3SStorage.get('companyStatus')
-    if (blockPendingAccountViewPrice && companyStatus !== 1) {
+    if (blockPendingAccountViewPrice && companyStatus === 0) {
       snackbar.info(
         'Your business account is pending approval. This feature is currently disabled.'
       )

diff --git a/apps/storefront/src/store/slices/global.ts b/apps/storefront/src/store/slices/global.ts
@@ -43,6 +43,7 @@ export interface GlabolState {
   enteredInclusive?: boolean
   setOpenPageFn?: Dispatch<SetStateAction<OpenPageState>>
   showInclusiveTaxPrice?: boolean
+  blockPendingAccountViewPrice?: boolean
 }
 
 const initialState: GlabolState = {
@@ -60,6 +61,7 @@ const initialState: GlabolState = {
   enteredInclusive: false,
   setOpenPageFn: undefined,
   showInclusiveTaxPrice: false,
+  blockPendingAccountViewPrice: false,
 }
 
 export const glabolSlice = createSlice({
@@ -91,6 +93,12 @@ export const glabolSlice = createSlice({
     setShowInclusiveTaxPrice: (state, { payload }: PayloadAction<boolean>) => {
       state.showInclusiveTaxPrice = payload as Draft<boolean>
     },
+    setBlockPendingAccountViewPrice: (
+      state,
+      { payload }: PayloadAction<boolean>
+    ) => {
+      state.blockPendingAccountViewPrice = payload as Draft<boolean>
+    },
   },
 })
 
@@ -101,6 +109,7 @@ export const {
   setEnteredInclusive,
   setOpenPageReducer,
   setShowInclusiveTaxPrice,
+  setBlockPendingAccountViewPrice,
 } = glabolSlice.actions
 
 export default glabolSlice.reducer
diff --git a/apps/storefront/src/utils/storefrontConfig.ts b/apps/storefront/src/utils/storefrontConfig.ts
@@ -11,6 +11,7 @@ import {
 } from '@/shared/service/b2b'
 import { getActiveBcCurrency } from '@/shared/service/bc'
 import {
+  setBlockPendingAccountViewPrice,
   setEnteredInclusive,
   setShowInclusiveTaxPrice,
   setTaxZoneRates,
@@ -232,6 +233,9 @@ const getTemPlateConfig = async (
           'blockPendingAccountViewPrice',
           blockPendingAccountViewPrice
         )
+        store.dispatch(
+          setBlockPendingAccountViewPrice(blockPendingAccountViewPrice)
+        )
       }
 
       ;(obj as CustomFieldItems)[(storeforntKey as StoreforntKeysProps).name] =