SKU selection (#41)

* Added SKU selection to product page

* Fixed issue on products without skus

* Added filter for child products

Author: rostyk-kanafotskyy

src/Category.tsx

@@ -66,7 +66,9 @@ export const Category: React.FC = () => {
           <h1 className="category__categoryname">{category?.name ?? ' '}</h1>
 
           <ul className="category__productlist">
-            {products && products.data.map(product => (
+            {products && products.data
+              .filter(product => !product.relationships.hasOwnProperty('parent'))
+              .map(product => (
               <li key={product.id} className="category__product">
                 <ProductThumbnail product={product} />
               </li>

src/Product.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useResolve, useProductImages } from './hooks';
 import { loadProductBySlug } from './service';
@@ -7,6 +7,7 @@ import { SocialShare } from './SocialShare';
 import { useTranslation, useCurrency } from './app-state';
 import { isProductAvailable } from './helper';
 import { Availability } from './Availability';
+import { VariationsSelector } from './VariationsSelector';
 
 import './Product.scss';
 
@@ -25,6 +26,11 @@ export const Product: React.FC = () => {
     async () => loadProductBySlug(productSlug, selectedLanguage, selectedCurrency),
     [productSlug, selectedLanguage, selectedCurrency]
   );
+  const [productId, setProductId] = useState('');
+
+  useEffect(() => {
+    product && setProductId(product.id);
+  }, [product])
 
   const productImageHrefs = useProductImages(product);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -40,6 +46,10 @@ export const Product: React.FC = () => {
     setCurrentImageIndex(currentImageIndex + 1);
   };
 
+  function handleVariationChange(childID: string) {
+    setProductId(childID);
+  }
+
   return (
     <div className="product">
       {product ? (
@@ -72,11 +82,20 @@ export const Product: React.FC = () => {
             <div className="product__comparecheck">
               <CompareCheck product={product} />
             </div>
+            {
+              product.meta.variations
+                ? <VariationsSelector product={product} onChange={handleVariationChange} />
+                : ''
+            }
             <div className="product__moltinbtncontainer">
-              <span
-                className="moltin-buy-button"
-                data-moltin-product-id={product.id}
-              ></span>
+              {
+                productId &&
+                <span
+                  className="moltin-buy-button"
+                  data-moltin-product-id={productId}
+                  key={productId}
+                ></span>
+              }
             </div>
             <div className="product__description">
               {product.description}

src/VariationOptions.scss

@@ -0,0 +1,31 @@
+@import "./theme/common";
+
+.variationoptions {
+  &__input {
+    display: none;
+  }
+
+  &__button {
+    display: inline-block;
+    margin: 0 10px 12px 0;
+  }
+
+  &__label {
+    color: $mainTextColor;
+    padding: 10px 15px;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    border: solid 1px $mainBorderColor;
+    background-color: $mainBackgroundColor;
+    font-size: 14px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  &__input:checked + &__label {
+    color: $firstComplimentColor;
+    border-color: $firstComplimentColor;
+    font-weight: bold;
+  }
+}

src/VariationOptions.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import './VariationOptions.scss';
+
+
+interface Option {
+  id: string,
+  name: string,
+}
+
+interface Variation {
+  options: Option[]
+}
+
+interface VariationOptionsParams {
+  variation: Variation,
+  defaultOption: boolean,
+  onChange: (option: Option, variation: Variation) => void,
+}
+
+export const VariationOptions: React.FC<VariationOptionsParams> = ({ variation, defaultOption, onChange }) => {
+
+  const [checkedOption, setCheckedOption] = useState(defaultOption);
+  const handleChange = (option: any) => {
+    setCheckedOption(option.id);
+    onChange(option, variation);
+  };
+
+  return (
+    <div className="variationoptions">
+      {variation.options.map((option: any) => (
+        <div className="variationoptions__button" key={option.id}>
+          <input
+            className="variationoptions__input"
+            type="radio"
+            id={option.id}
+            name={option.name}
+            onChange={() => handleChange(option)}
+            value={option.id}
+            checked={checkedOption === option.id}
+          />
+          <label
+            className="variationoptions__label"
+            htmlFor={option.id}
+          >
+            {option.name}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+};

src/VariationsSelector.scss

@@ -0,0 +1,11 @@
+@import "./theme/common";
+
+.variationsselector {
+  &__title {
+    color: $mainTextColor;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 12px;
+    padding: 10px 0;
+  }
+}

src/VariationsSelector.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { VariationOptions } from './VariationOptions';
+
+import './VariationsSelector.scss';
+
+
+interface VariationsSelectorParams {
+  product: any
+  onChange: (childID: string) => any
+}
+
+export const VariationsSelector: React.FC<VariationsSelectorParams> = ({ product, onChange }) => {
+  const { variations, variation_matrix: variationMatrix } = product.meta;
+
+  const initialOptions = variations.reduce(
+    (acum: any, variation: any) => ({ ...acum, [variation.id]: variation.options[0].id }),
+    {}
+  );
+
+  const [selectedOptions, setSelectedOptions] = useState(initialOptions);
+
+  const getChildID = (options: any, prodMatrix: any): any => {
+    if (options.length !== 0 && typeof prodMatrix === 'string') {
+      return prodMatrix
+    }
+
+    for (const x in options) {
+      if (options.hasOwnProperty(x) && prodMatrix[options[x]]) {
+        const subMatrix = prodMatrix[options[x]];
+        return getChildID(options, subMatrix);
+      }
+    }
+    return null;
+  };
+
+  const processOptions = (updatedOptions: any) => {
+    const options = Object.values(updatedOptions);
+    const childID = getChildID(options, variationMatrix);
+    onChange(childID);
+  };
+
+  const handleChange = (option: any, variation: any): any => {
+    const updatedOptions = { ...selectedOptions, [variation.id]: option.id };
+    setSelectedOptions(updatedOptions);
+    processOptions(updatedOptions);
+  };
+
+  return (
+    <div className="variationsselector">
+      {variations.map((variation: any) => (
+        <div key={variation.id}>
+          <div className="variationsselector__title">{variation?.name}:</div>
+          <VariationOptions
+            variation={variation}
+            key={variation.id}
+            defaultOption={selectedOptions[variation.id]}
+            onChange={handleChange}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

src/routes.ts

@@ -36,7 +36,6 @@ export const routes: RouteConfig[] = [
 export const routesAccount: RouteConfig[] = [
   { exact: true, path: '/account', component: Profile, },
   { exact: true, path: '/account/address', component: Address, },
-  { exact: true, path: '/search', component: Search, }
 ];
 
 export function createHomeUrl(): string {

src/service.ts

@@ -55,6 +55,7 @@ export interface ProductBase {
       without_tax: FormattedPrice;
     };
     variations?: any[];
+    variation_matrix?: any;
   };
   relationships: {
     main_image: {
@@ -242,7 +243,7 @@ export async function loadProductBySlug(productSlug: string, language: string, c
 
   const moltin = MoltinGateway({ client_id: config.clientId, currency: currency });
 
-  const result = await moltin.Products
+  const resultSlug = await moltin.Products
     .Limit(1)
     .Filter({
       eq: {
@@ -251,7 +252,10 @@ export async function loadProductBySlug(productSlug: string, language: string, c
     })
     .All();
 
-  const product = result.data[0];
+  const productId = resultSlug?.data[0]?.id;
+  const result = await moltin.Products.Get(productId);
+  const product = result.data;
+
   setProductCache(product.slug, language, currency, product);
 
   return product;