'mo swatches

Author: fnhipster

components/Product/Product.styled.tsx

@@ -129,6 +129,7 @@ export const Info = styled.div`
     grid-auto-rows: max-content;
     grid-gap: 3rem;
     padding: 2rem ${props => props.theme.layout.margin};
+    width: 100%;
 `
 
 export const Header = styled.header`

components/Product/Product.tsx

@@ -34,10 +34,11 @@ import { ProductImageSkeleton } from './ProductImage.skeleton'
 import Price from '@storystore/ui/dist/components/Price'
 import Button from '@storystore/ui/dist/components/Button'
 import Breadcrumbs from '@storystore/ui/dist/components/Breadcrumbs'
-import Form, { Input } from '@storystore/ui/dist/components/Form'
+import Form, { Input, Select } from '@storystore/ui/dist/components/Form'
 import { useStoryStore } from '~/hooks/useStoryStore/useStoryStore'
 import TextSwatches from '@storystore/ui/dist/components/Form/TextSwatches'
 import ThumbSwatches from '@storystore/ui/dist/components/Form/ThumbSwatches'
+import ColorSwatches from '@storystore/ui/dist/components/Form/ColorSwatches'
 import PageBuilder from '~/components/PageBuilder'
 
 const ProductCarousel = dynamic(() => import('@storystore/ui/dist/components/ProductCarousel'), { ssr: false })
@@ -253,20 +254,23 @@ export const Product: FunctionComponent<ProductProps> = ({ urlKey }) => {
                                                                     label: selected ? `${label}: ${selected.label}` : label,
                                                                     name: `options.${code}`,
                                                                     rules: { required },
-                                                                    items: items?.map(({ id, label, value, image }: any) => ({
-                                                                        _id: id,
-                                                                        label,
-                                                                        type: 'radio',
-                                                                        value,
-                                                                        image: image && {
-                                                                            alt: image.label || '',
-                                                                            src: resolveImage(image.url, {
-                                                                                width: 200,
-                                                                            }),
-                                                                            width: 160,
-                                                                            height: 198,
-                                                                        },
-                                                                    })),
+                                                                    items: items?.map(({ id, label, value, swatch }: any) => {
+                                                                        return {
+                                                                            _id: id,
+                                                                            label,
+                                                                            type: 'radio',
+                                                                            value,
+                                                                            color: swatch?.color,
+                                                                            image: swatch?.image && {
+                                                                                alt: label || '',
+                                                                                src: resolveImage(swatch.image, {
+                                                                                    width: 200,
+                                                                                }),
+                                                                                width: 160,
+                                                                                height: 198,
+                                                                            },
+                                                                        }
+                                                                    }),
                                                                 },
                                                             }
                                                         })
@@ -275,8 +279,10 @@ export const Product: FunctionComponent<ProductProps> = ({ urlKey }) => {
                                                             return (
                                                                 <fieldset key={_id || index}>
                                                                     <Field>
-                                                                        {type === 'text' && <TextSwatches {...swatches} />}
-                                                                        {type === 'thumb' && <ThumbSwatches {...swatches} />}
+                                                                        {type === 'TextSwatchData' && <TextSwatches {...swatches} />}
+                                                                        {type === 'ImageSwatchData' && <ThumbSwatches {...swatches} />}
+                                                                        {type === 'ColorSwatchData' && <ColorSwatches {...swatches} />}
+                                                                        {type === undefined && <Select {...swatches} />}
                                                                     </Field>
                                                                 </fieldset>
                                                             )

components/Product/graphql/product.graphql

@@ -52,9 +52,19 @@ query ProductQuery($urlKey: String!) {
                         label
                         value: value_index
                         swatch: swatch_data {
+                            __typename
                             value
+
+                            ... on TextSwatchData {
+                                text: value
+                            }
+
+                            ... on ColorSwatchData {
+                                color: value
+                            }
+
                             ... on ImageSwatchData {
-                                thumbnail
+                                image: thumbnail
                             }
                         }
                     }

components/Product/useProduct.ts

@@ -68,30 +68,18 @@ export const useProduct = ({ urlKey }: UseProduct) => {
         )
 
         const options = _product.options
-            ?.sort((a: any, b: any) => b.position - a.position)
+            ?.sort((a: any, b: any) => a.position - b.position)
             .map((option: any) => {
-                const { id, label, code, items } = option
-                const thumbKey = /color/.test(code) ? code : undefined
-                const type = thumbKey ? 'thumb' : 'text'
+                const { id, label, code, items = [] } = option
+
+                const type = items[0]?.swatch?.__typename
 
                 return {
                     id,
                     type,
                     label,
                     code,
-                    items: items.map((item: any) => {
-                        const disabled = item.stock !== 'IN_STOCK'
-
-                        const { id, value, label } = item
-
-                        return {
-                            id,
-                            value,
-                            label,
-                            disabled,
-                            image: thumbKey && variants.find((x: any) => x[thumbKey] === value).product.thumbnail,
-                        }
-                    }),
+                    items,
                 }
             })