feat: apply custom styles

bigcommerce · Apr 6, 2023 · 18d7a52 · 18d7a52
1 parent be36efa
commit 18d7a52
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 236 deletions.
diff --git a/apps/storefront/src/components/button/CustomButton.tsx b/apps/storefront/src/components/button/CustomButton.tsx
@@ -5,17 +5,18 @@ import {
 
 import {
   useContext,
+  MouseEvent,
 } from 'react'
 
 import {
   CustomStyleContext,
 } from '@/shared/customStyleButtton'
 
 interface CustomButtonProps extends ButtonProps {
-  onClick?: () => void;
-  sx?: any;
-  customLabel?: string;
-  children: React.ReactNode
+  onClick?: (e?: MouseEvent<HTMLButtonElement> | any) => void,
+  sx?: any,
+  customLabel?: string,
+  children: React.ReactNode,
 }
 
 const CustomButton = ({
@@ -27,19 +28,26 @@ const CustomButton = ({
   const {
     state: {
       globalColor,
-      golbalBackgroundColor,
+      globalBackgroundColor,
+      portalStyle,
     },
   } = useContext(CustomStyleContext)
+
+  const {
+    primaryColor = '',
+    backgroundColor = '',
+  } = portalStyle
+
   return (
     <Button
       {...rest}
       sx={{
         ...sx || {},
-        color: globalColor,
-        backgroundColor: golbalBackgroundColor,
+        color: primaryColor || globalColor,
+        backgroundColor: backgroundColor || globalBackgroundColor,
         '&:hover': {
-          color: globalColor,
-          backgroundColor: golbalBackgroundColor,
+          color: primaryColor || globalColor,
+          backgroundColor: backgroundColor || globalBackgroundColor,
         },
       }}
       onClick={onClick}

diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
@@ -63,11 +63,11 @@ export {
 
 export {
   B3MasquradeGobalTip,
-} from './B3MasquradeGobalTip'
+} from './outSideComponents/B3MasquradeGobalTip'
 
 export {
   B3HoverButton,
-} from './B3HoverButton'
+} from './outSideComponents/B3HoverButton'
 
 export {
   CheckoutTip,

diff --git a/...orefront/src/components/B3HoverButton.tsx → ...nents/outSideComponents/B3HoverButton.tsx b/...orefront/src/components/B3HoverButton.tsx → ...nents/outSideComponents/B3HoverButton.tsx
@@ -3,12 +3,15 @@ import {
   SetStateAction,
   useState,
   useEffect,
+  useContext,
 } from 'react'
 
 import {
   Box,
   Button,
   Snackbar,
+  SnackbarOrigin,
+  SxProps,
 } from '@mui/material'
 
 import type {
@@ -19,6 +22,15 @@ import {
   B3LStorage,
 } from '@/utils'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
+import {
+  getLocation,
+  getStyles,
+} from './utils/b3CustomStyles'
+
 interface B3HoverButtonProps {
   isOpen: boolean,
   productQuoteEnabled: boolean,
@@ -46,6 +58,33 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
     href,
   } = window.location
 
+  const {
+    state: {
+      floatingAction,
+    },
+  } = useContext(CustomStyleContext)
+
+  const {
+    text = '',
+    buttonText = '',
+    color = '',
+    customCss = '',
+    location = '',
+    horizontalPadding = '',
+    verticalPadding = '',
+    enabled = false,
+  } = floatingAction
+
+  const defaultLocation: SnackbarOrigin = {
+    vertical: 'bottom', horizontal: 'right',
+  }
+
+  const defaultSx: SxProps = {
+    color: `${color}`,
+    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    ...getStyles(customCss),
+  }
+
   if (href.includes('/checkout')) return <></>
   return (
     <Snackbar
@@ -55,11 +94,8 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
         bottom: '20px',
         left: 'auto',
       }}
-      anchorOrigin={{
-        vertical: 'bottom', horizontal: 'right',
-      }}
+      anchorOrigin={getLocation(location) || defaultLocation}
       open
-      key="123"
     >
 
       <Box
@@ -72,11 +108,12 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
       >
 
         {
-          showFinishQuote && !isOpen && productQuoteEnabled && !href.includes('/cart') && (
+          enabled && showFinishQuote && !isOpen && productQuoteEnabled && !href.includes('/cart') && (
           <Button
             sx={{
               backgroundColor: '#ED6C02',
               height: '42px',
+              ...defaultSx,
             }}
             onClick={() => {
               setOpenPage({
@@ -89,7 +126,7 @@ export const B3HoverButton = (props: B3HoverButtonProps) => {
             }}
             variant="contained"
           >
-            Finish quote
+            {buttonText || text}
           </Button>
           )
         }

diff --git a/...nt/src/components/B3MasquradeGobalTip.tsx → ...outSideComponents/B3MasquradeGobalTip.tsx b/...nt/src/components/B3MasquradeGobalTip.tsx → ...outSideComponents/B3MasquradeGobalTip.tsx
@@ -8,6 +8,8 @@ import {
 import {
   Box,
   Button,
+  SnackbarOrigin,
+  SxProps,
 } from '@mui/material'
 
 import type {
@@ -36,6 +38,15 @@ import {
   GlobaledContext,
 } from '@/shared/global'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
+import {
+  getLocation,
+  getStyles,
+} from './utils/b3CustomStyles'
+
 interface B3MasquradeGobalTipProps {
   isOpen: boolean,
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>,
@@ -64,6 +75,12 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
     href,
   } = window.location
 
+  const {
+    state: {
+      masqueradeButton,
+    },
+  } = useContext(CustomStyleContext)
+
   const isAddBottom = bottomHeightPage.some((item: string) => hash.includes(item))
 
   const [isExpansion, setExpansion] = useState<boolean>(true)
@@ -102,7 +119,20 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
 
   if (!isAgenting) return <></>
 
-  let sx = {}
+  const {
+    text = '',
+    color = '',
+    customCss = '',
+    location = '',
+    horizontalPadding = '',
+    verticalPadding = '',
+  } = masqueradeButton
+
+  const defaultLocation: SnackbarOrigin = {
+    vertical: 'bottom', horizontal: 'left',
+  }
+
+  let sx: SxProps = {}
 
   if (isMobile && isOpen) {
     sx = {
@@ -116,6 +146,13 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
       bottom: '90px !important',
     }
   }
+
+  const customStyles: SxProps = {
+    color: `${color}`,
+    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    ...getStyles(customCss),
+  }
+
   return (
     <>
       {
@@ -127,18 +164,16 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
             bottom: '20px',
             right: 'auto',
           }}
-          anchorOrigin={{
-            vertical: 'bottom', horizontal: 'left',
-          }}
+          anchorOrigin={getLocation(location) || defaultLocation}
           open
-          key="123"
         >
 
           <Button
             sx={{
               backgroundColor: '#ED6C02',
               height: '42px',
               marginTop: '10px',
+              ...customStyles,
             }}
             onClick={() => {
               setOpenPage({
@@ -168,16 +203,14 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
             color: '#FFFFFF',
             ...sx,
           }}
-          anchorOrigin={{
-            vertical: 'bottom', horizontal: 'left',
-          }}
+          anchorOrigin={getLocation(location) || defaultLocation}
           open
-          key="123"
         >
           <Box
             sx={{
               padding: '5px 15px',
               width: '100%',
+              ...customStyles,
             }}
           >
             {
@@ -223,7 +256,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => {
                   }}
                   onClick={() => endActing()}
                 >
-                  END MASQUERADE
+                  {text}
                 </Box>
                 )
             }

diff --git a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts
@@ -0,0 +1,30 @@
+import {
+  SnackbarOrigin, SxProps,
+} from '@mui/material'
+
+import {
+  trim,
+} from 'lodash'
+
+const getLocation = (location: string): SnackbarOrigin => ({
+  vertical: location.includes('top') ? 'top' : 'bottom',
+  horizontal: location.includes('Left') ? 'left' : 'right',
+})
+
+const getStyles = (customCss: string): SxProps => {
+  const str = trim(customCss)
+  const sx = str.replace(/\n/g, '').split(';').reduce((acc: Record<string, string>, style) => {
+    const [property, value] = style.split(':')
+    if (property && value) {
+      acc[property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = value.trim().replace(';', '')
+    }
+    return acc
+  }, {})
+
+  return sx
+}
+
+export {
+  getLocation,
+  getStyles,
+}
diff --git a/apps/storefront/src/hooks/dom/useCartToQuote.ts b/apps/storefront/src/hooks/dom/useCartToQuote.ts
@@ -68,7 +68,7 @@ const useCartToQuote = ({
 
     const {
       color = '',
-      buttonText = '',
+      text = '',
       customCss = '',
       classSelector = '',
       locationSelector = '',
@@ -79,7 +79,7 @@ const useCartToQuote = ({
       addToQuoteAll.forEach((node: CustomFieldItems) => {
         cartQuoteBtnDom = document.createElement('div')
         cartQuoteBtnDom.setAttribute('id', `${locationSelector}`)
-        cartQuoteBtnDom.innerHTML = buttonText || 'Add All to Quote'
+        cartQuoteBtnDom.innerHTML = text
         cartQuoteBtnDom.setAttribute('style', customCss)
         cartQuoteBtnDom.style.color = color
         cartQuoteBtnDom.setAttribute('class', `b3-cart-to-cart ${classSelector}`)

diff --git a/apps/storefront/src/hooks/dom/useMyQuote.ts b/apps/storefront/src/hooks/dom/useMyQuote.ts
@@ -102,7 +102,7 @@ const useMyQuote = ({
 
     const {
       color = '',
-      buttonText = '',
+      text = '',
       customCss = '',
       classSelector = '',
       locationSelector = '',
@@ -114,7 +114,7 @@ const useMyQuote = ({
         myQuote = document.createElement('div')
 
         myQuote.setAttribute('id', `${locationSelector}`)
-        myQuote.innerHTML = buttonText || 'Add to Quote'
+        myQuote.innerHTML = text
         myQuote.setAttribute('style', customCss)
         myQuote.style.color = color
         myQuote.setAttribute('class', `b3-product-to-quote ${classSelector}`)

diff --git a/apps/storefront/src/hooks/dom/useOpenPDP.ts b/apps/storefront/src/hooks/dom/useOpenPDP.ts
@@ -55,7 +55,7 @@ const useOpenPDP = ({
     if (document.querySelectorAll('.b2b-shopping-list-btn').length) return
     const {
       color = '',
-      buttonText = '',
+      text = '',
       customCss = '',
       classSelector = '',
       locationSelector = '',
@@ -65,7 +65,7 @@ const useOpenPDP = ({
       addToCartAll.forEach((node: CustomFieldItems) => {
         shoppingBtnDom = document.createElement('div')
         shoppingBtnDom.setAttribute('id', `${locationSelector}`)
-        shoppingBtnDom.innerHTML = buttonText || 'Add to Shopping List'
+        shoppingBtnDom.innerHTML = text
         shoppingBtnDom.setAttribute('style', customCss)
         shoppingBtnDom.style.color = color
         shoppingBtnDom.setAttribute('class', `b2b-shopping-list-btn ${classSelector}`)

diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
@@ -13,10 +13,6 @@ import {
   useCartToQuote,
 } from './dom/useCartToQuote'
 
-import {
-  useQuoteGlobalTip,
-} from './useQuoteGlobalTip'
-
 import {
   useRegisteredbctob2b,
 } from './useRegisteredbctob2b'
@@ -48,7 +44,6 @@ export {
   useMyQuote,
   useRegisteredbctob2b,
   useCardListColumn,
-  useQuoteGlobalTip,
   useSetCountry,
   useGetCountry,
   useCartToQuote,