fix: displaying correctly custom styles vars (#918)

* fix: displaying correctly custom styles vars

* fix: improving use of constants

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

@@ -8,6 +8,11 @@ import {
 import type { OpenPageState } from '@b3/hooks'
 import { Box, Button, Snackbar, SnackbarOrigin, SxProps } from '@mui/material'
 
+import {
+  FINISH_QUOTE_DEFUALT_VALUE,
+  TRANSLATION_FINISH_QUOTE_VARIABLE,
+} from '@/constants'
+import { useGetButtonText } from '@/hooks'
 import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { B3LStorage } from '@/utils'
@@ -58,6 +63,12 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
     enabled = false,
   } = floatingAction
 
+  const buttonText = useGetButtonText(
+    TRANSLATION_FINISH_QUOTE_VARIABLE,
+    text,
+    FINISH_QUOTE_DEFUALT_VALUE
+  )
+
   const defaultLocation: SnackbarOrigin = {
     vertical: 'bottom',
     horizontal: 'right',
@@ -126,7 +137,7 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
               }}
               variant="contained"
             >
-              {text || 'Finish quote'}
+              {buttonText}
             </Button>
           )}
       </Box>

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

@@ -1,11 +1,17 @@
 import { Dispatch, SetStateAction, useContext, useState } from 'react'
 import type { OpenPageState } from '@b3/hooks'
+import { useB3Lang } from '@b3/lang'
 import GroupIcon from '@mui/icons-material/Group'
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import { Box, Button, SnackbarOrigin, SxProps } from '@mui/material'
 import Snackbar from '@mui/material/Snackbar'
 
+import {
+  END_MASQUERADE_DEFAULT_VALUE,
+  TRANSLATION_MASQUERADE_BUTTON_VARIABLE,
+} from '@/constants'
+import { useGetButtonText } from '@/hooks'
 import useMobile from '@/hooks/useMobile'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
@@ -43,10 +49,27 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
 
   const { hash, href } = window.location
 
+  const b3Lang = useB3Lang()
+
   const {
     state: { masqueradeButton },
   } = useContext(CustomStyleContext)
 
+  const {
+    text = '',
+    color = '',
+    customCss = '',
+    location = 'bottomLeft',
+    horizontalPadding = '',
+    verticalPadding = '',
+  } = masqueradeButton
+
+  const buttonLabel = useGetButtonText(
+    TRANSLATION_MASQUERADE_BUTTON_VARIABLE,
+    text,
+    END_MASQUERADE_DEFAULT_VALUE
+  )
+
   const isAddBottom = bottomHeightPage.some((item: string) =>
     hash.includes(item)
   )
@@ -102,15 +125,6 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
 
   if (!isAgenting) return null
 
-  const {
-    text = '',
-    color = '',
-    customCss = '',
-    location = 'bottomLeft',
-    horizontalPadding = '',
-    verticalPadding = '',
-  } = masqueradeButton
-
   const defaultLocation: SnackbarOrigin = {
     vertical: 'bottom',
     horizontal: 'left',
@@ -226,7 +240,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
                       fontWeight: 400,
                     }}
                   >
-                    You are masqueraded as
+                    {b3Lang('global.masquerade.youAreMasqueradeAs')}
                   </Box>
                 )}
                 <Box
@@ -246,7 +260,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
                     }}
                     onClick={() => endActing()}
                   >
-                    {text}
+                    {buttonLabel}
                   </Box>
                 )}
 
@@ -310,7 +324,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
                     fontWeight: 400,
                   }}
                 >
-                  You are masqueraded as
+                  {b3Lang('global.masquerade.youAreMasqueradeAs')}
                 </Box>
               )}
               <Box
@@ -330,7 +344,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
                   }}
                   onClick={() => endActing()}
                 >
-                  {text}
+                  {buttonLabel}
                 </Box>
               )}
 
@@ -413,7 +427,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
                 }}
                 onClick={() => endActing()}
               >
-                END MASQUERADE
+                {buttonLabel}
               </Box>
             </Box>
           </Box>

apps/storefront/src/constants/index.ts

@@ -59,3 +59,16 @@ export const StatusNotifications = {
   rejectedTip:
     'Your business account has been rejected. Check your email inbox, we sent you a letter with all details. You can resubmit your application.',
 }
+
+export const ADD_TO_QUOTE_DEFAULT_VALUE = 'Add to quote'
+export const ADD_TO_SHOPPING_LIST_DEFUALT_VALUE = 'Add to Shopping List'
+export const END_MASQUERADE_DEFAULT_VALUE = 'END MASQUERADE'
+export const FINISH_QUOTE_DEFUALT_VALUE = 'Finish quote'
+export const TRANSLATION_ADD_TO_QUOTE_VARIABLE =
+  'global.customStyles.addQuoteBtn'
+export const TRANSLATION_FINISH_QUOTE_VARIABLE =
+  'global.customStyles.floatingAction'
+export const TRANSLATION_MASQUERADE_BUTTON_VARIABLE =
+  'global.customStyles.masqueradeButton'
+export const TRANSLATION_SHOPPING_LIST_BTN_VARAIBLE =
+  'global.customStyles.shoppingListBtn'

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

@@ -15,6 +15,7 @@ import {
   setMediaStyle,
   splitCustomCssValue,
 } from '@/components/outSideComponents/utils/b3CustomStyles'
+import { useGetButtonText } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { B3SStorage, globalSnackbar } from '@/utils'
@@ -42,6 +43,9 @@ const useCartToQuote = ({
     platform
   )
 
+  const translationVarName = 'global.customStyles.addToAllQuoteBtn'
+  const defaultButtonText = 'Add All To Quote'
+
   const {
     state: { addToAllQuoteBtn },
   } = useContext(CustomStyleContext)
@@ -132,6 +136,12 @@ const useCartToQuote = ({
     enabled = false,
   } = addToAllQuoteBtn
 
+  const cartToQuoteBtnLabel = useGetButtonText(
+    translationVarName,
+    text,
+    defaultButtonText
+  )
+
   const cssInfo = splitCustomCssValue(customCss)
   const {
     cssValue,
@@ -161,7 +171,7 @@ const useCartToQuote = ({
     if (document.querySelectorAll('.b2b-cart-to-quote')?.length) {
       const cartToQuoteBtn = document.querySelectorAll('.b2b-cart-to-quote')
       cartToQuoteBtn.forEach((cartToQuoteBtn: CustomFieldItems) => {
-        cartToQuoteBtn.innerHTML = text || 'Add All to Quote'
+        cartToQuoteBtn.innerHTML = cartToQuoteBtnLabel
         cartToQuoteBtn.setAttribute('style', customCss)
         cartToQuoteBtn.style.backgroundColor = color
         cartToQuoteBtn.style.color = customTextColor
@@ -181,7 +191,7 @@ const useCartToQuote = ({
         : addToQuoteAll
       ).forEach((node: CustomFieldItems) => {
         cartQuoteBtnDom = document.createElement('div')
-        cartQuoteBtnDom.innerHTML = text || 'Add All to Quote'
+        cartQuoteBtnDom.innerHTML = cartToQuoteBtnLabel
         cartQuoteBtnDom.setAttribute('style', customCss)
         cartQuoteBtnDom.style.backgroundColor = color
         cartQuoteBtnDom.style.color = customTextColor

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

@@ -16,6 +16,11 @@ import {
   setMediaStyle,
   splitCustomCssValue,
 } from '@/components/outSideComponents/utils/b3CustomStyles'
+import {
+  ADD_TO_QUOTE_DEFAULT_VALUE,
+  TRANSLATION_ADD_TO_QUOTE_VARIABLE,
+} from '@/constants'
+import { useGetButtonText } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { B3LStorage, setCartPermissions } from '@/utils'
 
@@ -53,7 +58,6 @@ const useMyQuote = ({
     }
   }, [B3UserId])
   const cache = useRef({})
-
   const {
     state: { addQuoteBtn },
   } = useContext(CustomStyleContext)
@@ -87,6 +91,11 @@ const useMyQuote = ({
     locationSelector = '',
     enabled = false,
   } = addQuoteBtn
+  const myQuoteBtnLabel = useGetButtonText(
+    TRANSLATION_ADD_TO_QUOTE_VARIABLE,
+    text,
+    ADD_TO_QUOTE_DEFAULT_VALUE
+  )
 
   const cssInfo = splitCustomCssValue(customCss)
   const {
@@ -121,7 +130,7 @@ const useMyQuote = ({
       if (!isAddStyle) {
         const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
         myQuoteBtn.forEach((myQuote: CustomFieldItems) => {
-          myQuote.innerHTML = text || 'Add to Quote'
+          myQuote.innerHTML = myQuoteBtnLabel
           myQuote.setAttribute('style', customCss)
           myQuote.style.backgroundColor = color
           myQuote.style.color = customTextColor
@@ -142,7 +151,7 @@ const useMyQuote = ({
         if (!children.length) {
           let myQuote: CustomFieldItems | null = null
           myQuote = document.createElement('div')
-          myQuote.innerHTML = text || 'Add to Quote'
+          myQuote.innerHTML = myQuoteBtnLabel
           myQuote.setAttribute('style', customCss)
           myQuote.style.backgroundColor = color
           myQuote.style.color = customTextColor

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

@@ -18,6 +18,11 @@ import {
   setMediaStyle,
   splitCustomCssValue,
 } from '@/components/outSideComponents/utils/b3CustomStyles'
+import {
+  ADD_TO_SHOPPING_LIST_DEFUALT_VALUE,
+  TRANSLATION_SHOPPING_LIST_BTN_VARAIBLE,
+} from '@/constants'
+import { useGetButtonText } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { setGlabolCommonState } from '@/store'
@@ -122,6 +127,11 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
     locationSelector = '',
     enabled = false,
   } = shoppingListBtn
+  const myShoppingListBtnLabel = useGetButtonText(
+    TRANSLATION_SHOPPING_LIST_BTN_VARAIBLE,
+    text,
+    ADD_TO_SHOPPING_LIST_DEFUALT_VALUE
+  )
 
   const cssInfo = splitCustomCssValue(customCss)
   const {
@@ -155,7 +165,7 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
       if (!isAddStyle) {
         const myShoppingListBtn = document.querySelectorAll('.b2b-add-to-list')
         myShoppingListBtn.forEach((myShoppingListBtn: CustomFieldItems) => {
-          myShoppingListBtn.innerHTML = text || 'Add to Shopping List'
+          myShoppingListBtn.innerHTML = myShoppingListBtnLabel
           myShoppingListBtn.setAttribute('style', customCss)
           myShoppingListBtn.style.backgroundColor = color
           myShoppingListBtn.style.color = customTextColor
@@ -183,7 +193,7 @@ export const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => {
         if (!children.length) {
           let shoppingBtnDom: CustomFieldItems | null = null
           shoppingBtnDom = document.createElement('div')
-          shoppingBtnDom.innerHTML = text || 'Add to Shopping List'
+          shoppingBtnDom.innerHTML = myShoppingListBtnLabel
           shoppingBtnDom.setAttribute('style', customCss)
           shoppingBtnDom.style.backgroundColor = color
           shoppingBtnDom.style.color = customTextColor

apps/storefront/src/hooks/index.ts

@@ -7,6 +7,7 @@ export { default as useRegisteredbctob2b } from './dom/useRegisteredbctob2b'
 export { default as useBlockPendingAccountViewPrice } from './useBlockPendingAccountViewPrice'
 export { default as useCardListColumn } from './useCardListColumn'
 export { default as useDebounce } from './useDebounce'
+export { default as useGetButtonText } from './useGetButtonText'
 export * from './useGetCountry'
 export { default as useMobile } from './useMobile'
 export { default as useRole } from './useRole'

apps/storefront/src/hooks/useGetButtonText.ts

@@ -0,0 +1,17 @@
+import { useB3Lang } from '@b3/lang'
+
+const useGetButtonText = (
+  translationVariable: string,
+  storefrontText: string,
+  defaultText: string
+) => {
+  const b3Lang = useB3Lang()
+  const translatedText = b3Lang(translationVariable)
+  if (translatedText === defaultText) {
+    return storefrontText || defaultText
+  }
+
+  return translatedText
+}
+
+export default useGetButtonText

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

@@ -65,6 +65,7 @@ function B3Mean({
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   const open = Boolean(anchorEl)
+  const b3Lang = useB3Lang()
 
   const handleClose = () => {
     setAnchorEl(null)
@@ -75,7 +76,9 @@ function B3Mean({
     setAnchorEl(event.currentTarget)
   }
 
-  const menuItemText = isMasquerade ? 'End Masquerade' : 'Masquerade'
+  const menuItemText = isMasquerade
+    ? b3Lang('dashboard.endMasqueradeAction')
+    : b3Lang('dashboard.masqueradeAction')
 
   return (
     <>

packages/lang/locales/en.json

@@ -103,12 +103,20 @@
   "global.searchProductAddProduct.businessAccountPendingApproval": "Your business account is pending approval. This feature is currently disabled.",
   "global.searchProductAddProduct.sku": "SKU#",
   "global.searchProductAddProduct.qty": "Qty",
+  "global.customStyles.masqueradeButton": "END MASQUERADE",
+  "global.customStyles.addQuoteBtn": "Add to quote",
+  "global.customStyles.floatingAction": "Finish quote",
+  "global.customStyles.addToAllQuoteBtn": "Add All To Quote",
+  "global.customStyles.shoppingListBtn": "Add to Shopping List",
+  "global.masquerade.youAreMasqueradeAs": "You are masquerade as",
 
   "dashboard.company": "Company",
   "dashboard.admin": "Admin",
   "dashboard.email": "Email",
   "dashboard.action": "Action",
   "dashboard.selected": "Selected",
+  "dashboard.masqueradeAction": "Masquerade",
+  "dashboard.endMasqueradeAction": "End Masquerade",
 
   "orders.order": "Order",
   "orders.poReference": "PO / Reference",
@@ -659,11 +667,5 @@
   "payment.paymentTowardsInvoices": "You made payments towards the invoices shown below",
   "payment.invoiceNumber": "Invoice#",
   "payment.amountPaid": "Amount paid",
-  "payment.okButton": "Ok",
-
-  "customStyles.masqueradeButton": "END MASQUERADE",
-  "customStyles.addQuoteBtn": "Add to quote",
-  "customStyles.floatingAction": "Finish quote",
-  "customStyles.addToAllQuoteBtn": "Add All To Quote",
-  "customStyles.shoppingListBtn": "Add to Shopping List"
+  "payment.okButton": "Ok"
 }