fix(MWPW-152338): handles &s in custom localized custom filters

adobecom · Jun 17, 2024 · 4f66c56 · 4f66c56
1 parent ad472da
commit 4f66c56
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 37 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 0.13.1 (6/11/2024, 19:35:09)
+ * Chimera UI Libraries - Build 0.13.1 (6/17/2024, 13:19:35)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -6211,10 +6211,6 @@ var Container = function Container(props) {
     var cardStyle = getConfig('collection', 'cardStyle');
     var title = getConfig('collection', 'i18n.title');
     var headers = getConfig('headers', '');
-    // eslint-disable-next-line no-use-before-define
-    var categories = getConfig('filterPanel', 'categories');
-    // eslint-disable-next-line no-use-before-define
-    var authoredCategories = getAuthoredCategories(authoredFilters, categories);
 
     /**
      **** Constants ****
@@ -6225,6 +6221,11 @@ var Container = function Container(props) {
     var isStandardContainer = authoredLayoutContainer !== _constants.LAYOUT_CONTAINER.CAROUSEL;
     var isCategoriesContainer = authoredLayoutContainer === _constants.LAYOUT_CONTAINER.CATEGORIES;
 
+    // eslint-disable-next-line no-use-before-define
+    var categories = getConfig('filterPanel', 'categories');
+    // eslint-disable-next-line no-use-before-define, max-len
+    var authoredCategories = isCategoriesContainer && getAuthoredCategories(authoredFilters, categories);
+
     /**
      **** Hooks ****
      */
@@ -6960,7 +6961,7 @@ var Container = function Container(props) {
         return allFilters.map(function (filter) {
             return _extends({}, filter, {
                 items: filter.items.filter(function (item) {
-                    return tags.includes(item.id) || timingTags.includes(item.id);
+                    return tags.includes(item.id) || tags.toString().includes('/' + item.id) || timingTags.includes(item.id);
                 })
             });
         }).filter(function (filter) {
@@ -7525,6 +7526,7 @@ var Container = function Container(props) {
      *          Prepends the "All products" label to the list of categories
      */
     function getAllCategoryProducts() {
+        if (!authoredCategories) return [];
         var allCategories = [];
         var _iteratorNormalCompletion4 = true;
         var _didIteratorError4 = false;
@@ -7580,7 +7582,7 @@ var Container = function Container(props) {
 
         return {
             group: 'All products',
-            id: 'caas:products',
+            id: 'caas:all-products',
             items: allCategories
         };
     }
@@ -7669,10 +7671,12 @@ var Container = function Container(props) {
     });
 
     (0, _react.useEffect)(function () {
-        setFilters(function (prevFilters) {
-            var nextFilters = prevFilters.concat(getAllCategoryProducts());
-            return nextFilters;
-        });
+        if (isCategoriesContainer) {
+            setFilters(function (prevFilters) {
+                var nextFilters = prevFilters.concat(getAllCategoryProducts());
+                return nextFilters;
+            });
+        }
     }, []);
 
     return _react2.default.createElement(
@@ -54078,6 +54082,8 @@ var LeftFilterPanel = (0, _react.forwardRef)(function (_ref, ref) {
 
     var getConfig = (0, _hooks.useConfig)();
 
+    console.log('*** Panel.jsx: LeftFilterPanel: Filters:', filters);
+
     /**
      **** Authored Configs ****
      */
@@ -54473,7 +54479,7 @@ var Item = function Item(props) {
                         id: id + '-link',
                         onClick: handleClick,
                         tabIndex: '0' },
-                    name,
+                    name && name.replaceAll('&amp;', '&'),
                     _react2.default.createElement(
                         'div',
                         {
@@ -54589,7 +54595,7 @@ var Items = function Items(props) {
                         'span',
                         {
                             className: 'consonant-LeftFilter-itemsItemName' },
-                        item.label
+                        item.label && item.label.replaceAll('&amp;', '&')
                     )
                 )
             );
@@ -54837,7 +54843,7 @@ var ChosenFilterItem = function ChosenFilterItem(props) {
             'data-testid': 'consonant-ChosenFilter',
             className: 'consonant-ChosenFilter',
             tabIndex: '0' },
-        name
+        name.replaceAll('&amp;', '&')
     );
 };
 

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/react/src/js/components/Consonant/Container/Container.jsx b/react/src/js/components/Consonant/Container/Container.jsx
@@ -154,10 +154,6 @@ const Container = (props) => {
     const cardStyle = getConfig('collection', 'cardStyle');
     const title = getConfig('collection', 'i18n.title');
     const headers = getConfig('headers', '');
-    // eslint-disable-next-line no-use-before-define
-    const categories = getConfig('filterPanel', 'categories');
-    // eslint-disable-next-line no-use-before-define
-    const authoredCategories = getAuthoredCategories(authoredFilters, categories);
 
     /**
      **** Constants ****
@@ -168,6 +164,11 @@ const Container = (props) => {
     const isStandardContainer = authoredLayoutContainer !== LAYOUT_CONTAINER.CAROUSEL;
     const isCategoriesContainer = authoredLayoutContainer === LAYOUT_CONTAINER.CATEGORIES;
 
+    // eslint-disable-next-line no-use-before-define
+    const categories = getConfig('filterPanel', 'categories');
+    // eslint-disable-next-line no-use-before-define, max-len
+    const authoredCategories = isCategoriesContainer && getAuthoredCategories(authoredFilters, categories);
+
     /**
      **** Hooks ****
      */
@@ -743,8 +744,9 @@ const Container = (props) => {
 
         return allFilters.map(filter => ({
             ...filter,
-            items: filter.items.filter(item => tags.includes(item.id) ||
-                timingTags.includes(item.id)),
+            items: filter.items.filter(item => tags.includes(item.id)
+                || tags.toString().includes(`/${item.id}`)
+                || timingTags.includes(item.id)),
         })).filter(filter => filter.items.length > 0);
     };
 
@@ -1236,6 +1238,7 @@ const Container = (props) => {
      *          Prepends the "All products" label to the list of categories
      */
     function getAllCategoryProducts() {
+        if (!authoredCategories) return [];
         let allCategories = [];
         for (const category of authoredCategories) {
             if (category && category.items) {
@@ -1247,7 +1250,7 @@ const Container = (props) => {
         }
         return {
             group: 'All products',
-            id: 'caas:products',
+            id: 'caas:all-products',
             items: allCategories,
         };
     }
@@ -1311,10 +1314,12 @@ const Container = (props) => {
     });
 
     useEffect(() => {
-        setFilters((prevFilters) => {
-            const nextFilters = prevFilters.concat(getAllCategoryProducts());
-            return nextFilters;
-        });
+        if (isCategoriesContainer) {
+            setFilters((prevFilters) => {
+                const nextFilters = prevFilters.concat(getAllCategoryProducts());
+                return nextFilters;
+            });
+        }
     }, []);
 
     return (

diff --git a/react/src/js/components/Consonant/Filters/Left/Desktop-Only/ChosenItem.jsx b/react/src/js/components/Consonant/Filters/Left/Desktop-Only/ChosenItem.jsx
@@ -51,7 +51,7 @@ const ChosenFilterItem = (props) => {
             data-testid="consonant-ChosenFilter"
             className="consonant-ChosenFilter"
             tabIndex="0">
-            {name}
+            {name.replaceAll('&amp;', '&')}
         </button>
     );
 };

diff --git a/react/src/js/components/Consonant/Filters/Left/Item.jsx b/react/src/js/components/Consonant/Filters/Left/Item.jsx
@@ -198,7 +198,7 @@ const Item = (props) => {
                             id={`${id}-link`}
                             onClick={handleClick}
                             tabIndex="0">
-                            {name}
+                            {name && name.replaceAll('&amp;', '&')}
                             <div
                                 className="consonant-LeftFilter-selectedItemsQty"
                                 data-qty={dataQtyTxt}>

diff --git a/react/src/js/components/Consonant/Filters/Left/Items.jsx b/react/src/js/components/Consonant/Filters/Left/Items.jsx
@@ -57,7 +57,7 @@ const Items = (props) => {
                             className="consonant-LeftFilter-itemsItemCheckmark" />
                         <span
                             className="consonant-LeftFilter-itemsItemName">
-                            {item.label}
+                            {item.label && item.label.replaceAll('&amp;', '&')}
                         </span>
                     </label>
                 </li>

diff --git a/react/src/js/components/Consonant/Filters/Left/Panel.jsx b/react/src/js/components/Consonant/Filters/Left/Panel.jsx
@@ -89,6 +89,8 @@ const LeftFilterPanel = forwardRef(({
 }, ref) => {
     const getConfig = useConfig();
 
+    console.log('*** Panel.jsx: LeftFilterPanel: Filters:', filters);
+
     /**
      **** Authored Configs ****
      */