From 183244dbb277f43249e7c7460a74e58f5c5c7b95 Mon Sep 17 00:00:00 2001 From: kris-liu-smile Date: Thu, 5 Jan 2023 10:45:10 +0800 Subject: [PATCH] fix: shopping list detail optimization --- .../components/ReAddToCart.tsx | 29 +----- .../components/ShoppingDetailFooter.tsx | 71 +------------- .../shoppingListDetails/shared/config.ts | 96 ++++++++++++++++++- 3 files changed, 98 insertions(+), 98 deletions(-) diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx index 919450106..da801dc30 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ReAddToCart.tsx @@ -38,6 +38,7 @@ import { import { ProductsProps, + addlineItems, } from '../shared/config' interface successTipOptions{ @@ -241,34 +242,8 @@ export const ReAddToCart = (props: ShoppingProductsProps) => { } try { setLoading(true) - const lineItems = products.map((item: ProductsProps) => { - const { - node, - } = item - - const optionList = JSON.parse(node.optionList || '[]') - - const getOptionId = (id: number | string) => { - if (typeof id === 'number') return id - if (id.includes('attribute')) return +id.split('[')[1].split(']')[0] - return +id - } - - const optionValue = optionList.map((option: { - option_id: number | string, - option_value: number| string, - }) => ({ - optionId: getOptionId(option.option_id), - optionValue: option.option_value, - })) - - return { - quantity: node.quantity, - productId: node.productId, - optionSelections: optionValue, - } - }) + const lineItems = addlineItems(products) const cartInfo = await getCartInfo() let res if (cartInfo.length > 0) { diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx index 525bd1a3b..f87d068fe 100644 --- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx +++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailFooter.tsx @@ -27,6 +27,7 @@ import { import { ProductsProps, + addlineItems, } from '../shared/config' import { B3LinkTipContent, @@ -148,75 +149,7 @@ const ShoppingDetailFooter = (props: ShoppingDetailFooterProps) => { } = verifyInventory(getInventoryInfos?.variantSku || []) if (validateSuccessArr.length !== 0) { - const lineItems = validateSuccessArr.map((item: ProductsProps) => { - const { - node, - } = item - - const optionList = JSON.parse(node.optionList || '[]') - - const getOptionId = (id: number | string) => { - if (typeof id === 'number') return id - if (id.includes('attribute')) return +id.split('[')[1].split(']')[0] - return +id - } - - const { - productsSearch: { - allOptions, - }, - } = node - - const optionValue: any = [] - - allOptions.forEach((item: any) => { - const splicedId = `attribute[${item.id}]` - - if (item.type === 'date') { - let month = '' - let day = '' - let year = '' - optionList.forEach((list: any) => { - if (list.option_id === `${splicedId}[month]`) { - month = list.option_value - } - if (list.option_id === `${splicedId}[day]`) { - day = list.option_value - } - if (list.option_id === `${splicedId}[year]`) { - year = list.option_value - } - }) - - if (month && day && year) { - optionValue.push({ - optionId: getOptionId(item.id), - optionValue: { - day, - month, - year, - }, - }) - } - } else { - const listItem = optionList.find((list: any) => list.option_id === splicedId) - if (listItem && listItem?.option_value) { - optionValue.push({ - optionId: getOptionId(listItem.option_id), - optionValue: listItem.option_value, - }) - } - } - }) - - return { - quantity: node.quantity, - productId: node.productId, - variantId: node.variantId, - optionSelections: optionValue, - } - }) - + const lineItems = addlineItems(validateSuccessArr) const cartInfo = await getCartInfo() const res = cartInfo.length ? await addProductToCart({ lineItems, diff --git a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts index f5dce221c..ec11f1d4a 100644 --- a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts +++ b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts @@ -175,7 +175,6 @@ const getFieldOptions = (fieldType: string, option: ShoppingListProductItemModif const checkedId: number | string = optionValues.find((values) => values.label === 'Yes')?.id || (optionValues.length > 0 ? optionValues[0].id : '') return { - label: '', options: [{ value: checkedId, label, @@ -373,7 +372,6 @@ export const getOptionRequestData = (formFields: CustomFieldItems[], requestData } if (fieldType === 'checkbox') { - console.log(4444, fieldValue, fieldValue?.length > 0 ? fieldValue[0] : '') requestData[decodeName] = fieldValue?.length > 0 ? fieldValue[0] : '' return } @@ -422,3 +420,97 @@ export const getQuickAddRowFields = (name: string | number) => [ allowArrow: true, }, ] + +interface OptionListProps { + option_id: string, + option_value: string, +} + +interface DateProps { + day: string, + month: string, + year: string, +} + +interface OptionValueProps { + optionId: string | number, + optionValue: string | DateProps, +} + +interface AllOptionsProps { + id: string | number, + type: string, +} + +export const addlineItems = (products: ProductsProps[]) => { + const lineItems = products.map((item: ProductsProps) => { + const { + node, + } = item + + const optionList: OptionListProps[] = JSON.parse(node.optionList || '[]') + + const getOptionId = (id: number | string) => { + if (typeof id === 'number') return id + if (id.includes('attribute')) return +id.split('[')[1].split(']')[0] + return +id + } + + const { + productsSearch: { + allOptions, + }, + } = node + + const optionValue: OptionValueProps[] = [] + + allOptions.forEach((item: AllOptionsProps) => { + const splicedId = `attribute[${item.id}]` + + if (item.type === 'date') { + let month: string = '' + let day: string = '' + let year: string = '' + optionList.forEach((list: OptionListProps) => { + if (list.option_id === `${splicedId}[month]`) { + month = list.option_value + } + if (list.option_id === `${splicedId}[day]`) { + day = list.option_value + } + if (list.option_id === `${splicedId}[year]`) { + year = list.option_value + } + }) + + if (month && day && year) { + optionValue.push({ + optionId: getOptionId(item.id), + optionValue: { + day, + month, + year, + }, + }) + } + } else { + const listItem = optionList.find((list: OptionListProps) => list.option_id === splicedId) + if (listItem && listItem?.option_value) { + optionValue.push({ + optionId: getOptionId(listItem.option_id), + optionValue: listItem.option_value, + }) + } + } + }) + + return { + quantity: node.quantity, + productId: node.productId, + variantId: node.variantId, + optionSelections: optionValue, + } + }) + + return lineItems +}