From 570f141ffb0741490a184fe84126a9025bb7c899 Mon Sep 17 00:00:00 2001 From: kris-liu-smile Date: Mon, 24 Apr 2023 15:06:10 +0800 Subject: [PATCH] fix: shopping detail price, paging --- .../components/table/B3PaginationTable.tsx | 17 ++++- .../ShoppingListDetails.tsx | 43 ++++++----- .../components/ReAddToCart.tsx | 26 ++----- .../components/ShoppingDetailFooter.tsx | 15 +++- .../components/ShoppingDetailTable.tsx | 38 ++++------ apps/storefront/src/store/index.ts | 2 +- apps/storefront/src/store/reducer.ts | 6 +- .../src/store/slices/{glabol.ts => global.ts} | 0 apps/storefront/src/types/products.ts | 2 +- .../src/utils/b3Product/b3Product.ts | 72 ++++++++++--------- .../src/utils/b3Product/b3TaxRate.ts | 2 +- .../src/utils/b3Product/shared/config.ts | 46 ++++++------ packages/store/reducer.ts | 2 +- 13 files changed, 134 insertions(+), 137 deletions(-) rename apps/storefront/src/store/slices/{glabol.ts => global.ts} (100%) diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx index a08234c6..aca99f40 100644 --- a/apps/storefront/src/components/table/B3PaginationTable.tsx +++ b/apps/storefront/src/components/table/B3PaginationTable.tsx @@ -107,9 +107,17 @@ function PaginationTable( const [isMobile] = useMobile() - const fetchList = async (b3Pagination?: TablePagination) => { + const fetchList = async ( + b3Pagination?: TablePagination, + isRefresh?: boolean + ) => { try { - if (cache?.current && isEqual(cache.current, searchParams)) { + if ( + cache?.current && + isEqual(cache.current, searchParams) && + !isRefresh && + !b3Pagination + ) { return } cache.current = searchParams @@ -157,6 +165,10 @@ function PaginationTable( } } + const refresh = () => { + fetchList(initPagination, true) + } + useEffect(() => { if (!isEmpty(searchParams)) { fetchList() @@ -187,6 +199,7 @@ function PaginationTable( getSelectedValue, setList, getList, + refresh, })) const handleSelectAllItems = () => { diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx index 127b0720..90360b43 100644 --- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx @@ -71,14 +71,7 @@ interface ShoppingListDetailsContentProps { function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) { const { id = '' } = useParams() const { - state: { - role, - companyInfo: { id: companyInfoId }, - isB2BUser, - currentChannelId, - isAgenting, - openAPPParams, - }, + state: { role, isB2BUser, currentChannelId, isAgenting, openAPPParams }, } = useContext(GlobaledContext) const navigate = useNavigate() const [isMobile] = useMobile() @@ -148,14 +141,18 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) { products: { edges, totalCount }, } = shoppingListDetailInfo - const listProducts = await getNewProductsList( - edges, - isB2BUser, - companyInfoId - ) + const listProducts = await getNewProductsList(edges, isB2BUser) if (isB2BUser) setCustomerInfo(shoppingListDetailInfo.customerInfo) setShoppingListInfo(shoppingListDetailInfo) + + if (!listProducts) { + return { + edges: [], + totalCount: 0, + } + } + return { edges: listProducts, totalCount, @@ -189,6 +186,15 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) { } } + const updateList = () => { + tableRef.current?.initSearch() + } + + const handleCancelClick = () => { + setDeleteOpen(false) + setDeleteItemId('') + } + const handleDeleteItems = async (itemId: number | string = '') => { setIsRequestLoading(true) const deleteShoppingListItem = isB2BUser @@ -226,16 +232,12 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) { } snackbar.success('Product removed from your shopping list') - tableRef.current?.initSearch() + updateList() } finally { setIsRequestLoading(false) } } - const updateList = () => { - tableRef.current?.initSearch() - } - useEffect(() => { if (checkedArr.length > 0) { let total = 0.0 @@ -272,11 +274,6 @@ function ShoppingListDetails({ setOpenPage }: ShoppingListDetailsProps) { } }, [checkedArr]) - const handleCancelClick = () => { - setDeleteOpen(false) - setDeleteItemId('') - } - const handleDeleteProductClick = async () => { await handleDeleteItems(+deleteItemId) await handleCancelClick() diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx index 44ca3e2e..2811955e 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx @@ -188,7 +188,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) { isValid: boolean ) => { const newProduct: ProductsProps[] = [...products] - newProduct[index].node.quantity = value + newProduct[index].node.quantity = +value newProduct[index].isValid = isValid setValidateFailureProducts(newProduct) } @@ -278,7 +278,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) { } else if (maxQuantity !== 0 && quantityNumber > maxQuantity) { product.node.quantity = maxQuantity } - if (isStock !== '0' && stock && +quantity > stock) { + if (isStock !== '0' && stock && (quantity ? +quantity : 0) > stock) { product.node.quantity = stock } @@ -380,30 +380,18 @@ export default function ReAddToCart(props: ShoppingProductsProps) { const { isStock, maxQuantity, minQuantity, stock } = product const { - basePrice, quantity, primaryImage, productName, variantSku, optionList, productsSearch, - tax, - // productsSearch: { - // variants, - // }, - // variantId, + baseAllPrice, + basePrice, } = product.node - const price = +basePrice + +(+tax / +quantity) - const total = +price * +quantity - - // const newOptionList = JSON.parse(optionList) - // let optionsValue = [] - // if (newOptionList.length > 0) { - // const newVariant = variants.find((item:CustomFieldItems) => +item.variant_id - // === +variantId || +item.id === +variantId) - // optionsValue = newVariant?.option_values || [] - // } + const price = +baseAllPrice !== 0 ? +baseAllPrice : +basePrice + const total = (price * (quantity ? +quantity : 0)).toFixed(2) const newProduct: any = { ...productsSearch, @@ -477,7 +465,7 @@ export default function ReAddToCart(props: ShoppingProductsProps) { textAlignLocation={textAlign} > {isMobile &&
Total:
} - {`${currencyToken}${total.toFixed(2)}`} + {`${currencyToken}${total}`} diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx index 3bd5505c..dd549c89 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx @@ -74,13 +74,22 @@ function ShoppingDetailFooter(props: ShoppingDetailFooterProps) { inventoryInfos.forEach((option: CustomFieldItems) => { if (node.variantSku === option.variantSku) { let isPassVerify = true - if (option.isStock === '1' && +node.quantity > option.stock) + if ( + option.isStock === '1' && + (node?.quantity ? +node.quantity : 0) > option.stock + ) isPassVerify = false - if (option.minQuantity !== 0 && +node.quantity < option.minQuantity) + if ( + option.minQuantity !== 0 && + (node?.quantity ? +node.quantity : 0) < option.minQuantity + ) isPassVerify = false - if (option.maxQuantity !== 0 && +node.quantity > option.maxQuantity) + if ( + option.maxQuantity !== 0 && + (node?.quantity ? +node.quantity : 0) > option.maxQuantity + ) isPassVerify = false if (isPassVerify) { diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx index 7df4f4f4..a51ed39d 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx @@ -21,7 +21,7 @@ import { updateB2BShoppingListsItem, updateBcShoppingListsItem, } from '@/shared/service/b2b' -import { getProductPriceIncTax, snackbar } from '@/utils' +import { snackbar } from '@/utils' import { getProductOptionsFields } from '@/utils/b3Product/shared/config' import B3FilterSearch from '../../../components/filter/B3FilterSearch' @@ -84,6 +84,7 @@ interface PaginationTableRefProps extends HTMLInputElement { getList: () => void setList: (items?: ListItemProps[]) => void getSelectedValue: () => void + refresh: () => void } const StyledShoppingListTableContainer = styled('div')(() => ({ @@ -187,9 +188,7 @@ function ShoppingDetailTable( } const initSearch = () => { - setSearch({ - search: '', - }) + paginationTableRef.current?.refresh() } useImperativeHandle(ref, () => ({ @@ -409,24 +408,16 @@ function ShoppingDetailTable( key: 'Price', title: 'Price', render: (row: CustomFieldItems) => { - const { - productsSearch: { variants = [] }, - variantId, - } = row - let priceIncTax - if (variants) { - priceIncTax = getProductPriceIncTax(variants, +variantId) - } - const price = +row.basePrice - const withTaxPrice = priceIncTax || price - + const { basePrice, baseAllPrice } = row return ( - {`${currencyToken}${withTaxPrice.toFixed(2)}`} + {`${currencyToken}${ + +baseAllPrice !== 0 ? baseAllPrice : basePrice + }`} ) }, @@ -473,17 +464,10 @@ function ShoppingDetailTable( basePrice, quantity, itemId, - productsSearch: { variants = [], options }, - variantId, + baseAllPrice, + productsSearch: { options }, } = row - let priceIncTax - if (variants) { - priceIncTax = getProductPriceIncTax(variants, +variantId) - } - - const withTaxPrice = priceIncTax || basePrice - const total = +withTaxPrice * +quantity const optionList = options || JSON.parse(row.optionList) return ( @@ -493,7 +477,9 @@ function ShoppingDetailTable( padding: '12px 0', }} > - {`${currencyToken}${total.toFixed(2)}`} + {`${currencyToken}${( + +(+baseAllPrice !== 0 ? baseAllPrice : basePrice) * +quantity + ).toFixed(2)}`} ({ reducers: { - glabol, + global, theme, }, middlewareOptions, diff --git a/apps/storefront/src/store/slices/glabol.ts b/apps/storefront/src/store/slices/global.ts similarity index 100% rename from apps/storefront/src/store/slices/glabol.ts rename to apps/storefront/src/store/slices/global.ts diff --git a/apps/storefront/src/types/products.ts b/apps/storefront/src/types/products.ts index eff6a170..cd9003df 100644 --- a/apps/storefront/src/types/products.ts +++ b/apps/storefront/src/types/products.ts @@ -168,6 +168,6 @@ export interface Product { optionsV3?: ShoppingListProductItemModifiers[] allOptions?: Partial[] productUrl: string - quantity: number + quantity: number | string [key: string]: any } diff --git a/apps/storefront/src/utils/b3Product/b3Product.ts b/apps/storefront/src/utils/b3Product/b3Product.ts index 3aa14f57..5a543135 100644 --- a/apps/storefront/src/utils/b3Product/b3Product.ts +++ b/apps/storefront/src/utils/b3Product/b3Product.ts @@ -306,8 +306,8 @@ const setItemProductPrice = (newListProducts: ListItemProps[]) => { singleCurrentPrice * ((100 + rate) / 100) + singleextraProductPrice const productTax = singleCurrentPrice * (rate / 100) + singleAllTax - item.node.basePrice = productPrice.toFixed(2) - item.node.basePricetax = productTax.toFixed(2) + item.node.baseAllPrice = productPrice.toFixed(2) + item.node.baseAllPricetax = productTax.toFixed(2) }) } @@ -406,48 +406,50 @@ const addTaxProductPrices = ( const getNewProductsList = async ( listProducts: ListItemProps[], - isB2BUser: boolean, - companyId: number | string + isB2BUser: boolean ) => { - const { currency_code: currencyCode } = getDefaultCurrencyInfo() - if (listProducts.length > 0) { - const productIds: number[] = [] - listProducts.forEach((item) => { - const { node } = item - if (!productIds.includes(node.productId)) { - productIds.push(node.productId) - } - }) - const getProducts = isB2BUser ? searchB2BProducts : searchBcProducts + try { + const { currency_code: currencyCode } = getDefaultCurrencyInfo() + if (listProducts.length > 0) { + const productIds: number[] = [] + listProducts.forEach((item) => { + const { node } = item + if (!productIds.includes(node.productId)) { + productIds.push(node.productId) + } + }) + const getProducts = isB2BUser ? searchB2BProducts : searchBcProducts - const { productsSearch } = await getProducts({ - productIds, - currencyCode, - companyId, - }) + const { productsSearch } = await getProducts({ + productIds, + currencyCode, + }) - const newProductsSearch: Partial[] = - conversionProductsList(productsSearch) + const newProductsSearch: Partial[] = + conversionProductsList(productsSearch) - const picklistIds: number[] = [] + const picklistIds: number[] = [] - // add modifier price, current price and tax price, get the associated product id - addTaxProductPrices(listProducts, newProductsSearch, picklistIds) + // add modifier price, current price and tax price, get the associated product id + addTaxProductPrices(listProducts, newProductsSearch, picklistIds) - let newListProducts: ListItemProps[] = listProducts + let newListProducts: ListItemProps[] = listProducts - // Get a collection of related products - if (picklistIds.length) { - newListProducts = await getExtraProductPricesProducts( - isB2BUser, - listProducts, - picklistIds - ) - } + // Get a collection of related products + if (picklistIds.length) { + newListProducts = await getExtraProductPricesProducts( + isB2BUser, + listProducts, + picklistIds + ) + } - setItemProductPrice(newListProducts) + setItemProductPrice(newListProducts) - return newListProducts + return newListProducts + } + } catch (error) { + console.log(error, 'error') } return undefined } diff --git a/apps/storefront/src/utils/b3Product/b3TaxRate.ts b/apps/storefront/src/utils/b3Product/b3TaxRate.ts index 7cc29f34..de99af0c 100644 --- a/apps/storefront/src/utils/b3Product/b3TaxRate.ts +++ b/apps/storefront/src/utils/b3Product/b3TaxRate.ts @@ -1,5 +1,5 @@ import { store } from '@/store/reducer' -import { TaxZoneRates, TaxZoneRatesProps } from '@/store/slices/glabol' +import { TaxZoneRates, TaxZoneRatesProps } from '@/store/slices/global' const getTaxRate = (taxClassId: number) => { const { diff --git a/apps/storefront/src/utils/b3Product/shared/config.ts b/apps/storefront/src/utils/b3Product/shared/config.ts index a25add9e..7d53e5f1 100644 --- a/apps/storefront/src/utils/b3Product/shared/config.ts +++ b/apps/storefront/src/utils/b3Product/shared/config.ts @@ -1,6 +1,6 @@ import { format } from 'date-fns' -import { AllOptionProps, ALlOptionValue } from '@/types/products' +import { AllOptionProps, ALlOptionValue, Product } from '@/types/products' import { BcCalculatedPrice, @@ -53,6 +53,8 @@ export interface ProductInfoProps { productsSearch: CustomFieldItems picklistIds?: number[] modifierPrices?: ModifierPrices[] + baseAllPrice?: number | string + baseAllPricetax?: number | string currentProductPrices?: BcCalculatedPrice extraProductPrices?: BcCalculatedPrice[] [key: string]: any @@ -74,33 +76,33 @@ export interface SearchProps { offset?: number } -interface NodeProps { - basePrice: number | string - baseSku: string - createdAt: number - discount: number | string - enteredInclusive: boolean - id: number | string - itemId: number - optionList: string - primaryImage: string - productId: number - productName: string - productUrl: string - quantity: number | string - tax: number | string - updatedAt: number - variantId: number - variantSku: string - productsSearch: CustomFieldItems -} +// interface NodeProps { +// basePrice: number | string +// baseSku: string +// createdAt: number +// discount: number | string +// enteredInclusive: boolean +// id: number | string +// itemId: number +// optionList: string +// primaryImage: string +// productId: number +// productName: string +// productUrl: string +// quantity: number | string +// tax: number | string +// updatedAt: number +// variantId: number +// variantSku: string +// productsSearch: CustomFieldItems +// } export interface ProductsProps { maxQuantity?: number minQuantity?: number stock?: number isStock?: string - node: NodeProps + node: Partial isValid?: boolean } diff --git a/packages/store/reducer.ts b/packages/store/reducer.ts index 83cd592a..7b27264d 100644 --- a/packages/store/reducer.ts +++ b/packages/store/reducer.ts @@ -10,7 +10,7 @@ import lang from './slices/lang' type Reducers = Record> interface SetupStoreParams { - reducers: any + reducers: Reducers preloadedState?: | { [x: string]: