fix: moving sales rep variables to redux slice (#996)

* fix: moving sales rep variables to redux slice
bigcommerce · Apr 10, 2024 · 7def8f8 · 7def8f8
1 parent 06d6826
commit 7def8f8
Show file tree

Hide file tree

Showing 36 changed files with 230 additions and 127 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -67,8 +67,9 @@ export default function App() {
   } = useContext(GlobaledContext)
 
   const storeDispatch = useAppDispatch()
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
-
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const customerId = useAppSelector(({ company }) => company.customer.id)
   const emailAddress = useAppSelector(
     ({ company }) => company.customer.emailAddress

diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -62,7 +62,9 @@ export default function B3Dialog<T>({
 
   const [isMobile] = useMobile()
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const handleSaveClick = () => {
     if (handRightClick) {

diff --git a/apps/storefront/src/components/CompanyCredit.tsx b/apps/storefront/src/components/CompanyCredit.tsx
@@ -11,7 +11,9 @@ const permissionRoles = [0, 1, 2]
 function CompanyCredit() {
   const role = useAppSelector(({ company }) => company.customer.role)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const [isEnabled, setEnabled] = useState<boolean>(false)
 

diff --git a/apps/storefront/src/components/extraTip/CheckoutTip.tsx b/apps/storefront/src/components/extraTip/CheckoutTip.tsx
@@ -18,7 +18,9 @@ function CheckoutTip(props: CheckoutTipProps) {
   const [isMobile] = useMobile()
   const role = useAppSelector(({ company }) => company.customer.role)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const { href } = window.location
 

diff --git a/apps/storefront/src/components/layout/B3MobileLayout.tsx b/apps/storefront/src/components/layout/B3MobileLayout.tsx
@@ -27,7 +27,9 @@ export default function B3MobileLayout({
 
   const role = useAppSelector(({ company }) => company.customer.role)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const {
     state: {

diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
@@ -16,7 +16,7 @@ import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { superAdminEndMasquerade } from '@/shared/service/b2b'
-import { setIsAgenting, useAppDispatch, useAppSelector } from '@/store'
+import { clearMasqueradeCompany, useAppDispatch,useAppSelector } from '@/store'
 import { B3SStorage } from '@/utils'
 
 import {
@@ -39,13 +39,21 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
   const { isOpen, setOpenPage } = props
   const customerId = useAppSelector(({ company }) => company.customer.id)
   const {
-    state: { salesRepCompanyName, salesRepCompanyId, B3UserId },
+    state: { B3UserId },
     dispatch,
   } = useContext(GlobaledContext)
-
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
   const appDispatch = useAppDispatch()
 
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+  const salesRepCompanyName = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.companyName
+  )
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
+
   const { hash, href } = window.location
 
   const b3Lang = useB3Lang()
@@ -95,10 +103,6 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
       })
     } else {
       await superAdminEndMasquerade(+salesRepCompanyId, +B3UserId)
-      appDispatch(setIsAgenting({ isAgenting: false }))
-      B3SStorage.delete('salesRepCompanyId')
-      B3SStorage.delete('salesRepCompanyName')
-      B3SStorage.delete('salesRepCustomerGroupId')
       dispatch({
         type: 'common',
         payload: {
@@ -107,6 +111,14 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
           salesRepCustomerGroupId: '',
         },
       })
+
+      appDispatch(clearMasqueradeCompany())
+      dispatch({
+        type: 'common',
+        payload: {
+          isAgenting: false,
+        },
+      })
       setOpenPage({
         isOpen: true,
         openUrl: '/dashboard',

diff --git a/apps/storefront/src/hooks/useRole.ts b/apps/storefront/src/hooks/useRole.ts
@@ -10,7 +10,9 @@ const useRole = () => {
   } = useContext(GlobaledContext)
   const role = useAppSelector(({ company }) => company.customer.role)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const [roleText, setRoleText] = useState('')
 

diff --git a/apps/storefront/src/pages/accountSetting/AccountSetting.tsx b/apps/storefront/src/pages/accountSetting/AccountSetting.tsx
@@ -52,14 +52,16 @@ function AccountSetting() {
   const customer = useAppSelector(({ company }) => company.customer)
   const role = useAppSelector(({ company }) => company.customer.role)
   const {
-    state: {
-      isB2BUser,
-      currentChannelId,
-      salesRepCompanyId,
-    },
+    state: { isB2BUser, currentChannelId },
   } = useContext(GlobaledContext)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const {
     state: {

diff --git a/apps/storefront/src/pages/address/Address.tsx b/apps/storefront/src/pages/address/Address.tsx
@@ -48,18 +48,18 @@ function Address() {
   const companyInfoId = useAppSelector(({ company }) => company.companyInfo.id)
   const role = useAppSelector(({ company }) => company.customer.role)
   const {
-    state: {
-      isB2BUser,
-      salesRepCompanyId,
-      addressConfig,
-    },
+    state: { isB2BUser, addressConfig },
     dispatch,
   } = useContext(GlobaledContext)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
-
   const b3Lang = useB3Lang()
 
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const isExtraLarge = useCardListColumn()
   const [paginationTableRef] = useTableRef()
 

diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -125,14 +125,18 @@ function B3Mean({
 
 function Dashboard(props: DashboardProps) {
   const {
-    state: { B3UserId, salesRepCompanyId = 0 },
+    state: { B3UserId = 0 },
     dispatch,
   } = useContext(GlobaledContext)
   const customerId = useAppSelector(({ company }) => company.customer.id)
 
   const { setOpenPage } = props
   const b3Lang = useB3Lang()
 
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+
   const [currentSalesRepCompanyId, setCurrentSalesRepCompanyId] =
     useState<number>(+salesRepCompanyId)
 

diff --git a/apps/storefront/src/pages/invoice/Invoice.tsx b/apps/storefront/src/pages/invoice/Invoice.tsx
@@ -73,7 +73,9 @@ function Invoice() {
   const currentDate = new Date().getTime()
   const b3Lang = useB3Lang()
   const role = useAppSelector(({ company }) => company.customer.role)
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const juniorOrSenior = +role === 1 || role === 2
   const navigate = useNavigate()
   const [isMobile] = useMobile()

diff --git a/apps/storefront/src/pages/invoice/components/B3Pulldown.tsx b/apps/storefront/src/pages/invoice/components/B3Pulldown.tsx
@@ -35,7 +35,9 @@ function B3Pulldown({
 }: B3PulldownProps) {
   const platform = useAppSelector(({ global }) => global.storeInfo.platform)
   const role = useAppSelector(({ company }) => company.customer.role)
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const juniorOrSenior = +role === 1 || role === 2
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const [isCanPay, setIsCanPay] = useState<boolean>(true)

diff --git a/apps/storefront/src/pages/invoice/components/InvoiceFooter.tsx b/apps/storefront/src/pages/invoice/components/InvoiceFooter.tsx
@@ -25,7 +25,9 @@ function InvoiceFooter(props: InvoiceFooterProps) {
   const [selectedAccount, setSelectedAccount] = useState<number | string>(0)
   const [currentToken, setCurrentToken] = useState<string>('$')
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const containerStyle = isMobile
     ? {

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -83,18 +83,16 @@ export default function Login(props: RegisteredProps) {
   const b3Lang = useB3Lang()
 
   const {
-    state: {
-      isCheckout,
-      logo,
-      B3UserId,
-      salesRepCompanyId = 0,
-      registerEnabled,
-    },
+    state: { isCheckout, logo, B3UserId, registerEnabled },
     dispatch,
   } = useContext(GlobaledContext)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
-
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const {
     state: {
       loginPageButton,

diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
@@ -55,13 +55,19 @@ interface OrderProps {
 
 function Order({ isCompanyOrder = false }: OrderProps) {
   const {
-    state: { isB2BUser, salesRepCompanyId },
+    state: { isB2BUser },
   } = useContext(GlobaledContext)
   const companyB2BId = useAppSelector(({ company }) => company.companyInfo.id)
   const role = useAppSelector(({ company }) => company.customer.role)
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
   const b3Lang = useB3Lang()
 
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
+
   const [isRequestLoading, setIsRequestLoading] = useState(false)
 
   const [allTotal, setAllTotal] = useState(0)

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -114,7 +114,9 @@ function OrderCard(props: OrderCardProps) {
 
   const b3Lang = useB3Lang()
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const dialogData = [
     {

diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
@@ -21,7 +21,6 @@ import {
 } from '@/shared/service/b2b'
 import { store, useAppSelector } from '@/store'
 import {
-  B3SStorage,
   getDefaultCurrencyInfo,
   getValidOptionsList,
   globalSnackbar,
@@ -104,8 +103,7 @@ export const addProductsToShoppingList = async ({
   b3Lang,
 }: AddProductsToShoppingListParams) => {
   const { currency_code: currencyCode } = getDefaultCurrencyInfo()
-  const companyInfoId = store.getState().company.companyInfo.id
-  const companyId = companyInfoId || B3SStorage.get('salesRepCompanyId')
+  const { id: companyId } = store.getState().company.companyInfo
   const getProducts = isB2BUser ? searchB2BProducts : searchBcProducts
 
   const { productsSearch } = await getProducts({

diff --git a/apps/storefront/src/pages/quickorder/Quickorder.tsx b/apps/storefront/src/pages/quickorder/Quickorder.tsx
@@ -15,7 +15,9 @@ function Quickorder() {
   } = useContext(GlobaledContext)
   const role = useAppSelector(({ company }) => company.customer.role)
 
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
 
   const [isMobile] = useMobile()
 

diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx
@@ -35,7 +35,6 @@ import { useAppSelector } from '@/store'
 import {
   addQuoteDraftProducts,
   b2bLogger,
-  B3SStorage,
   b3TriggerCartNumber,
   calculateProductListPrice,
   currencyFormat,
@@ -231,7 +230,7 @@ function QuickOrderFooter(props: QuickOrderFooterProps) {
         return
       }
 
-      const companyId = companyInfoId || B3SStorage.get('salesRepCompanyId')
+      const companyId = companyInfoId
 
       const { productsSearch: getInventoryInfos } =
         await getVariantInfoByProductId({

diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -50,7 +50,9 @@ function QuoteDetail() {
     ({ company }) => company.customer.customerGroupId
   )
   const role = useAppSelector(({ company }) => company.customer.role)
-  const isAgenting = useAppSelector(({ b2bFeatures }) => b2bFeatures.isAgenting)
+  const isAgenting = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
+  )
   const [isMobile] = useMobile()
 
   const b3Lang = useB3Lang()

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -104,8 +104,6 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
       isB2BUser,
       B3UserId,
       currentChannelId,
-      salesRepCompanyId,
-      salesRepCompanyName,
       countriesList,
       currentChannelId: channelId,
       openAPPParams,
@@ -124,6 +122,12 @@ function QuoteDraft({ setOpenPage }: QuoteDraftProps) {
   const draftQuoteList = useAppSelector(
     ({ quoteInfo }) => quoteInfo.draftQuoteList
   )
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
+  const salesRepCompanyName = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.companyName
+  )
 
   const {
     state: {

diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -175,16 +175,19 @@ function QuotesList() {
 
   const [isMobile] = useMobile()
 
+  const companyB2BId = useAppSelector(({ company }) => company.companyInfo.id)
+  const customer = useAppSelector(({ company }) => company.customer)
   const {
-    state: { isB2BUser, salesRepCompanyId, openAPPParams, currentChannelId },
+    state: { isB2BUser, openAPPParams, currentChannelId },
     dispatch,
   } = useContext(GlobaledContext)
 
-  const companyB2BId = useAppSelector(({ company }) => company.companyInfo.id)
-  const customer = useAppSelector(({ company }) => company.customer)
   const draftQuoteListLength = useAppSelector(
     ({ quoteInfo }) => quoteInfo.draftQuoteList.length
   )
+  const salesRepCompanyId = useAppSelector(
+    ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
+  )
 
   useEffect(() => {
     const initFilter = async () => {