diff --git a/apps/storefront/src/components/B3StoreContainer.tsx b/apps/storefront/src/components/B3StoreContainer.tsx index 442a30bf..524f4255 100644 --- a/apps/storefront/src/components/B3StoreContainer.tsx +++ b/apps/storefront/src/components/B3StoreContainer.tsx @@ -48,7 +48,6 @@ export const B3StoreContainer = (props: B3StoreContainerProps) => { useLayoutEffect(() => { const getStoreBasicInfo = async () => { - console.log(window.location.hash, '2323') if (window.location.pathname.includes('account.php') || window.location.hash) { showPageMask(true) } diff --git a/apps/storefront/src/components/ui/B3Picker.tsx b/apps/storefront/src/components/ui/B3Picker.tsx index 687c7176..7130b8b3 100644 --- a/apps/storefront/src/components/ui/B3Picker.tsx +++ b/apps/storefront/src/components/ui/B3Picker.tsx @@ -24,7 +24,7 @@ import { interface B3PickerProps { onChange: (date: Date | string | number) => void; variant?: 'filled' | 'outlined' | 'standard'; - value: Date | string | number; + value: Date | string | number | undefined; label: string; disableOpenPicker?: boolean; formatInput?: string diff --git a/apps/storefront/src/pages/quickorder/Quickorder.tsx b/apps/storefront/src/pages/quickorder/Quickorder.tsx index 5473120b..4120a06a 100644 --- a/apps/storefront/src/pages/quickorder/Quickorder.tsx +++ b/apps/storefront/src/pages/quickorder/Quickorder.tsx @@ -1,6 +1,5 @@ import { useState, - useRef, useEffect, } from 'react' @@ -18,10 +17,10 @@ import { } from '@/components/spin/B3Sping' import QuickorderTable from './components/QuickorderTable' - -interface TableRefProps extends HTMLInputElement { - getCheckedList: () => CustomFieldItems, -} +import QuickOrderFooter from './components/QuickOrderFooter' +import { + QuickOrderPad, +} from './components/QuickOrderPad' const Quickorder = () => { useEffect(() => { @@ -30,14 +29,7 @@ const Quickorder = () => { const [isMobile] = useMobile() const [isRequestLoading, setIsRequestLoading] = useState(false) - - const tableRef = useRef(null) - - const getCheckedList = () => { - const checkedValue = tableRef.current?.getCheckedList() - - console.log(checkedValue) - } + const [checkedArr, setCheckedArr] = useState([]) return ( { spacing={2} > - + - - sidebar + + @@ -82,9 +80,11 @@ const Quickorder = () => { left: 0, width: '100%', }} - onClick={getCheckedList} > - button + diff --git a/apps/storefront/src/pages/quickorder/components/QuickAdd.tsx b/apps/storefront/src/pages/quickorder/components/QuickAdd.tsx new file mode 100644 index 00000000..c91700c5 --- /dev/null +++ b/apps/storefront/src/pages/quickorder/components/QuickAdd.tsx @@ -0,0 +1,412 @@ +import { + useState, + useEffect, + KeyboardEventHandler, +} from 'react' + +import { + useForm, +} from 'react-hook-form' + +import { + Box, + Typography, + Grid, + Button, +} from '@mui/material' + +import { + useB3Lang, +} from '@b3/lang' + +import { + B3CustomForm, + B3Sping, +} from '@/components' + +import { + snackbar, +} from '@/utils' + +import { + getQuickAddRowFields, +} from '../../shoppingListDetails/shared/config' + +import { + SimpleObject, + ShoppingListAddProductOption, +} from '../../../types' + +import { + getB2BVariantInfoBySkus, +} from '../../../shared/service/b2b' + +interface AddToListContentProps { + updateList?: () => void, + quickAddToList: (products: CustomFieldItems[]) => CustomFieldItems, + level?: number, + buttonText?: string, +} + +export const QuickAdd = (props: AddToListContentProps) => { + const { + updateList = () => {}, + quickAddToList, + level = 3, + buttonText = 'Add product to list', + } = props + + const b3Lang = useB3Lang() + + const [rows, setRows] = useState(level) + const [formFields, setFormFields] = useState([]) + const [isLoading, setIsLoading] = useState(false) + + const loopRows = (rows: number, fn:(index: number)=>void) => { + new Array(rows).fill(1).forEach((item, index) => fn(index)) + } + + useEffect(() => { + let formFields: CustomFieldItems[] = [] + loopRows(rows, (index) => { + formFields = [...formFields, ...getQuickAddRowFields(index)] + }) + setFormFields(formFields) + }, [rows]) + + const handleAddRowsClick = () => { + setRows(rows + level) + } + + const { + control, + handleSubmit, + getValues, + formState: { + errors, + }, + setError, + setValue, + } = useForm({ + mode: 'all', + }) + + const validateSkuInput = (index: number, sku: string, qty: string) => { + if (!sku && !qty) { + return true + } + + let isValid = true + const quantity = parseInt(qty, 10) || 0 + + if (!sku) { + setError(`sku-${index}`, { + type: 'manual', + message: b3Lang('intl.global.validate.required', { + label: 'SKU#', + }), + }) + isValid = false + } + + if (!qty) { + setError(`qty-${index}`, { + type: 'manual', + message: b3Lang('intl.global.validate.required', { + label: 'Qty', + }), + }) + isValid = false + } else if (quantity <= 0) { + setError(`qty-${index}`, { + type: 'manual', + message: 'incorrect number', + }) + isValid = false + } + + return isValid + } + + const getProductData = (value: CustomFieldItems) => { + const skuValue: SimpleObject = {} + let isValid = true + loopRows(rows, (index) => { + const sku = value[`sku-${index}`] + const qty = value[`qty-${index}`] + + isValid = validateSkuInput(index, sku, qty) === false ? false : isValid + + if (isValid && sku) { + const quantity = parseInt(qty, 10) || 0 + skuValue[sku] = skuValue[sku] ? (skuValue[sku] as number) + quantity : quantity + } + }) + + return { + skuValue, + isValid, + skus: Object.keys(skuValue), + } + } + + const getProductItems = (variantInfoList: CustomFieldItems, skuValue: SimpleObject, skus: string[]) => { + const notFoundSku: string[] = [] + const notPurchaseSku: string[] = [] + const productItems: CustomFieldItems[] = [] + const passSku: string[] = [] + const notStockSku: { + sku: string, + stock: number, + }[] = [] + + skus.forEach((sku) => { + const variantInfo : CustomFieldItems | null = (variantInfoList || []).find((variant: CustomFieldItems) => variant.variantSku.toUpperCase() === sku.toUpperCase()) + + if (!variantInfo) { + notFoundSku.push(sku) + return + } + + const { + productId, + variantId, + option: options, + purchasingDisabled = '1', + stock, + isStock, + } = variantInfo + + const quantity = (skuValue[sku] as number) || 0 + + if (purchasingDisabled === '1') { + notPurchaseSku.push(sku) + return + } + + if (isStock === '1' && quantity > +stock) { + notStockSku.push({ + sku, + stock: +stock, + }) + + return + } + + const optionList = (options || []).reduce((arr: ShoppingListAddProductOption[], optionStr: string) => { + try { + const option = typeof optionStr === 'string' ? JSON.parse(optionStr) : optionStr + arr.push({ + optionId: `attribute[${option.option_id}]`, + optionValue: `${option.id}`, + }) + return arr + } catch (error) { + return arr + } + }, []) + + passSku.push(sku) + + productItems.push({ + ...variantInfo, + newSelectOptionList: optionList, + productId: parseInt(productId, 10) || 0, + quantity, + variantId: parseInt(variantId, 10) || 0, + }) + }) + + return { + notFoundSku, + notPurchaseSku, + notStockSku, + productItems, + passSku, + } + } + + const showErrors = (value: CustomFieldItems, skus: string[], inputType: 'sku' | 'qty', message: string) => { + skus.forEach((sku) => { + const skuFieldName = Object.keys(value).find((name) => value[name] === sku) || '' + + if (skuFieldName) { + setError(skuFieldName.replace('sku', inputType), { + type: 'manual', + message, + }) + } + }) + } + + const clearInputValue = (value: CustomFieldItems, skus: string[]) => { + skus.forEach((sku) => { + const skuFieldName = Object.keys(value).find((name) => value[name] === sku) || '' + + if (skuFieldName) { + setValue(skuFieldName, '') + setValue(skuFieldName.replace('sku', 'qty'), '') + } + }) + } + + const getVariantList = async (skus: string[]) => { + try { + const { + variantSku: variantInfoList, + }: CustomFieldItems = await getB2BVariantInfoBySkus({ + skus, + }, true) + + return variantInfoList + } catch (error) { + return [] + } + } + + const handleAddToList = () => { + handleSubmit(async (value) => { + try { + setIsLoading(true) + const { + skuValue, + isValid, + skus, + } = getProductData(value) + + if (!isValid || skus.length <= 0) { + return + } + + const variantInfoList = await getVariantList(skus) + + const { + notFoundSku, + notPurchaseSku, + productItems, + passSku, + notStockSku, + } = getProductItems(variantInfoList, skuValue, skus) + + if (notFoundSku.length > 0) { + showErrors(value, notFoundSku, 'sku', '') + snackbar.error(`SKU ${notFoundSku} were not found, please check entered values`) + } + + if (notPurchaseSku.length > 0) { + showErrors(value, notPurchaseSku, 'sku', '') + snackbar.error(`SKU ${notPurchaseSku} no longer for sale`) + } + + if (notStockSku.length > 0) { + const stockSku = notStockSku.map((item) => item.sku) + + notStockSku.forEach((item) => { + showErrors(value, stockSku, 'qty', `${item.stock} in stock`) + }) + + snackbar.error(`SKU ${stockSku} do not have enough stock, please change quantity.`) + } + + if (productItems.length > 0) { + await quickAddToList(productItems) + clearInputValue(value, passSku) + + updateList() + } + } finally { + setIsLoading(false) + } + })() + } + + const handleKeyDown: KeyboardEventHandler = (e) => { + if (e.key === 'Enter') { + handleAddToList() + } + } + + return ( + + + + + + Quick add + + + + + + + + + + + + + + + + ) +} diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx new file mode 100644 index 00000000..80fc76f6 --- /dev/null +++ b/apps/storefront/src/pages/quickorder/components/QuickOrderFooter.tsx @@ -0,0 +1,609 @@ +import { + useState, + MouseEvent, + useEffect, + Dispatch, + SetStateAction, +} from 'react' + +import { + useNavigate, +} from 'react-router-dom' + +import { + v1 as uuid, +} from 'uuid' + +import { + Box, + Typography, + Button, + Menu, + MenuItem, +} from '@mui/material' + +import { + ArrowDropDown, +} from '@mui/icons-material' + +import { + useMobile, +} from '@/hooks' + +import { + searchB2BProducts, + addProductToShoppingList, +} from '@/shared/service/b2b' + +import { + createCart, + getCartInfo, + addProductToCart, +} from '@/shared/service/bc' + +import { + snackbar, + getDefaultCurrencyInfo, + addQuoteDraftProduce, +} from '@/utils' + +import { + PRODUCT_DEFAULT_IMAGE, +} from '@/constants' + +import { + getB2BVariantInfoBySkus, +} from '@/shared/service/b2b/graphql/product' + +import { + B3LinkTipContent, +} from '@/components' + +import { + conversionProductsList, +} from '../../shoppingListDetails/shared/config' + +import { + OrderShoppingList, +} from '../../orderDetail/components/OrderShoppingList' + +import CreateShoppingList from '../../orderDetail/components/CreateShoppingList' + +export interface ProductInfoProps { + basePrice: number | string, + baseSku: string, + createdAt: number, + discount: number | string, + enteredInclusive: boolean, + id: number | string, + itemId: number, + optionList: CustomFieldItems, + primaryImage: string, + productId: number, + productName: string, + productUrl: string, + quantity: number | string, + tax: number | string, + updatedAt: number, + variantId: number, + variantSku: string, + productsSearch: CustomFieldItems, +} + +export interface ListItemProps { + node: ProductInfoProps, +} + +interface NodeProps { + basePrice: number | string, + baseSku: string, + createdAt: number, + discount: number | string, + enteredInclusive: boolean, + id: number | string, + itemId: number, + optionList: CustomFieldItems, + primaryImage: string, + productId: number, + productName: string, + productUrl: string, + quantity: number | string, + tax: number | string, + updatedAt: number, + variantId: number, + variantSku: string, + productsSearch: CustomFieldItems, +} + +interface ProductsProps { + maxQuantity?: number, + minQuantity?: number, + stock?: number, + isStock?: string, + node: NodeProps + isValid?: boolean, +} + +interface successTipOptions{ + message: string, + link?: string, + linkText?: string, + isOutLink?: boolean, +} + +const successTip = (options: successTipOptions) => () => ( + +) + +interface QuickOrderFooterProps { + checkedArr: CustomFieldItems, + setIsRequestLoading: Dispatch>, +} + +const QuickOrderFooter = (props: QuickOrderFooterProps) => { + const { + checkedArr, + setIsRequestLoading, + } = props + + const [isMobile] = useMobile() + const [anchorEl, setAnchorEl] = useState(null) + const [open, setOpen] = useState(Boolean(anchorEl)) + const [selectedSubTotal, setSelectedSubTotal] = useState(0.00) + const [openShoppingList, setOpenShoppingList] = useState(false) + const [isOpenCreateShopping, setIsOpenCreateShopping] = useState(false) + const [isShoppingListLoading, setIisShoppingListLoading] = useState(false) + + const navigate = useNavigate() + + const containerStyle = isMobile ? { + alignItems: 'flex-start', + flexDirection: 'column', + } : { + alignItems: 'center', + } + + const handleOpenBtnList = (e: MouseEvent) => { + if (checkedArr.length === 0) { + snackbar.error('Please select at least one item') + } else { + setAnchorEl(e.currentTarget) + setOpen(true) + } + } + + const handleClose = () => { + setAnchorEl(null) + setOpen(false) + } + + const { + token: currencyToken, + } = getDefaultCurrencyInfo() + + // Add selected to cart + const handleSetCartLineItems = (inventoryInfos: ProductsProps[]) => { + const lineItems: CustomFieldItems = [] + + checkedArr.forEach((item: ProductsProps) => { + const { + node, + } = item + + inventoryInfos.forEach((inventory: CustomFieldItems) => { + if (node.variantSku === inventory.variantSku) { + const { + optionList, + quantity, + } = node + + const options = optionList.map((option: CustomFieldItems) => ({ + optionId: option.product_option_id, + optionValue: option.value, + })) + + lineItems.push({ + optionList: options, + productId: parseInt(inventory.productId, 10) || 0, + quantity, + variantId: parseInt(inventory.variantId, 10) || 0, + }) + } + }) + }) + + return lineItems + } + + const handleAddSelectedToCart = async () => { + setIsRequestLoading(true) + handleClose() + try { + const skus: string[] = [] + + checkedArr.forEach((item: ProductsProps) => { + const { + node, + } = item + + skus.push(node.variantSku) + }) + + if (skus.length === 0) { + snackbar.error('Please select at least one item to add to cart') + return + } + + const getInventoryInfos = await getB2BVariantInfoBySkus({ + skus, + }) + + const lineItems = handleSetCartLineItems(getInventoryInfos?.variantSku || []) + + const cartInfo = await getCartInfo() + const res = cartInfo.length ? await addProductToCart({ + lineItems, + }, cartInfo[0].id) : await createCart({ + lineItems, + }) + if (res.status) { + snackbar.error(res.detail) + } else if (!res.status) { + snackbar.success('', { + jsx: successTip({ + message: 'Products were added to cart', + link: '/cart.php', + linkText: 'VIEW CART', + isOutLink: true, + }), + isClose: true, + }) + } + } finally { + setIsRequestLoading(false) + } + } + + // Add selected to quote + const getOptionsList = (options: CustomFieldItems) => { + if (options?.length === 0) return [] + + const option = options.map(({ + product_option_id: optionId, + value, + }: { + product_option_id: number | string, + value: string | number, + }) => ({ + optionId: `attribute[${optionId}]`, + optionValue: value, + })) + + return option + } + + const handleAddSelectedToQuote = async () => { + setIsRequestLoading(true) + handleClose() + try { + const productsWithSku = checkedArr.filter((checkedItem: ListItemProps) => { + const { + node: { + variantSku, + }, + } = checkedItem + + return variantSku !== '' && variantSku !== null && variantSku !== undefined + }) + + const productIds: number[] = [] + productsWithSku.forEach((product: ListItemProps) => { + const { + node, + } = product + + if (!productIds.includes(+node.productId)) { + productIds.push(+node.productId) + } + }) + + const { + productsSearch, + } = await searchB2BProducts({ + productIds, + }) + + const newProductInfo: CustomFieldItems = conversionProductsList(productsSearch) + + productsWithSku.forEach((product: ListItemProps) => { + const { + node: { + optionList, + variantSku, + productId, + productName, + quantity, + variantId, + }, + } = product + + const optionsList = getOptionsList(optionList) + const currentProductSearch = newProductInfo.find((product: CustomFieldItems) => +product.id === +productId) + + const variantItem = currentProductSearch.variants.find((item: CustomFieldItems) => item.sku === variantSku) + + const quoteListitem = { + node: { + id: uuid(), + variantSku: variantItem.sku, + variantId, + productsSearch: currentProductSearch, + primaryImage: variantItem.image_url || PRODUCT_DEFAULT_IMAGE, + productName, + quantity: +quantity || 1, + optionList: JSON.stringify(optionsList), + productId, + basePrice: variantItem.bc_calculated_price.as_entered, + tax: variantItem.bc_calculated_price.tax_inclusive - variantItem.bc_calculated_price.tax_exclusive, + }, + } + + addQuoteDraftProduce(quoteListitem, +quantity, optionsList || []) + + snackbar.success('Products were added to your quote.') + }) + } catch (e) { + console.log(e) + } finally { + setIsRequestLoading(false) + } + } + + // Add selected to shopping list + const gotoShoppingDetail = (id: string | number) => { + navigate(`/shoppingList/${id}`) + } + + const tip = (id: string | number) => ( + + + Products were added to your shopping list + + + + ) + + const handleShoppingClose = (isTrue?: boolean) => { + if (isTrue) { + setOpenShoppingList(false) + setIsOpenCreateShopping(false) + } else { + setOpenShoppingList(false) + setIsOpenCreateShopping(false) + } + } + + const handleOpenCreateDialog = () => { + setOpenShoppingList(false) + setIsOpenCreateShopping(true) + } + + const handleCloseShoppingClick = () => { + setIsOpenCreateShopping(false) + setOpenShoppingList(true) + } + + const handleCreateShoppingClick = () => { + handleClose() + handleCloseShoppingClick() + setOpenShoppingList(true) + } + + const handleAddSelectedToShoppingList = async (shoppingListId: string | number) => { + setIisShoppingListLoading(true) + try { + const productIds: number[] = [] + checkedArr.forEach((product: ListItemProps) => { + const { + node, + } = product + + if (!productIds.includes(+node.productId)) { + productIds.push(+node.productId) + } + }) + + const items: CustomFieldItems = [] + + checkedArr.forEach((product: ListItemProps) => { + const { + node: { + optionList, + productId, + quantity, + variantId, + }, + } = product + + const optionsList = getOptionsList(optionList) + + items.push({ + productId: +productId, + variantId: +variantId, + quantity: +quantity, + optionList: optionsList, + }) + }) + + await addProductToShoppingList({ + shoppingListId: +shoppingListId, + items, + }) + + snackbar.success('Products were added to your shopping list', { + jsx: () => tip(shoppingListId), + isClose: true, + }) + handleShoppingClose(true) + } catch (err) { + console.error(err) + } finally { + setIisShoppingListLoading(false) + } + } + + const buttonList = [{ + name: 'Add selected to cart', + key: 'add-selected-to-cart', + handleClick: handleAddSelectedToCart, + }, { + name: 'Add selected to quote', + key: 'add-selected-to-quote', + handleClick: handleAddSelectedToQuote, + }, { + name: 'Add selected to shopping list', + key: 'add-selected-to-shoppingList', + handleClick: handleCreateShoppingClick, + }] + + useEffect(() => { + if (checkedArr.length > 0) { + let total = 0.00 + + checkedArr.forEach((item: ListItemProps) => { + const { + node, + } = item + + total += +node.basePrice * +node.quantity + }) + + setSelectedSubTotal((1000 * total) / 1000) + } else { + setSelectedSubTotal(0.00) + } + }, [checkedArr]) + + return ( + <> + + + {`${checkedArr.length} products selected`} + + + {`Subtotal: ${currencyToken}${selectedSubTotal.toFixed(2)}`} + + + + + + { + buttonList.length > 0 && ( + buttonList.map((button) => ( + { + button.handleClick() + }} + > + {button.name} + + )) + ) + } + + + + + + + + + + ) +} + +export default QuickOrderFooter diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx new file mode 100644 index 00000000..a186c73d --- /dev/null +++ b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx @@ -0,0 +1,148 @@ +import { + Box, + Divider, + Typography, + Button, + Card, + CardContent, +} from '@mui/material' + +import UploadFileIcon from '@mui/icons-material/UploadFile' + +import { + QuickAdd, +} from './QuickAdd' + +import { + createCart, + getCartInfo, + addProductToCart, +} from '@/shared/service/bc' + +import { + snackbar, +} from '@/utils' + +import { + B3LinkTipContent, +} from '@/components' + +interface successTipOptions{ + message: string, + link?: string, + linkText?: string, + isOutLink?: boolean, +} + +const successTip = (options: successTipOptions) => () => ( + +) + +export const QuickOrderPad = () => { + const handleSplitOptionId = (id: string | number) => { + if (typeof id === 'string' && id.includes('attribute')) { + const idRight = id.split('[')[1] + + const optionId = idRight.split(']')[0] + return +optionId + } + + if (typeof id === 'number') { + return id + } + } + + const quickAddToList = async (products: CustomFieldItems[]) => { + const lineItems = products.map((product) => { + const { + newSelectOptionList, + quantity, + } = product + const optionList = newSelectOptionList.map((option: any) => { + const splitOptionId = handleSplitOptionId(option.optionId) + + return ({ + optionId: splitOptionId, + optionValue: option.optionValue, + }) + }) + + return ({ + optionList, + productId: parseInt(product.productId, 10) || 0, + quantity, + variantId: parseInt(product.variantId, 10) || 0, + }) + }) + + const cartInfo = await getCartInfo() + const res = cartInfo.length ? await addProductToCart({ + lineItems, + }, cartInfo[0].id) : await createCart({ + lineItems, + }) + + if (res.status) { + snackbar.error(res.detail) + } else if (!res.status) { + snackbar.success('', { + jsx: successTip({ + message: 'Products were added to cart', + link: '/cart.php', + linkText: 'VIEW CART', + isOutLink: true, + }), + isClose: true, + }) + } + + return res + } + + return ( + + + + + Quick order pad + + + + + + + + + + + + + + + ) +} diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx index fb4b63f1..15b4fa94 100644 --- a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx +++ b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx @@ -1,12 +1,9 @@ import { useState, useRef, - forwardRef, - Ref, ReactElement, Dispatch, SetStateAction, - useImperativeHandle, } from 'react' import { @@ -20,7 +17,6 @@ import { } from '@/shared/service/b2b' import { - // snackbar, getDefaultCurrencyInfo, distanceDay, } from '@/utils' @@ -37,15 +33,6 @@ import { useMobile, } from '@/hooks' -// import { -// GlobaledContext, -// } from '@/shared/global' - -// import { -// conversionProductsList, -// getProductOptionsFields, -// } from '../../shoppingListDetails/shared/config' - import B3FilterSearch from '../../../components/filter/B3FilterSearch' import B3FilterPicker from '../../../components/filter/B3FilterPicker' @@ -107,11 +94,13 @@ const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/ interface QuickorderTableProps { setIsRequestLoading: Dispatch>, + setCheckedArr: (values: CustomFieldItems) => void, } const QuickorderTable = ({ setIsRequestLoading, -}: QuickorderTableProps, ref: Ref) => { + setCheckedArr, +}: QuickorderTableProps) => { const paginationTableRef = useRef(null) const [search, setSearch] = useState({ @@ -120,27 +109,10 @@ const QuickorderTable = ({ endDateAt: distanceDay(0), }) - const [checkedArr, setCheckedArr] = useState([]) - const [total, setTotalCount] = useState(0) const [isMobile] = useMobile() - // const { - // state: { - // role, - // isAgenting, - // salesRepCompanyId, - // companyInfo: { - // id: companyInfoId, - // }, - // }, - // } = useContext(GlobaledContext) - - useImperativeHandle(ref, () => ({ - getCheckedList: () => checkedArr, - })) - const { token: currencyToken, } = getDefaultCurrencyInfo() @@ -388,59 +360,59 @@ const QuickorderTable = ({ /> { - isMobile && ( - + - - - ) - } + endPicker={{ + isEnabled: true, + label: 'To', + defaultValue: search?.endDateAt || '', + pickerKey: 'end', + }} + isShowMore + onChange={handleFilterChange} + /> + + ) + } { - !isMobile && ( - - ) - } + !isMobile && ( + + ) + } @@ -474,4 +446,4 @@ const QuickorderTable = ({ ) } -export default forwardRef(QuickorderTable) +export default QuickorderTable diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx index 8a2ad94d..20b37b8a 100644 --- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx @@ -105,6 +105,7 @@ const ShoppingListDetails = () => { const [validateSuccessProducts, setValidateSuccessProducts] = useState([]) const [validateFailureProducts, setValidateFailureProducts] = useState([]) + const isJuniorApprove = shoppingListInfo?.status === 0 && role === 2 const isReadForApprove = shoppingListInfo?.status === 40 || shoppingListInfo?.status === 20 const { @@ -342,6 +343,7 @@ const ShoppingListDetails = () => { { }} > { - !isReadForApprove && ( + (!isReadForApprove && !isJuniorApprove) && ( @@ -375,7 +377,7 @@ const ShoppingListDetails = () => { { - !isReadForApprove && ( + (!isReadForApprove && !isJuniorApprove) && ( void, isReadForApprove: boolean, + isJuniorApprove: boolean, setDeleteItemId: (itemId: number | string) => void, setDeleteOpen: (open: boolean) => void, } @@ -163,6 +164,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) isReadForApprove, setDeleteItemId, setDeleteOpen, + isJuniorApprove, } = props const paginationTableRef = useRef(null) @@ -430,7 +432,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) size="small" type="number" variant="filled" - disabled={isReadForApprove} + disabled={isReadForApprove || isJuniorApprove} value={row.quantity} inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', @@ -483,7 +485,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) }} > { - optionList.length > 0 && !isReadForApprove && ( + optionList.length > 0 && !isReadForApprove && !isJuniorApprove && ( ) { - !isReadForApprove && ( + !isReadForApprove && !isJuniorApprove && ( ) searchParams={search} isCustomRender={false} showCheckbox - disableCheckbox={isReadForApprove} + disableCheckbox={isReadForApprove || isJuniorApprove} hover labelRowsPerPage="Items per page:" showBorder={false} @@ -596,7 +598,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref) currencyToken={currencyToken} handleUpdateProductQty={handleUpdateProductQty} handleUpdateShoppingListItem={handleUpdateShoppingListItem} - isReadForApprove={isReadForApprove} + isReadForApprove={isReadForApprove || isJuniorApprove} /> )} />