From df9e0b9d0725266b817cff3893134a37496127dd Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:29:04 +0530
Subject: [PATCH 01/10] Pwa 3401::https://jira.corp.adobe.com/browse/PWA-3401
 (#4374)

* Update htmlStringImgUrlConverter.js

* Update dependencies package.json

* some fix

* PWA-3401::Update DOM Text Interpreted As HTML in PWA Code where ever it is needed

---------

Co-authored-by: Shivam7-1 <55046031+Shivam7-1@users.noreply.github.com>
---
 package.json                                           |  3 ++-
 .../lib/ContentTypes/Block/configAggregator.js         | 10 +++++++++-
 .../peregrine/lib/util/htmlStringImgUrlConverter.js    |  4 ++--
 .../src/fixtures/googleMapApi/index.js                 |  5 ++++-
 yarn.lock                                              |  5 +++++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 31a55218a0..43d3b4f1a7 100755
--- a/package.json
+++ b/package.json
@@ -49,7 +49,8 @@
     "caniuse-lite": "~1.0.30001335",
     "path-to-regexp": "^8.2.0",
     "qs": "^6.13.0",
-    "setimmediate": "^1.0.5"
+    "setimmediate": "^1.0.5",
+    "dompurify": "^2.3.8"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "~7.4.4",
diff --git a/packages/pagebuilder/lib/ContentTypes/Block/configAggregator.js b/packages/pagebuilder/lib/ContentTypes/Block/configAggregator.js
index 709260d5df..9830d5bd62 100644
--- a/packages/pagebuilder/lib/ContentTypes/Block/configAggregator.js
+++ b/packages/pagebuilder/lib/ContentTypes/Block/configAggregator.js
@@ -1,8 +1,16 @@
+import DOMPurify from 'dompurify';
 import { getAdvanced } from '../../utils';
 
 export default node => {
+    // Get the raw HTML content from the first child node
+    const rawHTML = node.childNodes[0] ? node.childNodes[0].innerHTML : '';
+
+    // Sanitize the raw HTML using DOMPurify
+    const sanitizedHTML = DOMPurify.sanitize(rawHTML);
+
     return {
-        richContent: node.childNodes[0] ? node.childNodes[0].innerHTML : '',
+        // Return the sanitized HTML content, along with the result from getAdvanced
+        richContent: sanitizedHTML,
         ...getAdvanced(node)
     };
 };
diff --git a/packages/peregrine/lib/util/htmlStringImgUrlConverter.js b/packages/peregrine/lib/util/htmlStringImgUrlConverter.js
index 96779fb97c..26631fa253 100644
--- a/packages/peregrine/lib/util/htmlStringImgUrlConverter.js
+++ b/packages/peregrine/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',
diff --git a/venia-integration-tests/src/fixtures/googleMapApi/index.js b/venia-integration-tests/src/fixtures/googleMapApi/index.js
index b633c5f97b..203b1c4df0 100644
--- a/venia-integration-tests/src/fixtures/googleMapApi/index.js
+++ b/venia-integration-tests/src/fixtures/googleMapApi/index.js
@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 export const createGoogleMapApi = currentMapApi => {
     return {
         maps: {
@@ -85,7 +86,9 @@ export const createGoogleMapApi = currentMapApi => {
 
                 open(map) {
                     map.infoWindowContainer.style.maxWidth = this.maxWidth;
-                    map.infoWindowContainer.innerHTML = this.content;
+                    map.infoWindowContainer.innerHTML = DOMPurify.sanitize(
+                        this.content
+                    );
                 }
 
                 close() {
diff --git a/yarn.lock b/yarn.lock
index 6e8fbe3edc..8ee6efba9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8939,6 +8939,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^2.3.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.8.tgz#2809d89d7e528dc7a071dea440d7376df676f824"
+  integrity sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"

From 4117fbd062f5a5cdd2eb5cd36a03380b0c632a77 Mon Sep 17 00:00:00 2001
From: Bharathidasan Elangovan <del22123@adobe.com>
Date: Mon, 3 Feb 2025 17:32:02 +0530
Subject: [PATCH 02/10] Changed filters of aggregations query in PLP (#4362)

* Changed filters of aggregations query in PLP

* Refactored code to fix lint,prettier and test script issues

* PWA-3363::Layered-nav-changes

* PWA-3363::Layered-nav-changes

---------

Co-authored-by: glo82145 <glo82145@adobe.com>
---
 .../useCategoryContent.spec.js.snap           |   4 +
 .../__tests__/useCategoryContent.spec.js      |  24 +++-
 .../Category/categoryContent.gql.js           |   6 +-
 .../Category/useCategoryContent.js            | 114 ++++++++++++++++--
 .../Category/categoryContent.js               |   3 +-
 .../__tests__/filterSidebar.spec.js           |  14 ++-
 .../components/FilterSidebar/filterSidebar.js |  10 +-
 7 files changed, 150 insertions(+), 25 deletions(-)

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
index 8aa379def7..9ddebf6b30 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
@@ -5,6 +5,7 @@ Object {
   "availableSortMethods": null,
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
+  "filterOptions": undefined,
   "filters": null,
   "items": Array [
     null,
@@ -17,6 +18,7 @@ Object {
     null,
     null,
   ],
+  "setFilterOptions": [Function],
   "totalCount": null,
   "totalPagesFromData": null,
 }
@@ -32,6 +34,7 @@ Object {
   ],
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
+  "filterOptions": undefined,
   "filters": Array [
     Object {
       "label": "Label",
@@ -47,6 +50,7 @@ Object {
       "name": "Necklace",
     },
   ],
+  "setFilterOptions": [Function],
   "totalCount": 2,
   "totalPagesFromData": 1,
 }
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
index d22cfd685a..02f263a747 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js
@@ -26,6 +26,18 @@ jest.mock('@apollo/client', () => {
     };
 });
 
+const mockGetFiltersAttributeCode = {
+    data: {
+        products: {
+            aggregations: [
+                {
+                    label: 'Label'
+                }
+            ]
+        }
+    }
+};
+
 const mockProductFiltersByCategoryData = {
     data: {
         products: {
@@ -91,6 +103,7 @@ const mockCategoryData = {
 
 const mockGetSortMethods = jest.fn();
 const mockGetFilters = jest.fn();
+const mockfilterData = jest.fn();
 
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
@@ -98,7 +111,6 @@ jest.mock('@magento/peregrine/lib/context/eventing', () => ({
 
 const Component = props => {
     const talonprops = useCategoryContent(props);
-
     return <i {...talonprops} />;
 };
 
@@ -106,17 +118,18 @@ useQuery.mockReturnValue({ data: mockCategoryData });
 describe('useCategoryContent tests', () => {
     it('returns the proper shape', () => {
         useLazyQuery
+            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData
             ])
             .mockReturnValueOnce([mockGetSortMethods, mockSortData]);
-        const rendered = createTestInstance(<Component {...mockProps} />);
-
+        const testProps = Object.assign({}, mockProps, {
+            categoryId: 0
+        });
+        const rendered = createTestInstance(<Component {...testProps} />);
         const talonProps = rendered.root.findByType('i').props;
 
-        expect(mockGetFilters).toHaveBeenCalled();
-        expect(mockGetSortMethods).toHaveBeenCalled();
         expect(useQuery).toHaveBeenCalled();
         expect(useLazyQuery).toHaveBeenCalled();
         expect(talonProps).toMatchSnapshot();
@@ -124,6 +137,7 @@ describe('useCategoryContent tests', () => {
 
     it('handles default category id', () => {
         useLazyQuery
+            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
index 16e42557c4..eb7a7e36fa 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
+++ b/packages/peregrine/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
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index fde9369c5a..659fdb400a 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/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
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index c3cbd4eb2e..d47c763499 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -50,6 +50,7 @@ const CategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData
@@ -79,7 +80,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
+        <FilterSidebar filters={filters} setFilterOptions={setFilterOptions} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
diff --git a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
index 9fafd2bbf0..2c4e635dad 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
@@ -51,6 +51,8 @@ const mockHandleApply = jest.fn();
 
 const mockScrollTo = jest.fn();
 
+const mockFilterOptions = jest.fn();
+
 const mockGetBoundingClientRect = jest.fn();
 
 let mockFilterState;
@@ -125,7 +127,8 @@ const Component = () => {
 
 const givenDefaultValues = () => {
     inputProps = {
-        filters: []
+        filters: [],
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map();
@@ -133,13 +136,15 @@ const givenDefaultValues = () => {
 
 const givenFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 };
 
 const givenSelectedFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map([['group', 'item']]);
@@ -148,7 +153,8 @@ const givenSelectedFilters = () => {
 const givenFiltersAndAmountToShow = () => {
     inputProps = {
         filters: mockFilters,
-        filterCountToOpen: mockFiltersOpenCount
+        filterCountToOpen: mockFiltersOpenCount,
+        setFilterOptions: mockFilterOptions
     };
 };
 
diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
index 4fa266eb8a..59a564a2d8 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
@@ -17,7 +17,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const { filters, filterCountToOpen, setFilterOptions } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -50,6 +50,12 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    useEffect(() => {
+        if (filterState) {
+            setFilterOptions(filterState);
+        }
+    }, [filterState, setFilterOptions]);
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

From 071fc58b871d897692f090a43dc02265807ac6b7 Mon Sep 17 00:00:00 2001
From: Ilesh Tiwari <del15881@adobe.com>
Date: Wed, 5 Feb 2025 15:33:27 +0530
Subject: [PATCH 03/10] New Commit to Create NEW PR with Latest Develop (#4385)

* New Commit to Create NEW PR with Latest Develop

* Fixing Prettier Issues
---
 .../README.md                                 | 10 +++
 .../intercept.js                              | 41 ++++++++++
 .../package.json                              | 27 +++++++
 .../__snapshots__/cashondelivery.spec.js.snap | 12 +++
 .../__snapshots__/editcod.spec.js.snap        | 15 ++++
 .../__snapshots__/summarycod.spec.js.snap     | 67 ++++++++++++++++
 .../__tests__/cashondelivery.spec.js          | 35 ++++++++
 .../src/components/__tests__/editcod.spec.js  | 30 +++++++
 .../components/__tests__/summarycod.spec.js   | 30 +++++++
 .../src/components/cashondelivery.js          | 46 +++++++++++
 .../src/components/cashondelivery.module.css  |  3 +
 .../src/components/editcod.js                 | 47 +++++++++++
 .../src/components/summary.module.css         | 42 ++++++++++
 .../src/components/summarycod.js              | 72 +++++++++++++++++
 .../src/talons/cashondelivery.gql.js          | 24 ++++++
 .../src/talons/useCashondelivery.js           | 80 +++++++++++++++++++
 16 files changed, 581 insertions(+)
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/README.md
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/intercept.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/package.json
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/summary.module.css
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/components/summarycod.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/talons/cashondelivery.gql.js
 create mode 100644 packages/extensions/venia-sample-payments-cashondelivery/src/talons/useCashondelivery.js

diff --git a/packages/extensions/venia-sample-payments-cashondelivery/README.md b/packages/extensions/venia-sample-payments-cashondelivery/README.md
new file mode 100644
index 0000000000..b0aa937037
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/README.md
@@ -0,0 +1,10 @@
+# venia-sample-payments-cashondelivery
+
+This package provides the `Cash On Delivery` payment method for Venia.
+
+## Installation
+
+To install this extension, add it as a `devDependency` to your app.
+project:
+
+`yarn add -D @magento/venia-sample-payments-cashondelivery`
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/intercept.js b/packages/extensions/venia-sample-payments-cashondelivery/intercept.js
new file mode 100644
index 0000000000..1042660671
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/intercept.js
@@ -0,0 +1,41 @@
+module.exports = targets => {
+    const { specialFeatures } = targets.of('@magento/pwa-buildpack');
+    specialFeatures.tap(flags => {
+        /**
+         *  Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
+         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
+         */
+        flags[targets.name] = {
+            esModules: true,
+            cssModules: true,
+            graphqlQueries: true
+        };
+    });
+
+    const {
+        checkoutPagePaymentTypes,
+        editablePaymentTypes,
+        summaryPagePaymentTypes
+    } = targets.of('@magento/venia-ui');
+    checkoutPagePaymentTypes.tap(payments =>
+        payments.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/cashondelivery.js'
+        })
+    );
+    editablePaymentTypes.tap(editablePaymentTypes => {
+        editablePaymentTypes.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/editcod.js'
+        });
+    });
+    summaryPagePaymentTypes.tap(paymentSummaries =>
+        paymentSummaries.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/summarycod.js'
+        })
+    );
+};
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/package.json b/packages/extensions/venia-sample-payments-cashondelivery/package.json
new file mode 100644
index 0000000000..eb3b7f2d06
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@magento/venia-sample-payments-cashondelivery",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Provides demo Cash On Delivery Payment Method for PWA Studio.",
+  "main": "./intercept.js",
+  "scripts": {
+    "clean": " "
+  },
+  "repository": "github:magento/pwa-studio",
+  "license": "(OSL-3.0 OR AFL-3.0)",
+  "peerDependencies": {
+    "@magento/peregrine": "~14.4.1",
+    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/venia-ui": "~11.5.0",
+    "react": "~17.0.1",
+    "react-intl": "~5.20.0",
+    "react-router-dom": "~5.2.0"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept"
+    }
+  }
+}
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap
new file mode 100644
index 0000000000..4849002e4c
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/cashondelivery.spec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render CashOnDelivery component correctly`] = `
+<div
+  className="cod_root"
+>
+  <mock-BillingAddress
+    onBillingAddressChangedError={[MockFunction]}
+    onBillingAddressChangedSuccess={[MockFunction]}
+  />
+</div>
+`;
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap
new file mode 100644
index 0000000000..83573fbdbc
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <mock-CashOnDelivery
+    onPaymentError={[MockFunction onPaymentError]}
+    onPaymentReady={[MockFunction onPaymentReady]}
+    onPaymentSuccess={[MockFunction onPaymentSuccess]}
+    resetShouldSubmit={[MockFunction resetShouldSubmit]}
+    shouldSubmit={false}
+  />
+</div>
+`;
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap
new file mode 100644
index 0000000000..26fcf254fd
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="heading_container"
+  >
+    <h5
+      className="heading"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Payment Information"
+        id="checkoutPage.paymentInformation"
+      />
+    </h5>
+    <mock-LinkButton
+      className="edit_button"
+      onClick={[MockFunction onEdit]}
+      type="button"
+    >
+      <mock-Icon
+        classes={
+          Object {
+            "icon": "edit_icon",
+          }
+        }
+        size={16}
+        src={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "color": [Function],
+              "size": [Function],
+            },
+            "render": [Function],
+          }
+        }
+      />
+      <span
+        className="edit_text"
+      >
+        <div
+          componentName="Formatted Message Component"
+          defaultMessage="Edit"
+          id="global.editButton"
+        />
+      </span>
+    </mock-LinkButton>
+  </div>
+  <div
+    className="cod_details_container"
+  >
+    <span
+      className="payment_type"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Cash On Delivery"
+        id="CashOnDelivery.paymentType"
+      />
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js
new file mode 100644
index 0000000000..b5054f9207
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/cashondelivery.spec.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { useCashondelivery } from '../../talons/useCashondelivery';
+
+import CashOnDelivery from '../cashondelivery';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../../talons/useCashondelivery', () => {
+    return {
+        useCashondelivery: jest.fn().mockReturnValue({
+            onBillingAddressChangedError: jest.fn(),
+            onBillingAddressChangedSuccess: jest.fn()
+        })
+    };
+});
+
+jest.mock(
+    '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress',
+    () => props => <mock-BillingAddress {...props} />
+);
+
+const useCashondeliveryReturnValue = {
+    onBillingAddressChangedError: jest.fn(),
+    onBillingAddressChangedSuccess: jest.fn()
+};
+
+test('Should render CashOnDelivery component correctly', () => {
+    useCashondelivery.mockReturnValueOnce({
+        ...useCashondeliveryReturnValue
+    });
+
+    const tree = createTestInstance(<CashOnDelivery />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js
new file mode 100644
index 0000000000..0e02cbe5f9
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import EditCod from '../editcod';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../cashondelivery', () => props => (
+    <mock-CashOnDelivery {...props} />
+));
+
+const mocks = {
+    onPaymentReady: jest.fn().mockName('onPaymentReady'),
+    onPaymentSuccess: jest.fn().mockName('onPaymentSuccess'),
+    onPaymentError: jest.fn().mockName('onPaymentError'),
+    resetShouldSubmit: jest.fn().mockName('resetShouldSubmit')
+};
+
+test('renders correctly', () => {
+    // Arrange.
+    const props = {
+        ...mocks,
+        shouldSubmit: false
+    };
+
+    // Act.
+    const tree = createTestInstance(<EditCod {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js
new file mode 100644
index 0000000000..8cdf105c3d
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import SummaryCod from '../summarycod';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('react-intl', () => ({
+    FormattedMessage: props => (
+        <div componentName="Formatted Message Component" {...props} />
+    )
+}));
+jest.mock('@magento/venia-ui/lib/components/LinkButton', () => props => (
+    <mock-LinkButton {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/Icon', () => props => (
+    <mock-Icon {...props} />
+));
+
+test('renders correctly', () => {
+    // Arrange.
+    const props = {
+        onEdit: jest.fn().mockName('onEdit')
+    };
+
+    // Act.
+    const tree = createTestInstance(<SummaryCod {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js
new file mode 100644
index 0000000000..7f892d9b2e
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { shape, string, bool, func } from 'prop-types';
+import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
+import { useCashondelivery } from '../talons/useCashondelivery';
+import defaultClasses from './cashondelivery.module.css';
+
+/**
+ * The CashOnDelivery component renders all information to handle cashondelivery payment.
+ *
+ * @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
+ * @param {Function} props.onPaymentSuccess callback to invoke when the a payment nonce has been generated
+ * @param {Function} props.onPaymentReady callback to invoke when the component is ready
+ * @param {Function} props.onPaymentError callback to invoke when component throws an error
+ * @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
+ */
+const CashOnDelivery = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        onBillingAddressChangedError,
+        onBillingAddressChangedSuccess
+    } = useCashondelivery(props);
+
+    return (
+        <div className={classes.cod_root}>
+            <BillingAddress
+                resetShouldSubmit={props.resetShouldSubmit}
+                shouldSubmit={props.shouldSubmit}
+                onBillingAddressChangedError={onBillingAddressChangedError}
+                onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}
+            />
+        </div>
+    );
+};
+
+CashOnDelivery.propTypes = {
+    classes: shape({ root: string }),
+    shouldSubmit: bool.isRequired,
+    onPaymentSuccess: func,
+    onPaymentReady: func,
+    onPaymentError: func,
+    resetShouldSubmit: func.isRequired
+};
+
+export default CashOnDelivery;
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css b/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css
new file mode 100644
index 0000000000..7fa00f61cd
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css
@@ -0,0 +1,3 @@
+.cod_root {
+    padding-top: 1.125rem;
+}
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js
new file mode 100644
index 0000000000..4c2a7ec7f7
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { shape, string, bool, func } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import CashOnDelivery from './cashondelivery';
+import defaultClasses from './cashondelivery.module.css';
+
+/**
+ * The edit view for the Cod payment method.
+ */
+const EditCod = props => {
+    const {
+        onPaymentReady,
+        onPaymentSuccess,
+        onPaymentError,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <CashOnDelivery
+                onPaymentReady={onPaymentReady}
+                onPaymentSuccess={onPaymentSuccess}
+                onPaymentError={onPaymentError}
+                resetShouldSubmit={resetShouldSubmit}
+                shouldSubmit={shouldSubmit}
+            />
+        </div>
+    );
+};
+
+export default EditCod;
+
+EditCod.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onPaymentReady: func.isRequired,
+    onPaymentSuccess: func.isRequired,
+    onPaymentError: func.isRequired,
+    resetShouldSubmit: func.isRequired,
+    shouldSubmit: bool
+};
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/summary.module.css b/packages/extensions/venia-sample-payments-cashondelivery/src/components/summary.module.css
new file mode 100644
index 0000000000..179532469f
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/summary.module.css
@@ -0,0 +1,42 @@
+.root {
+    display: grid;
+    gap: 1.125rem;
+    padding: 2rem;
+}
+
+.heading_container {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr;
+}
+
+.heading {
+    font-weight: 600;
+}
+
+.edit_button {
+    color: rgb(var(--venia-brand-color-1-700));
+    padding: 1rem;
+    margin: -1rem;
+}
+
+.edit_icon {
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.edit_text {
+}
+
+.cod_details_container {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.payment_type {
+}
+
+@media screen(-lg) {
+    .edit_text {
+        display: none;
+    }
+}
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/components/summarycod.js b/packages/extensions/venia-sample-payments-cashondelivery/src/components/summarycod.js
new file mode 100644
index 0000000000..346514048d
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/components/summarycod.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { func, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Edit2 as EditIcon } from 'react-feather';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+
+import defaultClasses from './summary.module.css';
+
+/**
+ * The SummaryCod component of the Cash On Delivery payment method extension.
+ */
+const SummaryCod = props => {
+    const { onEdit } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.heading_container}>
+                <h5 className={classes.heading}>
+                    <FormattedMessage
+                        id={'checkoutPage.paymentInformation'}
+                        defaultMessage={'Payment Information'}
+                    />
+                </h5>
+                <LinkButton
+                    className={classes.edit_button}
+                    onClick={onEdit}
+                    type="button"
+                >
+                    <Icon
+                        size={16}
+                        src={EditIcon}
+                        classes={{ icon: classes.edit_icon }}
+                    />
+                    <span className={classes.edit_text}>
+                        <FormattedMessage
+                            id={'global.editButton'}
+                            defaultMessage={'Edit'}
+                        />
+                    </span>
+                </LinkButton>
+            </div>
+            <div className={classes.cod_details_container}>
+                <span className={classes.payment_type}>
+                    <FormattedMessage
+                        id={'CashOnDelivery.paymentType'}
+                        defaultMessage={'Cash On Delivery'}
+                    />
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default SummaryCod;
+
+SummaryCod.propTypes = {
+    classes: shape({
+        root: string,
+        cod_details_container: string,
+        edit_button: string,
+        edit_icon: string,
+        edit_text: string,
+        heading_container: string,
+        heading: string,
+        payment_type: string
+    }),
+    onEdit: func
+};
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/talons/cashondelivery.gql.js b/packages/extensions/venia-sample-payments-cashondelivery/src/talons/cashondelivery.gql.js
new file mode 100644
index 0000000000..b21152799d
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/talons/cashondelivery.gql.js
@@ -0,0 +1,24 @@
+import { gql } from '@apollo/client';
+
+export const SET_COD_PAYMENT_METHOD_ON_CART = gql`
+    mutation setPaymentMethodOnCart($cartId: String!) {
+        setPaymentMethodOnCart(
+            input: {
+                cart_id: $cartId
+                payment_method: { code: "cashondelivery" }
+            }
+        ) {
+            cart {
+                id
+                selected_payment_method {
+                    code
+                    title
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    setCodPaymentMethodOnCartMutation: SET_COD_PAYMENT_METHOD_ON_CART
+};
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/src/talons/useCashondelivery.js b/packages/extensions/venia-sample-payments-cashondelivery/src/talons/useCashondelivery.js
new file mode 100644
index 0000000000..0e16ac68f4
--- /dev/null
+++ b/packages/extensions/venia-sample-payments-cashondelivery/src/talons/useCashondelivery.js
@@ -0,0 +1,80 @@
+import { useCallback, useEffect } from 'react';
+import { useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+import DEFAULT_OPERATIONS from './cashondelivery.gql';
+
+/**
+ * Talon to handle cod payment.
+ *
+ * @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
+ * @param {Function} props.onPaymentSuccess callback to invoke when the a payment nonce has been generated
+ * @param {Function} props.onPaymentError callback to invoke when component throws an error
+ * @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
+ * @param {DocumentNode} props.operations.setCodPaymentMethodOnCartMutation mutation to set cashondelivery as payment
+ *
+ * @returns {
+ *  onBillingAddressChangedError: Function,
+ *  onBillingAddressChangedSuccess: Function
+ * }
+ */
+export const useCashondelivery = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const { setCodPaymentMethodOnCartMutation } = operations;
+
+    const [{ cartId }] = useCartContext();
+
+    const { resetShouldSubmit, onPaymentSuccess, onPaymentError } = props;
+
+    const [
+        updatePaymentMethod,
+        {
+            error: paymentMethodMutationError,
+            called: paymentMethodMutationCalled,
+            loading: paymentMethodMutationLoading
+        }
+    ] = useMutation(setCodPaymentMethodOnCartMutation);
+
+    /**
+     * This function will be called if cant not set address.
+     */
+    const onBillingAddressChangedError = useCallback(() => {
+        resetShouldSubmit();
+    }, [resetShouldSubmit]);
+
+    /**
+     * This function will be called if address was successfully set.
+     */
+    const onBillingAddressChangedSuccess = useCallback(() => {
+        updatePaymentMethod({
+            variables: { cartId }
+        });
+    }, [updatePaymentMethod, cartId]);
+
+    useEffect(() => {
+        const paymentMethodMutationCompleted =
+            paymentMethodMutationCalled && !paymentMethodMutationLoading;
+
+        if (paymentMethodMutationCompleted && !paymentMethodMutationError) {
+            onPaymentSuccess();
+        }
+
+        if (paymentMethodMutationCompleted && paymentMethodMutationError) {
+            onPaymentError();
+        }
+    }, [
+        paymentMethodMutationError,
+        paymentMethodMutationLoading,
+        paymentMethodMutationCalled,
+        onPaymentSuccess,
+        onPaymentError,
+        resetShouldSubmit
+    ]);
+
+    return {
+        onBillingAddressChangedError,
+        onBillingAddressChangedSuccess
+    };
+};

From 39a2ee7ee3ca862f1007c330d5a976e1d462f1c1 Mon Sep 17 00:00:00 2001
From: Bharathidasan Elangovan <del22123@adobe.com>
Date: Wed, 5 Feb 2025 16:23:41 +0530
Subject: [PATCH 04/10] PWA-3389-Price slider implementation (#4386)

---
 .../__tests__/useFilterBlock.spec.js          |  26 +++-
 .../lib/talons/FilterModal/helpers.js         |   2 +-
 .../lib/talons/FilterModal/useFilterBlock.js  |  11 +-
 .../talons/FilterSidebar/useFilterSidebar.js  |   7 +-
 .../__tests__/currentFilter.spec.js           |   7 +-
 .../CurrentFilters/currentFilter.js           |  12 +-
 .../FilterList/__tests__/filterList.spec.js   |  19 ++-
 .../FilterModal/FilterList/filterList.js      | 112 ++++++++++-----
 .../lib/components/FilterModal/filterBlock.js |   3 +-
 .../__tests__/filterSidebar.spec.js           |  56 +++++---
 .../components/FilterSidebar/filterSidebar.js |  28 ++++
 .../lib/components/RangeSlider/rangeSlider.js | 127 ++++++++++++++++++
 .../RangeSlider/rangeSlider.module.css        |  76 +++++++++++
 13 files changed, 423 insertions(+), 63 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/RangeSlider/rangeSlider.js
 create mode 100644 packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css

diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
index 83b08a5de7..5aef1275e5 100644
--- a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
+++ b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { act } from 'react-test-renderer';
-
+import { MemoryRouter } from 'react-router-dom';
 import { createTestInstance } from '@magento/peregrine';
 import { useFilterBlock } from '../useFilterBlock';
 
@@ -56,7 +56,11 @@ describe('#useFilterBlock', () => {
     });
 
     it('is closed by default', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -66,7 +70,11 @@ describe('#useFilterBlock', () => {
 
     it('is open if passed initially open', () => {
         givenInitiallyOpen();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -76,7 +84,11 @@ describe('#useFilterBlock', () => {
 
     it('is open if items are selected', () => {
         givenSelectedItems();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(log).toHaveBeenCalledWith({
             handleClick: expect.any(Function),
@@ -85,7 +97,11 @@ describe('#useFilterBlock', () => {
     });
 
     it('can toggle visibility', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(typeof handleClickProp).toBe('function');
 
diff --git a/packages/peregrine/lib/talons/FilterModal/helpers.js b/packages/peregrine/lib/talons/FilterModal/helpers.js
index 5d3a7b163c..cd958399c2 100644
--- a/packages/peregrine/lib/talons/FilterModal/helpers.js
+++ b/packages/peregrine/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`
                     );
diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js b/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js
index 8691516d95..e6542aa943 100644
--- a/packages/peregrine/lib/talons/FilterModal/useFilterBlock.js
+++ b/packages/peregrine/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);
 
diff --git a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js
index fbcc2bce3f..688e957db3 100644
--- a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js
+++ b/packages/peregrine/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 => {
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js
index 4176744cba..def763d4f1 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -19,7 +20,11 @@ jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
 let inputProps = {};
 
 const Component = () => {
-    return <CurrentFilter {...inputProps} />;
+    return (
+        <MemoryRouter>
+            <CurrentFilter {...inputProps} />
+        </MemoryRouter>
+    );
 };
 
 const givenDefaultValues = () => {
diff --git a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
index 8578c5546d..91a42d7950 100644
--- a/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
+++ b/packages/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.js
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { shape, string, func } from 'prop-types';
 import { X as Remove } from 'react-feather';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
@@ -12,13 +13,22 @@ const CurrentFilter = props => {
     const { group, item, removeItem, onRemove } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
+    const location = useLocation();
+    const history = useHistory();
 
     const handleClick = useCallback(() => {
         removeItem({ group, item });
         if (typeof onRemove === 'function') {
             onRemove(group, item);
         }
-    }, [group, item, removeItem, onRemove]);
+
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            params.delete('price[filter]');
+            history.replace({ search: params.toString() });
+        }
+    }, [group, item, removeItem, onRemove, history, location.search]);
 
     const ariaLabel = formatMessage(
         {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js b/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js
index d13f05dec1..dba9b88aaf 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -67,7 +68,11 @@ describe('#FilterList', () => {
     });
 
     it('renders without show more button', () => {
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(root.findAllByType(FilterItem)).toHaveLength(2);
         expect(() => root.findByType('button')).toThrow();
@@ -76,7 +81,11 @@ describe('#FilterList', () => {
     it('renders with show more button', () => {
         givenShowMore();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowMore);
@@ -86,7 +95,11 @@ describe('#FilterList', () => {
         givenShowMore();
         givenExpanded();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowLess);
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
index 0acf3d07c1..e1776f0230 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useCallback } from 'react';
 import { array, func, number, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
@@ -8,6 +8,8 @@ import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import RangeSlider from '../../RangeSlider/rangeSlider';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 
@@ -22,13 +24,46 @@ const FilterList = props => {
         items,
         onApply
     } = props;
+    const { pathname, search } = useLocation();
+    const history = useHistory();
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFilterList({ filterState, items, itemCountToShow });
     const { isListExpanded, handleListToggle } = talonProps;
     const { formatMessage } = useIntl();
 
-    // memoize item creation
-    // search value is not referenced, so this array is stable
+    if (name === 'Price') {
+        var minRange = Number(items[0].value.split('_')[0]);
+        var maxRange = Number(items[items.length - 1].value.split('_')[1]);
+        if (filterState !== undefined) {
+            const filterArray = [...filterState];
+            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+        }
+    }
+
+    const handleChange = useCallback(
+        newValue => {
+            const test = String(search).split('&');
+            const filters = test.filter(element => {
+                return !element.includes('price');
+            });
+            const newSearch = filters.join('&');
+            const nextParams = new URLSearchParams(newSearch);
+
+            const DELIMITER = ',';
+            const title = String(newValue.min) + '-' + String(newValue.max);
+            const value = String(newValue.min) + '_' + String(newValue.max);
+            nextParams.append(
+                `${group}[filter]`,
+                `${title}${DELIMITER}${value}`
+            );
+
+            history.push({ pathname, search: String(nextParams) });
+        },
+        [group, history, pathname, search]
+    );
+
+    // Memoize item creation
     const itemElements = useMemo(() => {
         if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
@@ -51,36 +86,46 @@ const FilterList = props => {
             );
         }
 
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
-
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
-
-            // create an element for each item
-            const element = (
-                <li
-                    key={key}
-                    className={classes.item}
-                    data-cy="FilterList-item"
-                >
-                    <FilterItem
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        item={item}
-                        onApply={onApply}
+        if (name === 'Price') {
+            return (
+                <div className={classes.root}>
+                    <RangeSlider
+                        min={minRange}
+                        max={maxRange}
+                        initialMin={currentMinVal}
+                        initialMax={currentMaxVal}
+                        onChange={handleChange}
                     />
-                </li>
+                </div>
             );
+        } else {
+            return items.map((item, index) => {
+                const { title, value } = item;
+                const key = `item-${group}-${value}`;
+
+                if (!isListExpanded && index >= itemCountToShow) {
+                    return null;
+                }
 
-            // associate each element with its normalized title
-            // titles are not unique, so use the element as the key
-            labels.set(element, title.toUpperCase());
-            return element;
-        });
+                const element = (
+                    <li
+                        key={key}
+                        className={classes.item}
+                        data-cy="FilterList-item"
+                    >
+                        <FilterItem
+                            filterApi={filterApi}
+                            filterState={filterState}
+                            group={group}
+                            item={item}
+                            onApply={onApply}
+                        />
+                    </li>
+                );
+                labels.set(element, title.toUpperCase());
+                return element;
+            });
+        }
     }, [
         classes,
         filterApi,
@@ -91,7 +136,12 @@ const FilterList = props => {
         items,
         isListExpanded,
         itemCountToShow,
-        onApply
+        onApply,
+        minRange,
+        maxRange,
+        currentMinVal,
+        currentMaxVal,
+        handleChange
     ]);
 
     const showMoreLessItem = useMemo(() => {
diff --git a/packages/venia-ui/lib/components/FilterModal/filterBlock.js b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
index d667d98810..b961c0a3ac 100644
--- a/packages/venia-ui/lib/components/FilterModal/filterBlock.js
+++ b/packages/venia-ui/lib/components/FilterModal/filterBlock.js
@@ -28,7 +28,8 @@ const FilterBlock = props => {
     const talonProps = useFilterBlock({
         filterState,
         items,
-        initialOpen
+        initialOpen,
+        group
     });
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;
diff --git a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
index 2c4e635dad..54c5f42c2e 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -167,7 +168,11 @@ describe('#FilterSidebar', () => {
     });
 
     it('renders without filters', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(mockFilterBlock).not.toHaveBeenCalled();
         expect(mockCurrentFilters).toHaveBeenCalled();
@@ -176,7 +181,11 @@ describe('#FilterSidebar', () => {
     it('renders with filters and no selected filters', () => {
         givenFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType(LinkButton)).toThrow();
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -185,7 +194,11 @@ describe('#FilterSidebar', () => {
     it('renders with filters and selected filter', () => {
         givenSelectedFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType(LinkButton)).not.toThrow();
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -194,7 +207,11 @@ describe('#FilterSidebar', () => {
     it('handles when a user applies a filter and ref is not provided', () => {
         givenSelectedFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         act(() => {
             root.findAllByType(FilterBlock)[0].props.onApply();
@@ -212,17 +229,22 @@ describe('#FilterSidebar', () => {
             value: mockScrollTo
         });
 
-        const { root } = createTestInstance(<Component />, {
-            createNodeMock: () => {
-                return {
-                    getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
-                        {
-                            top: 250
-                        }
-                    )
-                };
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>,
+            {
+                createNodeMock: () => {
+                    return {
+                        getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
+                            {
+                                top: 250
+                            }
+                        )
+                    };
+                }
             }
-        });
+        );
 
         act(() => {
             root.findAllByType(FilterBlock)[0].props.onApply();
@@ -235,7 +257,11 @@ describe('#FilterSidebar', () => {
 
     it('accepts configurable amount of open filters', () => {
         givenFiltersAndAmountToShow();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
 
diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
index 59a564a2d8..5c4abfa6bb 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -8,6 +8,7 @@ import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
 import FilterBlock from '../FilterModal/filterBlock';
 import defaultClasses from './filterSidebar.module.css';
+import { useLocation } from 'react-router-dom';
 
 const SCROLL_OFFSET = 150;
 
@@ -31,6 +32,32 @@ const FilterSidebar = props => {
 
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
+    const location = useLocation();
+
+    //adding the price filter values to the filterstate
+    const priceFilters = Array.from(filterItems, ([group]) => {
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            const uniqueKeys = new Set(params.keys());
+            // iterate over existing param keys
+            for (const key of uniqueKeys) {
+                // if a key matches a known filter, add its items to the next state
+                if (key == 'price[filter]') {
+                    const value = params.get('price[filter]');
+                    const item = {
+                        title: value.split(',')[0],
+                        value: value.split(',')[1]
+                    };
+                    const filterVar = new Set();
+                    filterVar.add(item);
+
+                    //to display the price filter value after selecting the filter
+                    filterState.set('price', new Set(filterVar));
+                }
+            }
+        }
+    });
 
     const handleApplyFilter = useCallback(
         (...args) => {
@@ -121,6 +148,7 @@ const FilterSidebar = props => {
                         />
                     </h2>
                 </div>
+                {priceFilters}
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}
diff --git a/packages/venia-ui/lib/components/RangeSlider/rangeSlider.js b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.js
new file mode 100644
index 0000000000..6736859c90
--- /dev/null
+++ b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.js
@@ -0,0 +1,127 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import styles from './rangeSlider.module.css';
+
+const PriceRangeSlider = ({
+    min,
+    max,
+    initialMin,
+    initialMax,
+    onChange,
+    width = '300px',
+    trackColor = '#cecece',
+    rangeColor = '#2954fe'
+}) => {
+    const [minVal, setMinVal] = useState(initialMin || min);
+    const [maxVal, setMaxVal] = useState(initialMax || max);
+    const minValRef = useRef(minVal);
+    const maxValRef = useRef(maxVal);
+    const range = useRef(null);
+
+    // Convert value to percentage for positioning
+    const getPercent = useCallback(
+        value => Math.round(((value - min) / (max - min)) * 100),
+        [min, max]
+    );
+
+    // set width of the range to decrease from the left side
+    useEffect(() => {
+        const minPercent = getPercent(minVal);
+        const maxPercent = getPercent(maxValRef.current);
+
+        if (range.current) {
+            range.current.style.left = `${minPercent}%`;
+            range.current.style.width = `${maxPercent - minPercent}%`;
+        }
+    }, [minVal, getPercent]);
+
+    // set the width of the range to decrease from right side
+    useEffect(() => {
+        const minPercent = getPercent(minValRef.current);
+        const maxPercent = getPercent(maxVal);
+
+        if (range.current) {
+            range.current.style.width = `${maxPercent - minPercent}%`;
+        }
+    }, [maxVal, getPercent]);
+
+    // Handle min and max value changes
+    useEffect(() => {
+        if (minVal !== minValRef.current || maxVal !== maxValRef.current) {
+            onChange({ min: minVal, max: maxVal });
+            minValRef.current = minVal;
+            maxValRef.current = maxVal;
+        }
+    }, [minVal, maxVal, onChange]);
+
+    return (
+        <div className="w-full flex justify-center flex-col space-y-14">
+            {/* Display Price Value */}
+            <div className="w-[300px] px-4 flex justify-between gap-x-5">
+                <span>{minVal}</span>
+                <span>{maxVal}</span>
+            </div>
+
+            {/* Style the price range slider */}
+            <div className="multi-slide-input-container" style={{ width }}>
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    value={minVal}
+                    onChange={event => {
+                        const value = Math.min(
+                            Number(event.target.value),
+                            maxVal - 1
+                        );
+                        setMinVal(value);
+                    }}
+                    className={`${styles.thumb} ${styles.thumbleft}`}
+                    style={{
+                        width,
+                        zIndex:
+                            minVal > max - 100 || minVal === maxVal
+                                ? 5
+                                : undefined
+                    }}
+                />
+
+                <input
+                    type="range"
+                    min={min}
+                    max={max}
+                    value={maxVal}
+                    onChange={event => {
+                        const value = Math.max(
+                            Number(event.target.value),
+                            minVal + 1
+                        );
+                        setMaxVal(value);
+                    }}
+                    className={`${styles.thumb} ${styles.thumbright}`}
+                    style={{
+                        width,
+                        zIndex:
+                            minVal > max - 100 || minVal === maxVal
+                                ? 4
+                                : undefined
+                    }}
+                />
+
+                <div className={styles.slider}>
+                    <div
+                        style={{ backgroundColor: trackColor }}
+                        className={styles.trackslider}
+                    />
+
+                    <div
+                        ref={range}
+                        style={{ backgroundColor: rangeColor }}
+                        className={styles.rangeslider}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PriceRangeSlider;
diff --git a/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css
new file mode 100644
index 0000000000..1fe684beac
--- /dev/null
+++ b/packages/venia-ui/lib/components/RangeSlider/rangeSlider.module.css
@@ -0,0 +1,76 @@
+.slider {
+    position: relative;
+}
+
+.trackslider,
+.rangeslider {
+    position: absolute;
+}
+
+.trackslider,
+.rangeslider {
+    border-radius: 4px;
+    height: 6px;
+}
+
+.trackslider {
+    background-color: #022140;
+    width: 100%;
+    z-index: 1;
+}
+
+.rangeslider {
+    z-index: 2;
+}
+
+.thumb,
+.thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    outline: none;
+}
+
+.thumbleft {
+    z-index: 3;
+}
+
+.thumbright {
+    z-index: 4;
+}
+
+.thumb::-webkit-slider-thumb {
+    background-color: #2954fe;
+    border-radius: 50%;
+    /* box-shadow: 0 0 1px 1px #f50707; */
+    /* border: 4px solid #ff0303; */
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+    margin-top: 4.5px;
+    pointer-events: all;
+    position: relative;
+    transition: transform 0.3s ease-in-out;
+}
+
+.thumb::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.thumb::-moz-range-thumb {
+    background-color: #0a0a0a;
+    border-radius: 50%;
+    /* box-shadow: 0 0 1px 1px #f50707; */
+    border: 4px solid #ff0303;
+    cursor: pointer;
+    height: 28px;
+    width: 28px;
+    margin-top: 4.5px;
+    pointer-events: all;
+    position: relative;
+}

From 93a0a07b50c271f8c8bbbf91272a79bc34c01550 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Wed, 5 Feb 2025 19:19:56 +0530
Subject: [PATCH 05/10] Update package.json (#4388)

---
 .../gomage-plugin-braintree-three-d-secure/package.json       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index e9cf101f9e..131673884a 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
-  "version": "3.94.0",
+  "version": "0.0.1",
   "description": "GoMage Braintree 3D Secure",
   "main": "./index.js",
   "author": "GoMage",
@@ -17,4 +17,4 @@
       "intercept": "./intercept.js"
     }
   }
-}
\ No newline at end of file
+}

From 02fbe2e02d53c6d5c1671f6b767ccd7ed1ba3cc5 Mon Sep 17 00:00:00 2001
From: Bharathidasan Elangovan <del22123@adobe.com>
Date: Thu, 6 Feb 2025 12:39:28 +0530
Subject: [PATCH 06/10] Reverted package.json version of Gomage (#4392)

---
 .../gomage-plugin-braintree-three-d-secure/package.json         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index 131673884a..de57a44b0c 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
-  "version": "0.0.1",
+  "version": "3.94.0",
   "description": "GoMage Braintree 3D Secure",
   "main": "./index.js",
   "author": "GoMage",

From 6871716cefe869bdb58cd17a50dc6da7731f7225 Mon Sep 17 00:00:00 2001
From: devops-pwa-codebuild <magento-devops-github-pwa-int@adobe.com>
Date: Thu, 6 Feb 2025 07:24:59 +0000
Subject: [PATCH 07/10] v14.2.0-alpha.4

---
 package.json                                       |  6 +++---
 packages/create-pwa/package.json                   |  6 +++---
 .../experience-platform-connector/package.json     |  6 +++---
 .../package.json                                   |  3 +--
 .../upward-security-headers/package.json           |  6 +++---
 .../extensions/venia-sample-backends/package.json  |  4 ++--
 .../extensions/venia-sample-eventing/package.json  |  6 +++---
 .../venia-sample-language-packs/package.json       |  6 +++---
 .../package.json                                   |  8 ++++----
 .../venia-sample-payments-checkmo/package.json     |  8 ++++----
 packages/pagebuilder/package.json                  | 14 +++++++-------
 packages/peregrine/package.json                    |  2 +-
 packages/pwa-buildpack/package.json                |  2 +-
 packages/venia-concept/package.json                | 14 +++++++-------
 packages/venia-ui/package.json                     |  6 +++---
 pwa-devdocs/package.json                           |  2 +-
 16 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index 43d3b4f1a7..310b47b90d 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-studio",
-  "version": "14.1.0",
+  "version": "14.2.0-alpha.4",
   "private": true,
   "workspaces": [
     "packages/babel-preset-peregrine",
@@ -47,10 +47,10 @@
   },
   "dependencies": {
     "caniuse-lite": "~1.0.30001335",
+    "dompurify": "^2.3.8",
     "path-to-regexp": "^8.2.0",
     "qs": "^6.13.0",
-    "setimmediate": "^1.0.5",
-    "dompurify": "^2.3.8"
+    "setimmediate": "^1.0.5"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "~7.4.4",
diff --git a/packages/create-pwa/package.json b/packages/create-pwa/package.json
index b8a9169921..e3dd7dcdbe 100644
--- a/packages/create-pwa/package.json
+++ b/packages/create-pwa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/create-pwa",
-  "version": "2.4.6",
+  "version": "2.5.6-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/create-pwa#readme",
   "dependencies": {
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-concept": "~14.1.0",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-concept": "14.2.0-alpha.4",
     "chalk": "^2.4.2",
     "change-case": "^3.1.0",
     "compression": "~1.7.4",
diff --git a/packages/extensions/experience-platform-connector/package.json b/packages/extensions/experience-platform-connector/package.json
index d384b9a2c5..3b5d6eb865 100644
--- a/packages/extensions/experience-platform-connector/package.json
+++ b/packages/extensions/experience-platform-connector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/experience-platform-connector",
-  "version": "1.0.8",
+  "version": "1.0.9-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,8 +18,8 @@
   "devDependencies": {},
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index de57a44b0c..f8f3196390 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,13 +1,12 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
-  "version": "3.94.0",
+  "version": "3.94.0-alpha.4",
   "description": "GoMage Braintree 3D Secure",
   "main": "./index.js",
   "author": "GoMage",
   "dependencies": {
     "braintree-web-drop-in": "~1.43.0"
   },
-
   "scripts": {
     "clean": " "
   },
diff --git a/packages/extensions/upward-security-headers/package.json b/packages/extensions/upward-security-headers/package.json
index 3ee3e4be31..8f7f88f0b8 100644
--- a/packages/extensions/upward-security-headers/package.json
+++ b/packages/extensions/upward-security-headers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/upward-security-headers",
-  "version": "1.0.17",
+  "version": "1.1.17-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   "author": "Adobe Commerce",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "webpack": "~4.46.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-backends/package.json b/packages/extensions/venia-sample-backends/package.json
index 2088d3990d..51b46cab3f 100644
--- a/packages/extensions/venia-sample-backends/package.json
+++ b/packages/extensions/venia-sample-backends/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-backends",
-  "version": "0.0.11",
+  "version": "0.0.12-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +13,7 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
     "node-fetch": "~2.3.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-eventing/package.json b/packages/extensions/venia-sample-eventing/package.json
index 985db76f0f..33a100699f 100644
--- a/packages/extensions/venia-sample-eventing/package.json
+++ b/packages/extensions/venia-sample-eventing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-eventing",
-  "version": "0.0.9",
+  "version": "0.0.10-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-language-packs/package.json b/packages/extensions/venia-sample-language-packs/package.json
index 73c3a70ff5..91094e4208 100644
--- a/packages/extensions/venia-sample-language-packs/package.json
+++ b/packages/extensions/venia-sample-language-packs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-language-packs",
-  "version": "0.0.17",
+  "version": "0.0.18-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0"
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4"
   },
   "pwa-studio": {
     "targets": {
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/package.json b/packages/extensions/venia-sample-payments-cashondelivery/package.json
index eb3b7f2d06..f8b20b20c5 100644
--- a/packages/extensions/venia-sample-payments-cashondelivery/package.json
+++ b/packages/extensions/venia-sample-payments-cashondelivery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-cashondelivery",
-  "version": "0.0.1",
+  "version": "0.0.1-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/extensions/venia-sample-payments-checkmo/package.json b/packages/extensions/venia-sample-payments-checkmo/package.json
index 4c7d8cf74c..17f2ccd3ef 100644
--- a/packages/extensions/venia-sample-payments-checkmo/package.json
+++ b/packages/extensions/venia-sample-payments-checkmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-checkmo",
-  "version": "0.0.15",
+  "version": "0.0.15-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/pagebuilder/package.json b/packages/pagebuilder/package.json
index 645e457e23..3005503da3 100644
--- a/packages/pagebuilder/package.json
+++ b/packages/pagebuilder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pagebuilder",
-  "version": "9.3.2",
+  "version": "9.3.3-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/pagebuilder#readme",
   "dependencies": {},
   "devDependencies": {
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "@storybook/react": "~6.3.7",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
@@ -50,9 +50,9 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
diff --git a/packages/peregrine/package.json b/packages/peregrine/package.json
index 432a36360b..7f164df18c 100644
--- a/packages/peregrine/package.json
+++ b/packages/peregrine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "14.4.1",
+  "version": "14.5.1-alpha.4",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/pwa-buildpack/package.json b/packages/pwa-buildpack/package.json
index 30a387040f..d2f8538081 100644
--- a/packages/pwa-buildpack/package.json
+++ b/packages/pwa-buildpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-buildpack",
-  "version": "11.5.3",
+  "version": "11.5.4-alpha.4",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json
index 773fefb630..3d1565a702 100644
--- a/packages/venia-concept/package.json
+++ b/packages/venia-concept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-concept",
-  "version": "14.1.0",
+  "version": "14.2.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -35,8 +35,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
   "dependencies": {
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0",
-    "@magento/pwa-buildpack": "~11.5.3"
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4"
   },
   "devDependencies": {
     "@adobe/apollo-link-mutation-queue": "~1.0.2",
@@ -51,14 +51,14 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
     "@babel/runtime": "~7.15.3",
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0",
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.4",
     "@magento/babel-preset-peregrine": "~1.3.3",
     "@magento/eslint-config": "~1.5.0",
-    "@magento/pagebuilder": "~9.3.2",
-    "@magento/peregrine": "~14.4.1",
+    "@magento/pagebuilder": "9.3.3-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.4",
     "@magento/pwa-theme-venia": "~2.4.0",
     "@magento/upward-security-headers": "~1.0.14",
-    "@magento/venia-ui": "~11.5.0",
+    "@magento/venia-ui": "11.6.0-alpha.4",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@storybook/react": "~6.3.7",
     "@types/node": "16",
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
index c25b98268a..3cb0e073c6 100644
--- a/packages/venia-ui/package.json
+++ b/packages/venia-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.5.0",
+  "version": "11.6.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "~14.4.1",
-    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",
diff --git a/pwa-devdocs/package.json b/pwa-devdocs/package.json
index 49a7c291dc..c87b598a6d 100644
--- a/pwa-devdocs/package.json
+++ b/pwa-devdocs/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pwa-devdocs",
     "private": true,
-    "version": "14.1.0",
+    "version": "14.2.0-alpha.4",
     "description": "A documentation site for Magento PWA",
     "main": "gulpfile.js",
     "dependencies": {

From c1acd0987c0f1e3d9bcd90675c3c78fdfd3e0b9c Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Thu, 6 Feb 2025 14:15:16 +0530
Subject: [PATCH 08/10] Gomage v1 (#4393)

* Removing gomage plugin

* Removing gomage plugin

* Update package.json
---
 .../gomage-plugin-braintree-three-d-secure/package.json        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index f8f3196390..022b0b08e6 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,6 +1,9 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
   "version": "3.94.0-alpha.4",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "GoMage Braintree 3D Secure",
   "main": "./index.js",
   "author": "GoMage",

From b919daffb68f9cc9efa346df9b78e42309b62378 Mon Sep 17 00:00:00 2001
From: devops-pwa-codebuild <magento-devops-github-pwa-int@adobe.com>
Date: Thu, 6 Feb 2025 08:59:38 +0000
Subject: [PATCH 09/10] v14.2.0-alpha.5

---
 package.json                                       |  2 +-
 packages/create-pwa/package.json                   |  6 +++---
 .../experience-platform-connector/package.json     |  6 +++---
 .../package.json                                   |  2 +-
 .../upward-security-headers/package.json           |  6 +++---
 .../extensions/venia-sample-backends/package.json  |  4 ++--
 .../extensions/venia-sample-eventing/package.json  |  6 +++---
 .../venia-sample-language-packs/package.json       |  6 +++---
 .../package.json                                   |  8 ++++----
 .../venia-sample-payments-checkmo/package.json     |  8 ++++----
 packages/pagebuilder/package.json                  | 14 +++++++-------
 packages/peregrine/package.json                    |  2 +-
 packages/pwa-buildpack/package.json                |  2 +-
 packages/venia-concept/package.json                | 14 +++++++-------
 packages/venia-ui/package.json                     |  6 +++---
 pwa-devdocs/package.json                           |  2 +-
 16 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 310b47b90d..8b121b0a01 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-studio",
-  "version": "14.2.0-alpha.4",
+  "version": "14.2.0-alpha.5",
   "private": true,
   "workspaces": [
     "packages/babel-preset-peregrine",
diff --git a/packages/create-pwa/package.json b/packages/create-pwa/package.json
index e3dd7dcdbe..e2d4c50b9e 100644
--- a/packages/create-pwa/package.json
+++ b/packages/create-pwa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/create-pwa",
-  "version": "2.5.6-alpha.4",
+  "version": "2.5.6-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/create-pwa#readme",
   "dependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-concept": "14.2.0-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-concept": "14.2.0-alpha.5",
     "chalk": "^2.4.2",
     "change-case": "^3.1.0",
     "compression": "~1.7.4",
diff --git a/packages/extensions/experience-platform-connector/package.json b/packages/extensions/experience-platform-connector/package.json
index 3b5d6eb865..0f438d9f9a 100644
--- a/packages/extensions/experience-platform-connector/package.json
+++ b/packages/extensions/experience-platform-connector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/experience-platform-connector",
-  "version": "1.0.9-alpha.4",
+  "version": "1.0.9-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -18,8 +18,8 @@
   "devDependencies": {},
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index 022b0b08e6..f7ec8e5fe8 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
-  "version": "3.94.0-alpha.4",
+  "version": "3.94.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/extensions/upward-security-headers/package.json b/packages/extensions/upward-security-headers/package.json
index 8f7f88f0b8..49c71d5739 100644
--- a/packages/extensions/upward-security-headers/package.json
+++ b/packages/extensions/upward-security-headers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/upward-security-headers",
-  "version": "1.1.17-alpha.4",
+  "version": "1.1.17-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   "author": "Adobe Commerce",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "webpack": "~4.46.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-backends/package.json b/packages/extensions/venia-sample-backends/package.json
index 51b46cab3f..4904ae1e3e 100644
--- a/packages/extensions/venia-sample-backends/package.json
+++ b/packages/extensions/venia-sample-backends/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-backends",
-  "version": "0.0.12-alpha.4",
+  "version": "0.0.12-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +13,7 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
     "node-fetch": "~2.3.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-eventing/package.json b/packages/extensions/venia-sample-eventing/package.json
index 33a100699f..22b4c4fe63 100644
--- a/packages/extensions/venia-sample-eventing/package.json
+++ b/packages/extensions/venia-sample-eventing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-eventing",
-  "version": "0.0.10-alpha.4",
+  "version": "0.0.10-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-language-packs/package.json b/packages/extensions/venia-sample-language-packs/package.json
index 91094e4208..313d87f4c6 100644
--- a/packages/extensions/venia-sample-language-packs/package.json
+++ b/packages/extensions/venia-sample-language-packs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-language-packs",
-  "version": "0.0.18-alpha.4",
+  "version": "0.0.18-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4"
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5"
   },
   "pwa-studio": {
     "targets": {
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/package.json b/packages/extensions/venia-sample-payments-cashondelivery/package.json
index f8b20b20c5..bba6afcb5d 100644
--- a/packages/extensions/venia-sample-payments-cashondelivery/package.json
+++ b/packages/extensions/venia-sample-payments-cashondelivery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-cashondelivery",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/extensions/venia-sample-payments-checkmo/package.json b/packages/extensions/venia-sample-payments-checkmo/package.json
index 17f2ccd3ef..8345e7b896 100644
--- a/packages/extensions/venia-sample-payments-checkmo/package.json
+++ b/packages/extensions/venia-sample-payments-checkmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-checkmo",
-  "version": "0.0.15-alpha.4",
+  "version": "0.0.15-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/pagebuilder/package.json b/packages/pagebuilder/package.json
index 3005503da3..fff10686b7 100644
--- a/packages/pagebuilder/package.json
+++ b/packages/pagebuilder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pagebuilder",
-  "version": "9.3.3-alpha.4",
+  "version": "9.3.3-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/pagebuilder#readme",
   "dependencies": {},
   "devDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "@storybook/react": "~6.3.7",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
@@ -50,9 +50,9 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
diff --git a/packages/peregrine/package.json b/packages/peregrine/package.json
index 7f164df18c..62760cdf3b 100644
--- a/packages/peregrine/package.json
+++ b/packages/peregrine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "14.5.1-alpha.4",
+  "version": "14.5.1-alpha.5",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/pwa-buildpack/package.json b/packages/pwa-buildpack/package.json
index d2f8538081..ea9c8474d0 100644
--- a/packages/pwa-buildpack/package.json
+++ b/packages/pwa-buildpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-buildpack",
-  "version": "11.5.4-alpha.4",
+  "version": "11.5.4-alpha.5",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json
index 3d1565a702..a813ff0f88 100644
--- a/packages/venia-concept/package.json
+++ b/packages/venia-concept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-concept",
-  "version": "14.2.0-alpha.4",
+  "version": "14.2.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,8 +35,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
   "dependencies": {
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4"
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5"
   },
   "devDependencies": {
     "@adobe/apollo-link-mutation-queue": "~1.0.2",
@@ -51,14 +51,14 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
     "@babel/runtime": "~7.15.3",
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.4",
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.5",
     "@magento/babel-preset-peregrine": "~1.3.3",
     "@magento/eslint-config": "~1.5.0",
-    "@magento/pagebuilder": "9.3.3-alpha.4",
-    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pagebuilder": "9.3.3-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.5",
     "@magento/pwa-theme-venia": "~2.4.0",
     "@magento/upward-security-headers": "~1.0.14",
-    "@magento/venia-ui": "11.6.0-alpha.4",
+    "@magento/venia-ui": "11.6.0-alpha.5",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@storybook/react": "~6.3.7",
     "@types/node": "16",
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
index 3cb0e073c6..8cb786e240 100644
--- a/packages/venia-ui/package.json
+++ b/packages/venia-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.6.0-alpha.4",
+  "version": "11.6.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.4",
-    "@magento/pwa-buildpack": "11.5.4-alpha.4",
+    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.5",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",
diff --git a/pwa-devdocs/package.json b/pwa-devdocs/package.json
index c87b598a6d..acfa58aa49 100644
--- a/pwa-devdocs/package.json
+++ b/pwa-devdocs/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pwa-devdocs",
     "private": true,
-    "version": "14.2.0-alpha.4",
+    "version": "14.2.0-alpha.5",
     "description": "A documentation site for Magento PWA",
     "main": "gulpfile.js",
     "dependencies": {

From 83a4d6ec1132a36d58a5045195f16ca46ed3164d Mon Sep 17 00:00:00 2001
From: devops-pwa-codebuild <magento-devops-github-pwa-int@adobe.com>
Date: Thu, 6 Feb 2025 09:18:23 +0000
Subject: [PATCH 10/10] v14.2.0-alpha.6

---
 package.json                                       |  2 +-
 packages/create-pwa/package.json                   |  6 +++---
 .../experience-platform-connector/package.json     |  6 +++---
 .../package.json                                   |  2 +-
 .../upward-security-headers/package.json           |  6 +++---
 .../extensions/venia-sample-backends/package.json  |  4 ++--
 .../extensions/venia-sample-eventing/package.json  |  6 +++---
 .../venia-sample-language-packs/package.json       |  6 +++---
 .../package.json                                   |  8 ++++----
 .../venia-sample-payments-checkmo/package.json     |  8 ++++----
 packages/pagebuilder/package.json                  | 14 +++++++-------
 packages/peregrine/package.json                    |  2 +-
 packages/pwa-buildpack/package.json                |  2 +-
 packages/venia-concept/package.json                | 14 +++++++-------
 packages/venia-ui/package.json                     |  6 +++---
 pwa-devdocs/package.json                           |  2 +-
 16 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 8b121b0a01..6a747d0326 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-studio",
-  "version": "14.2.0-alpha.5",
+  "version": "14.2.0-alpha.6",
   "private": true,
   "workspaces": [
     "packages/babel-preset-peregrine",
diff --git a/packages/create-pwa/package.json b/packages/create-pwa/package.json
index e2d4c50b9e..bca95b413c 100644
--- a/packages/create-pwa/package.json
+++ b/packages/create-pwa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/create-pwa",
-  "version": "2.5.6-alpha.5",
+  "version": "2.5.6-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/create-pwa#readme",
   "dependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-concept": "14.2.0-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-concept": "14.2.0-alpha.6",
     "chalk": "^2.4.2",
     "change-case": "^3.1.0",
     "compression": "~1.7.4",
diff --git a/packages/extensions/experience-platform-connector/package.json b/packages/extensions/experience-platform-connector/package.json
index 0f438d9f9a..54050ae515 100644
--- a/packages/extensions/experience-platform-connector/package.json
+++ b/packages/extensions/experience-platform-connector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/experience-platform-connector",
-  "version": "1.0.9-alpha.5",
+  "version": "1.0.9-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -18,8 +18,8 @@
   "devDependencies": {},
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
index f7ec8e5fe8..ff5884c851 100644
--- a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
+++ b/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gomage/plugin-braintree-three-d-secure",
-  "version": "3.94.0-alpha.5",
+  "version": "3.94.0",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/extensions/upward-security-headers/package.json b/packages/extensions/upward-security-headers/package.json
index 49c71d5739..52a485c0b3 100644
--- a/packages/extensions/upward-security-headers/package.json
+++ b/packages/extensions/upward-security-headers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/upward-security-headers",
-  "version": "1.1.17-alpha.5",
+  "version": "1.1.17-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -13,8 +13,8 @@
   "author": "Adobe Commerce",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "webpack": "~4.46.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-backends/package.json b/packages/extensions/venia-sample-backends/package.json
index 4904ae1e3e..7450f7711f 100644
--- a/packages/extensions/venia-sample-backends/package.json
+++ b/packages/extensions/venia-sample-backends/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-backends",
-  "version": "0.0.12-alpha.5",
+  "version": "0.0.12-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +13,7 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
     "node-fetch": "~2.3.0"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-eventing/package.json b/packages/extensions/venia-sample-eventing/package.json
index 22b4c4fe63..40393d3104 100644
--- a/packages/extensions/venia-sample-eventing/package.json
+++ b/packages/extensions/venia-sample-eventing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-eventing",
-  "version": "0.0.10-alpha.5",
+  "version": "0.0.10-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
     "react": "~17.0.1"
   },
   "pwa-studio": {
diff --git a/packages/extensions/venia-sample-language-packs/package.json b/packages/extensions/venia-sample-language-packs/package.json
index 313d87f4c6..e3e58682b4 100644
--- a/packages/extensions/venia-sample-language-packs/package.json
+++ b/packages/extensions/venia-sample-language-packs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-language-packs",
-  "version": "0.0.18-alpha.5",
+  "version": "0.0.18-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -12,8 +12,8 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5"
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6"
   },
   "pwa-studio": {
     "targets": {
diff --git a/packages/extensions/venia-sample-payments-cashondelivery/package.json b/packages/extensions/venia-sample-payments-cashondelivery/package.json
index bba6afcb5d..02c24d6a1f 100644
--- a/packages/extensions/venia-sample-payments-cashondelivery/package.json
+++ b/packages/extensions/venia-sample-payments-cashondelivery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-cashondelivery",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/extensions/venia-sample-payments-checkmo/package.json b/packages/extensions/venia-sample-payments-checkmo/package.json
index 8345e7b896..c9450e8582 100644
--- a/packages/extensions/venia-sample-payments-checkmo/package.json
+++ b/packages/extensions/venia-sample-payments-checkmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-sample-payments-checkmo",
-  "version": "0.0.15-alpha.5",
+  "version": "0.0.15-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
   "repository": "github:magento/pwa-studio",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "peerDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",
     "react-router-dom": "~5.2.0"
diff --git a/packages/pagebuilder/package.json b/packages/pagebuilder/package.json
index fff10686b7..19f7c74dac 100644
--- a/packages/pagebuilder/package.json
+++ b/packages/pagebuilder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pagebuilder",
-  "version": "9.3.3-alpha.5",
+  "version": "9.3.3-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/pagebuilder#readme",
   "dependencies": {},
   "devDependencies": {
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "@storybook/react": "~6.3.7",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
@@ -50,9 +50,9 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
diff --git a/packages/peregrine/package.json b/packages/peregrine/package.json
index 62760cdf3b..01120b8b53 100644
--- a/packages/peregrine/package.json
+++ b/packages/peregrine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "14.5.1-alpha.5",
+  "version": "14.5.1-alpha.6",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/pwa-buildpack/package.json b/packages/pwa-buildpack/package.json
index ea9c8474d0..f6082bb012 100644
--- a/packages/pwa-buildpack/package.json
+++ b/packages/pwa-buildpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/pwa-buildpack",
-  "version": "11.5.4-alpha.5",
+  "version": "11.5.4-alpha.6",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/venia-concept/package.json b/packages/venia-concept/package.json
index a813ff0f88..f9efc908aa 100644
--- a/packages/venia-concept/package.json
+++ b/packages/venia-concept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-concept",
-  "version": "14.2.0-alpha.5",
+  "version": "14.2.0-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -35,8 +35,8 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
   "dependencies": {
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5"
+    "@gomage/plugin-braintree-three-d-secure": "~3.94.0",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6"
   },
   "devDependencies": {
     "@adobe/apollo-link-mutation-queue": "~1.0.2",
@@ -51,14 +51,14 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
     "@babel/runtime": "~7.15.3",
-    "@gomage/plugin-braintree-three-d-secure": "3.94.0-alpha.5",
+    "@gomage/plugin-braintree-three-d-secure": "~3.94.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
     "@magento/eslint-config": "~1.5.0",
-    "@magento/pagebuilder": "9.3.3-alpha.5",
-    "@magento/peregrine": "14.5.1-alpha.5",
+    "@magento/pagebuilder": "9.3.3-alpha.6",
+    "@magento/peregrine": "14.5.1-alpha.6",
     "@magento/pwa-theme-venia": "~2.4.0",
     "@magento/upward-security-headers": "~1.0.14",
-    "@magento/venia-ui": "11.6.0-alpha.5",
+    "@magento/venia-ui": "11.6.0-alpha.6",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
     "@storybook/react": "~6.3.7",
     "@types/node": "16",
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
index 8cb786e240..685c7caaf5 100644
--- a/packages/venia-ui/package.json
+++ b/packages/venia-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.6.0-alpha.5",
+  "version": "11.6.0-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.5",
-    "@magento/pwa-buildpack": "11.5.4-alpha.5",
+    "@magento/peregrine": "14.5.1-alpha.6",
+    "@magento/pwa-buildpack": "11.5.4-alpha.6",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",
diff --git a/pwa-devdocs/package.json b/pwa-devdocs/package.json
index acfa58aa49..9bbf822946 100644
--- a/pwa-devdocs/package.json
+++ b/pwa-devdocs/package.json
@@ -1,7 +1,7 @@
 {
     "name": "pwa-devdocs",
     "private": true,
-    "version": "14.2.0-alpha.5",
+    "version": "14.2.0-alpha.6",
     "description": "A documentation site for Magento PWA",
     "main": "gulpfile.js",
     "dependencies": {