fix: quickview

bigcommerce · Mar 20, 2023 · 82304f4 · 82304f4
1 parent 7950e2b
commit 82304f4
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/apps/storefront/src/hooks/useMyQuote.ts b/apps/storefront/src/hooks/useMyQuote.ts
@@ -77,7 +77,7 @@ const useMyQuote = ({
   B3UserId,
   role,
 }: MutationObserverProps) => {
-  const [openQuickViewNum, setOpenQuickViewNum] = useState<number>(0)
+  const [openQuickView, setOpenQuickView] = useState<boolean>(true)
 
   const [openTipState, setOpenTipState] = useState<OpenTipStateProps>({
     isOpen: false,
@@ -195,6 +195,23 @@ const useMyQuote = ({
     }
   }
 
+  const changeQuickview = () => {
+    setOpenQuickView((openQuickView) => !openQuickView)
+  }
+
+  useEffect(() => {
+    const quickview = document.querySelectorAll('.quickview')
+    quickview.forEach((dom: any) => {
+      dom.addEventListener('click', () => changeQuickview())
+    })
+
+    return () => {
+      quickview.forEach((dom: any) => {
+        dom.removeEventListener('click', () => changeQuickview())
+      })
+    }
+  }, [])
+
   const quoteCallBbck = useCallback(() => {
     const b3MyQuote = document.querySelector('#b3MyQuote')
     const b2bLoading = document.querySelector('#b2b-div-loading')
@@ -204,16 +221,23 @@ const useMyQuote = ({
     }
   }, [])
 
+  // const cd = () => {
+  //   if (document.querySelectorAll(globalB3['dom.setToQuote']).length) {
+  //     setOpenQuickViewNum(openQuickViewNum + 1)
+  //     removeCartPermissions(role)
+  //   }
+  // }
+
   const cd = useCallback(() => {
+    removeCartPermissions(role)
     if (document.querySelectorAll(globalB3['dom.setToQuote']).length) {
-      setOpenQuickViewNum(openQuickViewNum + 1)
-      removeCartPermissions(role)
+      setOpenQuickView((openQuickView) => !openQuickView)
     }
   }, [role])
 
   useMutationObservable(document.documentElement, cd)
 
-  useB3Quote(globalB3['dom.setToQuote'], quoteCallBbck, openQuickViewNum, productQuoteEnabled)
+  useB3Quote(globalB3['dom.setToQuote'], quoteCallBbck, openQuickView, productQuoteEnabled)
 
   useQuoteGlobalTip(openTipState, setOpenPage, initTip)
 }

diff --git a/apps/storefront/src/hooks/useOpenPDP.ts b/apps/storefront/src/hooks/useOpenPDP.ts
@@ -2,6 +2,7 @@ import {
   useCallback, useState,
   SetStateAction,
   Dispatch,
+  useEffect,
 } from 'react'
 
 import {
@@ -24,7 +25,24 @@ interface MutationObserverProps {
 const useOpenPDP = ({
   setOpenPage, isB2BUser, shoppingListEnabled,
 }: MutationObserverProps) => {
-  const [openQuickViewNum, setOpenQuickViewNum] = useState<number>(0)
+  const [openQuickView, setOpenQuickView] = useState<boolean>(false)
+
+  const changeQuickview = () => {
+    setOpenQuickView((openQuickView) => !openQuickView)
+  }
+
+  useEffect(() => {
+    const quickview = document.querySelectorAll('.quickview')
+    quickview.forEach((dom: any) => {
+      dom.addEventListener('click', () => changeQuickview())
+    })
+
+    return () => {
+      quickview.forEach((dom: any) => {
+        dom.removeEventListener('click', () => changeQuickview())
+      })
+    }
+  }, [])
 
   const pdpCallBbck = useCallback(() => {
     setOpenPage({
@@ -35,13 +53,13 @@ const useOpenPDP = ({
 
   const cd = useCallback(() => {
     if (document.querySelectorAll(globalB3['dom.setToShoppingListParentEl']).length) {
-      setOpenQuickViewNum(openQuickViewNum + 1)
+      setOpenQuickView((openQuickView) => !openQuickView)
     }
   }, [])
 
   useMutationObservable(document.documentElement, cd)
 
-  useB3PDPOpen(globalB3['dom.setToShoppingListParentEl'], pdpCallBbck, isB2BUser, shoppingListEnabled, openQuickViewNum)
+  useB3PDPOpen(globalB3['dom.setToShoppingListParentEl'], pdpCallBbck, isB2BUser, shoppingListEnabled, openQuickView)
 }
 
 export {

diff --git a/packages/hooks/useB3PDPOpen.ts b/packages/hooks/useB3PDPOpen.ts
@@ -9,7 +9,7 @@ const removeElement = (_element: CustomFieldItems) => {
   }
 }
 
-export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, shoppingListEnabled: boolean, openQuickViewNum: number) => {
+export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, shoppingListEnabled: boolean, openQuickView: boolean) => {
   useEffect(() => {
     const addToCartAll = document.querySelectorAll(el)
     const wishlistSdd = document.querySelector('form[data-wishlist-add]')
@@ -40,5 +40,5 @@ export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, sho
         shoppingBtnDom.removeEventListener('click', cd)
       }
     }
-  }, [isB2BUser, shoppingListEnabled, openQuickViewNum])
+  }, [isB2BUser, shoppingListEnabled, openQuickView])
 }
diff --git a/packages/hooks/useB3Quote.ts b/packages/hooks/useB3Quote.ts
@@ -2,7 +2,7 @@ import {
   useEffect,
 } from 'react'
 
-export const useB3Quote = (el: string, cd: () => void, openQuickViewNum: number, isEnabled: boolean) => {
+export const useB3Quote = (el: string, cd: () => void, openQuickView: boolean, isEnabled: boolean) => {
   useEffect(() => {
     const addToQuoteAll = document.querySelectorAll(el)
 
@@ -34,5 +34,5 @@ export const useB3Quote = (el: string, cd: () => void, openQuickViewNum: number,
         shoppingBtnDom.removeEventListener('click', cd)
       }
     }
-  }, [openQuickViewNum, isEnabled])
+  }, [openQuickView, isEnabled])
 }