From 52d81453fba621d25b199292f8df79def3faf821 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:00:49 +0530
Subject: [PATCH] PWA-3307::[Cloud] Language translating giving errors (#4301)

* PWA-3307::[Cloud] Language translating giving errors

* PWA-3307::[Cloud] Language translating giving errors

* PWA-3307::[Cloud] Language translating giving errors

* PWA-3307::[Cloud] Language translating giving errors
---
 .../categoryContent.spec.js.snap              | 126 ++++++++++--------
 .../Category/categoryContent.js               |  88 ++++++------
 2 files changed, 120 insertions(+), 94 deletions(-)

diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
index 5de4b6d5a3..976f91340f 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`filter button/modal does not render if there are no filters 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -19,7 +19,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -94,16 +96,16 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter button/modal renders when there are filters 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -117,7 +119,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -206,16 +210,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter sidebar does not render if not in viewport 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -229,7 +233,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -318,16 +324,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter sidebar renders when in viewport 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -341,7 +347,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -438,16 +446,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders empty page 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -461,7 +469,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Empty Name
+          <div>
+            Empty Name
+          </div>
         </div>
       </h1>
     </div>
@@ -489,16 +499,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders loading indicator if no data and loading 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -512,7 +522,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -558,16 +570,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders the correct tree 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -581,7 +593,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -656,16 +670,16 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`sort button/container does not render if there are no products 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -679,7 +693,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -707,16 +723,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`sort button/container renders when there are products 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -730,7 +746,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -805,6 +823,6 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index a79fc4150a..c3cbd4eb2e 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -101,13 +101,16 @@ const CategoryContent = props => {
 
     const categoryResultsHeading =
         totalCount > 0 ? (
-            <FormattedMessage
-                id={'categoryContent.resultCount'}
-                values={{
-                    count: totalCount
-                }}
-                defaultMessage={'{count} Results'}
-            />
+            <div>
+                {' '}
+                <FormattedMessage
+                    id={'categoryContent.resultCount'}
+                    values={{
+                        count: totalCount
+                    }}
+                    defaultMessage={'{count} Results'}
+                />{' '}
+            </div>
         ) : isLoading ? (
             <Shimmer width={5} />
         ) : null;
@@ -151,45 +154,50 @@ const CategoryContent = props => {
 
     return (
         <Fragment>
-            <Breadcrumbs categoryId={categoryId} />
-            <StoreTitle>{categoryName}</StoreTitle>
-            <article className={classes.root} data-cy="CategoryContent-root">
-                <div className={classes.categoryHeader}>
-                    <h1 aria-live="polite" className={classes.title}>
-                        <div
-                            className={classes.categoryTitle}
-                            data-cy="CategoryContent-categoryTitle"
-                        >
-                            {categoryTitle}
-                        </div>
-                    </h1>
-                    {categoryDescriptionElement}
-                </div>
-                <div className={classes.contentWrapper}>
-                    <div ref={sidebarRef} className={classes.sidebar}>
-                        <Suspense fallback={<FilterSidebarShimmer />}>
-                            {shouldRenderSidebarContent ? sidebar : null}
-                        </Suspense>
-                    </div>
-                    <div className={classes.categoryContent}>
-                        <div className={classes.heading}>
+            <div>
+                <Breadcrumbs categoryId={categoryId} />
+                <StoreTitle>{categoryName}</StoreTitle>
+                <article
+                    className={classes.root}
+                    data-cy="CategoryContent-root"
+                >
+                    <div className={classes.categoryHeader}>
+                        <h1 aria-live="polite" className={classes.title}>
                             <div
-                                data-cy="CategoryContent-categoryInfo"
-                                className={classes.categoryInfo}
+                                className={classes.categoryTitle}
+                                data-cy="CategoryContent-categoryTitle"
                             >
-                                {categoryResultsHeading}
+                                <div>{categoryTitle}</div>
                             </div>
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
+                        </h1>
+                        {categoryDescriptionElement}
+                    </div>
+                    <div className={classes.contentWrapper}>
+                        <div ref={sidebarRef} className={classes.sidebar}>
+                            <Suspense fallback={<FilterSidebarShimmer />}>
+                                {shouldRenderSidebarContent ? sidebar : null}
+                            </Suspense>
+                        </div>
+                        <div className={classes.categoryContent}>
+                            <div className={classes.heading}>
+                                <div
+                                    data-cy="CategoryContent-categoryInfo"
+                                    className={classes.categoryInfo}
+                                >
+                                    {categoryResultsHeading}
+                                </div>
+                                <div className={classes.headerButtons}>
+                                    {maybeFilterButtons}
+                                    {maybeSortButton}
+                                </div>
+                                {maybeSortContainer}
                             </div>
-                            {maybeSortContainer}
+                            {content}
+                            <Suspense fallback={null}>{filtersModal}</Suspense>
                         </div>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
                     </div>
-                </div>
-            </article>
+                </article>
+            </div>
         </Fragment>
     );
 };