Merge pull request #73 from PMET-public/develop

Hof Fix: Configurable Options

.gitignore

@@ -42,4 +42,6 @@ jspm_packages
 
 # Environment Variables
 .env
-.now
+.now
+
+lib/apollo/possibleTypes.json

components/Product/ProductTypes/ConfigurableProduct/ConfigurableProduct.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useState, useRef } from 'react'
+import React, { FunctionComponent, useCallback, useState } from 'react'
 import { Root } from './ConfigurableProduct.styled'
 import { useQuery } from '@apollo/client'
 import { CONFIGURABLE_PRODUCT_QUERY } from '.'
@@ -34,8 +34,6 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
 
     const history = useRouter()
 
-    const formRef = useRef<HTMLDivElement>(null)
-
     const [selectedOptions, setSelectedOptions] = useState<{ [code: string]: string }>({})
 
     const [variantSku, setVariantSku] = useState(sku)
@@ -95,12 +93,6 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
         [gallery, product, setGallery, setPrice, variantsIndexes]
     )
 
-    const handleOnErrors = useCallback(() => {
-        if (formRef.current && formRef.current.scrollTop > window.scrollY) {
-            formRef.current.scrollIntoView({ behavior: 'smooth' })
-        }
-    }, [formRef])
-
     const handleAddToCart = useCallback(
         async ({ quantity = 1 }) => {
             if (!cartId || !inStock || addingConfigurableProductToCart.loading) return
@@ -126,13 +118,16 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
     if (!product) return null
 
     return (
-        <div ref={formRef}>
-            <Root as={Form} onSubmit={handleAddToCart} onValues={handleOnChange} onErrors={handleOnErrors} options={{ criteriaMode: 'firstError', shouldFocusError: true }}>
+        <div>
+            <Root as={Form} onSubmit={handleAddToCart} onValues={handleOnChange} options={{ criteriaMode: 'firstError', shouldFocusError: true }}>
                 {product?.options
                     ?.map(({ id, label, required = true, code, items }: any) => {
-                        const selected = items.find((x: any) => {
-                            return code === x.code || x.value.toString() === selectedOptions[code]
-                        })
+                        const selected =
+                            items.length === 1
+                                ? items[0]
+                                : items.find((x: any) => {
+                                      return code === x.code || x.value.toString() === selectedOptions[code]
+                                  })
 
                         return {
                             _id: id,
@@ -144,6 +139,7 @@ export const ConfigurableProduct: FunctionComponent<ConfigurableProductProps> =
                                 items: items?.map(({ id, label, value, swatch }: any) => {
                                     return {
                                         _id: id,
+                                        defaultChecked: items.length === 1 || undefined,
                                         label,
                                         type: 'radio',
                                         value,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storystore/pwa",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "magentoDependency": ">= 2.4.0",
   "author": "Carlos A. Cabrera @fnhipster",
   "repository": "https://github.com/pmet-public/storystore-pwa.git",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.0.2",
-    "@storystore/ui": "1.3.0-beta24",
+    "@storystore/ui": "1.3.0-beta25",
     "@types/semver": "^7.2.0",
     "@types/sharp": "^0.25.1",
     "apollo-link-queue": "^2.2.0",
@@ -36,7 +36,7 @@
     "html-react-parser": "^0.13.0",
     "jarallax": "^1.12.1",
     "jsdom": "^16.4.0",
-    "next": "^10.0.0",
+    "next": "10.0.0",
     "next-offline": "^5.0.2",
     "nextjs-progressbar": "^0.0.5",
     "node-fetch": "^2.6.0",