@magento/peregrine 12.5.1-beta.1 → 12.6.0-alpha.1

package/lib/talons/AddToCartDialog/useAddToCartDialog.js

@@ -5,10 +5,12 @@ import mergeOperations from '../../util/shallowMerge';
 import { useCartContext } from '../../context/cart';
 import defaultOperations from './addToCartDialog.gql';
 import { useEventingContext } from '../../context/eventing';
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
 
 export const useAddToCartDialog = props => {
     const { item, onClose } = props;
-    const sku = item && item.product.sku;
+    const sku = item && item.product?.sku;
 
     const [, { dispatch }] = useEventingContext();
 
@@ -18,9 +20,58 @@ export const useAddToCartDialog = props => {
     const [currentImage, setCurrentImage] = useState();
     const [currentPrice, setCurrentPrice] = useState();
     const [currentDiscount, setCurrentDiscount] = useState();
+    const [singleOptionSelection, setSingleOptionSelection] = useState();
+    const [multipleOptionSelections, setMultipleOptionSelections] = useState(
+        new Map()
+    );
 
     const [{ cartId }] = useCartContext();
 
+    const optionCodes = useMemo(() => {
+        const optionCodeMap = new Map();
+        if (item) {
+            item.product?.configurable_options.forEach(option => {
+                optionCodeMap.set(option.attribute_id, option.attribute_code);
+            });
+        }
+        return optionCodeMap;
+    }, [item]);
+
+    // Check if display out of stock products option is selected in the Admin Dashboard
+    const isOutOfStockProductDisplayed = useMemo(() => {
+        if (item) {
+            let totalVariants = 1;
+            const { product } = item;
+            const isConfigurable = isProductConfigurable(product);
+            if (product?.configurable_options && isConfigurable) {
+                for (const option of product.configurable_options) {
+                    const length = option.values.length;
+                    totalVariants = totalVariants * length;
+                }
+                return product.variants.length === totalVariants;
+            }
+        }
+    }, [item]);
+
+    const outOfStockVariants = useMemo(() => {
+        if (item) {
+            const product = item.product;
+            return getOutOfStockVariants(
+                product,
+                optionCodes,
+                singleOptionSelection,
+                multipleOptionSelections,
+                isOutOfStockProductDisplayed
+            );
+        }
+    }, [
+        item,
+        optionCodes,
+        singleOptionSelection,
+        multipleOptionSelections,
+        isOutOfStockProductDisplayed
+    ]);
+
     const selectedOptionsArray = useMemo(() => {
         if (item) {
             const existingOptionsMap = item.configurable_options.reduce(
@@ -39,14 +90,14 @@ export const useAddToCartDialog = props => {
 
             const selectedOptions = [];
             mergedOptionsMap.forEach((selectedValueId, attributeId) => {
-                const configurableOption = item.product.configurable_options.find(
+                const configurableOption = item.product?.configurable_options.find(
                     option => option.attribute_id_v2 === attributeId
                 );
-                const configurableOptionValue = configurableOption.values.find(
+                const configurableOptionValue = configurableOption?.values.find(
                     optionValue => optionValue.value_index === selectedValueId
                 );
 
-                selectedOptions.push(configurableOptionValue.uid);
+                selectedOptions.push(configurableOptionValue?.uid);
             });
 
             return selectedOptions;
@@ -107,13 +158,27 @@ export const useAddToCartDialog = props => {
         setCurrentImage();
         setCurrentPrice();
         setUserSelectedOptions(new Map());
+        setMultipleOptionSelections(new Map());
     }, [onClose]);
 
-    const handleOptionSelection = useCallback((optionId, value) => {
-        setUserSelectedOptions(existing =>
-            new Map(existing).set(parseInt(optionId), value)
-        );
-    }, []);
+    const handleOptionSelection = useCallback(
+        (optionId, value) => {
+            setUserSelectedOptions(existing =>
+                new Map(existing).set(parseInt(optionId), value)
+            );
+            // Create a new Map to keep track of user single selection with key as String
+            const nextSingleOptionSelection = new Map();
+            nextSingleOptionSelection.set(optionId, value);
+            setSingleOptionSelection(nextSingleOptionSelection);
+            // Create a new Map to keep track of multiple selections with key as String
+            const nextMultipleOptionSelections = new Map([
+                ...multipleOptionSelections
+            ]);
+            nextMultipleOptionSelections.set(optionId, value);
+            setMultipleOptionSelections(nextMultipleOptionSelections);
+        },
+        [multipleOptionSelections]
+    );
 
     const handleAddToCart = useCallback(async () => {
         try {
@@ -192,7 +257,7 @@ export const useAddToCartDialog = props => {
         if (item) {
             return {
                 onSelectionChange: handleOptionSelection,
-                options: item.product.configurable_options,
+                options: item.product?.configurable_options,
                 selectedValues: item.configurable_options
             };
         }
@@ -202,7 +267,7 @@ export const useAddToCartDialog = props => {
         if (item) {
             return {
                 disabled:
-                    item.product.configurable_options.length !==
+                    item.product?.configurable_options.length !==
                         selectedOptionsArray.length || isAddingToCart,
                 onClick: handleAddToCart,
                 priority: 'high'
@@ -215,6 +280,7 @@ export const useAddToCartDialog = props => {
         configurableOptionProps,
         formErrors: [addProductToCartError],
         handleOnClose,
+        outOfStockVariants,
         imageProps,
         isFetchingProductDetail,
         priceProps

package/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js

@@ -52,6 +52,7 @@ export const ProductFormFragment = gql`
                         }
                     }
                     sku
+                    stock_status
                 }
             }
         }

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -6,6 +6,7 @@ import { useCartContext } from '../../../../context/cart';
 import { findMatchingVariant } from '../../../../util/findMatchingProductVariant';
 import DEFAULT_OPERATIONS from './productForm.gql';
 import { useEventingContext } from '../../../../context/eventing';
+import { getOutOfStockVariantsWithInitialSelection } from '../../../../util/getOutOfStockVariantsWithInitialSelection';
 
 /**
  * This talon contains logic for a product edit form.
@@ -32,6 +33,18 @@ import { useEventingContext } from '../../../../context/eventing';
  * @example <caption>Importing into your project</caption>
  * import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';
  */
+
+// Get initial selections
+function deriveOptionSelectionsFromProduct(cartItem) {
+    if (cartItem) {
+        const initialOptionSelections = new Map();
+        for (const { id, value_id } of cartItem.configurable_options) {
+            initialOptionSelections.set(String(id), value_id);
+        }
+        return initialOptionSelections;
+    }
+}
+
 export const useProductForm = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
@@ -52,11 +65,28 @@ export const useProductForm = props => {
     const [, { dispatch }] = useEventingContext();
 
     const [{ cartId }] = useCartContext();
+
+    const derivedOptionSelections = useMemo(() => {
+        if (cartItem) {
+            return deriveOptionSelectionsFromProduct(cartItem);
+        }
+    }, [cartItem]);
+
     const [optionSelections, setOptionSelections] = useState(new Map());
+    const [multipleOptionSelections, setMultipleOptionSelections] = useState(
+        derivedOptionSelections ? derivedOptionSelections : new Map()
+    );
+    useEffect(() => {
+        if (cartItem) {
+            setMultipleOptionSelections(derivedOptionSelections);
+        }
+    }, [derivedOptionSelections, cartItem]);
 
     const handleClose = useCallback(() => {
+        setMultipleOptionSelections(new Map());
+        setOptionSelections(new Map());
         setActiveEditItem(null);
-    }, [setActiveEditItem]);
+    }, [setActiveEditItem, setMultipleOptionSelections, setOptionSelections]);
 
     const [
         updateItemQuantity,
@@ -106,20 +136,41 @@ export const useProductForm = props => {
                 option => option.id == optionId
             );
 
-            if (initialSelection.value_id === selection) {
+            if (initialSelection?.value_id === selection) {
                 nextOptionSelections.delete(optionId);
             } else {
                 nextOptionSelections.set(optionId, selection);
             }
 
             setOptionSelections(nextOptionSelections);
+
+            // Create a new Map to only keep track of user multiple selections with key as String
+            // without considering initialSelection.value_id
+            const nextMultipleOptionSelections = new Map([
+                ...multipleOptionSelections
+            ]);
+            nextMultipleOptionSelections.set(optionId, selection);
+            setMultipleOptionSelections(nextMultipleOptionSelections);
         },
-        [cartItem, optionSelections]
+        [cartItem, optionSelections, multipleOptionSelections]
     );
 
     const configItem =
         !loading && !error && data ? data.products.items[0] : null;
 
+    // Check if display out of stock products option is selected in the Admin Dashboard
+    const isOutOfStockProductDisplayed = useMemo(() => {
+        let totalVariants = 1;
+
+        if (configItem && configItem.configurable_options) {
+            for (const option of configItem.configurable_options) {
+                const length = option.values.length;
+                totalVariants = totalVariants * length;
+            }
+            return configItem.variants.length === totalVariants;
+        }
+    }, [configItem]);
+
     const configurableOptionCodes = useMemo(() => {
         const optionCodeMap = new Map();
 
@@ -149,6 +200,25 @@ export const useProductForm = props => {
         }
     }, [cartItem, configItem, configurableOptionCodes, optionSelections]);
 
+    const outOfStockVariants = useMemo(() => {
+        if (cartItem && configItem) {
+            const product = cartItem.product;
+            return getOutOfStockVariantsWithInitialSelection(
+                product,
+                configurableOptionCodes,
+                multipleOptionSelections,
+                configItem,
+                isOutOfStockProductDisplayed
+            );
+        }
+    }, [
+        cartItem,
+        configurableOptionCodes,
+        multipleOptionSelections,
+        configItem,
+        isOutOfStockProductDisplayed
+    ]);
+
     const configurableThumbnailSource = useMemo(() => {
         return storeConfigData?.storeConfig?.configurable_thumbnail_source;
     }, [storeConfigData]);
@@ -164,7 +234,10 @@ export const useProductForm = props => {
             try {
                 const quantity = formValues.quantity;
 
-                if (selectedVariant && optionSelections.size) {
+                if (
+                    (selectedVariant && optionSelections.size) ||
+                    (selectedVariant && multipleOptionSelections.size)
+                ) {
                     await updateConfigurableOptions({
                         variables: {
                             cartId,
@@ -176,6 +249,7 @@ export const useProductForm = props => {
                     });
 
                     setOptionSelections(new Map());
+                    setMultipleOptionSelections(new Map());
                 } else if (quantity !== cartItem.quantity) {
                     await updateItemQuantity({
                         variables: {
@@ -234,6 +308,7 @@ export const useProductForm = props => {
             dispatch,
             handleClose,
             optionSelections.size,
+            multipleOptionSelections.size,
             selectedVariant,
             updateConfigurableOptions,
             updateItemQuantity
@@ -254,6 +329,7 @@ export const useProductForm = props => {
         errors,
         handleOptionSelection,
         handleSubmit,
+        outOfStockVariants,
         isLoading: !!loading,
         isSaving,
         isDialogOpen: cartItem !== null,

package/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -24,10 +24,13 @@ export const ProductListingFragment = gql`
                     variants {
                         attributes {
                             uid
+                            code
+                            value_index
                         }
                         # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
                             uid
+                            stock_status
                             small_image {
                                 url
                             }
@@ -61,6 +64,7 @@ export const ProductListingFragment = gql`
                     option_label
                     configurable_product_option_value_uid
                     value_label
+                    value_id
                 }
             }
         }

package/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql.js

@@ -8,10 +8,33 @@ export const GET_PAYMENT_METHODS = gql`
                 code
                 title
             }
+            selected_payment_method {
+                code
+            }
+        }
+    }
+`;
+
+export const SET_PAYMENT_METHOD_ON_CART = gql`
+    mutation setPaymentMethodOnCart(
+        $cartId: String!
+        $paymentMethod: PaymentMethodInput!
+    ) {
+        setPaymentMethodOnCart(
+            input: { cart_id: $cartId, payment_method: $paymentMethod }
+        ) {
+            cart {
+                id
+                selected_payment_method {
+                    code
+                    title
+                }
+            }
         }
     }
 `;
 
 export default {
-    getPaymentMethodsQuery: GET_PAYMENT_METHODS
+    getPaymentMethodsQuery: GET_PAYMENT_METHODS,
+    setPaymentMethodOnCartMutation: SET_PAYMENT_METHOD_ON_CART
 };

package/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js

@@ -1,4 +1,5 @@
-import { useQuery } from '@apollo/client';
+import { useCallback } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import DEFAULT_OPERATIONS from './paymentMethods.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
@@ -7,7 +8,12 @@ import { useCartContext } from '../../../context/cart';
 
 export const usePaymentMethods = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getPaymentMethodsQuery } = operations;
+    const {
+        getPaymentMethodsQuery,
+        setPaymentMethodOnCartMutation
+    } = operations;
+
+    const [setPaymentMethod] = useMutation(setPaymentMethodOnCartMutation);
 
     const [{ cartId }] = useCartContext();
 
@@ -23,13 +29,43 @@ export const usePaymentMethods = props => {
     const availablePaymentMethods =
         (data && data.cart.available_payment_methods) || [];
 
-    const initialSelectedMethod =
+    // If there is one payment method, select it by default.
+    // If more than one, none should be selected by default.
+    const defaultPaymentCode =
         (availablePaymentMethods.length && availablePaymentMethods[0].code) ||
         null;
+    const selectedPaymentCode =
+        (data && data.cart.selected_payment_method.code) || null;
+
+    const initialSelectedMethod =
+        availablePaymentMethods.length > 1
+            ? selectedPaymentCode
+            : defaultPaymentCode;
+
+    const handlePaymentMethodSelection = useCallback(
+        element => {
+            const value = element.target.value;
+
+            setPaymentMethod({
+                variables: {
+                    cartId,
+                    paymentMethod: {
+                        code: value,
+                        braintree: {
+                            payment_method_nonce: value,
+                            is_active_payment_token_enabler: false
+                        }
+                    }
+                }
+            });
+        },
+        [cartId, setPaymentMethod]
+    );
 
     return {
         availablePaymentMethods,
         currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
         initialSelectedMethod,
         isLoading: loading
     };

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -12,10 +12,12 @@ import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './productFullDetail.gql';
 import { useEventingContext } from '../../context/eventing';
+import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
 const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+const IN_STOCK_CODE = 'IN_STOCK';
 
 const deriveOptionCodesFromProduct = product => {
     // If this is a simple product it has no option codes.
@@ -85,6 +87,19 @@ const getIsOutOfStock = (product, optionCodes, optionSelections) => {
     }
     return stock_status === OUT_OF_STOCK_CODE;
 };
+const getIsAllOutOfStock = product => {
+    const { stock_status, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+
+    if (isConfigurable) {
+        const inStockItem = variants.find(item => {
+            return item.product.stock_status === IN_STOCK_CODE;
+        });
+        return !inStockItem;
+    }
+
+    return stock_status === OUT_OF_STOCK_CODE;
+};
 
 const getMediaGalleryEntries = (product, optionCodes, optionSelections) => {
     let value = [];
@@ -291,6 +306,8 @@ export const useProductFullDetail = props => {
         derivedOptionSelections
     );
 
+    const [singleOptionSelection, setSingleOptionSelection] = useState();
+
     const derivedOptionCodes = useMemo(
         () => deriveOptionCodesFromProduct(product),
         [product]
@@ -307,6 +324,41 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    // Check if display out of stock products option is selected in the Admin Dashboard
+    const isOutOfStockProductDisplayed = useMemo(() => {
+        let totalVariants = 1;
+        const isConfigurable = isProductConfigurable(product);
+        if (product.configurable_options && isConfigurable) {
+            for (const option of product.configurable_options) {
+                const length = option.values.length;
+                totalVariants = totalVariants * length;
+            }
+            return product.variants.length === totalVariants;
+        }
+    }, [product]);
+
+    const isEverythingOutOfStock = useMemo(() => getIsAllOutOfStock(product), [
+        product
+    ]);
+
+    const outOfStockVariants = useMemo(
+        () =>
+            getOutOfStockVariants(
+                product,
+                optionCodes,
+                singleOptionSelection,
+                optionSelections,
+                isOutOfStockProductDisplayed
+            ),
+        [
+            product,
+            optionCodes,
+            singleOptionSelection,
+            optionSelections,
+            isOutOfStockProductDisplayed
+        ]
+    );
+
     const mediaGalleryEntries = useMemo(
         () => getMediaGalleryEntries(product, optionCodes, optionSelections),
         [product, optionCodes, optionSelections]
@@ -344,7 +396,7 @@ export const useProductFullDetail = props => {
         optionSelections.forEach((value, key) => {
             const values = attributeIdToValuesMap.get(key);
 
-            const selectedValue = values.find(
+            const selectedValue = values?.find(
                 item => item.value_index === value
             );
 
@@ -481,6 +533,10 @@ export const useProductFullDetail = props => {
             const nextOptionSelections = new Map([...optionSelections]);
             nextOptionSelections.set(optionId, selection);
             setOptionSelections(nextOptionSelections);
+            // Create a new Map to keep track of single selections with key as String
+            const nextSingleOptionSelection = new Map();
+            nextSingleOptionSelection.set(optionId, selection);
+            setSingleOptionSelection(nextSingleOptionSelection);
         },
         [optionSelections]
     );
@@ -542,8 +598,11 @@ export const useProductFullDetail = props => {
         handleAddToCart,
         handleSelectionChange,
         isOutOfStock,
+        isEverythingOutOfStock,
+        outOfStockVariants,
         isAddToCartDisabled:
             isOutOfStock ||
+            isEverythingOutOfStock ||
             isMissingOptions ||
             isAddConfigurableLoading ||
             isAddSimpleLoading ||

package/lib/talons/ProductOptions/useOptions.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 export const useOptions = props => {
-    const { onSelectionChange, selectedValues } = props;
+    const { onSelectionChange, selectedValues, options } = props;
     const handleSelectionChange = useCallback(
         (optionId, selection) => {
             if (onSelectionChange) {
@@ -12,10 +12,14 @@ export const useOptions = props => {
     );
 
     const selectedValueMap = new Map();
-    for (const { option_label, value_label } of selectedValues) {
+
+    // Map the option with correct option_label
+    for (const { id, value_label } of selectedValues) {
+        const option_label = options.find(
+            option => option.attribute_id === String(id)
+        ).label;
         selectedValueMap.set(option_label, value_label);
     }
-
     return {
         handleSelectionChange,
         selectedValueMap

package/lib/talons/WishlistPage/wishlistItemFragments.gql.js

@@ -48,6 +48,21 @@ export const WishlistItemFragment = gql`
                         }
                     }
                 }
+                variants {
+                    attributes {
+                        uid
+                        code
+                        value_index
+                    }
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    product {
+                        uid
+                        stock_status
+                        small_image {
+                            url
+                        }
+                    }
+                }
             }
         }
         # TODO: Use configurable_product_option_uid for ConfigurableWishlistItem when available in 2.4.5

package/lib/util/createProductVariants.js

@@ -0,0 +1,91 @@
+/**
+ * Rebuild the array of variants with out of stock items data added.
+ * Since when admin selects in the Admin dashboard to not to display out of stock products
+ * the variants data that are needed to find disabled swatches only show the the in stock ones, missing the out of stock ones
+ * We rebuild the variants here to display all the variants and mark the stock status accordingly
+ * This returns an array of objects
+ */
+
+export const createProductVariants = product => {
+    const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+    const IN_STOCK_CODE = 'IN_STOCK';
+
+    if (product && product.configurable_options) {
+        const { variants } = product;
+        // Compute the permutation of all possible arrays of given arrays
+        // For example, if array = [[1,2],[10,20],[100,200,300]]
+        // the result is [[1, 10, 100], [1, 10, 200], [1, 10, 300], [1, 20, 100], [1, 20, 200],
+        // [1, 20, 300], [2, 10, 100], [2, 10, 200], [2, 10, 300], [2, 20, 100], [2, 20, 200], [2, 20, 300]]
+        const cartesian = (...array) =>
+            array.reduce((array, current) =>
+                array.flatMap(cur => current.map(n => [cur, n].flat()))
+            );
+
+        const configurableOptionsValueIndexes = product.configurable_options.map(
+            option => option.values.map(value => value.value_index)
+        );
+        // Get all possible variants for current options
+        const allPossibleItems = cartesian(...configurableOptionsValueIndexes);
+
+        const variantsValueIndexes = variants.map(variant =>
+            variant.attributes.map(attribute => attribute.value_index)
+        );
+
+        const newVariantsArray = [];
+        const len = allPossibleItems.length;
+        let foundMatch;
+        let currentValueIndex = [];
+        for (let i = 0; i < len; i++) {
+            currentValueIndex = allPossibleItems[i];
+            for (const option of variantsValueIndexes) {
+                // If found the same item option in the current variants array, meaning the item is in stock
+                // If not found a match, meaning the item is out of stock, which is why it's not in the current variants array
+                // with the not to display out of stock products selected in Admin dashboard
+                foundMatch =
+                    option.length > 1
+                        ? Array.from(currentValueIndex)
+                              .sort()
+                              .toString() === option.sort().toString()
+                        : currentValueIndex.toString() === option.toString();
+                if (foundMatch) {
+                    break;
+                }
+            }
+
+            const newAttributes = [];
+            // If there are more than 1 group of swatches
+            if (currentValueIndex.length && currentValueIndex.length > 1) {
+                for (const index of Array.from(currentValueIndex)) {
+                    const code = product.configurable_options.find(option =>
+                        option.values.find(value => value.value_index === index)
+                    );
+                    newAttributes.push({
+                        value_index: index,
+                        code: code.attribute_code
+                    });
+                }
+                // If there's only one group of swatches
+            } else {
+                const code = product.configurable_options.find(option =>
+                    option.values.find(
+                        value => value.value_index === currentValueIndex
+                    )
+                );
+                newAttributes.push({
+                    value_index: currentValueIndex,
+                    code: code.attribute_code
+                });
+            }
+            newVariantsArray.push({
+                key: i,
+                attributes: Array.from(newAttributes),
+                product: {
+                    stock_status: foundMatch ? IN_STOCK_CODE : OUT_OF_STOCK_CODE
+                }
+            });
+        }
+        return newVariantsArray;
+    } else {
+        return [];
+    }
+};

package/lib/util/findAllMatchingVariants.js

@@ -0,0 +1,34 @@
+/**
+ * Find all the products/variants contains current option selections
+ * @return {Array} variants
+ */
+export const findAllMatchingVariants = ({
+    variants,
+    optionCodes,
+    singleOptionSelection
+}) => {
+    return variants?.filter(({ attributes, product }) => {
+        const customAttributes = (attributes || []).reduce(
+            (map, { code, value_index }) => new Map(map).set(code, value_index),
+            new Map()
+        );
+        for (const [id, value] of singleOptionSelection) {
+            const code = optionCodes.get(id);
+
+            const matchesStandardAttribute = product[code] === value;
+
+            const matchesCustomAttribute = customAttributes.get(code) === value;
+
+            // if any option selection fails to match any standard attribute
+            // and also fails to match any custom attribute
+            // then this isn't the correct variant
+            if (!matchesStandardAttribute && !matchesCustomAttribute) {
+                return false;
+            }
+        }
+
+        // otherwise, every option selection matched
+        // and these are the correct variants
+        return true;
+    });
+};

package/lib/util/getCombinations.js

@@ -0,0 +1,12 @@
+/**
+ * Find the combination of k elements in the array.
+ * For example: array is [1,2,3]. k=2.
+ * The results are [[1,2],[1,3],[2,3]]
+ * @return {Array}
+ */
+export function getCombinations(array, k, prefix = []) {
+    if (k == 0) return [prefix];
+    return array.flatMap((value, index) =>
+        getCombinations(array.slice(index + 1), k - 1, [...prefix, value])
+    );
+}

package/lib/util/getOutOfStockIndexes.js

@@ -0,0 +1,13 @@
+/**
+ * Find the value_index of out of stock variants
+ * @return {Array} indexes
+ */
+
+export const getOutOfStockIndexes = items => {
+    const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+    return items
+        ?.filter(item => item.product.stock_status === OUT_OF_STOCK_CODE)
+        .map(option =>
+            option.attributes.map(attribute => attribute.value_index)
+        );
+};

package/lib/util/getOutOfStockVariants.js

@@ -0,0 +1,115 @@
+/**
+ * Find out of stock variants/options of current option selections
+ * @return {Array} variants
+ */
+import { isProductConfigurable } from '@magento/peregrine/lib/util/isProductConfigurable';
+import { findAllMatchingVariants } from '@magento/peregrine/lib/util/findAllMatchingVariants';
+import { getOutOfStockIndexes } from '@magento/peregrine/lib/util/getOutOfStockIndexes';
+import { createProductVariants } from '@magento/peregrine/lib/util/createProductVariants';
+import { getCombinations } from '@magento/peregrine/lib/util/getCombinations';
+
+const OUT_OF_STOCK_CODE = 'OUT_OF_STOCK';
+
+export const getOutOfStockVariants = (
+    product,
+    optionCodes,
+    singleOptionSelection,
+    optionSelections,
+    isOutOfStockProductDisplayed
+) => {
+    const isConfigurable = isProductConfigurable(product);
+    const singeOptionSelected =
+        singleOptionSelection && singleOptionSelection.size === 1;
+    const outOfStockIndexes = [];
+
+    if (isConfigurable) {
+        let variants = product.variants;
+        const variantsIfOutOfStockProductsNotDisplayed = createProductVariants(
+            product
+        );
+        //If out of stock products is set to not displayed, use the variants created
+        variants = isOutOfStockProductDisplayed
+            ? variants
+            : variantsIfOutOfStockProductsNotDisplayed;
+
+        const numberOfVariations = variants[0].attributes.length;
+
+        // If only one pair of variations, display out of stock variations before option selection
+        if (numberOfVariations === 1) {
+            const outOfStockOptions = variants.filter(
+                variant => variant.product.stock_status === OUT_OF_STOCK_CODE
+            );
+
+            const outOfStockIndex = outOfStockOptions.map(option =>
+                option.attributes.map(attribute => attribute.value_index)
+            );
+            return outOfStockIndex;
+        } else {
+            if (singeOptionSelected) {
+                const optionsSelected =
+                    Array.from(optionSelections.values()).filter(
+                        value => !!value
+                    ).length > 1;
+                const selectedIndexes = Array.from(
+                    optionSelections.values()
+                ).flat();
+
+                const items = findAllMatchingVariants({
+                    optionCodes,
+                    singleOptionSelection,
+                    variants
+                });
+                const outOfStockItemsIndexes = getOutOfStockIndexes(items);
+
+                // For all the out of stock options associated with current selection, display out of stock swatches
+                // when the number of matching indexes of selected indexes and out of stock indexes are not smaller than the total groups of swatches minus 1
+                for (const indexes of outOfStockItemsIndexes) {
+                    const sameIndexes = indexes.filter(num =>
+                        selectedIndexes.includes(num)
+                    );
+                    const differentIndexes = indexes.filter(
+                        num => !selectedIndexes.includes(num)
+                    );
+                    if (sameIndexes.length >= optionCodes.size - 1) {
+                        outOfStockIndexes.push(differentIndexes);
+                    }
+                }
+                // Display all possible out of stock swatches with current selections, when all groups of swatches are selected
+                if (
+                    optionsSelected &&
+                    !selectedIndexes.includes(undefined) &&
+                    selectedIndexes.length === optionCodes.size
+                ) {
+                    const selectedIndexesCombinations = getCombinations(
+                        selectedIndexes,
+                        selectedIndexes.length - 1
+                    );
+                    // Find out of stock items and indexes for each combination
+                    const oosIndexes = [];
+                    for (const option of selectedIndexesCombinations) {
+                        // Map the option indexes to their optionCodes
+                        const curOption = new Map(
+                            [...optionSelections].filter(
+                                ([key, val]) => (
+                                    option.includes(key), option.includes(val)
+                                )
+                            )
+                        );
+                        const curItems = findAllMatchingVariants({
+                            optionCodes: optionCodes,
+                            singleOptionSelection: curOption,
+                            variants: variants
+                        });
+                        const outOfStockIndex = getOutOfStockIndexes(curItems)
+                            ?.flat()
+                            .filter(idx => !selectedIndexes.includes(idx));
+                        oosIndexes.push(outOfStockIndex);
+                    }
+                    return oosIndexes;
+                }
+                return outOfStockIndexes;
+            }
+        }
+    }
+    return [];
+};

package/lib/util/getOutOfStockVariantsWithInitialSelection.js

@@ -0,0 +1,63 @@
+/**
+ * Find out of stock variants/options of current option selections with initial selctions
+ * @return {Array} variants
+ */
+import { findAllMatchingVariants } from '@magento/peregrine/lib/util/findAllMatchingVariants';
+import { getOutOfStockIndexes } from '@magento/peregrine/lib/util/getOutOfStockIndexes';
+import { createProductVariants } from '@magento/peregrine/lib/util/createProductVariants';
+import { getCombinations } from '@magento/peregrine/lib/util/getCombinations';
+
+export const getOutOfStockVariantsWithInitialSelection = (
+    product,
+    configurableOptionCodes,
+    multipleOptionSelections,
+    configItem,
+    isOutOfStockProductDisplayed
+) => {
+    if (configItem && product) {
+        let variants = product.variants;
+        const variantsIfOutOfStockProductsNotDisplayed = createProductVariants(
+            configItem
+        );
+        //If out of stock products is set to not displayed, use the variants created
+        variants = isOutOfStockProductDisplayed
+            ? variants
+            : variantsIfOutOfStockProductsNotDisplayed;
+        if (
+            multipleOptionSelections &&
+            multipleOptionSelections.size === configurableOptionCodes.size
+        ) {
+            const selectedIndexes = Array.from(
+                multipleOptionSelections.values()
+            ).flat();
+
+            const selectedIndexesCombinations = getCombinations(
+                selectedIndexes,
+                selectedIndexes.length - 1
+            );
+            const oosIndexes = [];
+            for (const option of selectedIndexesCombinations) {
+                const curOption = new Map(
+                    [...multipleOptionSelections].filter(
+                        ([key, val]) => (
+                            option.includes(key), option.includes(val)
+                        )
+                    )
+                );
+                const curItems = findAllMatchingVariants({
+                    optionCodes: configurableOptionCodes,
+                    singleOptionSelection: curOption,
+                    variants: variants
+                });
+
+                const outOfStockIndex = getOutOfStockIndexes(curItems)
+                    ?.flat()
+                    .filter(idx => !selectedIndexes.includes(idx));
+
+                oosIndexes.push(outOfStockIndex);
+            }
+            return oosIndexes;
+        }
+        return [];
+    }
+};

package/lib/util/isProductConfigurable.js

@@ -1,3 +1,3 @@
 // TODO: Move/merge with product util in peregrine?
 export const isProductConfigurable = product =>
-    product.__typename === 'ConfigurableProduct';
+    product?.__typename === 'ConfigurableProduct';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.5.1-beta.1",
+  "version": "12.6.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },