Skip to content

Commit

Permalink
feat: quote Non-Purchasable and Out of Stock Products in the Buyer Po…
Browse files Browse the repository at this point in the history 
…rtal

 https://bigc-b2b.atlassian.net/browse/BUN-1861
  • Loading branch information
@BrianJiang2021 @libruce
BrianJiang2021 authored and libruce committed Feb 7, 2024
1 parent 7c83467 commit ebd189d
Show file tree
Hide file tree
Showing 36 changed files with 937 additions and 106 deletions.
58 changes: 52 additions & 6 deletions apps/storefront/src/components/B3ProductList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ import { PRODUCT_DEFAULT_IMAGE } from '@/constants'
import { useMobile } from '@/hooks'
import { store } from '@/store'
import { currencyFormat, ordersCurrencyFormat } from '@/utils'
import {
getDisplayPrice,
judgmentBuyerProduct,
} from '@/utils/b3Product/b3Product'

import { MoneyFormat, ProductItem } from '../types'

Expand Down Expand Up @@ -135,6 +139,7 @@ interface ProductProps<T> {
totalText?: string
canToProduct?: boolean
textAlign?: string
type?: string
}

export default function B3ProductList<T>(props: ProductProps<T>) {
Expand All @@ -152,6 +157,7 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
canToProduct = false,
textAlign = 'left',
money,
type,
} = props

const [list, setList] = useState<ProductItem[]>([])
Expand Down Expand Up @@ -229,6 +235,32 @@ export default function B3ProductList<T>(props: ProductProps<T>) {

const itemStyle = isMobile ? mobileItemStyle : defaultItemStyle

const showTypePrice = (
newMoney: string | number,
product: CustomFieldItems
): string | number => {
if (type === 'quote') {
return getDisplayPrice({
price: newMoney,
productInfo: product,
isProduct: true,
})
}
if (type === 'shoppingList') {
const { isPriceHidden } = product
const isBuyerProduct = judgmentBuyerProduct({
price: newMoney,
productInfo: product,
isProduct: true,
})
return isPriceHidden && !isBuyerProduct ? '' : newMoney
}
if (type === 'quickOrder') {
return newMoney
}
return newMoney
}

return products.length > 0 ? (
<Box>
{!isMobile && (
Expand Down Expand Up @@ -277,6 +309,7 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
)}

{products.map((product) => {
console.log(product, 'product')
const { variants = [] } = product
const currentVariant = variants[0]
let productPrice = +product.base_price
Expand All @@ -300,6 +333,22 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
productPrice
)

const getPrice = () => {
const newMoney = money
? `${ordersCurrencyFormat(money, productPrice)}`
: `${currencyFormat(productPrice)}`

return showTypePrice(newMoney, product)
}

const getTotalPrice = () => {
const newMoney = money
? `${ordersCurrencyFormat(money, totalPrice)}`
: `${currencyFormat(totalPrice)}`

return showTypePrice(newMoney, product)
}

return (
<Flex isMobile={isMobile} key={product.id}>
{showCheckbox && (
Expand Down Expand Up @@ -358,9 +407,8 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
}
>
{isMobile && <span>Price:</span>}
{money
? `${ordersCurrencyFormat(money, productPrice)}`
: `${currencyFormat(productPrice)}`}

{getPrice()}
</FlexItem>

<FlexItem
Expand Down Expand Up @@ -416,9 +464,7 @@ export default function B3ProductList<T>(props: ProductProps<T>) {
}
>
{isMobile && <span>{totalText}:</span>}
{money
? `${ordersCurrencyFormat(money, totalPrice)}`
: `${currencyFormat(totalPrice)}`}
{getTotalPrice()}
</FlexItem>

{renderAction && (
Expand Down
2 changes: 1 addition & 1 deletion apps/storefront/src/hooks/dom/useCartToQuote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ const useCartToQuote = ({
let cartQuoteBtnDom: CustomFieldItems | null = null
if (!addToQuoteAll.length && !CustomAddToQuoteAll.length) return

if (!cartQuoteEnabled) {
if (!cartQuoteEnabled || window?.location?.pathname?.includes('checkout')) {
document.querySelector('.b2b-cart-to-quote')?.remove()
return
}
Expand Down
175 changes: 139 additions & 36 deletions apps/storefront/src/hooks/dom/useMyQuote.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { CustomStyleContext } from '@/shared/customStyleButtton'
import { B3LStorage, setCartPermissions } from '@/utils'

import useDomVariation from './useDomVariation'
import usePurchasableQuote from './usePurchasableQuote'
import { addProductFromProductPageToQuote, removeElement } from './utils'

type DispatchProps = Dispatch<SetStateAction<OpenPageState>>
Expand Down Expand Up @@ -56,9 +57,11 @@ const useMyQuote = ({
}, [B3UserId])
const cache = useRef({})
const {
state: { addQuoteBtn },
state: { addQuoteBtn, quoteOnNonPurchasableProductPageBtn },
} = useContext(CustomStyleContext)

// const [isPurchasable, setPurchasable] = useState<boolean>(true)

// quote method and goto draft
const { addToQuote, addLoadding } =
addProductFromProductPageToQuote(setOpenPage)
Expand All @@ -80,6 +83,8 @@ const useMyQuote = ({

const [openQuickView] = useDomVariation(globalB3['dom.setToQuote'], cd)

const [isBuyPurchasable] = usePurchasableQuote(openQuickView)

const {
color = '',
text = '',
Expand All @@ -88,73 +93,138 @@ const useMyQuote = ({
locationSelector = '',
enabled = false,
} = addQuoteBtn

const {
color: noPuchasableQuoteColor = '',
text: noPuchasableQuoteText = '',
customCss: noPuchasableQuoteCustomCss = '',
classSelector: noPuchasableQuoteClassSelector = '',
locationSelector: noPuchasableQuoteLocationSelector = '',
enabled: noPuchasableQuoteEnabled = false,
} = quoteOnNonPurchasableProductPageBtn

const newText = isBuyPurchasable ? text : noPuchasableQuoteText
const myQuoteBtnLabel = useGetButtonText(
TRANSLATION_ADD_TO_QUOTE_VARIABLE,
text,
newText,
ADD_TO_QUOTE_DEFAULT_VALUE
)

const cssInfo = splitCustomCssValue(customCss)
const cssInfo = splitCustomCssValue(
isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss
)
const {
cssValue,
mediaBlocks,
}: {
cssValue: string
mediaBlocks: string[]
} = cssInfo
const customTextColor = getStyles(cssValue).color || getContrastColor(color)
const customTextColor =
getStyles(cssValue).color ||
getContrastColor(isBuyPurchasable ? color : noPuchasableQuoteColor)

useEffect(() => {
const addToQuoteAll = document.querySelectorAll(globalB3['dom.setToQuote'])
const CustomAddToQuoteAll = locationSelector
? document.querySelectorAll(locationSelector)
: []
const clearQuoteDom = () => {
const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
myQuoteBtn.forEach((item: CustomFieldItems) => {
removeElement(item)
})
}

if (!addToQuoteAll.length && !CustomAddToQuoteAll.length) return
const clearNoPuchasableQuoteDom = () => {
const myNoPuchasableQuoteBtn = document.querySelectorAll(
'.b2b-add-to-no-puchasable-quote'
)
myNoPuchasableQuoteBtn.forEach((item: CustomFieldItems) => {
removeElement(item)
})
}

if (!productQuoteEnabled) {
document.querySelector('.b2b-add-to-quote')?.remove()
return
}
const addBtnStyle = () => {
const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
myQuoteBtn.forEach((myQuote: CustomFieldItems) => {
myQuote.innerHTML = myQuoteBtnLabel
myQuote.setAttribute(
'style',
isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss
)
myQuote.style.backgroundColor = isBuyPurchasable
? color
: noPuchasableQuoteColor
myQuote.style.color = customTextColor
myQuote.setAttribute(
'class',
`b2b-add-to-quote ${
isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
}`
)

setMediaStyle(
mediaBlocks,
`b2b-add-to-quote ${
isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
}`
)
})
}

const purchasableQuote = (
CustomAddToQuoteAll: NodeListOf<Element> | never[],
addToQuoteAll: NodeListOf<Element>,
isBuyer: boolean
) => {
const quoteNode = isBuyer
? '.b2b-add-to-quote'
: '.b2b-add-to-no-puchasable-quote'
const quoteNodeStyle = isBuyer
? 'b2b-add-to-quote'
: 'b2b-add-to-no-puchasable-quote'

if (document.querySelectorAll('.b2b-add-to-quote')?.length) {
if (document.querySelectorAll(quoteNode)?.length) {
const cacheQuoteDom = cache.current

const isAddStyle = Object.keys(cacheQuoteDom).every(
(key: string) =>
(cacheQuoteDom as CustomFieldItems)[key] ===
(addQuoteBtn as CustomFieldItems)[key]
)
if (!isAddStyle) {
const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
myQuoteBtn.forEach((myQuote: CustomFieldItems) => {
myQuote.innerHTML = myQuoteBtnLabel
myQuote.setAttribute('style', customCss)
myQuote.style.backgroundColor = color
myQuote.style.color = customTextColor
myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`)

setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`)
})
addBtnStyle()
cache.current = cloneDeep(addQuoteBtn)
}
}

if (enabled) {
if (isBuyPurchasable ? enabled : noPuchasableQuoteEnabled) {
;(CustomAddToQuoteAll.length
? CustomAddToQuoteAll
: addToQuoteAll
).forEach((node: CustomFieldItems) => {
const children = node.parentNode.querySelectorAll('.b2b-add-to-quote')
const children = node.parentNode.querySelectorAll(quoteNode)
if (!children.length) {
let myQuote: CustomFieldItems | null = null
myQuote = document.createElement('div')
myQuote.innerHTML = myQuoteBtnLabel
myQuote.setAttribute('style', customCss)
myQuote.style.backgroundColor = color
myQuote.setAttribute(
'style',
isBuyPurchasable ? customCss : noPuchasableQuoteCustomCss
)
myQuote.style.backgroundColor = isBuyPurchasable
? color
: noPuchasableQuoteColor
myQuote.style.color = customTextColor
myQuote.setAttribute('class', `b2b-add-to-quote ${classSelector}`)
myQuote.setAttribute(
'class',
`${quoteNodeStyle} ${
isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
}`
)

setMediaStyle(mediaBlocks, `b2b-add-to-quote ${classSelector}`)
setMediaStyle(
mediaBlocks,
`${quoteNodeStyle} ${
isBuyPurchasable ? classSelector : noPuchasableQuoteClassSelector
}`
)
if (CustomAddToQuoteAll.length) {
node.appendChild(myQuote)
} else {
Expand All @@ -167,10 +237,43 @@ const useMyQuote = ({
})
cache.current = cloneDeep(addQuoteBtn)
} else {
const myQuoteBtn = document.querySelectorAll('.b2b-add-to-quote')
myQuoteBtn.forEach((item: CustomFieldItems) => {
removeElement(item)
})
clearQuoteDom()
}
}

useEffect(() => {
if (!productQuoteEnabled) {
clearQuoteDom()
clearNoPuchasableQuoteDom()
return
}

if (!isBuyPurchasable) {
clearQuoteDom()
const noPuchasableQuoteAll = document.querySelectorAll(
globalB3['dom.setToNoPuchasable']
)

const CustomAddToQuoteAll = noPuchasableQuoteLocationSelector
? document.querySelectorAll(noPuchasableQuoteLocationSelector)
: []

if (!noPuchasableQuoteAll.length && !CustomAddToQuoteAll.length) return

if (noPuchasableQuoteAll.length) {
purchasableQuote(CustomAddToQuoteAll, noPuchasableQuoteAll, false)
}
} else {
clearNoPuchasableQuoteDom()
const addToQuoteAll = document.querySelectorAll(
globalB3['dom.setToQuote']
)
const CustomAddToQuoteAll = locationSelector
? document.querySelectorAll(locationSelector)
: []

if (!addToQuoteAll.length && !CustomAddToQuoteAll.length) return
purchasableQuote(CustomAddToQuoteAll, addToQuoteAll, true)
}

// eslint-disable-next-line
Expand All @@ -180,7 +283,7 @@ const useMyQuote = ({
item.removeEventListener('click', quoteCallBack)
})
}
}, [openQuickView, productQuoteEnabled, addQuoteBtn])
}, [openQuickView, productQuoteEnabled, addQuoteBtn, isBuyPurchasable])
}

export default useMyQuote
Loading

0 comments on commit ebd189d

Please sign in to comment.