@magento/peregrine 14.4.1 → 14.5.1-alpha.4

package/lib/store/actions/user/actions.js

@@ -1,7 +1,12 @@
 import { createActions } from 'redux-actions';
 
 const prefix = 'USER';
-const actionTypes = ['RESET', 'SET_TOKEN', 'CLEAR_TOKEN'];
+const actionTypes = [
+    'RESET',
+    'SET_TOKEN',
+    'CLEAR_TOKEN',
+    'SET_USER_ON_ORDER_SUCCESS'
+];
 
 const actionMap = {
     SIGN_IN: {

package/lib/store/actions/user/asyncActions.js

@@ -89,3 +89,9 @@ export const clearToken = () =>
         // Remove from store
         dispatch(actions.clearToken());
     };
+
+export const setUserOnOrderSuccess = successFlag =>
+    async function thunk(dispatch) {
+        // Dispatch the action to update the state
+        dispatch(actions.setUserOnOrderSuccess(successFlag));
+    };

package/lib/store/reducers/user.js

@@ -30,7 +30,8 @@ const initialState = {
     isResettingPassword: false,
     isSignedIn: isSignedIn(),
     resetPasswordError: null,
-    token: getToken()
+    token: getToken(),
+    userOnOrderSuccess: false // Add userOnOrderSuccess state
 };
 
 const reducerMap = {
@@ -48,6 +49,12 @@ const reducerMap = {
             token: null
         };
     },
+    [actions.setUserOnOrderSuccess]: (state, { payload }) => {
+        return {
+            ...state,
+            userOnOrderSuccess: payload // Update the state with the new flag value
+        };
+    },
     [actions.getDetails.request]: state => {
         return {
             ...state,

package/lib/talons/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -1,102 +1,129 @@
-export default {
-    cart: {
-        id: 'GXtkt675mPd3gYuvhWLd5iw5ekVoDj1b',
-        total_quantity: 7,
-        items: [
+export default [
+    {
+        id: '29568',
+        product: {
+            id: 1093,
+            name: 'Jillian Top',
+            thumbnail: {
+                url:
+                    'https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
+                __typename: 'ProductImage'
+            },
+            __typename: 'ConfigurableProduct'
+        },
+        quantity: 3,
+        configurable_options: [
+            {
+                configurable_product_option_uid: 179,
+                option_label: 'Fashion Color',
+                configurable_product_option_value_uid: 18,
+                value_label: 'Peach',
+                __typename: 'SelectedConfigurableOption'
+            },
+            {
+                configurable_product_option_uid: 182,
+                option_label: 'Fashion Size',
+                configurable_product_option_value_uid: 27,
+                value_label: 'M',
+                __typename: 'SelectedConfigurableOption'
+            }
+        ],
+        __typename: 'ConfigurableCartItem'
+    },
+    {
+        id: '29570',
+        product: {
+            id: 1115,
+            name: 'Juno Sweater',
+            thumbnail: {
+                url:
+                    'https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
+                __typename: 'ProductImage'
+            },
+            __typename: 'ConfigurableProduct'
+        },
+        quantity: 1,
+        configurable_options: [
+            {
+                configurable_product_option_uid: 179,
+                option_label: 'Fashion Color',
+                configurable_product_option_value_uid: 21,
+                value_label: 'Rain',
+                __typename: 'SelectedConfigurableOption'
+            },
             {
-                id: '29568',
-                product: {
-                    id: 1093,
-                    name: 'Jillian Top',
-                    thumbnail: {
-                        url:
-                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
-                        __typename: 'ProductImage'
-                    },
-                    __typename: 'ConfigurableProduct'
-                },
-                quantity: 3,
-                configurable_options: [
-                    {
-                        configurable_product_option_uid: 179,
-                        option_label: 'Fashion Color',
-                        configurable_product_option_value_uid: 18,
-                        value_label: 'Peach',
-                        __typename: 'SelectedConfigurableOption'
-                    },
-                    {
-                        configurable_product_option_uid: 182,
-                        option_label: 'Fashion Size',
-                        configurable_product_option_value_uid: 27,
-                        value_label: 'M',
-                        __typename: 'SelectedConfigurableOption'
-                    }
-                ],
-                __typename: 'ConfigurableCartItem'
+                configurable_product_option_uid: 182,
+                option_label: 'Fashion Size',
+                configurable_product_option_value_uid: 29,
+                value_label: 'XS',
+                __typename: 'SelectedConfigurableOption'
+            }
+        ],
+        __typename: 'ConfigurableCartItem'
+    },
+    {
+        id: '29572',
+        product: {
+            id: 1152,
+            name: 'Angelina Tank Dress',
+            thumbnail: {
+                url:
+                    'https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
+                __typename: 'ProductImage'
+            },
+            __typename: 'ConfigurableProduct'
+        },
+        quantity: 3,
+        configurable_options: [
+            {
+                configurable_product_option_uid: 179,
+                option_label: 'Fashion Color',
+                configurable_product_option_value_uid: 20,
+                value_label: 'Lilac',
+                __typename: 'SelectedConfigurableOption'
+            },
+            {
+                configurable_product_option_uid: 182,
+                option_label: 'Fashion Size',
+                configurable_product_option_value_uid: 26,
+                value_label: 'L',
+                __typename: 'SelectedConfigurableOption'
+            }
+        ],
+        __typename: 'ConfigurableCartItem'
+    }
+];
+
+export const singleItem = [
+    {
+        id: '29568',
+        product: {
+            id: 1093,
+            name: 'Jillian Top',
+            thumbnail: {
+                url:
+                    'https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
+                __typename: 'ProductImage'
             },
+            __typename: 'ConfigurableProduct'
+        },
+        quantity: 3,
+        configurable_options: [
             {
-                id: '29570',
-                product: {
-                    id: 1115,
-                    name: 'Juno Sweater',
-                    thumbnail: {
-                        url:
-                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
-                        __typename: 'ProductImage'
-                    },
-                    __typename: 'ConfigurableProduct'
-                },
-                quantity: 1,
-                configurable_options: [
-                    {
-                        configurable_product_option_uid: 179,
-                        option_label: 'Fashion Color',
-                        configurable_product_option_value_uid: 21,
-                        value_label: 'Rain',
-                        __typename: 'SelectedConfigurableOption'
-                    },
-                    {
-                        configurable_product_option_uid: 182,
-                        option_label: 'Fashion Size',
-                        configurable_product_option_value_uid: 29,
-                        value_label: 'XS',
-                        __typename: 'SelectedConfigurableOption'
-                    }
-                ],
-                __typename: 'ConfigurableCartItem'
+                configurable_product_option_uid: 179,
+                option_label: 'Fashion Color',
+                configurable_product_option_value_uid: 18,
+                value_label: 'Peach',
+                __typename: 'SelectedConfigurableOption'
             },
             {
-                id: '29572',
-                product: {
-                    id: 1152,
-                    name: 'Angelina Tank Dress',
-                    thumbnail: {
-                        url:
-                            'https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
-                        __typename: 'ProductImage'
-                    },
-                    __typename: 'ConfigurableProduct'
-                },
-                quantity: 3,
-                configurable_options: [
-                    {
-                        configurable_product_option_uid: 179,
-                        option_label: 'Fashion Color',
-                        configurable_product_option_value_uid: 20,
-                        value_label: 'Lilac',
-                        __typename: 'SelectedConfigurableOption'
-                    },
-                    {
-                        configurable_product_option_uid: 182,
-                        option_label: 'Fashion Size',
-                        configurable_product_option_value_uid: 26,
-                        value_label: 'L',
-                        __typename: 'SelectedConfigurableOption'
-                    }
-                ],
-                __typename: 'ConfigurableCartItem'
+                configurable_product_option_uid: 182,
+                option_label: 'Fashion Size',
+                configurable_product_option_value_uid: 27,
+                value_label: 'M',
+                __typename: 'SelectedConfigurableOption'
             }
         ],
-        __typename: 'Cart'
+        __typename: 'ConfigurableCartItem'
     }
-};
+];

package/lib/talons/CheckoutPage/ItemsReview/useItemsReview.js

@@ -1,7 +1,6 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client';
 
-import { useCartContext } from '../../../context/cart';
 import mergeOperations from '../../../util/shallowMerge';
 import DEFAULT_OPERATIONS from './itemsReview.gql';
 
@@ -9,9 +8,9 @@ export const useItemsReview = props => {
     const [showAllItems, setShowAllItems] = useState(false);
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
-    const { getItemsInCart, getConfigurableThumbnailSource } = operations;
+    const { getConfigurableThumbnailSource } = operations;
 
-    const [{ cartId }] = useCartContext();
+    const { items: itemsData } = props;
 
     const { data: configurableThumbnailSourceData } = useQuery(
         getConfigurableThumbnailSource,
@@ -27,48 +26,29 @@ export const useItemsReview = props => {
         }
     }, [configurableThumbnailSourceData]);
 
-    const [
-        fetchItemsInCart,
-        { data: queryData, error, loading }
-    ] = useLazyQuery(getItemsInCart, {
-        fetchPolicy: 'cache-and-network'
-    });
-
-    // If static data was provided, use that instead of query data.
-    const data = props.data || queryData;
-
     const setShowAllItemsFlag = useCallback(() => setShowAllItems(true), [
         setShowAllItems
     ]);
 
-    useEffect(() => {
-        if (cartId && !props.data) {
-            fetchItemsInCart({
-                variables: {
-                    cartId
-                }
-            });
-        }
-    }, [cartId, fetchItemsInCart, props.data]);
-
     useEffect(() => {
         /**
          * If there are 2 or less than 2 items in cart
          * set show all items to `true`.
          */
-        if (data && data.cart && data.cart.items.length <= 2) {
+        if (itemsData && itemsData.length <= 2) {
             setShowAllItems(true);
         }
-    }, [data]);
+    }, [itemsData]);
 
-    const items = data ? data.cart.items : [];
+    const items = itemsData || [];
 
-    const totalQuantity = data ? +data.cart.total_quantity : 0;
+    const totalQuantity = items.reduce(
+        (previousValue, currentValue) => previousValue + currentValue.quantity,
+        0
+    );
 
     return {
-        isLoading: !!loading,
         items,
-        hasErrors: !!error,
         totalQuantity,
         showAllItems,
         setShowAllItems: setShowAllItemsFlag,

package/lib/talons/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.gql.js

@@ -0,0 +1,30 @@
+import { gql } from '@apollo/client';
+
+export const GET_ORDER_CONFIRMATION_DETAILS = gql`
+    query getOrderConfirmationDetails($orderNumber: String!) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            email
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            orders(filter: { number: { eq: $orderNumber } }) {
+                items {
+                    id
+                    shipping_address {
+                        firstname
+                        lastname
+                        street
+                        city
+                        region
+                        postcode
+                        country_code
+                    }
+                    shipping_method
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getOrderConfirmationDetailsQuery: GET_ORDER_CONFIRMATION_DETAILS
+};

package/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -9,6 +9,7 @@ import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 import { useEventingContext } from '../../../context/eventing';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Returns props necessary to render CreateAccount component. In particular this
@@ -95,6 +96,7 @@ export const useCreateAccount = props => {
         formAction: 'createAccount'
     });
 
+    const history = useHistory();
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
@@ -158,6 +160,8 @@ export const useCreateAccount = props => {
                 if (onSubmit) {
                     onSubmit();
                 }
+
+                history.push('/account-information');
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -179,7 +183,8 @@ export const useCreateAccount = props => {
             removeCart,
             setToken,
             signIn,
-            dispatch
+            dispatch,
+            history
         ]
     );
 

package/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage.js

@@ -1,6 +1,16 @@
+import { useEffect } from 'react';
 import { useUserContext } from '../../../context/user';
+import { setUserOnOrderSuccess } from '../../../store/actions/user/asyncActions';
+import { useLazyQuery } from '@apollo/client';
 
-export const flatten = data => {
+import mergeOperations from '../../../util/shallowMerge';
+import DEFAULT_OPERATIONS from './orderConfirmationPage.gql';
+import { useDispatch } from 'react-redux';
+
+export const flattenGuestCartData = data => {
+    if (!data) {
+        return;
+    }
     const { cart } = data;
     const { shipping_addresses } = cart;
     const address = shipping_addresses[0];
@@ -18,17 +28,79 @@ export const flatten = data => {
         postcode: address.postcode,
         region: address.region.label,
         shippingMethod,
+        street: address.street
+    };
+};
+
+export const flattenCustomerOrderData = data => {
+    if (!data) {
+        return;
+    }
+
+    const { customer } = data;
+    const order = customer?.orders?.items?.[0];
+    if (!order || !order.shipping_address) {
+        // Return an empty response if no valid order or shipping address exists
+        return;
+    }
+    const { shipping_address: address } = order;
+
+    return {
+        city: address.city,
+        country: address.country_code,
+        email: customer.email,
+        firstname: address.firstname,
+        lastname: address.lastname,
+        postcode: address.postcode,
+        region: address.region,
         street: address.street,
-        totalItemQuantity: cart.total_quantity
+        shippingMethod: order.shipping_method
     };
 };
 
 export const useOrderConfirmationPage = props => {
-    const { data } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getOrderConfirmationDetailsQuery } = operations;
+
     const [{ isSignedIn }] = useUserContext();
 
+    const [
+        fetchOrderConfirmationDetails,
+        { data: queryData, error, loading }
+    ] = useLazyQuery(getOrderConfirmationDetailsQuery);
+
+    const flatData =
+        flattenGuestCartData(props.data) || flattenCustomerOrderData(queryData);
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (props.orderNumber && !props.data) {
+            const orderNumber = props.orderNumber;
+            fetchOrderConfirmationDetails({
+                variables: {
+                    orderNumber
+                }
+            });
+        }
+
+        dispatch(setUserOnOrderSuccess(true));
+
+        return () => {
+            // Reset the flag when leaving the page
+            dispatch(setUserOnOrderSuccess(false));
+        };
+    }, [
+        props.orderNumber,
+        props.data,
+        fetchOrderConfirmationDetails,
+        dispatch
+    ]);
+
     return {
-        flatData: flatten(data),
-        isSignedIn
+        flatData,
+        isSignedIn,
+        error,
+        loading
     };
 };

package/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -7,6 +7,8 @@ import {
 } from '@apollo/client';
 import { useEventingContext } from '../../context/eventing';
 
+import { useHistory } from 'react-router-dom';
+
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
 
@@ -68,8 +70,8 @@ export const CHECKOUT_STEP = {
  * }
  */
 export const useCheckoutPage = (props = {}) => {
+    const history = useHistory();
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-
     const {
         createCartMutation,
         getCheckoutDetailsQuery,
@@ -249,6 +251,7 @@ export const useCheckoutPage = (props = {}) => {
         });
         setPlaceOrderButtonClicked(true);
         setIsPlacingOrder(true);
+        localStorage.setItem('orderCount', '1');
     }, [cartId, getOrderDetails]);
 
     const handlePlaceOrderEnterKeyPress = useCallback(() => {
@@ -383,6 +386,16 @@ export const useCheckoutPage = (props = {}) => {
         isPlacingOrder,
         reviewOrderButtonClicked
     ]);
+    useEffect(() => {
+        if (isSignedIn && placeOrderData) {
+            history.push('/order-confirmation', {
+                orderNumber: placeOrderData.placeOrder.order.order_number,
+                items: cartItems
+            });
+        } else if (!isSignedIn && placeOrderData) {
+            history.push('/checkout');
+        }
+    }, [isSignedIn, placeOrderData, cartItems, history]);
 
     return {
         activeContent,

package/lib/talons/CreateAccount/createAccount.gql.js

@@ -24,6 +24,7 @@ export const CREATE_ACCOUNT = gql`
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             customer {
                 email
+                is_confirmed
             }
         }
     }

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -10,6 +10,12 @@ import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 import { useEventingContext } from '../../context/eventing';
+import { useHistory, useLocation } from 'react-router-dom';
+
+/**
+ * Routes to redirect from if used to create an account.
+ */
+const REDIRECT_FOR_ROUTES = ['/checkout', '/order-confirmation'];
 
 /**
  * Returns props necessary to render CreateAccount component. In particular this
@@ -47,7 +53,7 @@ export const useCreateAccount = props => {
         { createCart, removeCart, getCartDetails }
     ] = useCartContext();
     const [
-        { isGettingDetails },
+        { isGettingDetails, userOnOrderSuccess },
         { getUserDetails, setToken }
     ] = useUserContext();
 
@@ -112,6 +118,9 @@ export const useCreateAccount = props => {
         };
     }, [handleCancel]);
 
+    const history = useHistory();
+    const location = useLocation();
+
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
@@ -188,6 +197,13 @@ export const useCreateAccount = props => {
                 if (onSubmit) {
                     onSubmit();
                 }
+
+                if (
+                    userOnOrderSuccess &&
+                    REDIRECT_FOR_ROUTES.includes(location.pathname)
+                ) {
+                    history.push('/account-information');
+                }
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -213,7 +229,10 @@ export const useCreateAccount = props => {
             getCartDetails,
             fetchCartDetails,
             onSubmit,
-            dispatch
+            dispatch,
+            history,
+            location.pathname,
+            userOnOrderSuccess
         ]
     );
 

package/lib/talons/FilterModal/helpers.js

@@ -54,7 +54,7 @@ export const getStateFromSearch = (initialValue, filterKeys, filterItems) => {
 
                 if (existingFilter) {
                     items.add(existingFilter);
-                } else {
+                } else if (group !== 'price') {
                     console.warn(
                         `Existing filter ${value} not found in possible filters`
                     );

package/lib/talons/FilterModal/useFilterBlock.js

@@ -1,13 +1,20 @@
 import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 
 export const useFilterBlock = props => {
-    const { filterState, items, initialOpen } = props;
+    const { filterState, items, initialOpen, group } = props;
+    const location = useLocation();
 
     const hasSelected = useMemo(() => {
+        const params = new URLSearchParams(location.search);
+        //expansion of price filter dropdown
+        if (group == 'price') {
+            return params.get('price[filter]') ? true : false;
+        }
         return items.some(item => {
             return filterState && filterState.has(item);
         });
-    }, [filterState, items]);
+    }, [filterState, items, group, location.search]);
 
     const [isExpanded, setExpanded] = useState(hasSelected || initialOpen);
 

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -182,9 +182,10 @@ export const useFilterSidebar = props => {
     }, [handleClose]);
 
     const handleReset = useCallback(() => {
-        filterApi.clear();
-        setIsApplying(true);
-    }, [filterApi, setIsApplying]);
+        //filterApi.clear();
+        //setIsApplying(true);
+        history.replace({ search: 'page=1' });
+    }, [history]);
 
     const handleKeyDownActions = useCallback(
         event => {

package/lib/talons/FormError/useFormError.js

@@ -14,7 +14,23 @@ export const useFormError = props => {
                   defaultMessage:
                       'An error has occurred. Please check the input and try again.'
               });
-        return deriveErrorMessage(errors, defaultErrorMessage);
+
+        const firstError = errors
+            .filter(error => error !== null || undefined)
+            .map(error => (Array.isArray(error) ? error[0] : error))
+            .find(message => message);
+        var graphqlErrorMessage;
+
+        if (firstError) {
+            graphqlErrorMessage = formatMessage({
+                id: 'formError.responseError',
+                defaultMessage: firstError.message
+            });
+        }
+
+        return graphqlErrorMessage
+            ? deriveErrorMessage(errors, graphqlErrorMessage)
+            : deriveErrorMessage(errors, defaultErrorMessage);
     }, [errors, formatMessage, allowErrorMessages]);
 
     return {

package/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -11,7 +11,7 @@ export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
 `;
 
 export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
-    query GetProductThumbnailsByURLKey($urlKeys: [String!]!) {
+    query GetProductThumbnailsByURLKey($urlKeys: [String]!) {
         products(filter: { url_key: { in: $urlKeys } }) {
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {

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

@@ -1,10 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
-    query getProductFiltersByCategory(
-        $categoryIdFilter: FilterEqualTypeInput!
-    ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+    query getProductFiltersByCategory($filters: ProductAttributeFilterInput!) {
+        products(filter: $filters) {
             aggregations {
                 label
                 count

package/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
@@ -29,6 +29,92 @@ export const useCategoryContent = props => {
         getCategoryAvailableSortMethodsQuery
     } = operations;
 
+    const [
+        getFiltersAttributeCode,
+        { data: filterAttributeData }
+    ] = useLazyQuery(getProductFiltersByCategoryQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    useEffect(() => {
+        if (categoryId) {
+            getFiltersAttributeCode({
+                variables: {
+                    filters: {
+                        category_uid: { eq: categoryId }
+                    }
+                }
+            });
+        }
+    }, [categoryId, getFiltersAttributeCode]);
+
+    const availableFilterData = filterAttributeData
+        ? filterAttributeData.products?.aggregations
+        : null;
+    const availableFilters = availableFilterData
+        ?.map(eachitem => eachitem.attribute_code)
+        ?.sort();
+
+    const handlePriceFilter = priceFilter => {
+        if (priceFilter && priceFilter.size > 0) {
+            for (const price of priceFilter) {
+                const [from, to] = price.value.split('_');
+                return { price: { from, to } };
+            }
+        }
+        return {};
+    };
+
+    const [filterOptions, setFilterOptions] = useState();
+
+    const selectedFilters = useMemo(() => {
+        const filters = {};
+        if (filterOptions) {
+            for (const [group, items] of filterOptions.entries()) {
+                availableFilters?.map(eachitem => {
+                    if (eachitem === group && group !== 'price') {
+                        const sampleArray = [];
+                        for (const item of items) {
+                            sampleArray.push(item.value);
+                        }
+                        filters[group] = sampleArray;
+                    }
+                });
+            }
+        }
+
+        if (filterOptions && filterOptions.has('price')) {
+            const priceFilter = filterOptions.get('price');
+            const priceRange = handlePriceFilter(priceFilter);
+            if (priceRange.price) {
+                filters.price = priceRange.price;
+            }
+        }
+
+        return filters;
+    }, [filterOptions, availableFilters]);
+
+    const dynamicQueryVariables = useMemo(() => {
+        const generateDynamicFiltersQuery = filterParams => {
+            let filterConditions = {
+                category_uid: { eq: categoryId }
+            };
+
+            Object.keys(filterParams).forEach(key => {
+                let filter = {};
+                if (key !== 'price') {
+                    filter = { [key]: { in: filterParams[key] } };
+                }
+                filterConditions = { ...filterConditions, ...filter };
+            });
+
+            return filterConditions;
+        };
+
+        return generateDynamicFiltersQuery(selectedFilters);
+    }, [selectedFilters, categoryId]);
+
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
 
     const [getFilters, { data: filterData }] = useLazyQuery(
@@ -60,18 +146,26 @@ export const useCategoryContent = props => {
     );
 
     const [, { dispatch }] = useEventingContext();
-
+    const [previousFilters, setPreviousFilters] = useState(null);
     useEffect(() => {
-        if (categoryId) {
+        if (
+            categoryId &&
+            JSON.stringify(selectedFilters) !== JSON.stringify(previousFilters)
+        ) {
             getFilters({
                 variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
+                    filters: dynamicQueryVariables
                 }
             });
+            setPreviousFilters(selectedFilters);
         }
-    }, [categoryId, getFilters]);
+    }, [
+        categoryId,
+        selectedFilters,
+        dynamicQueryVariables,
+        previousFilters,
+        getFilters
+    ]);
 
     useEffect(() => {
         if (categoryId) {
@@ -85,7 +179,7 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
-    const filters = filterData ? filterData.products.aggregations : null;
+    const filters = filterData ? filterData.products?.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
         ? data.products.page_info.total_pages
@@ -104,7 +198,7 @@ export const useCategoryContent = props => {
         : null;
 
     useEffect(() => {
-        if (!categoryLoading && categoryData.categories.items.length > 0) {
+        if (!categoryLoading && categoryData?.categories.items.length > 0) {
             dispatch({
                 type: 'CATEGORY_PAGE_VIEW',
                 payload: {
@@ -122,6 +216,8 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        filterOptions,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData

package/lib/talons/SignIn/useSignIn.js

@@ -10,10 +10,15 @@ import { retrieveCartId } from '../../store/actions/cart';
 
 import DEFAULT_OPERATIONS from './signIn.gql';
 import { useEventingContext } from '../../context/eventing';
+import { useHistory, useLocation } from 'react-router-dom';
+
+/**
+ * Routes to redirect from if used to create an account.
+ */
+const REDIRECT_FOR_ROUTES = ['/checkout', '/order-confirmation'];
 
 export const useSignIn = props => {
     const {
-        handleTriggerClick,
         getCartDetailsQuery,
         setDefaultUsername,
         showCreateAccount,
@@ -40,7 +45,7 @@ export const useSignIn = props => {
 
     const userContext = useUserContext();
     const [
-        { isGettingDetails, getDetailsError },
+        { isGettingDetails, getDetailsError, userOnOrderSuccess },
         { getUserDetails, setToken }
     ] = userContext;
 
@@ -83,10 +88,12 @@ export const useSignIn = props => {
     const formApiRef = useRef(null);
     const setFormApi = useCallback(api => (formApiRef.current = api), []);
 
+    const history = useHistory();
+    const location = useLocation();
+
     const handleSubmit = useCallback(
         async ({ email, password }) => {
             setIsSigningIn(true);
-            handleTriggerClick();
 
             try {
                 // Get source cart id (guest cart id).
@@ -144,6 +151,13 @@ export const useSignIn = props => {
                 });
 
                 getCartDetails({ fetchCartId, fetchCartDetails });
+
+                if (
+                    userOnOrderSuccess &&
+                    REDIRECT_FOR_ROUTES.includes(location.pathname)
+                ) {
+                    history.push('/order-history');
+                }
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -168,7 +182,9 @@ export const useSignIn = props => {
             getCartDetails,
             fetchCartDetails,
             dispatch,
-            handleTriggerClick
+            history,
+            location.pathname,
+            userOnOrderSuccess
         ]
     );
 

package/lib/util/htmlStringImgUrlConverter.js

@@ -1,6 +1,6 @@
 import makeUrl from './makeUrl';
 import resolveLinkProps from './resolveLinkProps';
-
+import DOMPurify from 'dompurify';
 /**
  * Modifies html string images to use makeUrl as source and resolves links to use internal path.
  *
@@ -9,7 +9,7 @@ import resolveLinkProps from './resolveLinkProps';
  */
 const htmlStringImgUrlConverter = htmlString => {
     const temporaryElement = document.createElement('div');
-    temporaryElement.innerHTML = htmlString;
+    temporaryElement.innerHTML = DOMPurify.sanitize(htmlString);
     for (const imgElement of temporaryElement.getElementsByTagName('img')) {
         imgElement.src = makeUrl(imgElement.src, {
             type: 'image-wysiwyg',

package/lib/util/images.js

@@ -1,4 +1,4 @@
 // 4x5 transparent svg
 // svg source = <svg xmlns='http://www.w3.org/2000/svg' width='4' height='5'><rect width='4' height='5' style='fill: none' /></svg>
 export const transparentPlaceholder =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg==';
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "14.4.1",
+  "version": "14.5.1-alpha.4",
   "publishConfig": {
     "access": "public"
   },