Merge branch 'develop' into 2019_10_15_Typo_Fixes

magento · Oct 16, 2019 · fa929d9 · fa929d9
2 parents 201b722 + d5a8e3b
commit fa929d9
Show file tree

Hide file tree

Showing 25 changed files with 397 additions and 312 deletions.
diff --git a/packages/peregrine/lib/talons/MiniCart/useCartOptions.js b/packages/peregrine/lib/talons/MiniCart/useCartOptions.js
@@ -59,17 +59,16 @@ export const useCartOptions = props => {
 
     const handleSelectionChange = useCallback(
         (optionId, selection) => {
-            const newSelections = new Map(optionSelections);
-            const lastSelection = Array.from(selection).pop();
-
-            newSelections.set(optionId, lastSelection);
-
-            setOptionSelections(newSelections);
+            // We must create a new Map here so that React knows that the value
+            // of optionSelections has changed.
+            const nextOptionSelections = new Map([...optionSelections]);
+            nextOptionSelections.set(optionId, selection);
+            setOptionSelections(nextOptionSelections);
         },
         [optionSelections]
     );
 
-    const handleUpdateClick = useCallback(() => {
+    const handleUpdate = useCallback(() => {
         const payload = {
             item: configItem,
             productType: configItem.__typename,
@@ -102,7 +101,7 @@ export const useCartOptions = props => {
         itemQuantity: qty,
         handleCancel,
         handleSelectionChange,
-        handleUpdateClick,
+        handleUpdate,
         handleValueChange,
         isUpdateDisabled: isMissingOptions
     };

diff --git a/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js b/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js
@@ -139,9 +139,9 @@ export const useProductFullDetail = props => {
         (optionId, selection) => {
             // We must create a new Map here so that React knows that the value
             // of optionSelections has changed.
-            const newOptionSelections = new Map([...optionSelections]);
-            newOptionSelections.set(optionId, Array.from(selection).pop());
-            setOptionSelections(newOptionSelections);
+            const nextOptionSelections = new Map([...optionSelections]);
+            nextOptionSelections.set(optionId, selection);
+            setOptionSelections(nextOptionSelections);
         },
         [optionSelections]
     );

diff --git a/packages/peregrine/lib/talons/ProductOptions/useOption.js b/packages/peregrine/lib/talons/ProductOptions/useOption.js
@@ -0,0 +1,57 @@
+import { useCallback, useMemo, useState } from 'react';
+
+/**
+ * Talon for Option.
+ *
+ * @param {number} props.attribute_id the id of the option
+ * @param {string} props.label the label for the option
+ * @param {function} props.onSelectionChange callback handler for when the option is clicked
+ * @param {string} props.selectedValue the label of the selected option
+ * @param {array} props.values an array containing possible values
+ */
+export const useOption = props => {
+    const {
+        attribute_id,
+        label,
+        onSelectionChange,
+        selectedValue,
+        values
+    } = props;
+    const [selection, setSelection] = useState(null);
+    const initialSelection = useMemo(() => {
+        let initialSelection = {};
+        const searchValue = selection || selectedValue;
+        if (searchValue) {
+            initialSelection =
+                values.find(value => value.default_label === searchValue) || {};
+        }
+        return initialSelection;
+    }, [selectedValue, selection, values]);
+
+    const valuesMap = useMemo(() => {
+        return new Map(
+            values.map(value => [value.value_index, value.store_label])
+        );
+    }, [values]);
+
+    const selectedValueLabel = `Selected ${label}:`;
+    const selectedValueDescription =
+        selection || initialSelection.default_label || 'None';
+
+    const handleSelectionChange = useCallback(
+        selection => {
+            setSelection(valuesMap.get(selection));
+
+            if (onSelectionChange) {
+                onSelectionChange(attribute_id, selection);
+            }
+        },
+        [attribute_id, onSelectionChange, valuesMap]
+    );
+    return {
+        handleSelectionChange,
+        initialSelection,
+        selectedValueLabel,
+        selectedValueDescription
+    };
+};
diff --git a/packages/peregrine/lib/talons/ProductOptions/useOptions.js b/packages/peregrine/lib/talons/ProductOptions/useOptions.js
@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+
+export const useOptions = props => {
+    const { onSelectionChange, selectedValues } = props;
+    const handleSelectionChange = useCallback(
+        (optionId, selection) => {
+            if (onSelectionChange) {
+                onSelectionChange(optionId, selection);
+            }
+        },
+        [onSelectionChange]
+    );
+
+    const selectedValueMap = new Map();
+    for (const { label, value } of selectedValues) {
+        selectedValueMap.set(label, value);
+    }
+
+    return {
+        handleSelectionChange,
+        selectedValueMap
+    };
+};
diff --git a/packages/peregrine/lib/talons/ProductOptions/useSwatch.js b/packages/peregrine/lib/talons/ProductOptions/useSwatch.js
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+export const useSwatch = props => {
+    const { onClick, value_index } = props;
+
+    const handleClick = useCallback(() => {
+        onClick(value_index);
+    }, [value_index, onClick]);
+
+    return {
+        handleClick
+    };
+};
diff --git a/packages/peregrine/lib/talons/ProductOptions/useTile.js b/packages/peregrine/lib/talons/ProductOptions/useTile.js
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+export const useTile = props => {
+    const { onClick, value_index } = props;
+
+    const handleClick = useCallback(() => {
+        onClick(value_index);
+    }, [value_index, onClick]);
+
+    return {
+        handleClick
+    };
+};
diff --git a/packages/venia-concept/src/ServiceWorker/registerRoutes.js b/packages/venia-concept/src/ServiceWorker/registerRoutes.js
@@ -9,17 +9,7 @@ export default function() {
     const catalogCacheHandler = createCatalogCacheHandler();
 
     workbox.routing.registerRoute(
-        '/',
-        new workbox.strategies.StaleWhileRevalidate()
-    );
-
-    workbox.routing.registerRoute(
-        new RegExp('\\.html$'),
-        new workbox.strategies.NetworkFirst()
-    );
-
-    workbox.routing.registerRoute(
-        new RegExp('/.\\.js$'),
+        new RegExp('(robots.txt|favicon.ico|manifest.json)'),
         new workbox.strategies.StaleWhileRevalidate()
     );
 
@@ -50,4 +40,19 @@ export default function() {
             ]
         })
     );
+
+    workbox.routing.registerRoute(
+        new RegExp('/.\\.js$'),
+        new workbox.strategies.StaleWhileRevalidate()
+    );
+
+    workbox.routing.registerRoute(
+        new RegExp('\\.html$'),
+        new workbox.strategies.NetworkFirst()
+    );
+
+    workbox.routing.registerRoute(
+        '/',
+        new workbox.strategies.StaleWhileRevalidate()
+    );
 }
diff --git a/packages/venia-ui/lib/components/MiniCart/cartOptions.js b/packages/venia-ui/lib/components/MiniCart/cartOptions.js
@@ -44,7 +44,7 @@ const CartOptions = props => {
         itemQuantity,
         handleCancel,
         handleSelectionChange,
-        handleUpdateClick,
+        handleUpdate,
         handleValueChange,
         isUpdateDisabled
     } = talonProps;
@@ -57,7 +57,7 @@ const CartOptions = props => {
             <section className={classes.options}>
                 <Options
                     onSelectionChange={handleSelectionChange}
-                    product={configItem}
+                    options={configItem.configurable_options}
                     selectedValues={cartItem.options}
                 />
             </section>
@@ -90,7 +90,7 @@ const CartOptions = props => {
                 </Button>
                 <Button
                     priority="high"
-                    onClick={handleUpdateClick}
+                    onClick={handleUpdate}
                     disabled={isUpdateDisabled}
                 >
                     <span>Update Cart</span>

diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js
@@ -12,6 +12,7 @@ import Quantity from '../ProductQuantity';
 import RichText from '../RichText';
 
 import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
 
 const Options = React.lazy(() => import('../ProductOptions'));
 
@@ -34,6 +35,15 @@ const ProductFullDetail = props => {
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
+    const options = isProductConfigurable(product) ? (
+        <Suspense fallback={fullPageLoadingIndicator}>
+            <Options
+                onSelectionChange={handleSelectionChange}
+                options={product.configurable_options}
+            />
+        </Suspense>
+    ) : null;
+
     return (
         <Form className={classes.root}>
             <section className={classes.title}>
@@ -48,14 +58,7 @@ const ProductFullDetail = props => {
             <section className={classes.imageCarousel}>
                 <Carousel images={mediaGalleryEntries} />
             </section>
-            <section className={classes.options}>
-                <Suspense fallback={fullPageLoadingIndicator}>
-                    <Options
-                        onSelectionChange={handleSelectionChange}
-                        product={product}
-                    />
-                </Suspense>
-            </section>
+            <section className={classes.options}>{options}</section>
             <section className={classes.quantity}>
                 <h2 className={classes.quantityTitle}>Quantity</h2>
                 <Quantity

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/options.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/options.spec.js.snap
@@ -56,5 +56,3 @@ Array [
   </div>,
 ]
 `;
-
-exports[`renders null if product is not configurable 1`] = `null`;
diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
   className="root_focused"
+  onClick={[Function]}
   style={
     Object {
       "--venia-swatch-bg": "123,123,123",
@@ -15,6 +16,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
   className="root_selected"
+  onClick={[Function]}
   style={
     Object {
       "--venia-swatch-bg": "123,123,123",
@@ -47,6 +49,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 exports[`renders a Swatch correctly 1`] = `
 <button
   className="root"
+  onClick={[Function]}
   style={
     Object {
       "--venia-swatch-bg": "123,123,123",
@@ -59,6 +62,7 @@ exports[`renders a Swatch correctly 1`] = `
 exports[`renders an icon if isSelected is true 1`] = `
 <button
   className="root_selected"
+  onClick={[Function]}
   style={
     Object {
       "--venia-swatch-bg": "123,123,123",

diff --git a/...es/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap b/...es/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
@@ -6,9 +6,7 @@ exports[`renders SwatchList component correctly 1`] = `
 >
   <button
     className="root"
-    onBlur={[Function]}
     onClick={[Function]}
-    onFocus={[Function]}
     style={
       Object {
         "--venia-swatch-bg": "123,123,123",

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/tile.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/tile.spec.js.snap
@@ -3,6 +3,8 @@
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
   className="root_focused"
+  onClick={[Function]}
+  title="red"
 >
   <span>
     red
@@ -13,6 +15,8 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
   className="root_selected"
+  onClick={[Function]}
+  title="red"
 >
   <span>
     red
@@ -23,6 +27,8 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 exports[`renders a Tile correctly 1`] = `
 <button
   className="root"
+  onClick={[Function]}
+  title="red"
 >
   <span>
     red

diff --git a/...ages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/tileList.spec.js.snap b/...ages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/tileList.spec.js.snap
@@ -6,9 +6,8 @@ exports[`renders TileList component correctly 1`] = `
 >
   <button
     className="root"
-    onBlur={[Function]}
     onClick={[Function]}
-    onFocus={[Function]}
+    title="foo"
   >
     <span>
       foo

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/option.spec.js b/packages/venia-ui/lib/components/ProductOptions/__tests__/option.spec.js
@@ -61,13 +61,14 @@ test('renders no selection at first', () => {
 test('renders selected value after selection', () => {
     const { root } = createTestInstance(<Option {...defaultProps} />);
     const { onSelectionChange } = root.findByType(TileList).props;
+    const selection = root.findByProps({ className: 'selection' });
+
+    expect(selection.children[1].children[0].includes('None')).toBeTruthy();
 
     act(() => {
-        onSelectionChange(new Set().add(1));
+        onSelectionChange(1);
     });
 
-    const selection = root.findByProps({ className: 'selection' });
-
     expect(selection.children).toHaveLength(2);
     expect(selection.children[1].children[0].includes('blue')).toBeTruthy();
 });
@@ -78,7 +79,7 @@ test('calls onSelectionChange callback on selection change', () => {
         <Option {...defaultProps} onSelectionChange={mockCallback} />
     );
     const { onSelectionChange } = root.findByType(TileList).props;
-    const nextSelection = new Set().add(1);
+    const nextSelection = 1;
 
     act(() => {
         onSelectionChange(nextSelection);