From 59ad6b7287c965feb519d92608487dd68d961205 Mon Sep 17 00:00:00 2001
From: glo80771 <127736464+glo80771@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:22:37 +0530
Subject: [PATCH 1/7] Pwa 3139 v2 (#4124)

* PWA-3139::Region is required in PWA although this option is disabled in Magento , and is not required on normal storefront

* PWA-3139-V1::Resolved region not null issue

* PWA-3139-V2::Removed unwanted changes

* PWA-3139-V2::Updated code format

* PWA-3139-V2::Formatted the code

* PWA-3139-V2::Added error message for guest users form and resolved null issue for credit card payment mode

* PWA-3139-V2::Added error message for guest users form and resolved null issue for credit card payment method

* PWA-3139-V2::Updated code review comments

---------

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 .../BillingAddress/useBillingAddress.js       |  5 +++-
 .../__tests__/useCreditCard.spec.js           |  1 +
 .../PaymentInformation/useCreditCard.js       |  5 +++-
 .../__snapshots__/useGuestForm.spec.js.snap   | 12 ++++++--
 .../AddressForm/useGuestForm.js               |  4 +--
 .../__snapshots__/customerForm.spec.js.snap   |  6 ++--
 .../__snapshots__/guestForm.spec.js.snap      |  8 +++---
 .../AddressForm/customerForm.js               | 28 ++++++++++++++++++-
 .../AddressForm/customerForm.module.css       |  5 ++++
 .../AddressForm/guestForm.js                  | 21 +++++++++++++-
 .../AddressForm/guestForm.module.css          |  5 ++++
 .../venia-ui/lib/components/Region/region.js  |  9 +++++-
 .../venia-ui/lib/components/Select/select.js  |  4 ++-
 .../lib/components/TextInput/textInput.js     |  4 ++-
 14 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js b/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js
index 8260e0d3e41..46da6e8d680 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js
@@ -178,10 +178,13 @@ export const useBillingAddress = props => {
      * shipping address.
      */
     const setShippingAddressAsBillingAddress = useCallback(() => {
-        const shippingAddress = shippingAddressData
+        var shippingAddress = shippingAddressData
             ? mapAddressData(shippingAddressData.cart.shippingAddresses[0])
             : {};
 
+        shippingAddress.region =
+            shippingAddress.region == null ? '' : shippingAddress.region;
+
         updateBillingAddress({
             variables: {
                 cartId,
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js
index a9c1c7038f2..9986d65cbb8 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js
@@ -1095,6 +1095,7 @@ describe('missing data', () => {
             Object {
               "variables": Object {
                 "cartId": "123",
+                "region": "",
                 "sameAsShipping": true,
               },
             }
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js
index 5e867b58aab..f93a489588c 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js
@@ -234,10 +234,13 @@ export const useCreditCard = props => {
      * shipping address.
      */
     const setShippingAddressAsBillingAddress = useCallback(() => {
-        const shippingAddress = shippingAddressData
+        var shippingAddress = shippingAddressData
             ? mapAddressData(shippingAddressData.cart.shippingAddresses[0])
             : {};
 
+        shippingAddress.region =
+            shippingAddress.region == null ? '' : shippingAddress.region;
+
         updateBillingAddress({
             variables: {
                 cartId,
diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap
index ef2ec8b4307..b88eab9521a 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap
+++ b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap
@@ -9,7 +9,11 @@ Object {
       "firstname": "Philip",
       "lastname": "Fry",
       "postcode": "10019",
-      "region": 12,
+      "region": Object {
+        "region": "New York",
+        "region_code": "NY",
+        "region_id": 12,
+      },
       "street": Array [
         "3000 57th Street",
         "Suite 200",
@@ -33,7 +37,11 @@ Object {
       "firstname": "Philip",
       "lastname": "Fry",
       "postcode": "10019",
-      "region": 12,
+      "region": Object {
+        "region": "New York",
+        "region_code": "NY",
+        "region_id": 12,
+      },
       "street": Array [
         "3000 57th Street",
       ],
diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
index c69d2e40b85..b18f03f6b73 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
@@ -60,7 +60,7 @@ export const useGuestForm = props => {
 
     const handleSubmit = useCallback(
         async formValues => {
-            const { country, email, region, ...address } = formValues;
+            const { country, email, ...address } = formValues;
             try {
                 await setGuestShipping({
                     variables: {
@@ -70,8 +70,6 @@ export const useGuestForm = props => {
                             ...address,
                             // Cleans up the street array when values are null or undefined
                             street: address.street.filter(e => e),
-                            // region_id is used for field select and region is used for field input
-                            region: region.region_id || region.region,
                             country_code: country
                         }
                     }
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
index a9386251495..7adb4bf3d0f 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
@@ -351,8 +351,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -827,8 +827,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1364,8 +1364,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
index 3e751bf1417..b22c87b5664 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -333,8 +333,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -800,8 +800,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1255,8 +1255,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1736,8 +1736,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
index 9c2444c118a..257742add44 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
@@ -134,6 +134,18 @@ const CustomerForm = props => {
         <Text type="hidden" field="default_shipping" initialValue={true} />
     );
 
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
+    // errors
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -257,9 +269,10 @@ const CustomerForm = props => {
                         />
                     </Field>
                 </div>
+
                 <div className={classes.region}>
                     <Region
-                        validate={isRequired}
+                        regionError={regionError}
                         data-cy="CustomerForm-region"
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -269,7 +282,20 @@ const CustomerForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
+
                 <div className={classes.postcode}>
                     <Postcode
                         validate={isRequired}
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css
index 6eef77e409c..d7b0b998943 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css
@@ -42,6 +42,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
index 752cac1736f..ff6eb7121e1 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -126,6 +126,13 @@ const GuestForm = props => {
         }
     }, [addToast, formatMessage, showSignInToast, handleToastAction]);
 
+    const shippingAddressError = JSON.stringify(
+        errors.get('setGuestShippingMutation')
+    );
+
+    const errorMessage = 'Region is required';
+    const regionError = shippingAddressError?.includes(errorMessage);
+
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -304,11 +311,11 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        regionError={regionError}
                         autoComplete={formatMessage({
                             id: 'region.label',
                             defaultMessage: 'State'
                         })}
-                        validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
@@ -318,6 +325,18 @@ const GuestForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
                 <div className={classes.postcode}>
                     <Postcode
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css
index f36f21daf56..e5f13125e51 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css
@@ -36,6 +36,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;
diff --git a/packages/venia-ui/lib/components/Region/region.js b/packages/venia-ui/lib/components/Region/region.js
index dc3e1519c96..c2a0e068eeb 100644
--- a/packages/venia-ui/lib/components/Region/region.js
+++ b/packages/venia-ui/lib/components/Region/region.js
@@ -18,6 +18,7 @@ import { GET_REGIONS_QUERY } from './region.gql';
 const Region = props => {
     const {
         classes: propClasses,
+        regionError,
         countryCodeField,
         fieldInput,
         fieldSelect,
@@ -47,13 +48,19 @@ const Region = props => {
     const regionField =
         regions.length || loading ? (
             <Select
+                regionError={regionError}
                 {...regionProps}
                 field={fieldSelect}
                 id={classes.root}
                 items={regions}
             />
         ) : (
-            <TextInput {...regionProps} field={fieldInput} id={classes.root} />
+            <TextInput
+                {...regionProps}
+                field={fieldInput}
+                id={classes.root}
+                regionError={regionError}
+            />
         );
 
     return (
diff --git a/packages/venia-ui/lib/components/Select/select.js b/packages/venia-ui/lib/components/Select/select.js
index 4c14caf0123..553f03a93ec 100644
--- a/packages/venia-ui/lib/components/Select/select.js
+++ b/packages/venia-ui/lib/components/Select/select.js
@@ -18,6 +18,7 @@ const Select = props => {
     const {
         before,
         classes: propClasses,
+        regionError,
         field,
         items,
         message,
@@ -25,7 +26,8 @@ const Select = props => {
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    const inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     const options = items.map(
         ({ disabled = null, hidden = null, label, value, key = value }) => (
diff --git a/packages/venia-ui/lib/components/TextInput/textInput.js b/packages/venia-ui/lib/components/TextInput/textInput.js
index 295fa336bc9..550cc987013 100644
--- a/packages/venia-ui/lib/components/TextInput/textInput.js
+++ b/packages/venia-ui/lib/components/TextInput/textInput.js
@@ -12,13 +12,15 @@ const TextInput = props => {
         after,
         before,
         classes: propClasses,
+        regionError,
         field,
         message,
         ...rest
     } = props;
     const fieldState = useFieldState(field);
     const classes = useStyle(defaultClasses, propClasses);
-    const inputClass = fieldState.error ? classes.input_error : classes.input;
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
 
     return (
         <Fragment>

From 44101efc9d52a7c99ad55ad567477be373a3dc75 Mon Sep 17 00:00:00 2001
From: glo80771 <127736464+glo80771@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:44:20 +0530
Subject: [PATCH 2/7] PWA-3137-V3::Image is rendered on wrong pages when
 parallax is used on page builder (#4129)

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 .../lib/ContentTypes/Row/__tests__/row.spec.js  | 17 ++---------------
 .../pagebuilder/lib/ContentTypes/Row/row.js     |  7 +------
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js b/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js
index 2d64b28f726..8567dae0768 100644
--- a/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js
+++ b/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js
@@ -38,12 +38,7 @@ test('render row with parallax initializes Jarallax', () => {
         }
     });
 
-    expect(mockJarallax).toHaveBeenCalledWith(true, {
-        speed: 0.75,
-        imgPosition: 'center center',
-        imgRepeat: 'repeat',
-        imgSize: 'cover'
-    });
+    expect(mockJarallax).toHaveBeenCalledWith(true, 'destroy');
 });
 
 test('render row with parallax initializes JarallaxVideo', () => {
@@ -99,15 +94,7 @@ test('row unmount causes Jarallax to be destroyed', () => {
     });
 
     expect(mockJarallax.mock.calls).toEqual([
-        [
-            true,
-            {
-                speed: 0.75,
-                imgPosition: 'top left',
-                imgRepeat: 'no-repeat',
-                imgSize: 'contain'
-            }
-        ],
+        [true, 'destroy'],
         [true, 'destroy']
     ]);
 });
diff --git a/packages/pagebuilder/lib/ContentTypes/Row/row.js b/packages/pagebuilder/lib/ContentTypes/Row/row.js
index b4298ee2bcc..9d50158e531 100644
--- a/packages/pagebuilder/lib/ContentTypes/Row/row.js
+++ b/packages/pagebuilder/lib/ContentTypes/Row/row.js
@@ -160,12 +160,7 @@ const Row = props => {
         if (enableParallax && bgImageStyle && backgroundType !== 'video') {
             ({ jarallax } = require('jarallax'));
             parallaxElement = backgroundElement.current;
-            jarallax(parallaxElement, {
-                speed: parallaxSpeed,
-                imgSize: backgroundSize,
-                imgPosition: backgroundPosition,
-                imgRepeat: backgroundRepeat
-            });
+            jarallax(parallaxElement, 'destroy');
         }
 
         if (backgroundType === 'video') {

From efdce119cc6801934f25a0bdfdba645e06a9e089 Mon Sep 17 00:00:00 2001
From: Raghavendra Tirumalasetti
 <104980124+RaghavendraTirumalasetti@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:23:32 +0530
Subject: [PATCH 3/7] BUG#PWA-3161 [Cloud] Search Term Redirect not working in
 PWA (#4168)

* BUG#PWA-3161 [Cloud] Search Term Redirect not working in PWA

* BUG#PWA-3161 [Cloud] Search Term Redirect not working in PWA

* BUG#PWA-3161 [Cloud] Search Term Redirect not working in PWA

* BUG#PWA-3161 [Cloud] Search Term Redirect not working in PWA

* BUG#PWA-3161

* BUG#PWA-3161

---------

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 .../__snapshots__/useSearchPage.spec.js.snap  |  7 +-----
 .../lib/talons/SearchPage/searchPage.gql.js   | 11 ++++++++
 .../lib/talons/SearchPage/useSearchPage.js    | 25 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap b/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap
index 46e5500b7d1..4017f1d4ddf 100644
--- a/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap
+++ b/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap
@@ -2,12 +2,7 @@
 
 exports[`searchCategory returns the correct shape 1`] = `
 Object {
-  "availableSortMethods": Array [
-    Object {
-      "label": "Position",
-      "value": "position",
-    },
-  ],
+  "availableSortMethods": undefined,
   "currentStoreName": "Store 1",
   "data": Object {
     "products": Object {
diff --git a/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js b/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js
index 1c11774d16c..3d67fed9a40 100644
--- a/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js
+++ b/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js
@@ -27,6 +27,16 @@ export const GET_PRODUCT_FILTERS_BY_SEARCH = gql`
     }
 `;
 
+export const GET_SEARCH_TERM_DATA = gql`
+    query getSearchTermData($search: String) {
+        searchTerm(Search: $search) {
+            query_text
+            redirect
+            popularity
+        }
+    }
+`;
+
 export const PRODUCT_SEARCH = gql`
     query ProductSearch(
         $currentPage: Int = 1
@@ -106,6 +116,7 @@ export const GET_SEARCH_AVAILABLE_SORT_METHODS = gql`
 export default {
     getFilterInputsQuery: GET_FILTER_INPUTS,
     getPageSize: GET_PAGE_SIZE,
+    getSearchTermData: GET_SEARCH_TERM_DATA,
     getProductFiltersBySearchQuery: GET_PRODUCT_FILTERS_BY_SEARCH,
     getSearchAvailableSortMethods: GET_SEARCH_AVAILABLE_SORT_METHODS,
     productSearchQuery: PRODUCT_SEARCH
diff --git a/packages/peregrine/lib/talons/SearchPage/useSearchPage.js b/packages/peregrine/lib/talons/SearchPage/useSearchPage.js
index 279fe123773..07830357180 100644
--- a/packages/peregrine/lib/talons/SearchPage/useSearchPage.js
+++ b/packages/peregrine/lib/talons/SearchPage/useSearchPage.js
@@ -26,6 +26,7 @@ export const useSearchPage = (props = {}) => {
     const {
         getFilterInputsQuery,
         getPageSize,
+        getSearchTermData,
         getProductFiltersBySearchQuery,
         getSearchAvailableSortMethods,
         productSearchQuery
@@ -36,6 +37,18 @@ export const useSearchPage = (props = {}) => {
         nextFetchPolicy: 'cache-first'
     });
 
+    const [getSearchTermMethod, { data: SearchTermQueryData }] = useLazyQuery(
+        getSearchTermData
+    );
+
+    if (SearchTermQueryData !== undefined) {
+        const [...redirectData] = [SearchTermQueryData];
+        const redirectUrl = redirectData[0].searchTerm?.redirect;
+        if (redirectUrl !== null) {
+            window.location.replace(redirectUrl);
+        }
+    }
+
     const [getSortMethods, { data: sortData }] = useLazyQuery(
         getSearchAvailableSortMethods,
         {
@@ -231,6 +244,16 @@ export const useSearchPage = (props = {}) => {
         };
     }, [data, setTotalPages]);
 
+    useEffect(() => {
+        if (inputText) {
+            getSearchTermMethod({
+                variables: {
+                    search: inputText
+                }
+            });
+        }
+    }, [inputText, getSearchTermMethod]);
+
     useEffect(() => {
         if (inputText) {
             getSortMethods({
@@ -273,7 +296,7 @@ export const useSearchPage = (props = {}) => {
     useScrollTopOnChange(currentPage);
 
     const availableSortMethods = sortData
-        ? sortData.products.sort_fields.options
+        ? sortData.products.sort_fields?.options
         : null;
 
     return {

From 0c3cd48089c7cd6ea062b1fb1973a286a080b5d2 Mon Sep 17 00:00:00 2001
From: Tarun <127731581+Tarun50745@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:32:40 +0530
Subject: [PATCH 4/7] PWA-3160 :: Search Bar Conflicting with Categories and
 Sub-Categories (#4133)

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 packages/venia-ui/lib/components/MegaMenu/submenu.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/MegaMenu/submenu.module.css b/packages/venia-ui/lib/components/MegaMenu/submenu.module.css
index 9bfe158650a..3f774f05530 100644
--- a/packages/venia-ui/lib/components/MegaMenu/submenu.module.css
+++ b/packages/venia-ui/lib/components/MegaMenu/submenu.module.css
@@ -7,7 +7,7 @@
     composes: px-3 from global;
     composes: py-5 from global;
     composes: right-0 from global;
-    composes: top-full from global;
+    top: 80px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
 }
 

From 3e2077327b4594f896ababe6726e5cc59e64b090 Mon Sep 17 00:00:00 2001
From: glo80771 <127736464+glo80771@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:01:34 +0530
Subject: [PATCH 5/7] =?UTF-8?q?PWA-3078::The=20user=20is=20unable=20to=20g?=
 =?UTF-8?q?et=20any=20message=20once=20the=20account=20is=20c=E2=80=A6=20(?=
 =?UTF-8?q?#4131)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PWA-3078::The user is unable to get any message once the account is created and they are logged in

* PWA-3078::The user is unable to get any message once the account is created and they are logged in

* PWA-3078::Resolved lint issues

* PWA-3078::Formatted the screen reader message

* PWA-3078::Resolved test case

* PWA-3078::Resolved test case

* PWA-3078::Formatted the code

---------

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 .../lib/talons/SignIn/__tests__/useSignIn.spec.js     |  3 ++-
 packages/peregrine/lib/talons/SignIn/useSignIn.js     |  5 ++++-
 .../__tests__/__snapshots__/accountChip.spec.js.snap  |  2 +-
 .../lib/components/AccountChip/accountChip.js         | 11 +++++++----
 .../lib/components/AccountMenu/accountMenu.js         |  7 ++++++-
 .../__snapshots__/accountTrigger.spec.js.snap         |  1 +
 .../venia-ui/lib/components/Header/accountTrigger.js  |  1 +
 packages/venia-ui/lib/components/SignIn/signIn.js     |  2 ++
 8 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js b/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js
index 20c672af80b..2ebbc993159 100644
--- a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js
+++ b/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js
@@ -89,7 +89,8 @@ const initialProps = {
     getCartDetailsQuery: 'getCartDetailsQuery',
     setDefaultUsername: jest.fn(),
     showCreateAccount: jest.fn(),
-    showForgotPassword: jest.fn()
+    showForgotPassword: jest.fn(),
+    handleTriggerClick: jest.fn()
 };
 
 const clearCacheData = jest.fn();
diff --git a/packages/peregrine/lib/talons/SignIn/useSignIn.js b/packages/peregrine/lib/talons/SignIn/useSignIn.js
index dd02d9ed9eb..d4db2026e3e 100644
--- a/packages/peregrine/lib/talons/SignIn/useSignIn.js
+++ b/packages/peregrine/lib/talons/SignIn/useSignIn.js
@@ -13,6 +13,7 @@ import { useEventingContext } from '../../context/eventing';
 
 export const useSignIn = props => {
     const {
+        handleTriggerClick,
         getCartDetailsQuery,
         setDefaultUsername,
         showCreateAccount,
@@ -66,6 +67,7 @@ export const useSignIn = props => {
     const handleSubmit = useCallback(
         async ({ email, password }) => {
             setIsSigningIn(true);
+            handleTriggerClick();
             try {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
@@ -142,7 +144,8 @@ export const useSignIn = props => {
             fetchUserDetails,
             getCartDetails,
             fetchCartDetails,
-            dispatch
+            dispatch,
+            handleTriggerClick
         ]
     );
 
diff --git a/packages/venia-ui/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap b/packages/venia-ui/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap
index 38b744153c7..ccac700da36 100644
--- a/packages/venia-ui/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap
+++ b/packages/venia-ui/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap
@@ -31,7 +31,7 @@ exports[`it renders a loading indicator when appropriate 1`] = `
   </span>
   <span
     aria-atomic="true"
-    aria-label="Toggle My Account Menu"
+    aria-label="Hiundefined"
     aria-live="polite"
     className="text"
   >
diff --git a/packages/venia-ui/lib/components/AccountChip/accountChip.js b/packages/venia-ui/lib/components/AccountChip/accountChip.js
index d2cb226b676..08077cb95b1 100644
--- a/packages/venia-ui/lib/components/AccountChip/accountChip.js
+++ b/packages/venia-ui/lib/components/AccountChip/accountChip.js
@@ -35,10 +35,13 @@ const AccountChip = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const ariaLabelMyMenu = formatMessage({
-        id: 'accountTrigger.ariaLabelMyMenu',
-        defaultMessage: 'Toggle My Account Menu'
-    });
+    const ariaLabelMyMenu =
+        currentUser != null
+            ? formatMessage({
+                  id: 'Hi' + currentUser.firstname,
+                  defaultMessage: 'Hi' + currentUser.firstname
+              })
+            : '';
 
     const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : '';
 
diff --git a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js
index 6ae4e620c4c..f25f7abe338 100644
--- a/packages/venia-ui/lib/components/AccountMenu/accountMenu.js
+++ b/packages/venia-ui/lib/components/AccountMenu/accountMenu.js
@@ -10,7 +10,11 @@ import ForgotPassword from '../ForgotPassword';
 import defaultClasses from './accountMenu.module.css';
 
 const AccountMenu = React.forwardRef((props, ref) => {
-    const { accountMenuIsOpen, setAccountMenuIsOpen } = props;
+    const {
+        handleTriggerClick,
+        accountMenuIsOpen,
+        setAccountMenuIsOpen
+    } = props;
     const talonProps = useAccountMenu({
         accountMenuIsOpen,
         setAccountMenuIsOpen
@@ -67,6 +71,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
         default: {
             dropdownContents = (
                 <SignIn
+                    handleTriggerClick={handleTriggerClick}
                     classes={{
                         modal_active: classes.loading
                     }}
diff --git a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/accountTrigger.spec.js.snap b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/accountTrigger.spec.js.snap
index f8c26b76c64..02c3d9e3384 100644
--- a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/accountTrigger.spec.js.snap
+++ b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/accountTrigger.spec.js.snap
@@ -19,6 +19,7 @@ Array [
   </div>,
   <require('../AccountMenu')
     accountMenuIsOpen={false}
+    handleTriggerClick={[MockFunction handleTriggerClick]}
   />,
 ]
 `;
diff --git a/packages/venia-ui/lib/components/Header/accountTrigger.js b/packages/venia-ui/lib/components/Header/accountTrigger.js
index fd1d6099235..a42124907a9 100644
--- a/packages/venia-ui/lib/components/Header/accountTrigger.js
+++ b/packages/venia-ui/lib/components/Header/accountTrigger.js
@@ -63,6 +63,7 @@ const AccountTrigger = props => {
             </div>
             <Suspense fallback={null}>
                 <AccountMenu
+                    handleTriggerClick={handleTriggerClick}
                     ref={accountMenuRef}
                     accountMenuIsOpen={accountMenuIsOpen}
                     setAccountMenuIsOpen={setAccountMenuIsOpen}
diff --git a/packages/venia-ui/lib/components/SignIn/signIn.js b/packages/venia-ui/lib/components/SignIn/signIn.js
index 81f30a93cfb..dcbb47c9b08 100644
--- a/packages/venia-ui/lib/components/SignIn/signIn.js
+++ b/packages/venia-ui/lib/components/SignIn/signIn.js
@@ -19,6 +19,7 @@ import GoogleRecaptcha from '../GoogleReCaptcha';
 const SignIn = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const {
+        handleTriggerClick,
         setDefaultUsername,
         showCreateAccount,
         showForgotPassword,
@@ -27,6 +28,7 @@ const SignIn = props => {
 
     const { formatMessage } = useIntl();
     const talonProps = useSignIn({
+        handleTriggerClick,
         getCartDetailsQuery: GET_CART_DETAILS_QUERY,
         setDefaultUsername,
         showCreateAccount,

From 6b1c0cbd8293624d6b05f4b5b7456d995c30d554 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Wed, 4 Oct 2023 16:41:42 +0530
Subject: [PATCH 6/7] PWA-3170:: price filter showing currency symbol (#4173)

* Quantity value automatic selection while focus on it

* Prettier

* Price filter now showing currency symbol

* name change

* prettier

* unit testing

* PWA-Pwa 2841 price filter showing currency symbo

---------

Co-authored-by: sahil <sahil.kumar.sharma@gds.ey.com>
---
 .../FilterList/__tests__/filterDefault.spec.js  | 17 ++++++++++++++++-
 .../FilterModal/FilterList/filterDefault.js     | 14 +++++++++++++-
 .../FilterModal/FilterList/filterItem.js        |  1 +
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js b/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js
index 0cf9c194747..edca810798b 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/__tests__/filterDefault.spec.js
@@ -1,12 +1,16 @@
 import React from 'react';
 
 import { createTestInstance } from '@magento/peregrine';
-
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 import Checkbox from '../../../Checkbox';
 import FilterDefault from '../filterDefault';
 
 jest.mock('../../../Checkbox', () => props => <mock-Checkbox {...props} />);
 
+jest.mock('@magento/peregrine/lib/talons/Header/useCurrencySwitcher', () => ({
+    useCurrencySwitcher: jest.fn()
+}));
+
 const mockLabel = 'Item Label';
 
 let inputProps = {};
@@ -22,6 +26,16 @@ const givenDefaultValues = () => {
     };
 };
 
+const talonProps = {
+    handleSwitchCurrency: jest.fn(),
+    availableCurrencies: ['USD', 'EUR'],
+    currentCurrencyCode: 'EUR',
+    currencyMenuRef: {},
+    currencyMenuTriggerRef: {},
+    currencyMenuIsOpen: false,
+    handleTriggerClick: jest.fn()
+};
+
 const givenWithItem = () => {
     inputProps = {
         ...inputProps,
@@ -42,6 +56,7 @@ const givenWithSelectedItem = () => {
 describe('#FilterDefault', () => {
     beforeEach(() => {
         givenDefaultValues();
+        useCurrencySwitcher.mockReturnValueOnce(talonProps);
     });
 
     it('renders without item', () => {
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index dacfc1d7013..cf1ad6b9a9e 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -5,6 +5,7 @@ import { bool, shape, string } from 'prop-types';
 import Checkbox from '../../Checkbox';
 import { useStyle } from '../../../classify';
 import defaultClasses from './filterDefault.module.css';
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 
 const FilterDefault = props => {
     const {
@@ -12,11 +13,22 @@ const FilterDefault = props => {
         isSelected,
         item,
         onMouseDown,
+        group,
         ...restProps
     } = props;
 
     const { label, value_index } = item || {};
     const classes = useStyle(defaultClasses, propsClasses);
+    const { currentCurrencyCode } = useCurrencySwitcher();
+    const currencySymbolMap = {
+        USD: '$',
+        EUR: '€'
+    };
+    const title =
+        group === 'price'
+            ? currencySymbolMap[currentCurrencyCode] +
+              label.replace('-', ' - ' + currencySymbolMap[currentCurrencyCode])
+            : label;
     const { formatMessage } = useIntl();
 
     const ariaLabel = !isSelected
@@ -44,7 +56,7 @@ const FilterDefault = props => {
             classes={classes}
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
-            label={label}
+            label={title}
             ariaLabel={ariaLabel}
             data-cy="FilterDefault-checkbox"
             onClick={onMouseDown}
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
index 3aa926f5f1e..686bd54f113 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterItem.js
@@ -52,6 +52,7 @@ const FilterItem = props => {
             item={tileItem}
             onMouseDown={handleClick}
             onKeyDown={handleKeyDown}
+            group={group}
             title={title}
             value={value}
         />

From 457bd2fae13345ea09a1db372939f985ee9672be Mon Sep 17 00:00:00 2001
From: glo80771 <127736464+glo80771@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:15:09 +0530
Subject: [PATCH 7/7] =?UTF-8?q?PWA-3182::Accessibility=20||=20screen=20rea?=
 =?UTF-8?q?der=20reading=20wrong=20quantity=20into=E2=80=A6=20(#4172)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PWA-3182::Accessibility || srcreen reader reading wrong quantity into sub-folder of My account even when havnig atleast 1 item or more or zero

* PWA-3182::Updated unit test cases

---------

Co-authored-by: arpit khare <84493875+glo42707@users.noreply.github.com>
Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 packages/venia-ui/i18n/en_US.json             |  4 ++
 .../accountInformationPage.spec.js.snap       |  4 +-
 .../accountInformationPage.js                 |  4 +-
 .../addressBookPage.spec.js.snap              | 24 ++++++--
 .../AddressBookPage/addressBookPage.js        | 14 ++++-
 .../communicationsPage.spec.js.snap           | 16 ++---
 .../CommunicationsPage/communicationsPage.js  |  4 +-
 .../orderHistoryPage.spec.js.snap             | 40 +++++++++----
 .../OrderHistoryPage/orderHistoryPage.js      | 15 ++++-
 .../savedPaymentsPage.spec.js.snap            | 16 +++--
 .../SavedPaymentsPage/savedPaymentsPage.js    | 22 ++++++-
 .../__snapshots__/wishlistPage.spec.js.snap   | 60 ++++++++++++++-----
 .../__tests__/wishlistPage.spec.js            | 13 ++--
 .../components/WishlistPage/wishlistPage.js   | 13 +++-
 14 files changed, 187 insertions(+), 62 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index a9913069f58..d4bdea399e8 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -27,6 +27,7 @@
     "addressBookPage.addressBookText": "Address Book",
     "addressBookPage.editDialogTitle": "Edit Address",
     "addressBookPage.makeDefaultAddress": "Make this my default address",
+    "addressBookPage.addAddressMessage": "You have added {count} address in your address book.",
     "addressBookPage.telephone": "Phone {telephone}",
     "addressCard.defaultText": "Default",
     "addToCartButton.addItemToCart": "ADD TO CART",
@@ -309,6 +310,7 @@
     "orderHistoryPage.loadMore": "Load More",
     "orderHistoryPage.pageInfo": "Showing {current} of {total}",
     "orderHistoryPage.pageTitleText": "Order History",
+    "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
     "orderProgressBar.deliveredText": "Delivered",
@@ -393,6 +395,7 @@
     "savedPaymentsPage.addButtonText": "Add a credit card",
     "savedPaymentsPage.creditCard.errorRemoving": "Something went wrong deleting this payment method. Please refresh and try again.",
     "savedPaymentsPage.noSavedPayments": "You have no saved payments.",
+    "savedPaymentsPage.Message": "You have {count} saved payments.",
     "savedPaymentsPage.title": "Saved Payments",
     "searchBar.heading": "Product Suggestions",
     "searchBar.label": " in {label}",
@@ -480,6 +483,7 @@
     "wishlistPage.headingText": "{count, plural, one {Favorites List} other {Favorites Lists}}",
     "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
+    "wishlist.itemsMessage": "You have {count} items in your wishlist",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More",
     "LegacyMiniCart.buttonExpanded":"More Options Expanded",
diff --git a/packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap b/packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap
index 93eb161b2cb..6d2c7af20ef 100644
--- a/packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Account Information
-  <h1
+  <div
     aria-live="polite"
     className="title"
   >
@@ -13,7 +13,7 @@ exports[`renders form error 1`] = `
       defaultMessage="Account Information"
       id="accountInformationPage.accountInformation"
     />
-  </h1>
+  </div>
   <p
     className="root"
   >
diff --git a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
index 3a108340e70..ba7a1699fb6 100644
--- a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
+++ b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
@@ -126,7 +126,7 @@ const AccountInformationPage = props => {
                     defaultMessage: 'Account Information'
                 })}
             </StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.title}
                 data-cy="AccountInformationPage-title"
@@ -135,7 +135,7 @@ const AccountInformationPage = props => {
                     id={'accountInformationPage.accountInformation'}
                     defaultMessage={'Account Information'}
                 />
-            </h1>
+            </div>
             {errorMessage ? errorMessage : pageContent}
         </div>
     );
diff --git a/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap b/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap
index 1c0b9e1e2ad..94549f5493d 100644
--- a/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -125,12 +129,16 @@ exports[`renders correctly when there are no existing addresses 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 0 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -200,12 +208,16 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Address Book
-  </h1>
+    <div
+      aria-label="You have added 3 address in your address book."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
index 5b0135b8356..234d6fec228 100644
--- a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
+++ b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
@@ -90,16 +90,26 @@ const AddressBookPage = props => {
         return fullPageLoadingIndicator;
     }
 
+    const addressBookPageMessage = formatMessage(
+        {
+            id: 'addressBookPage.addAddressMessage',
+            defaultMessage:
+                'You have added {count} address in your address book.'
+        },
+        { count: customerAddresses.length }
+    );
+
     return (
         <div className={classes.root}>
             <StoreTitle>{PAGE_TITLE}</StoreTitle>
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.heading}
                 data-cy="AddressBookPage-heading"
             >
                 {PAGE_TITLE}
-            </h1>
+                <div aria-live="polite" aria-label={addressBookPageMessage} />
+            </div>
             <div className={classes.content} data-cy="AddressBookPage-content">
                 {addressBookElements}
                 <LinkButton
diff --git a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
index 92c9ce6ef7a..493bb790fd6 100644
--- a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/__snapshots__/communicationsPage.spec.js.snap
@@ -5,14 +5,14 @@ exports[`renders empty form without data 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -114,14 +114,14 @@ exports[`renders form error 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -223,14 +223,14 @@ exports[`renders prefilled form with data with disabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
@@ -334,14 +334,14 @@ exports[`renders prefilled form with data with enabled buttons 1`] = `
   className="root"
 >
   Communications
-  <h1
+  <div
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Communications"
       id="communicationsPage.communicationsText"
     />
-  </h1>
+  </div>
   <p>
     <mock-FormattedMessage
       defaultMessage="We'd like to stay in touch. Please check the boxes next to the communications you'd like to receive."
diff --git a/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js b/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
index 7e11e6eb98e..fc728f779a7 100644
--- a/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
+++ b/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
@@ -45,12 +45,12 @@ const CommunicationsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className={classes.title}>
+            <div className={classes.title}>
                 <FormattedMessage
                     id={'communicationsPage.communicationsText'}
                     defaultMessage={'Communications'}
                 />
-            </h1>
+            </div>
             <p>
                 <FormattedMessage
                     id={'communicationsPage.optInText'}
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap b/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap
index afbb128211b..1e827e21605 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderHistoryPage.spec.js.snap
@@ -6,12 +6,16 @@ exports[`renders correctly with data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 3 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -209,12 +213,16 @@ exports[`renders correctly without data 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -388,12 +396,16 @@ exports[`renders invalid order id message if order id is wrong 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -581,12 +593,16 @@ exports[`renders loading indicator 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
@@ -794,12 +810,16 @@ exports[`renders no orders message is orders is empty 1`] = `
     className="root"
   >
     Title
-    <h1
+    <div
       aria-live="polite"
       className="heading"
     >
       Order History
-    </h1>
+      <div
+        aria-label="You have 0 orders in your history"
+        aria-live="polite"
+      />
+    </div>
     <div
       className="filterRow"
     >
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
index 837389c6ece..133d3166549 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
@@ -56,6 +56,15 @@ const OrderHistoryPage = props => {
         id: 'orderHistoryPage.search',
         defaultMessage: 'Search by Order Number'
     });
+
+    const ordersCountMessage = formatMessage(
+        {
+            id: 'orderHistoryPage.ordersCount',
+            defaultMessage: 'You have {count} orders in your history.'
+        },
+        { count: orders.length }
+    );
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const orderRows = useMemo(() => {
@@ -160,9 +169,11 @@ const OrderHistoryPage = props => {
         <OrderHistoryContextProvider>
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
-                <h1 aria-live="polite" className={classes.heading}>
+                <div aria-live="polite" className={classes.heading}>
                     {PAGE_TITLE}
-                </h1>
+                    <div aria-live="polite" aria-label={ordersCountMessage} />
+                </div>
+
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
                     <Form className={classes.search} onSubmit={handleSubmit}>
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 3449f014886..ca052e1c3ed 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -5,12 +5,16 @@ exports[`renders correctly when there are existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have 1 saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   >
@@ -37,12 +41,16 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   className="root"
 >
   Title
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
     Saved Payments
-  </h1>
+    <div
+      aria-label="You have no saved payments."
+      aria-live="polite"
+    />
+  </div>
   <div
     className="content"
   />
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 810b5198f69..cb6871ce1e9 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -48,6 +48,23 @@ const SavedPaymentsPage = props => {
         defaultMessage: 'Saved Payments'
     });
 
+    const savedPaymentsMessage = useMemo(() => {
+        if (!savedPayments.length) {
+            return formatMessage({
+                id: 'savedPaymentsPage.noSavedPayments',
+                defaultMessage: 'You have no saved payments.'
+            });
+        } else {
+            return formatMessage(
+                {
+                    id: 'savedPaymentsPage.Message',
+                    defaultMessage: 'You have {count} saved payments.'
+                },
+                { count: savedPayments.length }
+            );
+        }
+    }, [savedPayments, formatMessage]);
+
     if (isLoading) {
         return fullPageLoadingIndicator;
     }
@@ -55,9 +72,10 @@ const SavedPaymentsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 aria-live="polite" className={classes.heading}>
+            <div aria-live="polite" className={classes.heading}>
                 {title}
-            </h1>
+                <div aria-live="polite" aria-label={savedPaymentsMessage} />
+            </div>
             <div className={classes.content}>{savedPaymentElements}</div>
             <div className={classes.noPayments}>{noSavedPayments}</div>
         </div>
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
index e29f24e225d..11fae7b752b 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap
@@ -4,23 +4,34 @@ exports[`empty single wishlist 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 5 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
-  <Wishlist />
+  </div>
+  <Wishlist
+    data={
+      Object {
+        "items_count": 5,
+      }
+    }
+    isCollapsed={false}
+  />
   <CreateWishlist
-    numberOfWishlists={0}
+    numberOfWishlists={1}
   />
 </div>
 `;
@@ -29,10 +40,14 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
@@ -42,11 +57,12 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
         }
       }
     />
-  </h1>
+  </div>
   <Wishlist
     data={
       Object {
         "id": 1,
+        "items_count": 1,
         "name": "Favorites",
       }
     }
@@ -62,20 +78,24 @@ exports[`renders disabled feature error 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
+  </div>
   <div
     className="errorContainer"
   >
@@ -93,20 +113,24 @@ exports[`renders general fetch error 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
       values={
         Object {
-          "count": 0,
+          "count": 1,
         }
       }
     />
-  </h1>
+  </div>
   <div
     className="errorContainer"
   >
@@ -206,10 +230,14 @@ exports[`renders wishlist data 1`] = `
 <div
   className="root"
 >
-  <h1
+  <div
     aria-live="polite"
     className="heading"
   >
+    <div
+      aria-label="You have 1 items in your wishlist"
+      aria-live="polite"
+    />
     <mock-FormattedMessage
       defaultMessage="{count, plural, one {Favorites List} other {Favorites Lists}}"
       id="wishlistPage.headingText"
@@ -219,11 +247,12 @@ exports[`renders wishlist data 1`] = `
         }
       }
     />
-  </h1>
+  </div>
   <Wishlist
     data={
       Object {
         "id": 1,
+        "items_count": 1,
         "name": "Favorites",
       }
     }
@@ -233,6 +262,7 @@ exports[`renders wishlist data 1`] = `
     data={
       Object {
         "id": 2,
+        "items_count": 2,
         "name": "Registry",
       }
     }
diff --git a/packages/venia-ui/lib/components/WishlistPage/__tests__/wishlistPage.spec.js b/packages/venia-ui/lib/components/WishlistPage/__tests__/wishlistPage.spec.js
index 2de6f74fe79..5d5d8358b32 100644
--- a/packages/venia-ui/lib/components/WishlistPage/__tests__/wishlistPage.spec.js
+++ b/packages/venia-ui/lib/components/WishlistPage/__tests__/wishlistPage.spec.js
@@ -29,7 +29,7 @@ test('renders general fetch error', () => {
                 { graphQLErrors: [{ message: 'Ruh roh!' }] }
             ]
         ]),
-        wishlists: []
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -49,7 +49,7 @@ test('renders disabled feature error', () => {
                 }
             ]
         ]),
-        wishlists: []
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -60,7 +60,10 @@ test('renders disabled feature error', () => {
 test('renders wishlist data', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: [{ id: 1, name: 'Favorites' }, { id: 2, name: 'Registry' }]
+        wishlists: [
+            { id: 1, name: 'Favorites', items_count: 1 },
+            { id: 2, name: 'Registry', items_count: 2 }
+        ]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -71,7 +74,7 @@ test('renders wishlist data', () => {
 test('renders a single wishlist without visibility toggle', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: [{ id: 1, name: 'Favorites' }]
+        wishlists: [{ id: 1, name: 'Favorites', items_count: 1 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
@@ -82,7 +85,7 @@ test('renders a single wishlist without visibility toggle', () => {
 test('empty single wishlist', () => {
     useWishlistPage.mockReturnValue({
         errors: new Map(),
-        wishlists: []
+        wishlists: [{ items_count: 5 }]
     });
 
     const tree = createTestInstance(<WishlistPage />);
diff --git a/packages/venia-ui/lib/components/WishlistPage/wishlistPage.js b/packages/venia-ui/lib/components/WishlistPage/wishlistPage.js
index a6bbf5567bb..78841d942bb 100644
--- a/packages/venia-ui/lib/components/WishlistPage/wishlistPage.js
+++ b/packages/venia-ui/lib/components/WishlistPage/wishlistPage.js
@@ -79,13 +79,22 @@ const WishlistPage = props => {
         );
     }
 
+    const wishlistMessage = formatMessage(
+        {
+            id: 'wishlist.itemsMessage',
+            defaultMessage: 'You have {count} items in your wishlist.'
+        },
+        { count: wishlists[0].items_count }
+    );
+
     return (
         <div className={classes.root} data-cy="Wishlist-root">
-            <h1
+            <div
                 aria-live="polite"
                 className={classes.heading}
                 data-cy="WishlistPage-heading"
             >
+                <div aria-live="polite" aria-label={wishlistMessage} />
                 <FormattedMessage
                     values={{ count: wishlists.length }}
                     id={'wishlistPage.headingText'}
@@ -93,7 +102,7 @@ const WishlistPage = props => {
                         '{count, plural, one {Favorites List} other {Favorites Lists}}'
                     }
                 />
-            </h1>
+            </div>
             {content}
         </div>
     );