fix: sync draft quote between tabs

.cspell.json

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

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

@@ -30,7 +30,7 @@ interface IsShowBlockPendingAccountOrderCreationTipProps {
 }
 
 const useCartToQuote = ({ setOpenPage, cartQuoteEnabled }: MutationObserverProps) => {
-  const { addToQuote, addLoadding } = addProductsFromCartToQuote(setOpenPage);
+  const { addToQuote, addLoading } = addProductsFromCartToQuote(setOpenPage);
 
   const translationVarName = 'global.customStyles.addToAllQuoteBtn';
   const defaultButtonText = 'Add All To Quote';
@@ -92,19 +92,19 @@ const useCartToQuote = ({ setOpenPage, cartQuoteEnabled }: MutationObserverProps
     };
 
     showPendingAccountTip();
-    // ignore to avoid adding state function otherwirse it will cause many renders of tip
+    // ignore to avoid adding state function otherwise it will cause many renders of tip
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname, blockPendingAccountOrderCreation, companyStatus]);
 
-  const quoteCallBbck = useCallback(() => {
+  const quoteCallBack = useCallback(() => {
     const b3CartToQuote = document.querySelector('.b2b-cart-to-quote');
 
     const b2bLoading = document.querySelector('#b2b-div-loading');
     if (b3CartToQuote && !b2bLoading) {
-      addLoadding(b3CartToQuote);
+      addLoading(b3CartToQuote);
       addToQuote();
     }
-  }, [addLoadding, addToQuote]);
+  }, [addLoading, addToQuote]);
 
   const {
     color = '',
@@ -166,7 +166,7 @@ const useCartToQuote = ({ setOpenPage, cartQuoteEnabled }: MutationObserverProps
 
           setMediaStyle(mediaBlocks, `b2b-cart-to-quote ${classSelector}`);
           node.appendChild(cartQuoteBtnDom);
-          cartQuoteBtnDom.addEventListener('click', quoteCallBbck, {
+          cartQuoteBtnDom.addEventListener('click', quoteCallBack, {
             capture: true,
           });
         },
@@ -176,7 +176,7 @@ const useCartToQuote = ({ setOpenPage, cartQuoteEnabled }: MutationObserverProps
     // eslint-disable-next-line
     return () => {
       if (cartQuoteBtnDom) {
-        cartQuoteBtnDom.removeEventListener('click', quoteCallBbck);
+        cartQuoteBtnDom.removeEventListener('click', quoteCallBack);
       }
     };
   }, [
@@ -190,7 +190,7 @@ const useCartToQuote = ({ setOpenPage, cartQuoteEnabled }: MutationObserverProps
     enabled,
     locationSelector,
     mediaBlocks,
-    quoteCallBbck,
+    quoteCallBack,
   ]);
 };
 

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

@@ -42,35 +42,41 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
   const dispatch = useAppDispatch();
   const quoteDraftUserId = useAppSelector(({ quoteInfo }) => quoteInfo.draftQuoteInfo.userId);
   const b2bId = useAppSelector(({ company }) => company.customer.b2bId);
+  const b2cId = useAppSelector(({ company }) => company.customer.id);
   const isEnableProduct =
     useAppSelector(({ global }) => global.blockPendingQuoteNonPurchasableOOS.isEnableProduct) ||
     false;
 
   useEffect(() => {
     const isLoginAndNotB2CAccount = role !== CustomerRole.GUEST && role !== CustomerRole.B2C;
 
-    if (
-      quoteDraftUserId &&
-      isLoginAndNotB2CAccount &&
-      +quoteDraftUserId !== 0 &&
-      +quoteDraftUserId !== b2bId
-    ) {
+    if (role !== CustomerRole.GUEST && !quoteDraftUserId) {
+      dispatch(setQuoteUserId(b2cId));
+    }
+
+    const isClearQuoteData =
+      (quoteDraftUserId &&
+        isLoginAndNotB2CAccount &&
+        +quoteDraftUserId !== 0 &&
+        +quoteDraftUserId !== b2bId) ||
+      (role === CustomerRole.B2C && quoteDraftUserId && b2cId && +quoteDraftUserId !== b2cId);
+
+    if (isClearQuoteData) {
       dispatch(resetDraftQuoteInfo());
       dispatch(resetDraftQuoteList());
-      if (typeof b2bId === 'number') {
-        dispatch(setQuoteUserId(b2bId));
-      }
+      dispatch(setQuoteUserId(typeof b2bId === 'number' ? b2bId : b2cId));
     }
     // ignore dispatch
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [b2bId, role, quoteDraftUserId]);
+  }, [b2bId, role, quoteDraftUserId, b2cId]);
+
   const cache = useRef({});
   const {
     state: { addQuoteBtn, quoteOnNonPurchasableProductPageBtn },
   } = useContext(CustomStyleContext);
 
   // quote method and go to draft
-  const { addToQuote, addLoadding } = addProductFromProductPageToQuote(
+  const { addToQuote, addLoading } = addProductFromProductPageToQuote(
     setOpenPage,
     isEnableProduct,
     b3Lang,
@@ -81,11 +87,11 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
       const b3MyQuote = e.target as HTMLElement;
       const b2bLoading = document.querySelector('#b2b-div-loading');
       if (b3MyQuote && !b2bLoading) {
-        addLoadding(b3MyQuote);
+        addLoading(b3MyQuote);
         addToQuote(role, b3MyQuote);
       }
     },
-    [role, addLoadding, addToQuote],
+    [role, addLoading, addToQuote],
   );
 
   const cd = () => {
@@ -108,22 +114,22 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
   } = addQuoteBtn;
 
   const {
-    color: noPuchasableQuoteColor = '',
-    text: noPuchasableQuoteText = '',
-    customCss: noPuchasableQuoteCustomCss = '',
-    classSelector: noPuchasableQuoteClassSelector = '',
-    locationSelector: noPuchasableQuoteLocationSelector = '',
-    enabled: noPuchasableQuoteEnabled = false,
+    color: noPurchasableQuoteColor = '',
+    text: noPurchasableQuoteText = '',
+    customCss: noPurchasableQuoteCustomCss = '',
+    classSelector: noPurchasableQuoteClassSelector = '',
+    locationSelector: noPurchasableQuoteLocationSelector = '',
+    enabled: noPurchasableQuoteEnabled = false,
   } = quoteOnNonPurchasableProductPageBtn;
 
-  const newText = isBuyPurchasable ? text : noPuchasableQuoteText;
+  const newText = isBuyPurchasable ? text : noPurchasableQuoteText;
   const myQuoteBtnLabel = useGetButtonText(
     TRANSLATION_ADD_TO_QUOTE_VARIABLE,
     newText,
     ADD_TO_QUOTE_DEFAULT_VALUE,
   );
 
-  const cssInfo = splitCustomCssValue(isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss);
+  const cssInfo = splitCustomCssValue(isBuyPurchasable ? customCss : noPurchasableQuoteCustomCss);
   const {
     cssValue,
     mediaBlocks,
@@ -133,7 +139,7 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
   } = cssInfo;
   const customTextColor =
     getStyles(cssValue).color ||
-    getContrastColor(isBuyPurchasable ? color : noPuchasableQuoteColor);
+    getContrastColor(isBuyPurchasable ? color : noPurchasableQuoteColor);
 
   const clearQuoteDom = () => {
     const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote');
@@ -142,9 +148,10 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
     });
   };
 
-  const clearNoPuchasableQuoteDom = () => {
-    const myNoPuchasableQuoteBtn = document.querySelectorAll('.b2b-add-to-no-puchasable-quote');
-    myNoPuchasableQuoteBtn.forEach((item: CustomFieldItems) => {
+  const clearNoPurchasableQuoteDom = () => {
+    // cspell:disable-next-line
+    const myNoPurchasableQuoteBtn = document.querySelectorAll('.b2b-add-to-no-puchasable-quote');
+    myNoPurchasableQuoteBtn.forEach((item: CustomFieldItems) => {
       removeElement(item);
     });
   };
@@ -154,17 +161,17 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
     myQuoteBtn.forEach((quote: CustomFieldItems) => {
       const myQuote = quote;
       myQuote.innerHTML = myQuoteBtnLabel;
-      myQuote.setAttribute('style', isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss);
-      myQuote.style.backgroundColor = isBuyPurchasable ? color : noPuchasableQuoteColor;
+      myQuote.setAttribute('style', isBuyPurchasable ? customCss : noPurchasableQuoteCustomCss);
+      myQuote.style.backgroundColor = isBuyPurchasable ? color : noPurchasableQuoteColor;
       myQuote.style.color = customTextColor;
       myQuote.setAttribute(
         'class',
-        `b2b-add-to-quote ${isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector}`,
+        `b2b-add-to-quote ${isBuyPurchasable ? classSelector : noPurchasableQuoteClassSelector}`,
       );
 
       setMediaStyle(
         mediaBlocks,
-        `b2b-add-to-quote ${isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector}`,
+        `b2b-add-to-quote ${isBuyPurchasable ? classSelector : noPurchasableQuoteClassSelector}`,
       );
     });
   }, [
@@ -175,9 +182,9 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
     isBuyPurchasable,
     mediaBlocks,
     myQuoteBtnLabel,
-    noPuchasableQuoteClassSelector,
-    noPuchasableQuoteColor,
-    noPuchasableQuoteCustomCss,
+    noPurchasableQuoteClassSelector,
+    noPurchasableQuoteColor,
+    noPurchasableQuoteCustomCss,
   ]);
 
   useEffect(() => {
@@ -186,8 +193,10 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
       addToQuoteAll: NodeListOf<Element>,
       isBuyer: boolean,
     ) => {
+      // cspell:disable
       const quoteNode = isBuyer ? '.b2b-add-to-quote' : '.b2b-add-to-no-puchasable-quote';
       const quoteNodeStyle = isBuyer ? 'b2b-add-to-quote' : 'b2b-add-to-no-puchasable-quote';
+      // cspell:enable
 
       if (document.querySelectorAll(quoteNode)?.length) {
         const cacheQuoteDom = cache.current;
@@ -202,7 +211,7 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
         }
       }
 
-      if (isBuyPurchasable ? enabled : noPuchasableQuoteEnabled) {
+      if (isBuyPurchasable ? enabled : noPurchasableQuoteEnabled) {
         (CustomAddToQuoteAll.length ? CustomAddToQuoteAll : addToQuoteAll).forEach(
           (node: CustomFieldItems) => {
             const children = node.parentNode.querySelectorAll(quoteNode);
@@ -212,21 +221,21 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
               myQuote.innerHTML = myQuoteBtnLabel;
               myQuote.setAttribute(
                 'style',
-                isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss,
+                isBuyPurchasable ? customCss : noPurchasableQuoteCustomCss,
               );
-              myQuote.style.backgroundColor = isBuyPurchasable ? color : noPuchasableQuoteColor;
+              myQuote.style.backgroundColor = isBuyPurchasable ? color : noPurchasableQuoteColor;
               myQuote.style.color = customTextColor;
               myQuote.setAttribute(
                 'class',
                 `${quoteNodeStyle} ${
-                  isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
+                  isBuyPurchasable ? classSelector : noPurchasableQuoteClassSelector
                 }`,
               );
 
               setMediaStyle(
                 mediaBlocks,
                 `${quoteNodeStyle} ${
-                  isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
+                  isBuyPurchasable ? classSelector : noPurchasableQuoteClassSelector
                 }`,
               );
               if (CustomAddToQuoteAll.length) {
@@ -248,25 +257,26 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
 
     if (!productQuoteEnabled) {
       clearQuoteDom();
-      clearNoPuchasableQuoteDom();
+      clearNoPurchasableQuoteDom();
       return;
     }
 
     if (!isBuyPurchasable) {
       clearQuoteDom();
-      const noPuchasableQuoteAll = document.querySelectorAll(config['dom.setToNoPuchasable']);
+      // cspell:disable-next-line
+      const noPurchasableQuoteAll = document.querySelectorAll(config['dom.setToNoPuchasable']);
 
-      const CustomAddToQuoteAll = noPuchasableQuoteLocationSelector
-        ? document.querySelectorAll(noPuchasableQuoteLocationSelector)
+      const CustomAddToQuoteAll = noPurchasableQuoteLocationSelector
+        ? document.querySelectorAll(noPurchasableQuoteLocationSelector)
         : [];
 
-      if (!noPuchasableQuoteAll.length && !CustomAddToQuoteAll.length) return;
+      if (!noPurchasableQuoteAll.length && !CustomAddToQuoteAll.length) return;
 
-      if (noPuchasableQuoteAll.length) {
-        purchasableQuote(CustomAddToQuoteAll, noPuchasableQuoteAll, false);
+      if (noPurchasableQuoteAll.length) {
+        purchasableQuote(CustomAddToQuoteAll, noPurchasableQuoteAll, false);
       }
     } else {
-      clearNoPuchasableQuoteDom();
+      clearNoPurchasableQuoteDom();
       const addToQuoteAll = document.querySelectorAll(config['dom.setToQuote']);
       const CustomAddToQuoteAll = locationSelector
         ? document.querySelectorAll(locationSelector)
@@ -289,7 +299,7 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
     addQuoteBtn,
     isBuyPurchasable,
     locationSelector,
-    noPuchasableQuoteLocationSelector,
+    noPurchasableQuoteLocationSelector,
     quoteCallBack,
     addBtnStyle,
     classSelector,
@@ -299,10 +309,10 @@ const useMyQuote = ({ setOpenPage, productQuoteEnabled, role }: MutationObserver
     enabled,
     mediaBlocks,
     myQuoteBtnLabel,
-    noPuchasableQuoteClassSelector,
-    noPuchasableQuoteColor,
-    noPuchasableQuoteCustomCss,
-    noPuchasableQuoteEnabled,
+    noPurchasableQuoteClassSelector,
+    noPurchasableQuoteColor,
+    noPurchasableQuoteCustomCss,
+    noPurchasableQuoteEnabled,
   ]);
 };
 

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

@@ -110,7 +110,7 @@ interface CartInfoProps {
   updatedTime: string;
 }
 
-const addLoadding = (b3CartToQuote: any) => {
+const addLoading = (b3CartToQuote: any) => {
   const loadingDiv = document.createElement('div');
   loadingDiv.setAttribute('id', 'b2b-div-loading');
   const loadingBtn = document.createElement('div');
@@ -126,7 +126,7 @@ const removeElement = (_element: CustomFieldItems) => {
   }
 };
 
-const removeLoadding = () => {
+const removeLoading = () => {
   const b2bLoading = document.querySelector('#b2b-div-loading');
   if (b2bLoading) removeElement(b2bLoading);
 };
@@ -262,13 +262,13 @@ const addProductsFromCartToQuote = (setOpenPage: SetOpenPage) => {
     } catch (e) {
       b2bLogger.error(e);
     } finally {
-      removeLoadding();
+      removeLoading();
     }
   };
 
   return {
     addToQuote,
-    addLoadding,
+    addLoading,
   };
 };
 
@@ -392,18 +392,18 @@ const addProductFromProductPageToQuote = (
     } catch (e) {
       b2bLogger.error(e);
     } finally {
-      removeLoadding();
+      removeLoading();
     }
   };
 
   return {
     addToQuote,
-    addLoadding,
+    addLoading,
   };
 };
 
 export {
-  addLoadding,
+  addLoading,
   addProductFromProductPageToQuote,
   addProductsFromCartToQuote,
   addProductsToDraftQuote,