fix: change userId to b2bId as renaming (#1013)

* fix: pass id only as number

fix: migrate B3UserId to company.customer redux store

fix: change key name

fix: rename variable and explain differences between id and b2bId

* fix: remove not necessary dispatch

* fix: update jsdocs description

apps/storefront/src/App.tsx

@@ -54,7 +54,6 @@ const FONT_URL =
 export default function App() {
   const {
     state: {
-      B3UserId,
       currentChannelId,
       quoteConfig,
       storefrontConfig,
@@ -74,6 +73,7 @@ export default function App() {
     ({ company }) => company.customer.emailAddress
   )
   const role = useAppSelector((state) => state.company.customer.role)
+  const b2bId = useAppSelector((state) => state.company.customer.b2bId)
   const isClickEnterBtn = useAppSelector(({ global }) => global.isClickEnterBtn)
   const isPageComplete = useAppSelector(({ global }) => global.isPageComplete)
   const currentClickedUrl = useAppSelector(
@@ -187,7 +187,7 @@ export default function App() {
         setStorefrontConfig(dispatch, currentChannelId),
         getTemPlateConfig(currentChannelId, styleDispatch, dispatch),
         getCompanyUserInfo(emailAddress, customerId),
-        getCompanyInfo(B3UserId, role),
+        getCompanyInfo(role, b2bId),
       ])
       const userInfo = {
         role: +role,
@@ -228,7 +228,7 @@ export default function App() {
     // ignore href because is not a reactive value
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    B3UserId,
+    b2bId,
     currentChannelId,
     customerId,
     emailAddress,

apps/storefront/src/components/HeadlessController.tsx

@@ -15,7 +15,6 @@ import B3Request from '@/shared/service/request/b3Fetch'
 import {
   formatedQuoteDraftListSelector,
   isB2BUserSelector,
-  store,
   useAppDispatch,
   useAppSelector,
 } from '@/store'
@@ -79,7 +78,6 @@ export default function HeadlessController({
   const {
     dispatch,
     state: {
-      B3UserId,
       salesRepCompanyId = 0,
       currentChannelId,
       registerEnabled,
@@ -93,6 +91,7 @@ export default function HeadlessController({
   const role = useAppSelector(({ company }) => company.customer.role)
   const platform = useAppSelector(({ global }) => global.storeInfo.platform)
   const productList = useAppSelector(formatedQuoteDraftListSelector)
+  const B2BToken = useAppSelector(({company}) => company.tokens.B2BToken);
 
   const {
     state: { addQuoteBtn, shoppingListBtn, addToAllQuoteBtn },
@@ -120,7 +119,6 @@ export default function HeadlessController({
 
   const customerId = customer.id
   // Keep updated values
-  const B3UserIdRef = useRef(+B3UserId)
   const salesRepCompanyIdRef = useRef(+salesRepCompanyId)
   const customerIdRef = useRef(customerId)
   const customerRef = useRef(customer)
@@ -134,7 +132,6 @@ export default function HeadlessController({
   const shoppingListBtnRef = useRef(shoppingListBtn)
   const addToAllQuoteBtnRef = useRef(addToAllQuoteBtn)
 
-  B3UserIdRef.current = +B3UserId
   salesRepCompanyIdRef.current = +salesRepCompanyId
   customerIdRef.current = customerId
   customerRef.current = customer
@@ -179,10 +176,16 @@ export default function HeadlessController({
         user: {
           getProfile: () => ({ ...customerRef.current, role }),
           getMasqueradeState: async () => {
+            if (typeof customerRef.current.b2bId !== 'number') {
+              return {
+                current_company_id: salesRepCompanyIdRef.current,
+                companies: [],
+              }
+            }
             // get companies list
             const {
               superAdminCompanies: { edges: companies = [] },
-            } = await superAdminCompanies(B3UserIdRef.current, {
+            } = await superAdminCompanies(customerRef.current.b2bId, {
               first: 50,
               offset: 0,
               orderBy: 'companyId',
@@ -195,24 +198,28 @@ export default function HeadlessController({
               ),
             }
           },
-          getB2BToken: () => store.getState().company.tokens.B2BToken,
-          setMasqueradeCompany: (companyId) =>
+          getB2BToken: () => B2BToken,
+          setMasqueradeCompany: (companyId) => {
+            if (typeof customerRef.current.b2bId !== 'number') return
             startMasquerade({
               companyId,
-              B3UserId: B3UserIdRef.current,
+              b2bId: customerRef.current.b2bId,
               customerId: customerIdRef.current,
-            }),
-          endMasquerade: () =>
+            })
+          },
+          endMasquerade: () => {
+            if (typeof customerRef.current.b2bId !== 'number') return
             endMasquerade({
               dispatch,
               salesRepCompanyId: salesRepCompanyIdRef.current,
-              B3UserId: B3UserIdRef.current,
-            }),
+              b2bId: customerRef.current.b2bId,
+            })
+          },
           graphqlBCProxy: B3Request.graphqlBCProxy,
           loginWithB2BStorefrontToken: async (
             b2bStorefrontJWTToken: string
           ) => {
-            store.dispatch(setB2BToken(b2bStorefrontJWTToken))
+            storeDispatch(setB2BToken(b2bStorefrontJWTToken))
             await getCurrentCustomerInfo(dispatch, b2bStorefrontJWTToken)
           },
         },
@@ -257,7 +264,7 @@ export default function HeadlessController({
     }
     // disabling because we don't want to run this effect on every render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [productList])
+  }, [productList, B2BToken])
 
   return null
 }

apps/storefront/src/components/layout/B3AccountInfo.tsx

@@ -3,7 +3,6 @@ import { Box } from '@mui/material'
 
 import { useMobile } from '@/hooks'
 import { useAppSelector } from '@/store'
-import { logoutSession } from '@/utils'
 
 import B3DropDown from '../B3DropDown'
 
@@ -34,7 +33,6 @@ export default function B3AccountInfo({ closeSidebar }: B3AccountInfoProps) {
 
   const handleItemClick = async (item: ListProps) => {
     if (item.key === 'logout') {
-      logoutSession()
       navigate('/login?loginFlag=3')
     } else if (item.type === 'path') {
       navigate(item.key)

apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx

@@ -13,7 +13,6 @@ import {
 import { useGetButtonText } from '@/hooks'
 import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
-import { GlobaledContext } from '@/shared/global'
 import { superAdminEndMasquerade } from '@/shared/service/b2b'
 import { clearMasqueradeCompany, useAppDispatch, useAppSelector } from '@/store'
 import { OpenPageState } from '@/types/hooks'
@@ -37,13 +36,9 @@ const bottomHeightPage = ['shoppingList/', 'purchased-products']
 
 export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
   const { isOpen, setOpenPage } = props
+  const dispatch = useAppDispatch()
   const customerId = useAppSelector(({ company }) => company.customer.id)
-  const {
-    state: { B3UserId },
-    dispatch,
-  } = useContext(GlobaledContext)
-  const appDispatch = useAppDispatch()
-
+  const b2bId = useAppSelector(({ company }) => company.customer.b2bId)
   const salesRepCompanyId = useAppSelector(
     ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
   )
@@ -102,7 +97,9 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
         openUrl: '/dashboard?closeMasqurade=1',
       })
     } else {
-      await superAdminEndMasquerade(+salesRepCompanyId, +B3UserId)
+      if (typeof b2bId === 'number') {
+        await superAdminEndMasquerade(+salesRepCompanyId, b2bId)
+      }
       dispatch({
         type: 'common',
         payload: {
@@ -112,7 +109,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
         },
       })
 
-      appDispatch(clearMasqueradeCompany())
+      dispatch(clearMasqueradeCompany())
       dispatch({
         type: 'common',
         payload: {

apps/storefront/src/hooks/dom/useDomHooks.ts

@@ -20,7 +20,7 @@ interface MutationObserverProps {
 
 const useDomHooks = ({ setOpenPage, isOpen }: MutationObserverProps) => {
   const {
-    state: { productQuoteEnabled, cartQuoteEnabled, B3UserId },
+    state: { productQuoteEnabled, cartQuoteEnabled },
   } = useContext(GlobaledContext)
   const customerId = useAppSelector(({ company }) => company.customer.id)
   const role = useAppSelector(({ company }) => company.customer.role)
@@ -42,7 +42,6 @@ const useDomHooks = ({ setOpenPage, isOpen }: MutationObserverProps) => {
   useMyQuote({
     setOpenPage,
     productQuoteEnabled,
-    B3UserId,
     role,
     customerId,
   })

apps/storefront/src/hooks/dom/useMyQuote.ts

@@ -24,7 +24,7 @@ import { CustomStyleContext } from '@/shared/customStyleButtton'
 import {
   resetDraftQuoteList,
   setQuoteUserId,
-  store,
+  useAppDispatch,
   useAppSelector,
 } from '@/store'
 import { CustomerRole } from '@/types'
@@ -40,30 +40,34 @@ type DispatchProps = Dispatch<SetStateAction<OpenPageState>>
 interface MutationObserverProps {
   setOpenPage: DispatchProps
   productQuoteEnabled: boolean
-  B3UserId: number | string
   role: number | string
   customerId?: number | string
 }
 
 const useMyQuote = ({
   setOpenPage,
   productQuoteEnabled,
-  B3UserId,
   role,
 }: MutationObserverProps) => {
+  const dispatch = useAppDispatch()
   const quoteDraftUserId = useAppSelector(
     ({ quoteInfo }) => quoteInfo.draftQuoteInfo.userId
   )
+  const b2bId = useAppSelector(({ company }) => company.customer.b2bId)
   useEffect(() => {
     const isLogin = role !== CustomerRole.GUEST
 
-    if (isLogin && +quoteDraftUserId !== 0 && +quoteDraftUserId !== +B3UserId) {
+    if (isLogin && +quoteDraftUserId !== 0 && +quoteDraftUserId !== b2bId) {
       B3LStorage.set('MyQuoteInfo', {})
 
-      store.dispatch(resetDraftQuoteList())
-      store.dispatch(setQuoteUserId(+B3UserId))
+      dispatch(resetDraftQuoteList())
+      if (typeof b2bId === 'number') {
+        dispatch(setQuoteUserId(b2bId))
+      }
     }
-  }, [B3UserId, role, quoteDraftUserId])
+    // ignore dispatch
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [b2bId, role, quoteDraftUserId])
   const cache = useRef({})
   const {
     state: { addQuoteBtn, quoteOnNonPurchasableProductPageBtn },

apps/storefront/src/index.d.ts

@@ -33,8 +33,8 @@ declare interface Window {
           companies: CustomFieldStringItems[]
         }>
         getB2BToken: () => string
-        setMasqueradeCompany: (companyId: number) => Promise<void>
-        endMasquerade: () => Promise<void>
+        setMasqueradeCompany: (companyId: number) => void
+        endMasquerade: () => void
         graphqlBCProxy: typeof import('@/shared/service/request/b3Fetch').default.graphqlBCProxy
         loginWithB2BStorefrontToken: (
           b2bStorefrontJWTToken: string

apps/storefront/src/pages/dashboard/Dashboard.tsx

@@ -124,11 +124,9 @@ function B3Mean({
 }
 
 function Dashboard(props: DashboardProps) {
-  const {
-    state: { B3UserId = 0 },
-    dispatch,
-  } = useContext(GlobaledContext)
+  const { dispatch } = useContext(GlobaledContext)
   const customerId = useAppSelector(({ company }) => company.customer.id)
+  const b2bId = useAppSelector(({ company }) => company.customer.b2bId)
 
   const { setOpenPage } = props
   const b3Lang = useB3Lang()
@@ -158,24 +156,24 @@ function Dashboard(props: DashboardProps) {
   const location = useLocation()
 
   const getSuperAdminCompaniesList = async (params: ListItem) => {
-    const {
-      superAdminCompanies: { edges = [], totalCount },
-    }: any = await superAdminCompanies(+B3UserId, params)
-
-    return {
-      edges,
-      totalCount,
+    let list = { edges: [], totalCount: 0 }
+    if (typeof b2bId === 'number') {
+      list = (await superAdminCompanies(b2bId, params)).superAdminCompanies
     }
+
+    return list
   }
 
   const startActing = async (id?: number) => {
     try {
       setIsRequestLoading(true)
-      await startMasquerade({
-        customerId,
-        companyId: id || currentSalesRepCompanyId,
-        B3UserId: +B3UserId,
-      })
+      if (typeof b2bId === 'number') {
+        await startMasquerade({
+          customerId,
+          companyId: id || currentSalesRepCompanyId,
+          b2bId,
+        })
+      }
 
       setOpenPage({
         isOpen: true,
@@ -193,11 +191,13 @@ function Dashboard(props: DashboardProps) {
   const endActing = async () => {
     try {
       showPageMask(dispatch, true)
-      await endMasquerade({
-        dispatch,
-        salesRepCompanyId: +salesRepCompanyId,
-        B3UserId: +B3UserId,
-      })
+      if (typeof b2bId === 'number') {
+        await endMasquerade({
+          dispatch,
+          salesRepCompanyId: +salesRepCompanyId,
+          b2bId,
+        })
+      }
       setFilterData({
         ...filterData,
       })

apps/storefront/src/pages/login/Login.tsx

@@ -61,16 +61,17 @@ type AlertColor = 'success' | 'info' | 'warning' | 'error'
 
 export default function Login(props: RegisteredProps) {
   const { setOpenPage } = props
+  const storeDispatch = useAppDispatch()
 
   const isLoggedIn = useAppSelector(isLoggedInSelector)
+  const b2bId = useAppSelector(({ company }) => company.customer.b2bId)
   const salesRepCompanyId = useAppSelector(
     ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.id
   )
   const isAgenting = useAppSelector(
     ({ b2bFeatures }) => b2bFeatures.masqueradeCompany.isAgenting
   )
 
-  const storeDispatch = useAppDispatch()
   const [isLoading, setLoading] = useState(true)
   const [isMobile] = useMobile()
 
@@ -86,7 +87,7 @@ export default function Login(props: RegisteredProps) {
   const [searchParams, setSearchParams] = useSearchParams()
 
   const {
-    state: { isCheckout, logo, B3UserId, registerEnabled },
+    state: { isCheckout, logo, registerEnabled },
     dispatch,
   } = useContext(GlobaledContext)
 
@@ -146,8 +147,8 @@ export default function Login(props: RegisteredProps) {
 
           if (result !== 'success') return
 
-          if (isAgenting) {
-            await superAdminEndMasquerade(+salesRepCompanyId, +B3UserId)
+          if (isAgenting && typeof b2bId === 'number') {
+            await superAdminEndMasquerade(+salesRepCompanyId, b2bId)
           }
 
           // SUP-1282 Clear sessionStorage to allow visitors to display the checkout page