@magento/peregrine 12.3.0-beta.1 → 12.4.0-beta.1

package/lib/store/reducers/user.js

@@ -7,7 +7,17 @@ import actions from '../actions/user';
 
 export const name = 'user';
 
-const isSignedIn = () => !!storage.getItem('signin_token');
+const rawSignInToken = storage.getRawItem('signin_token');
+
+const isSignedIn = () => !!rawSignInToken;
+
+const getToken = () => {
+    if (!rawSignInToken) {
+        return undefined;
+    }
+    const { value } = JSON.parse(rawSignInToken);
+    return value;
+};
 
 const initialState = {
     currentUser: {
@@ -20,7 +30,7 @@ const initialState = {
     isResettingPassword: false,
     isSignedIn: isSignedIn(),
     resetPasswordError: null,
-    token: storage.getItem('signin_token')
+    token: getToken()
 };
 
 const reducerMap = {

package/lib/talons/CartPage/GiftCards/useGiftCards.js

@@ -189,7 +189,7 @@ export const useGiftCards = props => {
  * @property {GraphQLAST} applyGiftCardMutation The mutation used to apply a gift card to the cart.
  * @property {GraphQLAST} removeGiftCardMutation The mutation used to remove a gift card from the cart.
  *
- * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCardQueries.js}
+ * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/peregrine/lib/talons/CartPage/GiftCards/giftCardQueries.gql.ee.js}
  * for queries used in Venia
  */
 
@@ -201,7 +201,7 @@ export const useGiftCards = props => {
  * @property {GraphQLAST} getAppliedGiftCardsQuery The query used to get the gift cards currently applied to the cart.
  * @property {GraphQLAST} getGiftCardBalanceQuery The query used to get the gift cards currently applied to the cart.
  *
- * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCardQueries.js}
+ * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/peregrine/lib/talons/CartPage/GiftCards/giftCardQueries.gql.ee.js}
  * for queries used in Venia
  */
 

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

@@ -43,6 +43,14 @@ export const ProductFormFragment = gql`
                             }
                         }
                     }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                        }
+                    }
                     sku
                 }
             }

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

@@ -19,11 +19,11 @@ import DEFAULT_OPERATIONS from './productForm.gql';
  *
  * @param {Object} props
  * @param {Object} props.cartItem The cart item to configure on the form
- * @param {GraphQLAST} props.getConfigurableOptionsQuery GraphQL query to get the configurable options for a product.
+ * @param {GraphQLDocument} props.getConfigurableOptionsQuery GraphQL query to get the configurable options for a product.
  * @param {function} props.setIsCartUpdating Function for setting the updating state for the shopping cart.
  * @param {function} props.setVariantPrice Function for setting the variant price on a product.
- * @param {GraphQLAST} props.updateConfigurableOptionsMutation GraphQL mutation for updating the configurable options for a product.
- * @param {GraphQLAST} props.updateQuantityMutation GraphQL mutation for updating the quantity of a product in a cart.
+ * @param {GraphQLDocument} props.updateConfigurableOptionsMutation GraphQL mutation for updating the configurable options for a product.
+ * @param {GraphQLDocument} props.updateQuantityMutation GraphQL mutation for updating the quantity of a product in a cart.
  * @param {function} props.setActiveEditItem Function for setting the actively editing item.
  *
  * @return {ProductFormTalonProps}
@@ -150,15 +150,8 @@ export const useProductForm = props => {
     }, [storeConfigData]);
 
     useEffect(() => {
-        let variantPrice = null;
-
-        if (selectedVariant) {
-            const { product } = selectedVariant;
-            const { price } = product;
-            const { regularPrice } = price;
-            variantPrice = regularPrice.amount;
-        }
-
+        const variantPrice =
+            selectedVariant?.product?.price_range?.maximum_price?.final_price;
         setVariantPrice(variantPrice);
     }, [selectedVariant, setVariantPrice]);
 

package/lib/talons/CartPage/ProductListing/productListing.gql.ce.js

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForCartPageCE {
+    query GetWishlistConfigForCartPageMOS {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/CartPage/ProductListing/productListing.gql.ee.js

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForCartPageEE {
+    query GetWishlistConfigForCartPageAC {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/CartPage/ProductListing/useQuantity.js

@@ -1,9 +1,7 @@
-import { useCallback, useMemo, useState, useEffect } from 'react';
-import { useFieldApi } from 'informed';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-import debounce from 'lodash.debounce';
-
 /**
+ *
+ * @deprecated - use talons/QuantityStepper/useQuantityStepper instead
+ *
  * This talon contains logic for a product quantity UI component.
  * It performs effects and returns prop data for rendering a component that lets you
  * modify the quantity of a cart item.
@@ -24,91 +22,14 @@ import debounce from 'lodash.debounce';
  * @example <caption>Importing into your project</caption>
  * import { useQuantity } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useQuantity';
  */
-export const useQuantity = props => {
-    const { initialValue, min, onChange } = props;
-
-    const [prevQuantity, setPrevQuantity] = useState(initialValue);
-
-    const quantityFieldApi = useFieldApi('quantity');
-    const { value: quantity } = useFieldState('quantity');
-
-    const isIncrementDisabled = useMemo(() => !quantity, [quantity]);
-
-    // "min: 0" lets a user delete the value and enter a new one, but "1" is
-    // actually the minimum value we allow to be set through decrement button.
-    const isDecrementDisabled = useMemo(() => !quantity || quantity <= 1, [
-        quantity
-    ]);
-
-    // Fire the onChange after some wait time. We calculate the current delay
-    // as enough time for a user to spam inc/dec quantity but not enough time
-    // for a user to click inc/dec on Product A and then click Product B.
-    const debouncedOnChange = useMemo(
-        () =>
-            debounce(val => {
-                setPrevQuantity(val);
-                onChange(val);
-            }, 350),
-        [onChange]
-    );
-
-    const handleDecrement = useCallback(() => {
-        const newQuantity = quantity - 1;
-        quantityFieldApi.setValue(newQuantity);
-        debouncedOnChange(newQuantity);
-    }, [debouncedOnChange, quantity, quantityFieldApi]);
-
-    const handleIncrement = useCallback(() => {
-        const newQuantity = quantity + 1;
-        quantityFieldApi.setValue(newQuantity);
-        debouncedOnChange(newQuantity);
-    }, [debouncedOnChange, quantity, quantityFieldApi]);
-
-    const handleBlur = useCallback(() => {
-        // Only submit the value change if it has changed.
-        if (typeof quantity === 'number' && quantity != prevQuantity) {
-            debouncedOnChange(quantity);
-        }
-    }, [debouncedOnChange, prevQuantity, quantity]);
-
-    const maskInput = useCallback(
-        value => {
-            try {
-                // For some storefronts decimal values are allowed.
-                const nextVal = parseFloat(value);
-                if (value && isNaN(nextVal))
-                    throw new Error(`${value} is not a number.`);
-                if (nextVal < min) return min;
-                else return nextVal;
-            } catch (err) {
-                console.error(err);
-                return prevQuantity;
-            }
-        },
-        [min, prevQuantity]
-    );
-
-    /**
-     * Everytime initialValue changes, update the quantity field state.
-     */
-    useEffect(() => {
-        quantityFieldApi.setValue(initialValue);
-    }, [initialValue, quantityFieldApi]);
-
-    return {
-        isDecrementDisabled,
-        isIncrementDisabled,
-        handleBlur,
-        handleDecrement,
-        handleIncrement,
-        maskInput
-    };
-};
+export {
+    useQuantityStepper as useQuantity
+} from '../../QuantityStepper/useQuantityStepper';
 
 /** JSDoc type definitions */
 
 /**
- * Object type returned by the {@link useQuantity} talon.
+ * Object type returned by the {@link useQuantityStepper} talon.
  * It provides props data for a quantity UI component.
  *
  * @typedef {Object} QuantityTalonProps

package/lib/talons/FilterModal/useFilterModal.js

@@ -82,10 +82,37 @@ export const useFilterModal = props => {
         return nextFilters;
     }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
 
+    const isBooleanFilter = options => {
+        const optionsString = JSON.stringify(options);
+        return (
+            options.length <= 2 &&
+            (optionsString.includes(
+                JSON.stringify({
+                    __typename: 'AggregationOption',
+                    label: '0',
+                    value: '0'
+                })
+            ) ||
+                optionsString.includes(
+                    JSON.stringify({
+                        __typename: 'AggregationOption',
+                        label: '1',
+                        value: '1'
+                    })
+                ))
+        );
+    };
+
     // iterate over filters once to set up all the collections we need
-    const [filterNames, filterKeys, filterItems] = useMemo(() => {
+    const [
+        filterNames,
+        filterKeys,
+        filterItems,
+        filterFrontendInput
+    ] = useMemo(() => {
         const names = new Map();
         const keys = new Set();
+        const frontendInput = new Map();
         const itemsByGroup = new Map();
 
         const sortedFilters = sortFiltersArray([...filters]);
@@ -103,15 +130,35 @@ export const useFilterModal = props => {
                 // add filter key permutations
                 keys.add(`${group}[filter]`);
 
-                // add items
-                for (const { label, value } of options) {
-                    items.push({ title: stripHtml(label), value });
+                // TODO: Get all frontend input type from gql if other filter input types are needed
+                // See: https://github.com/magento-commerce/magento2-pwa/pull/26
+                if (isBooleanFilter(options)) {
+                    frontendInput.set(group, 'boolean');
+                    // add items
+                    items.push({
+                        title: 'No',
+                        value: '0',
+                        label: name + ':' + 'No'
+                    });
+                    items.push({
+                        title: 'Yes',
+                        value: '1',
+                        label: name + ':' + 'Yes'
+                    });
+                } else {
+                    // Add frontend input type
+                    frontendInput.set(group, null);
+                    // add items
+                    for (const { label, value } of options) {
+                        items.push({ title: stripHtml(label), value });
+                    }
                 }
+
                 itemsByGroup.set(group, items);
             }
         }
 
-        return [names, keys, itemsByGroup];
+        return [names, keys, itemsByGroup, frontendInput];
     }, [filters, possibleFilters]);
 
     // on apply, write filter state to location
@@ -196,6 +243,7 @@ export const useFilterModal = props => {
         filterItems,
         filterKeys,
         filterNames,
+        filterFrontendInput,
         filterState,
         handleApply,
         handleClose,

package/lib/talons/FilterModal/useFilterState.js

@@ -37,6 +37,14 @@ const reducer = (state, action) => {
 
             return nextState;
         }
+        case 'remove group': {
+            const { group } = payload;
+            const nextState = new Map(state);
+
+            nextState.delete(group);
+
+            return nextState;
+        }
         case 'toggle item': {
             const { group, item } = payload;
             const nextState = new Map(state);
@@ -89,6 +97,13 @@ export const useFilterState = () => {
         [dispatch]
     );
 
+    const removeGroup = useCallback(
+        payload => {
+            dispatch({ payload, type: 'remove group' });
+        },
+        [dispatch]
+    );
+
     const setItems = useCallback(
         payload => {
             dispatch({ payload, type: 'set items' });
@@ -109,10 +124,19 @@ export const useFilterState = () => {
             clear,
             dispatch,
             removeItem,
+            removeGroup,
             setItems,
             toggleItem
         }),
-        [addItem, clear, dispatch, removeItem, setItems, toggleItem]
+        [
+            addItem,
+            clear,
+            dispatch,
+            removeItem,
+            removeGroup,
+            setItems,
+            toggleItem
+        ]
     );
 
     return [state, api];

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -72,10 +72,37 @@ export const useFilterSidebar = props => {
         return nextFilters;
     }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
 
+    const isBooleanFilter = options => {
+        const optionsString = JSON.stringify(options);
+        return (
+            options.length <= 2 &&
+            (optionsString.includes(
+                JSON.stringify({
+                    __typename: 'AggregationOption',
+                    label: '0',
+                    value: '0'
+                })
+            ) ||
+                optionsString.includes(
+                    JSON.stringify({
+                        __typename: 'AggregationOption',
+                        label: '1',
+                        value: '1'
+                    })
+                ))
+        );
+    };
+
     // iterate over filters once to set up all the collections we need
-    const [filterNames, filterKeys, filterItems] = useMemo(() => {
+    const [
+        filterNames,
+        filterKeys,
+        filterItems,
+        filterFrontendInput
+    ] = useMemo(() => {
         const names = new Map();
         const keys = new Set();
+        const frontendInput = new Map();
         const itemsByGroup = new Map();
 
         const sortedFilters = sortFiltersArray([...filters]);
@@ -93,15 +120,34 @@ export const useFilterSidebar = props => {
                 // add filter key permutations
                 keys.add(`${group}[filter]`);
 
-                // add items
-                for (const { label, value } of options) {
-                    items.push({ title: stripHtml(label), value });
+                // TODO: Get all frontend input type from gql if other filter input types are needed
+                // See https://github.com/magento-commerce/magento2-pwa/pull/26
+                if (isBooleanFilter(options)) {
+                    frontendInput.set(group, 'boolean');
+                    // add items
+                    items.push({
+                        title: 'No',
+                        value: '0',
+                        label: name + ':' + 'No'
+                    });
+                    items.push({
+                        title: 'Yes',
+                        value: '1',
+                        label: name + ':' + 'Yes'
+                    });
+                } else {
+                    // Add frontend input type
+                    frontendInput.set(group, null);
+                    // add items
+                    for (const { label, value } of options) {
+                        items.push({ title: stripHtml(label), value });
+                    }
                 }
                 itemsByGroup.set(group, items);
             }
         }
 
-        return [names, keys, itemsByGroup];
+        return [names, keys, itemsByGroup, frontendInput];
     }, [filters, possibleFilters]);
 
     // on apply, write filter state to location
@@ -192,6 +238,7 @@ export const useFilterSidebar = props => {
         filterItems,
         filterKeys,
         filterNames,
+        filterFrontendInput,
         filterState,
         handleApply,
         handleClose,

package/lib/talons/Gallery/__fixtures__/apolloMocks.js

@@ -1,9 +1,9 @@
-import eeOperations from '../gallery.gql.ee';
-import ceOperations from '../gallery.gql.ce';
+import acOperations from '../gallery.gql.ee';
+import mosOperations from '../gallery.gql.ce';
 
-export const mockGetStoreConfigEE = {
+export const mockGetStoreConfigAC = {
     request: {
-        query: eeOperations.getStoreConfigQuery
+        query: acOperations.getStoreConfigQuery
     },
     result: {
         data: {
@@ -17,9 +17,9 @@ export const mockGetStoreConfigEE = {
     }
 };
 
-export const mockGetStoreConfigCE = {
+export const mockGetStoreConfigMOS = {
     request: {
-        query: ceOperations.getStoreConfigQuery
+        query: mosOperations.getStoreConfigQuery
     },
     result: {
         data: {

package/lib/talons/Gallery/gallery.gql.ce.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
-    query GetStoreConfigDataForGalleryCE {
+    query GetStoreConfigDataForGalleryMOS {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/Gallery/gallery.gql.ee.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
-    query GetStoreConfigDataForGalleryEE {
+    query GetStoreConfigDataForGalleryAC {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/ProductFullDetail/productFullDetail.gql.ce.js

@@ -18,7 +18,7 @@ export const ADD_PRODUCT_TO_CART = gql`
 `;
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForProductCE {
+    query GetWishlistConfigForProductMOS {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/ProductFullDetail/productFullDetail.gql.ee.js

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 import defaultOperations from './productFullDetail.gql.ce';
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForProductEE {
+    query GetWishlistConfigForProductAC {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -78,8 +78,9 @@ const getIsOutOfStock = (product, optionCodes, optionSelections) => {
             optionSelections,
             variants
         });
+        const stockStatus = item?.product?.stock_status;
 
-        return item.product.stock_status === OUT_OF_STOCK_CODE;
+        return stockStatus === OUT_OF_STOCK_CODE || !stockStatus;
     }
     return stock_status === OUT_OF_STOCK_CODE;
 };
@@ -154,7 +155,7 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         0;
 
     if (!isConfigurable || !optionsSelected) {
-        value = product.price.regularPrice.amount;
+        value = product.price_range?.maximum_price?.final_price;
     } else {
         const item = findMatchingVariant({
             optionCodes,
@@ -163,13 +164,21 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         });
 
         value = item
-            ? item.product.price.regularPrice.amount
-            : product.price.regularPrice.amount;
+            ? item.product.price_range?.maximum_price?.final_price
+            : product.price_range?.maximum_price?.final_price;
     }
 
     return value;
 };
 
+const attributeLabelCompare = (attribute1, attribute2) => {
+    const label1 = attribute1['attribute_metadata']['label'].toLowerCase();
+    const label2 = attribute2['attribute_metadata']['label'].toLowerCase();
+    if (label1 < label2) return -1;
+    else if (label1 > label2) return 1;
+    else return 0;
+};
+
 const getCustomAttributes = (product, optionCodes, optionSelections) => {
     const { custom_attributes, variants } = product;
     const isConfigurable = isProductConfigurable(product);
@@ -184,10 +193,14 @@ const getCustomAttributes = (product, optionCodes, optionSelections) => {
             variants
         });
 
-        return item.product.custom_attributes;
+        return item && item.product
+            ? [...item.product.custom_attributes].sort(attributeLabelCompare)
+            : [];
     }
 
-    return custom_attributes;
+    return custom_attributes
+        ? [...custom_attributes].sort(attributeLabelCompare)
+        : [];
 };
 
 /**
@@ -447,6 +460,7 @@ export const useProductFullDetail = props => {
     // Normalization object for product details we need for rendering.
     const productDetails = {
         description: product.description,
+        shortDescription: product.short_description,
         name: product.name,
         price: productPrice,
         sku: product.sku

package/lib/talons/QuantityStepper/useQuantityStepper.js

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import debounce from 'lodash.debounce';
+
+/**
+ * This talon contains logic for a product quantity UI component.
+ * It performs effects and returns prop data for rendering a component that lets you
+ * modify the quantity of a cart item.
+ *
+ * This talon performs the following effects:
+ *
+ * - Updates the state of the quantity field when the initial value changes
+ *
+ * @function
+ *
+ * @param {Object} props
+ * @param {number} props.initialValue the initial quantity value
+ * @param {number} props.min the minimum allowed quantity value
+ * @param {function} props.onChange change handler to invoke when quantity value changes
+ *
+ * @returns {QuantityTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useQuantityStepper } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useQuantityStepper';
+ */
+export const useQuantityStepper = props => {
+    const { initialValue, min, onChange } = props;
+
+    const [prevQuantity, setPrevQuantity] = useState(initialValue);
+
+    const quantityFieldApi = useFieldApi('quantity');
+    const { value: quantity } = useFieldState('quantity');
+
+    const isIncrementDisabled = useMemo(() => !quantity, [quantity]);
+
+    // "min: 0" lets a user delete the value and enter a new one, but "1" is
+    // actually the minimum value we allow to be set through decrement button.
+    const isDecrementDisabled = useMemo(() => !quantity || quantity <= 1, [
+        quantity
+    ]);
+
+    // Fire the onChange after some wait time. We calculate the current delay
+    // as enough time for a user to spam inc/dec quantity but not enough time
+    // for a user to click inc/dec on Product A and then click Product B.
+    const debouncedOnChange = useMemo(
+        () =>
+            debounce(val => {
+                setPrevQuantity(val);
+                onChange(val);
+            }, 350),
+        [onChange]
+    );
+
+    const handleDecrement = useCallback(() => {
+        const newQuantity = quantity - 1;
+        quantityFieldApi.setValue(newQuantity);
+        debouncedOnChange(newQuantity);
+    }, [debouncedOnChange, quantity, quantityFieldApi]);
+
+    const handleIncrement = useCallback(() => {
+        const newQuantity = quantity + 1;
+        quantityFieldApi.setValue(newQuantity);
+        debouncedOnChange(newQuantity);
+    }, [debouncedOnChange, quantity, quantityFieldApi]);
+
+    const handleBlur = useCallback(() => {
+        // Only submit the value change if it has changed.
+        if (typeof quantity === 'number' && quantity != prevQuantity) {
+            debouncedOnChange(quantity);
+        }
+    }, [debouncedOnChange, prevQuantity, quantity]);
+
+    const maskInput = useCallback(
+        value => {
+            try {
+                // For some storefronts decimal values are allowed.
+                const nextVal = parseFloat(value);
+                if (value && isNaN(nextVal))
+                    throw new Error(`${value} is not a number.`);
+                if (nextVal < min) return min;
+                else return nextVal;
+            } catch (err) {
+                console.error(err);
+                return prevQuantity;
+            }
+        },
+        [min, prevQuantity]
+    );
+
+    /**
+     * Everytime initialValue changes, update the quantity field state.
+     */
+    useEffect(() => {
+        quantityFieldApi.setValue(initialValue);
+    }, [initialValue, quantityFieldApi]);
+
+    return {
+        isDecrementDisabled,
+        isIncrementDisabled,
+        handleBlur,
+        handleDecrement,
+        handleIncrement,
+        maskInput
+    };
+};
+
+/** JSDoc type definitions */
+
+/**
+ * Object type returned by the {@link useQuantityStepper} talon.
+ * It provides props data for a quantity UI component.
+ *
+ * @typedef {Object} QuantityTalonProps
+ *
+ * @property {boolean} isDecrementDisabled True if decrementing should be disabled
+ * @property {boolean} isIncrementDisabled True if incrementing should be disabled
+ * @property {function} handleBlur Callback function for handling a blur event on a component
+ * @property {function} handleDecrement Callback function for handling a quantity decrement event
+ * @property {function} handleIncrement Callback function for handling an increment event
+ * @property {function} maskInput Function for masking a value when decimal values are allowed
+ */

package/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -18,6 +18,10 @@ export const ProductsFragment = gql`
             name
             price_range {
                 maximum_price {
+                    final_price {
+                        currency
+                        value
+                    }
                     regular_price {
                         currency
                         value

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -13,6 +13,9 @@ export const ProductDetailsFragment = gql`
         description {
             html
         }
+        short_description {
+            html
+        }
         id
         uid
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
@@ -33,6 +36,14 @@ export const ProductDetailsFragment = gql`
                 }
             }
         }
+        price_range {
+            maximum_price {
+                final_price {
+                    currency
+                    value
+                }
+            }
+        }
         sku
         small_image {
             url
@@ -119,6 +130,14 @@ export const ProductDetailsFragment = gql`
                             }
                         }
                     }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                        }
+                    }
                     custom_attributes {
                         selected_attribute_options {
                             attribute_option {

package/lib/talons/SearchPage/searchPage.gql.js

@@ -48,6 +48,10 @@ export const PRODUCT_SEARCH = gql`
                 name
                 price_range {
                     maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
                         regular_price {
                             currency
                             value

package/lib/talons/WishlistPage/wishlistConfig.gql.ce.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForWishlistPageCE {
+    query GetWishlistConfigForWishlistPageMOS {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/talons/WishlistPage/wishlistConfig.gql.ee.js

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForWishlistPageEE {
+    query GetWishlistConfigForWishlistPageAC {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
             store_code

package/lib/util/htmlStringImgUrlConverter.js

@@ -0,0 +1,26 @@
+import makeUrl from './makeUrl';
+import resolveLinkProps from './resolveLinkProps';
+
+/**
+ * Modifies html string images to use makeUrl as source and resolves links to use internal path.
+ *
+ * @param {string} htmlString - the html string to be updated
+ * @return {string}
+ */
+const htmlStringImgUrlConverter = htmlString => {
+    const temporaryElement = document.createElement('div');
+    temporaryElement.innerHTML = htmlString;
+    for (const imgElement of temporaryElement.getElementsByTagName('img')) {
+        imgElement.src = makeUrl(imgElement.src, {
+            type: 'image-wysiwyg',
+            quality: 85
+        });
+    }
+    for (const linkElement of temporaryElement.getElementsByTagName('a')) {
+        const linkProps = resolveLinkProps(linkElement.href);
+        linkElement.href = linkProps.to || linkProps.href;
+    }
+    return temporaryElement.innerHTML;
+};
+
+export default htmlStringImgUrlConverter;

package/lib/util/resolveLinkProps.js

@@ -0,0 +1,25 @@
+/**
+ * Resolve link properties
+ *
+ * @param {string} link
+ */
+export default link => {
+    let isExternalUrl;
+    const linkProps = {};
+
+    try {
+        const baseUrlObj = new URL(process.env.MAGENTO_BACKEND_URL);
+        const urlObj = new URL(link, baseUrlObj);
+        isExternalUrl = baseUrlObj.host !== urlObj.host;
+
+        if (isExternalUrl) {
+            linkProps['href'] = link;
+        } else {
+            linkProps['to'] = urlObj.pathname;
+        }
+    } catch (e) {
+        linkProps['href'] = link;
+    }
+
+    return linkProps;
+};

package/lib/util/simplePersistence.js

@@ -42,11 +42,17 @@ export default class BrowserPersistence {
         return this.storage.getItem(name);
     }
     getItem(name) {
+        const now = Date.now();
         const item = this.storage.getItem(name);
         if (!item) {
             return undefined;
         }
-        const { value } = JSON.parse(item);
+        const { value, ttl, timeStored } = JSON.parse(item);
+
+        if (ttl && now - timeStored > ttl * 1000) {
+            this.storage.removeItem(name);
+            return undefined;
+        }
 
         return JSON.parse(value);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.3.0-beta.1",
+  "version": "12.4.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -10,7 +10,7 @@
     "clean": " "
   },
   "repository": "github:magento/pwa-studio",
-  "author": "Magento Commerce",
+  "author": "Adobe Commerce",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "bugs": {
     "url": "https://github.com/magento/pwa-studio/issues"