Skip to content

Commit

Permalink
feat: support media queries
Browse files Browse the repository at this point in the history 
https://bigc-b2b.atlassian.net/browse/BUN-1079
  • Loading branch information
@BrianJiang2021 @CarlLiu2023
BrianJiang2021 authored and CarlLiu2023 committed Jun 6, 2023
1 parent 5d7ae79 commit 73fe21b
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 12 deletions.
13 changes: 7 additions & 6 deletions apps/storefront/src/components/layout/B3StatusNotification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -34,9 +33,7 @@ export default function B3StatusNotification(props: B3StatusNotificationProps) {
const loginType = JSON.parse(sessionStorage.getItem('loginType') || 'false')

const [tip, setTip] = useState<string>('')
const [isShow, setIsShow] = useState<boolean>(
+companyStatus === 0 ? true : loginType === 1
)
const [isShow, setIsShow] = useState<boolean>(false)
const [type, setType] = useState<AlertColor>('success')
const [bcColor, setBcColor] = useState<string>('#2E7D32')

Expand All @@ -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
Expand Down
21 changes: 19 additions & 2 deletions apps/storefront/src/components/outSideComponents/B3HoverButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -91,6 +107,7 @@ export default function B3HoverButton(props: B3HoverButtonProps) {
backgroundColor: getHoverColor(color, 0.2),
},
...defaultSx,
...MUIMediaStyle,
}}
onClick={() => {
setOpenPage({
Expand Down
18 changes: 17 additions & 1 deletion apps/storefront/src/components/outSideComponents/B3MasquradeGobalTip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
getContrastColor,
getLocation,
getStyles,
setMUIMediaStyle,
splitCustomCssValue,
} from './utils/b3CustomStyles'

interface B3MasquradeGobalTipProps {
Expand Down Expand Up @@ -129,14 +131,24 @@ 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'),
padding:
verticalPadding && horizontalPadding
? `${verticalPadding}px ${horizontalPadding}px`
: '',
...getStyles(customCss),
...getStyles(cssValue),
}

const isMobileCustomStyles: SxProps = {
Expand All @@ -160,6 +172,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
height: '42px',
marginTop: '10px',
...customStyles,
...MUIMediaStyle,
}}
onClick={() => endActing()}
variant="contained"
Expand All @@ -180,6 +193,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
backgroundColor: '#ED6C02',
...sx,
...customStyles,
...MUIMediaStyle,
}}
anchorOrigin={getLocation(location) || defaultLocation}
open
Expand Down Expand Up @@ -265,6 +279,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
color: '#FFFFFF',
...sx,
...customStyles,
...MUIMediaStyle,
}}
anchorOrigin={getLocation(location) || defaultLocation}
open
Expand Down Expand Up @@ -349,6 +364,7 @@ export default function B3MasquradeGobalTip(props: B3MasquradeGobalTipProps) {
color: '#FFFFFF',
...sx,
...isMobileCustomStyles,
...MUIMediaStyle,
}}
anchorOrigin={defaultLocation}
open
Expand Down
91 changes: 91 additions & 0 deletions apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 15 additions & 1 deletion apps/storefront/src/hooks/dom/useCartToQuote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -154,6 +164,8 @@ const useCartToQuote = ({
'class',
`b2b-cart-to-quote ${classSelector}`
)

setMediaStyle(mediaBlocks, `b2b-cart-to-quote ${classSelector}`)
})
return
}
Expand All @@ -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,
Expand Down
16 changes: 15 additions & 1 deletion apps/storefront/src/hooks/dom/useMyQuote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'])
Expand Down Expand Up @@ -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)
}
Expand All @@ -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 {
Expand Down
15 changes: 14 additions & 1 deletion apps/storefront/src/hooks/dom/useOpenPDP.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
}
Expand All @@ -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 {
Expand Down

0 comments on commit 73fe21b

Please sign in to comment.