PWA-3331::System is getting crashed when selecting add to cart in cas… (

#4318) * 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 <[email protected]>
magento · Nov 28, 2024 · e7b42ad · e7b42ad
1 parent dfee7c2
commit e7b42ad
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     ) : (