fix: dual browser login makes the former log out normally (#200)

.cspell.json

@@ -14,7 +14,9 @@
     "msword",
     "Turborepo",
     "registeredbctob2b",
-    "purchasability"
+    "purchasability",
+    "forgotpassword",
+    "accountincorrect"
   ],
   // flagWords - list of words to be always considered incorrect
   // This is useful for offensive words and common spelling errors.

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

@@ -1,11 +1,15 @@
-import { Dispatch, SetStateAction, useContext, useEffect } from 'react';
+import { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react';
 import config from '@b3/global-b3';
 import { useB3Lang } from '@b3/lang';
 
 import { CustomStyleContext } from '@/shared/customStyleButton';
 import { GlobalContext } from '@/shared/global';
 import { isB2BUserSelector, useAppSelector } from '@/store';
+import { CustomerRole } from '@/types';
 import { OpenPageState } from '@/types/hooks';
+import b2bLogger from '@/utils/b3Logger';
+
+import b2bVerifyBcLoginStatus from '../../utils/b2bVerifyBcLoginStatus';
 
 import useDomVariation from './useDomVariation';
 
@@ -17,6 +21,7 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
   } = useContext(GlobalContext);
   const isB2BUser = useAppSelector(isB2BUserSelector);
   const customerId = useAppSelector(({ company }) => company.customer.id);
+  const role = useAppSelector(({ company }) => company.customer.role);
   const companyStatus = useAppSelector(({ company }) => company.companyInfo.status);
 
   const {
@@ -26,6 +31,22 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
   } = useContext(CustomStyleContext);
 
   const [openQuickView] = useDomVariation(config['dom.navUserLoginElement']);
+  const [isBcLogin, setIsBcLogin] = useState(false);
+
+  const handleVerifyBcLoginStatus = async () => {
+    try {
+      const bcLoginStatus = await Promise.all([b2bVerifyBcLoginStatus()]);
+      setIsBcLogin(bcLoginStatus[0]);
+    } catch (error) {
+      b2bLogger.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (+role === CustomerRole.B2C) {
+      handleVerifyBcLoginStatus();
+    }
+  }, [role]);
 
   useEffect(() => {
     const createConvertB2BNavNode = () => {
@@ -55,7 +76,7 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
         return;
       }
 
-      if (!registerEnabled) return;
+      if (!registerEnabled || !isBcLogin) return;
 
       const convertB2BNavNode = createConvertB2BNavNode();
       const accountNode = document.querySelector(config['dom.navUserLoginElement']);
@@ -76,7 +97,7 @@ const useRegisteredbctob2b = (setOpenPage: Dispatch<SetStateAction<OpenPageState
     }
     // ignoring to not add b3Lang to the dependencies array
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isB2BUser, customerId, openQuickView, b2b, registerEnabled, companyStatus]);
+  }, [isB2BUser, customerId, openQuickView, b2b, registerEnabled, companyStatus, isBcLogin]);
 };
 
 export default useRegisteredbctob2b;

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

@@ -158,21 +158,6 @@ export default function Login(props: PageProps) {
             window.b2b.callbacks.dispatchEvent(B2BEvent.OnLogout);
             setLoading(false);
           }
-
-          const { result } = (await bcLogoutLogin()).data.logout;
-
-          if (result !== 'success') return;
-
-          if (isAgenting) {
-            await endMasquerade();
-          }
-
-          // SUP-1282 Clear sessionStorage to allow visitors to display the checkout page
-          window.sessionStorage.clear();
-
-          logoutSession();
-          setLoading(false);
-          return;
         }
         setLoading(false);
       } finally {

apps/storefront/src/shared/routes/index.tsx

@@ -3,13 +3,14 @@ import { matchPath } from 'react-router-dom';
 
 import { type PageProps } from '@/pages/PageProps';
 import { GlobalState, QuoteConfigProps } from '@/shared/global/context/config';
-import { getCustomerInfo } from '@/shared/service/bc';
 import { store } from '@/store';
 import { CompanyStatus, CustomerRole, UserTypes } from '@/types';
 import { checkEveryPermissionsCode, getB3PermissionsList, getPermissionsInfo } from '@/utils';
 import b2bLogger from '@/utils/b3Logger';
 import { isB2bTokenPage, logoutSession } from '@/utils/b3logout';
 
+import b2bVerifyBcLoginStatus from '../../utils/b2bVerifyBcLoginStatus';
+
 const AccountSetting = lazy(() => import('@/pages/AccountSetting'));
 const AddressList = lazy(() => import('@/pages/Address'));
 const CompanyOrderList = lazy(() => import('@/pages/CompanyOrder'));
@@ -428,11 +429,9 @@ const gotoAllowedAppPage = async (
     return;
   }
   try {
-    const {
-      data: { customer },
-    } = await getCustomerInfo();
+    const isBcLogin = await b2bVerifyBcLoginStatus();
 
-    if (!customer && isB2bTokenPage()) {
+    if (!isBcLogin && isB2bTokenPage()) {
       logoutSession();
       gotoPage('/login?loginFlag=deviceCrowdingLogIn');
       return;

apps/storefront/src/shared/service/bc/graphql/user.ts

@@ -22,5 +22,3 @@ const customerExists = () =>
   });
 
 export { customerExists, getCustomerInfo };
-
-// export default getCustomerInfo

apps/storefront/src/utils/b2bVerifyBcLoginStatus.ts

@@ -0,0 +1,25 @@
+import { getCurrentCustomerJWT } from '@/shared/service/bc';
+import { B2B_APP_CLIENT_ID } from '@/shared/service/request/base';
+import { store } from '@/store';
+import { CustomerRole } from '@/types';
+import b2bLogger from '@/utils/b3Logger';
+
+const b2bVerifyBcLoginStatus = async () => {
+  let isBcLogin = false;
+  const { role } = store.getState().company.customer;
+
+  try {
+    if (+role !== CustomerRole.GUEST) {
+      const bcToken = await getCurrentCustomerJWT(B2B_APP_CLIENT_ID);
+      isBcLogin = !!bcToken;
+
+      return isBcLogin;
+    }
+  } catch (err: unknown) {
+    b2bLogger.error(err);
+  }
+
+  return isBcLogin;
+};
+
+export default b2bVerifyBcLoginStatus;

apps/storefront/src/utils/b3logout.ts

@@ -1,7 +1,7 @@
-import { customerExists } from '@/shared/service/bc';
 import { store } from '@/store';
 import { clearCompanySlice } from '@/store/slices/company';
 
+import b2bVerifyBcLoginStatus from './b2bVerifyBcLoginStatus';
 import b2bLogger from './b3Logger';
 
 export const logoutSession = () => {
@@ -27,17 +27,16 @@ export const isB2bTokenPage = (gotoUrl?: string) => {
 export const isUserGotoLogin = async (gotoUrl: string) => {
   const isB2bPage = isB2bTokenPage(gotoUrl);
   let isGotoLogin = false;
+
   try {
-    const {
-      data: { customer },
-    } = await customerExists();
+    const isBcLogin = await b2bVerifyBcLoginStatus();
 
-    if (!customer && isB2bPage) {
+    if (!isBcLogin && isB2bPage) {
       logoutSession();
       isGotoLogin = true;
     }
-  } catch (err: unknown) {
-    b2bLogger.error(err);
+  } catch (error: unknown) {
+    b2bLogger.error(error);
   }
 
   return isGotoLogin;