diff --git a/apps/storefront/src/components/layout/B3StatusNotification.tsx b/apps/storefront/src/components/layout/B3StatusNotification.tsx index 1938c301..343ea976 100644 --- a/apps/storefront/src/components/layout/B3StatusNotification.tsx +++ b/apps/storefront/src/components/layout/B3StatusNotification.tsx @@ -20,10 +20,9 @@ const B3StatusNotificationContainer = styled(Box)(() => ({ export default function B3StatusNotification(props: B3StatusNotificationProps) { const { title } = props - console.log(title, 'title') const { - state: { companyInfo }, + state: { companyInfo, role }, } = useContext(GlobaledContext) // companyStatus // 99: default, Distinguish between bc and b2b; 0: pending; 1: approved; 2: rejected; 3: inactive; 4: deleted @@ -34,9 +33,7 @@ export default function B3StatusNotification(props: B3StatusNotificationProps) { const loginType = JSON.parse(sessionStorage.getItem('loginType') || 'false') const [tip, setTip] = useState('') - const [isShow, setIsShow] = useState( - +companyStatus === 0 ? true : loginType === 1 - ) + const [isShow, setIsShow] = useState(false) const [type, setType] = useState('success') const [bcColor, setBcColor] = useState('#2E7D32') @@ -51,7 +48,11 @@ export default function B3StatusNotification(props: B3StatusNotificationProps) { } useEffect(() => { - if (isShow) { + const loginTypeStatus = +companyStatus === 0 ? true : loginType === 1 + + const showTip = role === 100 ? false : loginTypeStatus + setIsShow(showTip) + if (showTip) { if (+companyStatus === 0) { setTip( blockPendingAccountOrderCreation diff --git a/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx b/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx index 9f36b08f..27e7d721 100644 --- a/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx +++ b/apps/storefront/src/components/outSideComponents/B3HoverButton.tsx @@ -11,7 +11,13 @@ import { Box, Button, Snackbar, SnackbarOrigin, SxProps } from '@mui/material' import { CustomStyleContext } from '@/shared/customStyleButtton' import { B3LStorage } from '@/utils' -import { getHoverColor, getLocation, getStyles } from './utils/b3CustomStyles' +import { + getHoverColor, + getLocation, + getStyles, + setMUIMediaStyle, + splitCustomCssValue, +} from './utils/b3CustomStyles' interface B3HoverButtonProps { isOpen: boolean @@ -53,13 +59,23 @@ export default function B3HoverButton(props: B3HoverButtonProps) { horizontal: 'right', } + const cssInfo = splitCustomCssValue(customCss) + const { + cssValue, + mediaBlocks, + }: { + cssValue: string + mediaBlocks: string[] + } = cssInfo + const MUIMediaStyle = setMUIMediaStyle(mediaBlocks) + const defaultSx: SxProps = { backgroundColor: color, padding: verticalPadding && horizontalPadding ? `${verticalPadding}px ${horizontalPadding}px` : '', - ...getStyles(customCss), + ...getStyles(cssValue), } if (href.includes('/checkout')) return null @@ -91,6 +107,7 @@ export default function B3HoverButton(props: B3HoverButtonProps) { backgroundColor: getHoverColor(color, 0.2), }, ...defaultSx, + ...MUIMediaStyle, }} onClick={() => { setOpenPage({ diff --git a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx index 697e2c27..a6cc80b4 100644 --- a/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx +++ b/apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx @@ -19,6 +19,8 @@ import { getContrastColor, getLocation, getStyles, + setMUIMediaStyle, + splitCustomCssValue, } from './utils/b3CustomStyles' interface B3MasquradeGobalTipProps { @@ -129,6 +131,16 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { } } + const cssInfo = splitCustomCssValue(customCss) + const { + cssValue, + mediaBlocks, + }: { + cssValue: string + mediaBlocks: string[] + } = cssInfo + const MUIMediaStyle = setMUIMediaStyle(mediaBlocks) + const customStyles: SxProps = { backgroundColor: `${color || '#FFFFFF'}`, color: getContrastColor(color || '#FFFFFF'), @@ -136,7 +148,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { verticalPadding && horizontalPadding ? `${verticalPadding}px ${horizontalPadding}px` : '', - ...getStyles(customCss), + ...getStyles(cssValue), } const isMobileCustomStyles: SxProps = { @@ -160,6 +172,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { height: '42px', marginTop: '10px', ...customStyles, + ...MUIMediaStyle, }} onClick={() => endActing()} variant="contained" @@ -180,6 +193,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { backgroundColor: '#ED6C02', ...sx, ...customStyles, + ...MUIMediaStyle, }} anchorOrigin={getLocation(location) || defaultLocation} open @@ -265,6 +279,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { color: '#FFFFFF', ...sx, ...customStyles, + ...MUIMediaStyle, }} anchorOrigin={getLocation(location) || defaultLocation} open @@ -349,6 +364,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) { color: '#FFFFFF', ...sx, ...isMobileCustomStyles, + ...MUIMediaStyle, }} anchorOrigin={defaultLocation} open diff --git a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts index 94132197..74da41bf 100644 --- a/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts +++ b/apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts @@ -12,6 +12,97 @@ export const getLocation = (location: string): SnackbarOrigin => ({ horizontal: location.includes('Left') ? 'left' : 'right', }) +export const splitCustomCssValue = (customCss: string) => { + let cssValue = customCss + + // Parse the media block + const mediaRegex = /(@media[^{]+{[^}]+})/g + // media block + const mediaBlocks: string[] = [] + // Blocks that do not contain media + cssValue = cssValue.replace(mediaRegex, (match, mediaBlock) => { + mediaBlocks.push(mediaBlock) + return '' + }) + + return { + mediaBlocks, + cssValue, + } +} + +export const setMediaStyle = (mediaBlocks: string[], className: string) => { + if (mediaBlocks.length === 0) return + + const classNameArr = className.split(' ').map((item) => `.${item}`) + const classNameId = classNameArr.join('') + + const newCustomCss = mediaBlocks.map((media: string) => { + const mediaArr = media.split('\n') + const newMediaArr = mediaArr.map((style) => { + const [property, value] = style.split(':') + let newValue = value + + if ( + property.trim() === 'color' || + property.trim() === 'background-color' + ) { + newValue = value.replace(';', '!important;') + } + + return newValue?.trim() ? `${property}: ${newValue}` : `${property}` + }) + + const newMedia = newMediaArr.join('\n') + + return newMedia + }) + + let value = '' + newCustomCss.forEach((style) => { + value += `${style}\n` + }) + + const css = `${classNameId} { + ${value} + }` + + const style = document.createElement('style') + style.appendChild(document.createTextNode(css)) + + const head = document.head || document.getElementsByTagName('head')[0] + head.appendChild(style) +} + +export const setMUIMediaStyle = (mediaBlocks: string[]) => { + if (mediaBlocks.length === 0) return [] + const newMedia: CustomFieldItems = {} + mediaBlocks.forEach((media: string) => { + const mediaArr = media.split('\n') + const first = mediaArr.find((item) => item.includes('@media')) + if (first) { + const key = `${first.split(')')[0]})` + + mediaArr.forEach((style) => { + const [property, value] = style.split(':') + + if (!style.includes('@media') && value) { + newMedia[key] = { + ...(newMedia[key] || {}), + [property + .trim() + .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())]: value + .trim() + .replace(';', ''), + } + } + }) + } + }) + + return newMedia +} + export const getStyles = (customCss: string) => { const str = trim(customCss) const sx = str diff --git a/apps/storefront/src/hooks/dom/useCartToQuote.ts b/apps/storefront/src/hooks/dom/useCartToQuote.ts index 0ff89067..edb777ca 100644 --- a/apps/storefront/src/hooks/dom/useCartToQuote.ts +++ b/apps/storefront/src/hooks/dom/useCartToQuote.ts @@ -11,6 +11,8 @@ import type { OpenPageState } from '@b3/hooks' import { getContrastColor, getStyles, + setMediaStyle, + splitCustomCssValue, } from '@/components/outSideComponents/utils/b3CustomStyles' import { CustomStyleContext } from '@/shared/customStyleButtton' import { GlobaledContext } from '@/shared/global' @@ -125,7 +127,15 @@ const useCartToQuote = ({ enabled = false, } = addToAllQuoteBtn - const customTextColor = getStyles(customCss).color || getContrastColor(color) + const cssInfo = splitCustomCssValue(customCss) + const { + cssValue, + mediaBlocks, + }: { + cssValue: string + mediaBlocks: string[] + } = cssInfo + const customTextColor = getStyles(cssValue).color || getContrastColor(color) useEffect(() => { const addToQuoteAll = document.querySelectorAll( @@ -154,6 +164,8 @@ const useCartToQuote = ({ 'class', `b2b-cart-to-quote ${classSelector}` ) + + setMediaStyle(mediaBlocks, `b2b-cart-to-quote ${classSelector}`) }) return } @@ -172,6 +184,8 @@ const useCartToQuote = ({ 'class', `b2b-cart-to-quote ${classSelector}` ) + + setMediaStyle(mediaBlocks, `b2b-cart-to-quote ${classSelector}`) node.appendChild(cartQuoteBtnDom) cartQuoteBtnDom.addEventListener('click', quoteCallBbck, { capture: true, diff --git a/apps/storefront/src/hooks/dom/useMyQuote.ts b/apps/storefront/src/hooks/dom/useMyQuote.ts index 0960c282..1be8cdc9 100644 --- a/apps/storefront/src/hooks/dom/useMyQuote.ts +++ b/apps/storefront/src/hooks/dom/useMyQuote.ts @@ -13,6 +13,8 @@ import { cloneDeep } from 'lodash' import { getContrastColor, getStyles, + setMediaStyle, + splitCustomCssValue, } from '@/components/outSideComponents/utils/b3CustomStyles' import { CustomStyleContext } from '@/shared/customStyleButtton' import { B3LStorage, removeCartPermissions } from '@/utils' @@ -82,7 +84,15 @@ const useMyQuote = ({ enabled = false, } = addQuoteBtn - const customTextColor = getStyles(customCss).color || getContrastColor(color) + const cssInfo = splitCustomCssValue(customCss) + const { + cssValue, + mediaBlocks, + }: { + cssValue: string + mediaBlocks: string[] + } = cssInfo + const customTextColor = getStyles(cssValue).color || getContrastColor(color) useEffect(() => { const addToQuoteAll = document.querySelectorAll(globalB3['dom.setToQuote']) @@ -113,6 +123,8 @@ const useMyQuote = ({ myQuote.style.backgroundColor = color myQuote.style.color = customTextColor myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`) + + setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`) }) cache.current = cloneDeep(addQuoteBtn) } @@ -130,6 +142,8 @@ const useMyQuote = ({ myQuote.style.backgroundColor = color myQuote.style.color = customTextColor myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`) + + setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`) if (CustomAddToQuoteAll.length) { node.appendChild(myQuote) } else { diff --git a/apps/storefront/src/hooks/dom/useOpenPDP.ts b/apps/storefront/src/hooks/dom/useOpenPDP.ts index 2b8e78be..bc09406c 100644 --- a/apps/storefront/src/hooks/dom/useOpenPDP.ts +++ b/apps/storefront/src/hooks/dom/useOpenPDP.ts @@ -14,6 +14,8 @@ import { cloneDeep } from 'lodash' import { getContrastColor, getStyles, + setMediaStyle, + splitCustomCssValue, } from '@/components/outSideComponents/utils/b3CustomStyles' import { CustomStyleContext } from '@/shared/customStyleButtton' import { GlobaledContext } from '@/shared/global' @@ -86,7 +88,15 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => { enabled = false, } = shoppingListBtn - const customTextColor = getStyles(customCss).color || getContrastColor(color) + const cssInfo = splitCustomCssValue(customCss) + const { + cssValue, + mediaBlocks, + }: { + cssValue: string + mediaBlocks: string[] + } = cssInfo + const customTextColor = getStyles(cssValue).color || getContrastColor(color) useEffect(() => { // if (role === 100) return @@ -119,6 +129,7 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => { 'class', `b2b-add-to-list ${classSelector}` ) + setMediaStyle(mediaBlocks, `b2b-add-to-list ${classSelector}`) }) cache.current = cloneDeep(shoppingListBtn) } @@ -140,6 +151,8 @@ const useOpenPDP = ({ setOpenPage, role }: MutationObserverProps) => { shoppingBtnDom.style.backgroundColor = color shoppingBtnDom.style.color = customTextColor shoppingBtnDom.setAttribute('class', `b2b-add-to-list ${classSelector}`) + + setMediaStyle(mediaBlocks, `b2b-add-to-list ${classSelector}`) if (CustomAddToShoppingListAll.length) { node.appendChild(shoppingBtnDom) } else {