[PWA-1101] Add support for Configurable Product Image Setting

packages/peregrine/lib/Apollo/policies/temporary.js

@@ -0,0 +1,59 @@
+/**
+ * Custom type policies that allow us to have more granular control
+ * over how ApolloClient reads from and writes to the cache.
+ *
+ * https://www.apollographql.com/docs/react/caching/cache-configuration/#typepolicy-fields
+ * https://www.apollographql.com/docs/react/caching/cache-field-behavior/
+ */
+const temporaryTypePolicies = {
+    StoreConfig: {
+        fields: {
+            // This field is available in Magento 2.4.2 we need to support older versions, so env var is used here
+            configurable_thumbnail_source: {
+                read() {
+                    return process.env.CONFIGURABLE_THUMBNAIL_SOURCE;
+                }
+            }
+        }
+    },
+    ConfigurableCartItem: {
+        fields: {
+            // This field is proposed in the https://github.com/magento/magento2/pull/30817
+            configured_variant: {
+                read(_, { readField, toReference }) {
+                    const product = readField('product');
+                    const optionUids = readField('configurable_options')
+                        .map(option => {
+                            const id = readField(
+                                'id',
+                                toReference(option.__ref)
+                            );
+                            const value_id = readField(
+                                'value_id',
+                                toReference(option.__ref)
+                            );
+                            return new Buffer(
+                                `configurable/${id}/${value_id}`
+                            ).toString('base64');
+                        })
+                        .sort()
+                        .toString();
+
+                    return readField('variants', product)
+                        .map(variant => {
+                            const variantUids = variant.attributes
+                                .map(attribute => attribute.uid)
+                                .sort()
+                                .toString();
+                            return (
+                                variantUids === optionUids && variant.product
+                            );
+                        })
+                        .filter(Boolean)[0];
+                }
+            }
+        }
+    }
+};
+
+export default temporaryTypePolicies;

packages/peregrine/lib/talons/CartPage/ProductListing/product.gql.js

@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client';
+
+// We disable linting for local fields because there is no way to add them to
+// the fetched schema.
+// https://github.com/apollographql/eslint-plugin-graphql/issues/99
+/* eslint-disable graphql/template-strings */
+export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
+    query getConfigurableThumbnailSource {
+        storeConfig {
+            id
+            configurable_thumbnail_source @client
+        }
+    }
+`;
+
+export default {
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+};

packages/peregrine/lib/talons/CartPage/ProductListing/useProduct.js

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
+import mergeOperations from '../../../util/shallowMerge';
+import DEFAULT_OPERATIONS from './product.gql';
 
 /**
  * This talon contains logic for a product component used in a product listing component.
@@ -15,7 +17,7 @@ import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
  *
  * @param {Object} props
  * @param {ProductItem} props.item Product item data
- * @param {ProductMutations} props.mutations GraphQL mutations for a product in a cart
+ * @param {ProductMutations} props.operations GraphQL mutations for a product in a cart
  * @param {function} props.setActiveEditItem Function for setting the actively editing item
  * @param {function} props.setIsCartUpdating Function for setting the updating state of the cart
  *
@@ -24,15 +26,32 @@ import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
  * @example <caption>Importing into your project</caption>
  * import { useProduct } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProduct';
  */
+
 export const useProduct = props => {
+    const { item, setActiveEditItem, setIsCartUpdating } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
-        item,
-        mutations: { removeItemMutation, updateItemQuantityMutation },
-        setActiveEditItem,
-        setIsCartUpdating
-    } = props;
+        removeItemMutation,
+        updateItemQuantityMutation,
+        getConfigurableThumbnailSource
+    } = operations;
 
-    const flatProduct = flattenProduct(item);
+    const { data: getConfigurableThumbnailSourceData } = useQuery(
+        getConfigurableThumbnailSource,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const configurableThumbnailSource = useMemo(() => {
+        if (getConfigurableThumbnailSourceData) {
+            return getConfigurableThumbnailSourceData.storeConfig
+                .configurable_thumbnail_source;
+        }
+    }, [getConfigurableThumbnailSourceData]);
+
+    const flatProduct = flattenProduct(item, configurableThumbnailSource);
 
     const [
         removeItem,
@@ -141,12 +160,13 @@ export const useProduct = props => {
     };
 };
 
-const flattenProduct = item => {
+const flattenProduct = (item, configurableThumbnailSource) => {
     const {
         configurable_options: options = [],
         prices,
         product,
-        quantity
+        quantity,
+        configured_variant
     } = item;
 
     const { price } = prices;
@@ -159,7 +179,11 @@ const flattenProduct = item => {
         url_key: urlKey,
         url_suffix: urlSuffix
     } = product;
-    const { url: image } = small_image;
+    const { url: image } =
+        (configurableThumbnailSource === 'itself' &&
+            configured_variant &&
+            configured_variant.small_image) ||
+        small_image;
 
     return {
         currency,

packages/peregrine/lib/talons/MiniCart/miniCart.gql.js

@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client';
+
+// We disable linting for local fields because there is no way to add them to
+// the fetched schema.
+// https://github.com/apollographql/eslint-plugin-graphql/issues/99
+/* eslint-disable graphql/template-strings */
+export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
+    query getConfigurableThumbnailSource {
+        storeConfig {
+            id
+            configurable_thumbnail_source @client
+        }
+    }
+`;
+
+export default {
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+};

packages/peregrine/lib/talons/MiniCart/useMiniCart.js

@@ -4,12 +4,14 @@ import { useQuery, useMutation } from '@apollo/client';
 
 import { useCartContext } from '../../context/cart';
 import { deriveErrorMessage } from '../../util/deriveErrorMessage';
+import mergeOperations from '../../util/shallowMerge';
+import DEFAULT_OPERATIONS from './miniCart.gql';
 
 /**
  *
  * @param {Function} props.setIsOpen - Function to toggle the mini cart
- * @param {DocumentNode} props.queries.miniCartQuery - Query to fetch mini cart data
- * @param {DocumentNode} props.mutations.removeItemMutation - Mutation to remove an item from cart
+ * @param {DocumentNode} props.operations.miniCartQuery - Query to fetch mini cart data
+ * @param {DocumentNode} props.operations.removeItemMutation - Mutation to remove an item from cart
  *
  * @returns {
  *      closeMiniCart: Function,
@@ -21,12 +23,18 @@ import { deriveErrorMessage } from '../../util/deriveErrorMessage';
  *      productList: Array<>,
  *      subTotal: Number,
  *      totalQuantity: Number
+ *      configurableThumbnailSource: String
  *  }
  */
 export const useMiniCart = props => {
-    const { setIsOpen, queries, mutations } = props;
-    const { miniCartQuery } = queries;
-    const { removeItemMutation } = mutations;
+    const { setIsOpen } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        removeItemMutation,
+        miniCartQuery,
+        getConfigurableThumbnailSource
+    } = operations;
 
     const [{ cartId }] = useCartContext();
     const history = useHistory();
@@ -41,6 +49,20 @@ export const useMiniCart = props => {
         }
     );
 
+    const { data: getConfigurableThumbnailSourceData } = useQuery(
+        getConfigurableThumbnailSource,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const configurableThumbnailSource = useMemo(() => {
+        if (getConfigurableThumbnailSourceData) {
+            return getConfigurableThumbnailSourceData.storeConfig
+                .configurable_thumbnail_source;
+        }
+    }, [getConfigurableThumbnailSourceData]);
+
     const [
         removeItem,
         {
@@ -112,6 +134,7 @@ export const useMiniCart = props => {
         loading: miniCartLoading || (removeItemCalled && removeItemLoading),
         productList,
         subTotal,
-        totalQuantity
+        totalQuantity,
+        configurableThumbnailSource
     };
 };

packages/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -1,5 +1,18 @@
 import { gql } from '@apollo/client';
 
+// We disable linting for local fields because there is no way to add them to
+// the fetched schema.
+// https://github.com/apollographql/eslint-plugin-graphql/issues/99
+/* eslint-disable graphql/template-strings */
+export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
+    query getConfigurableThumbnailSource {
+        storeConfig {
+            id
+            configurable_thumbnail_source @client
+        }
+    }
+`;
+
 export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
     query GetProductThumbnailsByURLKey($urlKeys: [String!]!) {
         products(filter: { url_key: { in: $urlKeys } }) {
@@ -12,11 +25,27 @@ export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
                 }
                 url_key
                 url_suffix
+                ... on ConfigurableProduct {
+                    variants {
+                        attributes {
+                            uid
+                        }
+                        product {
+                            sku
+                            id
+                            thumbnail {
+                                label
+                                url
+                            }
+                        }
+                    }
+                }
             }
         }
     }
 `;
 
 export default {
-    getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS_BY_URL_KEY
+    getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS_BY_URL_KEY,
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
 };

packages/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js

@@ -16,7 +16,10 @@ import DEFAULT_OPERATIONS from './orderRow.gql';
 export const useOrderRow = props => {
     const { items } = props;
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getProductThumbnailsQuery } = operations;
+    const {
+        getProductThumbnailsQuery,
+        getConfigurableThumbnailSource
+    } = operations;
 
     const urlKeys = useMemo(() => {
         return items.map(item => item.product_url_key).sort();
@@ -29,17 +32,49 @@ export const useOrderRow = props => {
             urlKeys
         }
     });
+
+    const { data: getConfigurableThumbnailSourceData } = useQuery(
+        getConfigurableThumbnailSource,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const configurableThumbnailSource = useMemo(() => {
+        if (getConfigurableThumbnailSourceData) {
+            return getConfigurableThumbnailSourceData.storeConfig
+                .configurable_thumbnail_source;
+        }
+    }, [getConfigurableThumbnailSourceData]);
+
     const imagesData = useMemo(() => {
         if (data) {
-            // filter out items returned that we didn't query for
-            const filteredItems = data.products.items.filter(item =>
-                urlKeys.includes(item.url_key)
-            );
-            return filteredItems;
+            // Images data is taken from simple product or from configured variant and assigned to item sku
+            const mappedImagesData = [];
+            items.forEach(item => {
+                const product = data.products.items.find(
+                    element => item.product_url_key === element.url_key
+                );
+                if (
+                    configurableThumbnailSource === 'itself' &&
+                    product.variants &&
+                    product.variants.length > 0
+                ) {
+                    const foundVariant = product.variants.find(variant => {
+                        return variant.product.sku === item.product_sku;
+                    });
+                    mappedImagesData[item.product_sku] =
+                        foundVariant && foundVariant.product;
+                } else {
+                    mappedImagesData[item.product_sku] = product;
+                }
+            });
+
+            return mappedImagesData;
         } else {
             return [];
         }
-    }, [data, urlKeys]);
+    }, [data, items, configurableThumbnailSource]);
 
     const [isOpen, setIsOpen] = useState(false);
 

packages/pwa-buildpack/envVarDefinitions.json

@@ -37,6 +37,12 @@
                     "type": "bool",
                     "desc": "Includes the store code in the store URLs if value is true.",
                     "default": false
+                },
+                {
+                    "name": "CONFIGURABLE_THUMBNAIL_SOURCE",
+                    "type": "str",
+                    "desc": "Configurable Product Image to determine the thumbnail that is used in the cart for configurable products. Possible values: `parent`, `itself`",
+                    "default": "itself"
                 }
             ]
         },

packages/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -21,7 +21,7 @@ const Product = props => {
     const { formatMessage } = useIntl();
     const talonProps = useProduct({
         item,
-        mutations: {
+        operations: {
             removeItemMutation: REMOVE_ITEM_MUTATION,
             updateItemQuantityMutation: UPDATE_QUANTITY_MUTATION
         },