fix(BUN-2230): tip expansion migration (#1025)

* fix(BUN-2230): tip expansion migration * fix(BUN-2230): sessionStorage impl
bigcommerce · Apr 23, 2024 · 4676f7f · 4676f7f
1 parent 42e7d62
commit 4676f7f
Showing 1 changed file with 11 additions and 23 deletions.
diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useContext, useState } from 'react'
+import { Dispatch, SetStateAction, useContext } from 'react'
 import { useB3Lang } from '@b3/lang'
 import GroupIcon from '@mui/icons-material/Group'
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'
@@ -12,11 +12,11 @@ import {
 } from '@/constants'
 import { useGetButtonText } from '@/hooks'
 import useMobile from '@/hooks/useMobile'
+import useStorageState from '@/hooks/useStorageState'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { superAdminEndMasquerade } from '@/shared/service/b2b'
 import { clearMasqueradeCompany, useAppDispatch, useAppSelector } from '@/store'
 import { OpenPageState } from '@/types/hooks'
-import { B3SStorage } from '@/utils'
 
 import {
   getContrastColor,
@@ -76,18 +76,11 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
     hash.includes(item)
   )
 
-  const initExpansion = () => {
-    const isMasqueradeTipExpansion = B3SStorage.get('isMasqueradeTipExpansion')
-
-    if (typeof isMasqueradeTipExpansion === 'boolean') {
-      return isMasqueradeTipExpansion
-    }
-
-    return true
-  }
-
-  const [isExpansion, setExpansion] = useState<boolean>(initExpansion())
-
+  const [isExpansion, setExpansion] = useStorageState<boolean>(
+    'sf-isMasqueradeTipExpansion',
+    true,
+    sessionStorage
+  )
   const [isMobile] = useMobile()
 
   const endActing = async () => {
@@ -123,11 +116,6 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
     }
   }
 
-  const isMasqueradeTipExpansion = (isExpansion: boolean) => {
-    setExpansion(isExpansion)
-    B3SStorage.set('isMasqueradeTipExpansion', isExpansion)
-  }
-
   if (href.includes('/checkout') || !customerId) return null
 
   if (!isAgenting) return null
@@ -273,15 +261,15 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
 
                 {isExpansion ? (
                   <KeyboardArrowLeftIcon
-                    onClick={() => isMasqueradeTipExpansion(false)}
+                    onClick={() => setExpansion(false)}
                     sx={{
                       ml: '10px',
                       cursor: 'pointer',
                     }}
                   />
                 ) : (
                   <KeyboardArrowRightIcon
-                    onClick={() => isMasqueradeTipExpansion(true)}
+                    onClick={() => setExpansion(true)}
                     sx={{
                       ml: '10px',
                       cursor: 'pointer',
@@ -357,15 +345,15 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
 
               {isExpansion ? (
                 <KeyboardArrowLeftIcon
-                  onClick={() => isMasqueradeTipExpansion(false)}
+                  onClick={() => setExpansion(false)}
                   sx={{
                     ml: '10px',
                     cursor: 'pointer',
                   }}
                 />
               ) : (
                 <KeyboardArrowRightIcon
-                  onClick={() => isMasqueradeTipExpansion(true)}
+                  onClick={() => setExpansion(true)}
                   sx={{
                     ml: '10px',
                     cursor: 'pointer',