MWPW-133802 (feat): Hide CTA using tags

e2e-tests/specs/all.e2e.js

@@ -291,7 +291,19 @@ describe('Hide CTA(s):', async () => {
         await browser.setTimeout({ script: 50000 });
         for await (const oneCTA of $$('.consonant-Card .consonant-BtnInfobit--cta')) {
             expect(await oneCTA.isDisplayed()).toEqual(false);
-          }
+        }
+    });
+    it('MWPW-134272: Cards with "hide CTA tags" should be hidden while others are still visible', async () => {
+        const cloneConfig = structuredClone(config);
+        cloneConfig.hideCtaTags = ['adobe-com-enterprise:topic/digital-foundation'];
+        const state = btoa(JSON.stringify(cloneConfig));
+        const url = `${serverPath}/html/e2e/MWPW-126169.html?state=${state}`;
+        await browser.url(url);
+        await browser.setTimeout({ script: 50000 });
+        const taggedCta = await $('#ad83970f-c987-3c86-846f-4edaec827fb1 .consonant-BtnInfobit--cta').isDisplayed();
+        const untaggedCta = await $('#ac578dee-f01b-3ea0-a282-2116619e4251 .consonant-BtnInfobit--cta').isDisplayed();
+        expect(taggedCta).toEqual(false);
+        expect(untaggedCta).toEqual(true);
     });
 });
 

html/e2e/MWPW-126169.html

@@ -206,6 +206,7 @@
             }
         },
         hideCtaIds: ['ac578dee-f01b-3ea0-a282-2116619e4251'],
+        hideCtaTags: [],
         sort: {
             enabled: 'true',
             defaultSort: 'customSort',

react/src/js/components/Consonant/Container/Container.jsx

@@ -76,6 +76,7 @@ import {
     featuredCards: [{}],
     filterPanel: {},
     hideCtaIds: [{}],
+    hideCtaTags: [{}],
     sort: {},
     pagination: {},
     bookmarks: {},
@@ -120,6 +121,11 @@ const Container = (props) => {
         .replace(/\[|\]/g, '')
         .replace(/`/g, '')
         .split(',');
+    const hideCtaTags = getConfig('hideCtaTags', '')
+        .toString()
+        .replace(/\[|\]/g, '')
+        .replace(/`/g, '')
+        .split(',');
     const leftPanelSearchPlaceholder = getConfig('search', 'i18n.leftFilterPanel.searchPlaceholderText');
     const topPanelSearchPlaceholder = getConfig('search', 'i18n.topFilterPanel.searchPlaceholderText');
     const searchPlaceholderText = getConfig('search', 'i18n.filterInfo.searchPlaceholderText');
@@ -785,6 +791,7 @@ const Container = (props) => {
                             onlyShowBookmarks,
                             bookmarkedCardIds,
                             hideCtaIds,
+                            hideCtaTags,
                         );
                     if (payload.isHashed) {
                         const TAG_HASH_LENGTH = 6;

react/src/js/components/Consonant/Grid/Grid.jsx

@@ -199,7 +199,7 @@ const Grid = (props) => {
      * @returns {bool} - whether a cta should be hidden
      */
     const getHideCta = (card, style) => {
-        if (card.hideCtaId || style === 'hidden') return true;
+        if (card.hideCtaId || card.hideCtaTags || style === 'hidden') return true;
         return false;
     };
 

react/src/js/components/Consonant/Helpers/JsonProcessor.js

@@ -3,6 +3,7 @@ import {
     truncateString,
     removeDuplicatesByKey,
 } from './general';
+import { hasTag } from './Helpers';
 
 /**
  * Class that handles parsing raw JSON data and returning a set of processed cards
@@ -60,16 +61,30 @@ export default class JsonProcessor {
      * @param {*} onlyShowBookmarks
      * @param {*} bookmarkedCardIds
      * @param {*} hideCtaIds
+     * @param {*} hideCtaTags
      * @return {*}
      * @memberof JsonProcessor
      */
-    addCardMetaData(truncateTextQty, onlyShowBookmarks, bookmarkedCardIds, hideCtaIds) {
+    addCardMetaData(
+        truncateTextQty,
+        onlyShowBookmarks,
+        bookmarkedCardIds,
+        hideCtaIds,
+        hideCtaTags,
+    ) {
         this.processedCards = this.processedCards.map(card => ({
             ...card,
             description: truncateString(getByPath(card, 'contentArea.description', ''), truncateTextQty),
             isBookmarked: bookmarkedCardIds.some(i => i === card.id),
             disableBookmarkIco: onlyShowBookmarks,
             hideCtaId: hideCtaIds.some(i => i === card.id),
+            ...((hideCtaTags.length && hideCtaTags[0] !== '')) ?
+                {
+                    hideCtaTags: hideCtaTags.some((tag) => {
+                        const re = new RegExp(tag);
+                        return hasTag(re, card.tags);
+                    }),
+                } : { hideCtaTags: false },
             initial: {
                 title: getByPath(card, 'contentArea.title', ''),
                 description: getByPath(card, 'contentArea.description', ''),

react/src/js/components/Consonant/Helpers/TestingConstants/JsonProcessor.js

@@ -30,6 +30,7 @@ const addCardMetaData = [
                     detailText: 'detailText 1',
                     dateDetailText: '',
                 },
+                tags: [{ id: 'caas:tagB' }],
             },
             {
                 id: 2,
@@ -40,6 +41,10 @@ const addCardMetaData = [
                     detailText: '',
                     dateDetailText: '',
                 },
+                tags: [
+                    { id: 'caas:tagA' },
+                    { id: 'caas:tagB' },
+                ],
             },
             {
                 id: 3,
@@ -50,12 +55,14 @@ const addCardMetaData = [
                     detailText: 'detailText 2',
                     dateDetailText: '',
                 },
+                tags: [{ id: 'caas:tagC' }],
             },
         ],
         truncateTextQty: 5,
         onlyShowBookmarks: false,
         bookmarkedCardIds: [1],
         hideCtaIds: [2],
+        hideCtaTags: ['caas:tagC'],
         expectedValue: [
             {
                 id: 1,
@@ -70,13 +77,15 @@ const addCardMetaData = [
                 isBookmarked: true,
                 disableBookmarkIco: false,
                 hideCtaId: false,
+                hideCtaTags: false,
                 initial: {
                     title: 'title 1',
                     description: '12345',
                     bannerText: 'overlays.description 1',
                     dateDetailText: '',
                     detailText: 'detailText 1',
                 },
+                tags: [{ id: 'caas:tagB' }],
             },
             {
                 id: 2,
@@ -91,13 +100,18 @@ const addCardMetaData = [
                 isBookmarked: false,
                 disableBookmarkIco: false,
                 hideCtaId: true,
+                hideCtaTags: false,
                 initial: {
                     title: '',
                     description: '',
                     bannerText: '',
                     dateDetailText: '',
                     detailText: '',
                 },
+                tags: [
+                    { id: 'caas:tagA' },
+                    { id: 'caas:tagB' },
+                ],
             },
             {
                 id: 3,
@@ -112,13 +126,15 @@ const addCardMetaData = [
                 isBookmarked: false,
                 disableBookmarkIco: false,
                 hideCtaId: false,
+                hideCtaTags: true,
                 initial: {
                     title: 'title 2',
                     description: '123456',
                     bannerText: 'overlays.description 2',
                     dateDetailText: '',
                     detailText: 'detailText 2',
                 },
+                tags: [{ id: 'caas:tagC' }],
             },
         ],
     },

react/src/js/components/Consonant/Helpers/__tests__/JsonProcessor.spec.js

@@ -5,7 +5,13 @@ import JsonProcessor from '../JsonProcessor';
 describe('utils/JsonProcessor', () => {
     describe('addCardMetaData', () => {
         PROPS.addCardMetaData.forEach(({
-            cards, truncateTextQty, onlyShowBookmarks, bookmarkedCardIds, hideCtaIds, expectedValue,
+            cards,
+            truncateTextQty,
+            onlyShowBookmarks,
+            bookmarkedCardIds,
+            hideCtaIds,
+            hideCtaTags,
+            expectedValue,
         }) => {
             test('should add card metadata', () => {
                 const jsonProcessor = new JsonProcessor(cards);
@@ -15,6 +21,7 @@ describe('utils/JsonProcessor', () => {
                     onlyShowBookmarks,
                     bookmarkedCardIds,
                     hideCtaIds,
+                    hideCtaTags,
                 );
 
                 expect(processedCards).toEqual(expectedValue);

react/src/js/components/Consonant/Helpers/constants.js

@@ -146,6 +146,7 @@ export const DEFAULT_CONFIG = {
     },
     featuredCards: [],
     hideCtaIds: [],
+    hideCtaTags: [],
     header: {
         enabled: false,
     },

react/src/js/components/Consonant/Testing/Mocks/config.json

@@ -125,6 +125,7 @@
         }
     },
     "hideCtaIds": "[]",
+    "hideCtaTags": "[]",
     "sort": {
         "enabled": true,
         "defaultSort": "featured",