From e7b42ad636c204e5ac0e23190ba7d955a6774cb3 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Thu, 28 Nov 2024 13:29:38 +0530
Subject: [PATCH] =?UTF-8?q?PWA-3331::System=20is=20getting=20crashed=20whe?=
 =?UTF-8?q?n=20selecting=20add=20to=20cart=20in=20cas=E2=80=A6=20(#4318)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PWA-3331::System is getting crashed when selecting add to cart in case of translated language

* PWA-3331::System is getting crashed when selecting add to cart in case of translated language

* fix issue

* fix issue

* Wrapping FormatMessage Component with <div> so that browser translated DOM will not fail the js DOM Manipulation.

---------

Co-authored-by: del15881 <del15881@adobe.com>
---
 .../lib/components/AuthBar/authBar.js         | 10 ++++---
 .../__snapshots__/cartPage.spec.js.snap       | 18 ++++++++----
 .../lib/components/CartPage/cartPage.js       | 18 ++++++++----
 .../lib/components/MiniCart/miniCart.js       | 28 +++++++++++--------
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/packages/venia-ui/lib/components/AuthBar/authBar.js b/packages/venia-ui/lib/components/AuthBar/authBar.js
index 886aa9352c..519d9e4693 100644
--- a/packages/venia-ui/lib/components/AuthBar/authBar.js
+++ b/packages/venia-ui/lib/components/AuthBar/authBar.js
@@ -50,10 +50,12 @@ const AuthBar = props => {
             <span className={classes.contents}>
                 <AccountChip fallbackText={fallBackText} />
                 <span className={classes.signIn}>
-                    <FormattedMessage
-                        id={'authBar.signInText'}
-                        defaultMessage={'Sign In'}
-                    />
+                    <div>
+                        <FormattedMessage
+                            id={'authBar.signInText'}
+                            defaultMessage={'Sign In'}
+                        />
+                    </div>
                 </span>
             </span>
         </button>
diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
index c3adc663ad..8b4164a88b 100644
--- a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
@@ -165,12 +165,18 @@ exports[`renders empty cart text (no adjustments, list or summary) if cart is em
     <div
       className="items_container"
     >
-      <h3>
-        <mock-FormattedMessage
-          defaultMessage="There are no items in your cart."
-          id="cartPage.emptyCart"
-        />
-      </h3>
+      <div>
+        <div>
+          <h3>
+            <div>
+              <mock-FormattedMessage
+                defaultMessage="There are no items in your cart."
+                id="cartPage.emptyCart"
+              />
+            </div>
+          </h3>
+        </div>
+      </div>
     </div>
     <div
       className="price_adjustments_container"
diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js
index 073fa6a92c..97a36c0f47 100644
--- a/packages/venia-ui/lib/components/CartPage/cartPage.js
+++ b/packages/venia-ui/lib/components/CartPage/cartPage.js
@@ -68,12 +68,18 @@ const CartPage = props => {
             fetchCartDetails={fetchCartDetails}
         />
     ) : (
-        <h3>
-            <FormattedMessage
-                id={'cartPage.emptyCart'}
-                defaultMessage={'There are no items in your cart.'}
-            />
-        </h3>
+        <div>
+            <div>
+                <h3>
+                    <div>
+                        <FormattedMessage
+                            id={'cartPage.emptyCart'}
+                            defaultMessage={'There are no items in your cart.'}
+                        />
+                    </div>
+                </h3>
+            </div>
+        </div>
     );
 
     const priceAdjustments = hasItems ? (
diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js
index 5430bd8820..5e11177465 100644
--- a/packages/venia-ui/lib/components/MiniCart/miniCart.js
+++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js
@@ -114,18 +114,22 @@ const MiniCart = React.forwardRef((props, ref) => {
                 className={classes.emptyMessage}
                 data-cy="MiniCart-emptyMessage"
             >
-                <FormattedMessage
-                    id={'miniCart.emptyMessage'}
-                    defaultMessage={'There are no items in your cart.'}
-                />
-                <span
-                    hidden
-                    role="status"
-                    aria-hidden="false"
-                    aria-live="polite"
-                >
-                    {announceMiniCartCount}
-                </span>
+                <div>
+                    <FormattedMessage
+                        id={'miniCart.emptyMessage'}
+                        defaultMessage={'There are no items in your cart.'}
+                    />
+                </div>
+                <div>
+                    <span
+                        hidden
+                        role="status"
+                        aria-hidden="false"
+                        aria-live="polite"
+                    >
+                        {announceMiniCartCount}
+                    </span>
+                </div>
             </div>
         </div>
     ) : (