fix: compatible with swatch pattern option

https://bigc-b2b.atlassian.net/browse/BUN-2334
bigcommerce · Apr 16, 2024 · fbfe550 · fbfe550
1 parent 23261ad
commit fbfe550
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git a/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx b/apps/storefront/src/components/form/B3ControlSwatchRadio.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Avatar, Box } from '@mui/material'
 
 import B3ControlRectangle from './B3ControlRectangle'
 import { ColorContainer } from './styled'
@@ -9,19 +9,35 @@ export default function B3ControlSwatchRadio(props: Form.B3UIProps) {
 
   const newOptions = options.map((option: Form.SwatchRadioGroupListProps) => ({
     ...option,
-    label: (
-      <ColorContainer>
-        {(option.colors || []).map((color: string) => (
-          <Box
-            className="swatch-color-item"
-            sx={{
-              background: `${color}`,
-            }}
-            key={color}
-          />
-        ))}
-      </ColorContainer>
-    ),
+    label:
+      option?.image && option?.image.data ? (
+        <Avatar
+          variant="square"
+          sx={{
+            width: '22px',
+            height: '22px',
+
+            '& img': {
+              width: '22px',
+              height: '22px',
+            },
+          }}
+        >
+          <img src={option?.image.data} alt={option?.image.alt} />
+        </Avatar>
+      ) : (
+        <ColorContainer>
+          {(option.colors || []).map((color: string) => (
+            <Box
+              className="swatch-color-item"
+              sx={{
+                background: `${color}`,
+              }}
+              key={color}
+            />
+          ))}
+        </ColorContainer>
+      ),
   }))
 
   const labelStyle = {

diff --git a/apps/storefront/src/components/form/ui.ts b/apps/storefront/src/components/form/ui.ts
@@ -37,6 +37,10 @@ namespace Form {
     value: string
     label: string
     colors?: string[]
+    image?: {
+      alt?: string
+      data?: string
+    }
   }
 }
 

diff --git a/apps/storefront/src/types/products.ts b/apps/storefront/src/types/products.ts
@@ -103,6 +103,7 @@ export interface ALlOptionValue {
     colors?: string[]
     product_id?: number
     checked_value?: boolean
+    image_url?: string
   } | null
   is_default: boolean
   adjusters?: {

diff --git a/apps/storefront/src/utils/b3Product/shared/config.ts b/apps/storefront/src/utils/b3Product/shared/config.ts
@@ -205,8 +205,11 @@ const getFieldOptions = (
         value: item.id,
         label: item.label,
         image: {
-          data: productImages[item.value_data?.product_id || ''] || '',
-          alt: '',
+          data:
+            fieldType === 'swatch'
+              ? item.value_data?.image_url
+              : productImages[item.value_data?.product_id || ''] || '',
+          alt: fieldType === 'swatch' ? item.label : '',
         },
         colors: item.value_data?.colors || [],
       })