fix: update shopping list issues

bigcommerce · Jan 5, 2023 · 85d6deb · 85d6deb
1 parent 5f79f2a
commit 85d6deb
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 64 deletions.
diff --git a/apps/storefront/src/components/form/B3ControlCheckbox.tsx b/apps/storefront/src/components/form/B3ControlCheckbox.tsx
@@ -56,7 +56,7 @@ export const B3ControlCheckbox = ({
     const getAllValue = getValues()[name] || []
     const valueString: string = `${value}`
 
-    const newValue = getAllValue?.includes(valueString)
+    const newValue = getAllValue?.find((id: Number | string) => `${id}` === valueString)
       ? getAllValue?.filter((id: string) => id !== value)
       : [...(getAllValue ?? []), value]
 
@@ -83,15 +83,16 @@ export const B3ControlCheckbox = ({
               render={({
                 field: {
                   onChange,
+                  value,
                 },
               }) => options?.map((list: CheckboxListProps) => (
                 <FormControlLabel
                   control={(
                     <Checkbox
                       onChange={() => onChange(handleCheck(list.value, name))}
-                      defaultChecked={defaultValue.includes(list.value)}
+                      checked={(value as any).includes(list.value)}
                     />
-                  )}
+                    )}
                   key={list.value}
                   label={list.label}
                 />

diff --git a/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx b/apps/storefront/src/pages/orderDetail/components/OrderDialog.tsx
@@ -314,7 +314,7 @@ export const OrderDialog: (props: OrderDialogProps) => ReactElement = ({
       snackbar.success('', {
         jsx: successTip({
           message: 'Products were added to your shopping list',
-          link: '/shoppingLists',
+          link: `/shoppingList/${id}`,
           linkText: 'VIEW SHOPPING LIST',
         }),
       })

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -160,7 +160,7 @@ const ShoppingListDetails = () => {
           companyId: companyInfoId,
         })
 
-        const newProductsSearch = conversionProductsList(productsSearch, listProducts)
+        const newProductsSearch = conversionProductsList(productsSearch)
 
         listProducts.forEach((item) => {
           const {

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
@@ -270,6 +270,7 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
     if (formFields.length > 0) {
       const defaultValues: SimpleObject = formFields.reduce((value: SimpleObject, fields) => {
         value[fields.name] = fields.default
+        setValue(fields.name, fields.default)
         return value
       }, {})
       getProductVariantId(defaultValues, formFields[0].name)

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -50,6 +50,10 @@ import {
   ShoppingListAddProductItem,
 } from '../../../types'
 
+import {
+  getProductOptionsFields,
+} from '../shared/config'
+
 interface ListItem {
   [key: string]: string
 }
@@ -305,55 +309,14 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
       key: 'Product',
       title: 'Product',
       render: (row: CustomFieldItems) => {
-        const optionList = JSON.parse(row.optionList)
-        const optionsValue: { id: any; label: string; optionDisplayName: any; optionId: string }[] = []
-
-        if (optionList.length > 0) {
-          const {
-            productsSearch: {
-              allOptions,
-            },
-          } = row
-
-          allOptions.forEach((option: any) => {
-            const {
-              id,
-              type,
-              display_name: displayName,
-              option_values: allOriginOptionValues,
-            } = option
-
-            let optionId = ''
-            let label = ''
-
-            const splicedId = `attribute[${id}]`
-            const currentSelectedOption = optionList.find((option: any) => splicedId === option.option_id)
-            if (allOriginOptionValues.length > 0) {
-              if (type === 'checkbox') {
-                const isChecked = currentSelectedOption.option_value.includes(',')
-                const currentOriginOption = allOriginOptionValues.find((value: any) => value.label === (isChecked ? 'Yes' : 'No'))
-
-                optionId = currentOriginOption.id
-                label = currentOriginOption.label
-              } else {
-                const currentOriginOption = allOriginOptionValues.find((value: any) => +currentSelectedOption.option_value === +value.id)
-
-                optionId = currentOriginOption.id
-                label = currentOriginOption.label
-              }
-            } else {
-              optionId = id
-              label = currentSelectedOption.option_value
-            }
-
-            optionsValue.push({
-              id,
-              label,
-              optionDisplayName: displayName,
-              optionId,
-            })
-          })
+        const product: any = {
+          ...row.productsSearch,
+          selectOptions: row.optionList,
         }
+        const productFields = (getProductOptionsFields(product, {}))
+
+        const optionList = JSON.parse(row.optionList)
+        const optionsValue: CustomFieldItems[] = productFields.filter((item) => item.valueText)
 
         return (
           <Box
@@ -375,9 +338,9 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
                   <Box>
                     {
                       optionsValue.map((option: any) => (
-                        <Typography key={option.optionDisplayName}>
-                          {`${option.optionDisplayName
-                          }: ${option.label}`}
+                        <Typography key={option.valueLabel}>
+                          {`${option.valueLabel
+                          }: ${option.valueText}`}
                         </Typography>
                       ))
                     }
@@ -434,7 +397,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
     {
       key: 'Total',
       title: 'Total',
-      render: (row) => {
+      render: (row: CustomFieldItems) => {
         const {
           basePrice,
           quantity,
@@ -473,9 +436,13 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
                         productsSearch,
                         variantId,
                         itemId,
+                        optionList,
                       } = row
 
-                      handleOpenProductEdit(productsSearch, variantId, itemId)
+                      handleOpenProductEdit({
+                        ...productsSearch,
+                        selectOptions: optionList,
+                      }, variantId, itemId)
                     }}
                   />
                 )

diff --git a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts
@@ -118,8 +118,7 @@ export const Base64 = {
 
 const getFieldOptions = (fieldType: string, option: ShoppingListProductItemModifiers, productImages: SimpleObject) => {
   const {
-    option_values: optionValues,
-    id,
+    option_values: optionValues = [],
     config,
     display_name: displayName,
   } = option
@@ -172,13 +171,16 @@ const getFieldOptions = (fieldType: string, option: ShoppingListProductItemModif
       checkbox_label: label,
       checked_by_default: checked,
     } = config || {}
+
+    const checkedId: number | string = optionValues.find((values) => values.label === 'Yes')?.id || (optionValues.length > 0 ? optionValues[0].id : '')
+
     return {
       label: '',
       options: [{
-        value: id,
+        value: checkedId,
         label,
       }],
-      default: checked ? [id] : [],
+      default: checked ? [checkedId] : [],
     }
   }
 
@@ -224,6 +226,24 @@ const getFieldOptions = (fieldType: string, option: ShoppingListProductItemModif
   }
 }
 
+const getValueText = (fieldType: string, value: string | number | (string | number)[], option: ShoppingListProductItemModifiers) => {
+  const {
+    option_values: optionValues = [],
+  } = option
+  if (['radio', 'productRadio', 'rectangle', 'swatch', 'dropdown'].includes(fieldType)) {
+    return optionValues.find((option) => `${option.id}` === `${value}`)?.label || ''
+  }
+
+  if (fieldType === 'checkbox') {
+    return `${value}` !== '' ? 'Yes' : ''
+  }
+
+  if (fieldType === 'files') {
+    return ''
+  }
+  return value
+}
+
 export const getProductOptionsFields = (product: ShoppingListProductItem, productImages: SimpleObject) => {
   const {
     allOptions = [],
@@ -240,6 +260,7 @@ export const getProductOptionsFields = (product: ShoppingListProductItem, produc
         default_value: defaultValue,
       } = {},
       isVariantOption,
+      option_values: optionValues = [],
     } = option
 
     const fieldType = fieldTypes[type] || ''
@@ -252,13 +273,19 @@ export const getProductOptionsFields = (product: ShoppingListProductItem, produc
 
     try {
       const selectOptions = JSON.parse(product.selectOptions || '')
-      if (fieldType !== 'date') {
+      if (fieldType === 'checkbox') {
+        const optionValue = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}]`)?.option_value || ''
+        const checkedId: number | string = optionValues.find((values) => values.label === 'Yes')?.id || (optionValues.length > 0 ? optionValues[0].id : '')
+        value = (optionValue === '1' || optionValue.includes(checkedId)) ? [checkedId] : []
+      } else if (fieldType !== 'date') {
         value = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}]`)?.option_value || ''
       } else {
         const year = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][year]`)?.option_value || ''
         const month = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][month]`)?.option_value || ''
         const day = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][day]`)?.option_value || ''
-        value = year && month && day ? `${year}-${month}-${day}` : value
+        const date = year && month && day ? `${year}-${month}-${day}` : ''
+
+        value = date ? (format(new Date(date), 'yyyy-MM-dd') || value) : value
       }
     } catch (err) {
       console.error(err)
@@ -279,6 +306,8 @@ export const getProductOptionsFields = (product: ShoppingListProductItem, produc
       isVariantOption,
       ...fieldOption,
       default: value,
+      valueLabel: displayName,
+      valueText: getValueText(fieldType, value, option),
     })
   })
 
@@ -344,6 +373,7 @@ 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
     }