Merge branch 'develop' into develop

magento · Jul 29, 2021 · ddda01a · ddda01a
2 parents b76b142 + ef89e05
commit ddda01a
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 18 deletions.
diff --git a/...s/peregrine/lib/talons/CartPage/ProductListing/EditModal/__tests__/useProductForm.spec.js b/...s/peregrine/lib/talons/CartPage/ProductListing/EditModal/__tests__/useProductForm.spec.js
@@ -203,22 +203,27 @@ describe('form submission', () => {
     });
 
     test('does not call configurable item mutation when final options selection matches backend value', async () => {
-        // since this test renders twice, we need to double up the mocked returns
+        // since this test renders thrice, we need to triple up the mocked returns
+        setupMockedReturns();
         setupMockedReturns();
         const tree = createTestInstance(<Component {...mockProps} />);
         const { root } = tree;
-        const { talonProps } = root.findByType('i').props;
-        const { handleOptionSelection } = talonProps;
+        let { talonProps } = root.findByType('i').props;
 
         act(() => {
-            handleOptionSelection('123', 1);
+            talonProps.handleOptionSelection('123', 2);
         });
 
-        const { talonProps: newTalonProps } = root.findByType('i').props;
-        const { handleSubmit } = newTalonProps;
+        talonProps = root.findByType('i').props.talonProps;
+
+        act(() => {
+            talonProps.handleOptionSelection('123', 1);
+        });
+
+        talonProps = root.findByType('i').props.talonProps;
 
         await act(async () => {
-            await handleSubmit({ quantity: 5 });
+            await talonProps.handleSubmit({ quantity: 5 });
         });
 
         expect(updateItemQuantity).not.toHaveBeenCalled();

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js b/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js
@@ -114,15 +114,17 @@ export const useProductForm = props => {
 
     const selectedVariant = useMemo(() => {
         if (optionSelections.size && configItem) {
+            const mergedOptionSelections = new Map([...optionSelections]);
             cartItem.configurable_options.forEach(option => {
-                if (!optionSelections.has(`${option.id}`)) {
-                    optionSelections.set(`${option.id}`, option.value_id);
+                if (!mergedOptionSelections.has(`${option.id}`)) {
+                    mergedOptionSelections.set(`${option.id}`, option.value_id);
                 }
             });
+
             return findMatchingVariant({
                 variants: configItem.variants,
                 optionCodes: configurableOptionCodes,
-                optionSelections
+                optionSelections: mergedOptionSelections
             });
         }
     }, [cartItem, configItem, configurableOptionCodes, optionSelections]);
@@ -143,7 +145,7 @@ export const useProductForm = props => {
     const handleSubmit = useCallback(
         async formValues => {
             try {
-                if (selectedVariant) {
+                if (selectedVariant && optionSelections.size) {
                     await updateConfigurableOptions({
                         variables: {
                             cartId,
@@ -174,6 +176,7 @@ export const useProductForm = props => {
             cartId,
             cartItem,
             handleClose,
+            optionSelections.size,
             selectedVariant,
             updateConfigurableOptions,
             updateItemQuantity

diff --git a/packages/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js b/packages/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js
@@ -14,7 +14,10 @@ export const ProductDetailsFragment = gql`
         }
         id
         media_gallery_entries {
+            # id is deprecated and unused in our code, but lint rules require we
+            # request it if available
             id
+            uid
             label
             position
             disabled
@@ -64,7 +67,10 @@ export const ProductDetailsFragment = gql`
                 product {
                     id
                     media_gallery_entries {
+                        # id is deprecated and unused in our code, but lint rules require we
+                        # request it if available
                         id
+                        uid
                         disabled
                         file
                         label

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
@@ -144,7 +144,7 @@
     "editModal.headerText": "Edit Item",
     "Email #": "Email #",
     "errorView.header": "Oops!",
-    "errorView.homeButton": "Take me home",
+    "errorView.goHome": "Take me home",
     "errorView.message": "Looks like something went wrong. Sorry about that.",
     "field.optional": "Optional",
     "filterFooter.results": "See Results",

diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js
@@ -244,6 +244,7 @@ ProductFullDetail.propTypes = {
         }).isRequired,
         media_gallery_entries: arrayOf(
             shape({
+                uid: string,
                 label: string,
                 position: number,
                 disabled: bool,

diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.js b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.js
@@ -52,7 +52,7 @@ const ProductImageCarousel = props => {
         () =>
             sortedImages.map((item, index) => (
                 <Thumbnail
-                    key={`${item.file}--${item.label}`}
+                    key={item.uid}
                     item={item}
                     itemIndex={index}
                     isActive={activeItemIndex === index}
@@ -136,10 +136,11 @@ const ProductImageCarousel = props => {
  * @property {string} classes.previousButton classes for previous button
  * @property {string} classes.root classes for root container
  * @property {Object[]} images Product images input for Carousel
- * @property {string} images.label label for image
- * @property {string} image.position Position of image in Carousel
- * @property {bool} image.disabled Is image disabled
- * @property {string} image.file filePath of image
+ * @property {bool} images[].disabled Is image disabled
+ * @property {string} images[].file filePath of image
+ * @property {string} images[].uid the id of the image
+ * @property {string} images[].label label for image
+ * @property {string} images[].position Position of image in Carousel
  */
 ProductImageCarousel.propTypes = {
     classes: shape({
@@ -156,7 +157,8 @@ ProductImageCarousel.propTypes = {
             label: string,
             position: number,
             disabled: bool,
-            file: string.isRequired
+            file: string.isRequired,
+            uid: string.isRequired
         })
     ).isRequired
 };

diff --git a/pwa-devdocs/src/tutorials/enable-sass-less-support/index.md b/pwa-devdocs/src/tutorials/enable-sass-less-support/index.md
@@ -16,6 +16,28 @@ Use a package manager, such as `yarn` or `npm`, to install the SASS loader as a
 yarn add --dev sass-loader node-sass
 ```
 
+{:.bs-callout-warning}
+While installing the SASS loader you may get the error `TypeError: this.getOptions is not a function`.
+To resolve this error, just downgrade to version 10 of SASS loader.
+For this, edit `package.json` and change the version of sass-loader:
+
+```diff
+- "sass-loader": "^12.1.0"
++ "sass-loader": "^10.0.0"
+```
+
+Remove the `node_modules` folder and run:
+
+```sh
+yarn install
+```
+
+Or install sass-loader as a dev dependency with a specific version:
+
+```sh
+yarn add sass-loader@^10.0.0
+```
+
 ### Step 2. Modify the Webpack configuration
 
 Edit `webpack.config.js` and add a new `config` rule entry: