From 94faeaa2352af5867112c26ddea68fbcf8be8977 Mon Sep 17 00:00:00 2001
From: Jan Ivan Viloria <158211769+ivanvatadobe@users.noreply.github.com>
Date: Thu, 6 Feb 2025 20:08:49 -0500
Subject: [PATCH] MWPW-167066 [MEP] Add capabilty for merch-card-collection
 block to run MEP commands (#3623)

* first commit

* add unit test
---
 .../merch-card-collection.js                  | 10 +++++-
 .../merch-card-collection.test.js             | 33 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/libs/blocks/merch-card-collection/merch-card-collection.js b/libs/blocks/merch-card-collection/merch-card-collection.js
index c7311b6a98..906bd6df46 100644
--- a/libs/blocks/merch-card-collection/merch-card-collection.js
+++ b/libs/blocks/merch-card-collection/merch-card-collection.js
@@ -43,7 +43,15 @@ const fail = (el, err = '') => {
 
 /** Parse and prepare cards */
 async function getCardsRoot(config, html) {
-  const cards = `<div>${html}</div>`;
+  let cards = `<div>${html}</div>`;
+  const { mep, placeholders } = config;
+  if (mep?.commands?.length) {
+    const mepRoot = createTag('div', {}, cards);
+    const { handleCommands, replacePlaceholders } = await import('../../features/personalization/personalization.js');
+    handleCommands(mep?.commands, mepRoot, false, true);
+    if (placeholders) mepRoot.innerHTML = replacePlaceholders(mepRoot.innerHTML, placeholders);
+    cards = mepRoot.innerHTML;
+  }
   const fragment = document.createRange().createContextualFragment(
     await replaceText(cards, config),
   );
diff --git a/test/blocks/merch-card-collection/merch-card-collection.test.js b/test/blocks/merch-card-collection/merch-card-collection.test.js
index f544de37db..e70d4513fc 100644
--- a/test/blocks/merch-card-collection/merch-card-collection.test.js
+++ b/test/blocks/merch-card-collection/merch-card-collection.test.js
@@ -171,7 +171,7 @@ describe('Merch Cards', async () => {
     expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
   });
 
-  it('should override cards when asked to', async () => {
+  it('MEP: should override cards when asked to', async () => {
     const el = document.getElementById('multipleFilters');
     setConfig({
       ...conf,
@@ -207,6 +207,37 @@ describe('Merch Cards', async () => {
     expect(merchCards.dataset.overrides).to.equal('promo1.json:/override-photoshop,promo2.json:/override-express');
   });
 
+  it('MEP: should modify cards when asked to', async () => {
+    const el = document.getElementById('multipleFilters');
+    setConfig({
+      ...conf,
+      mep: {
+        preview: true,
+        commands: [
+          {
+            action: 'remove',
+            selector: 'merch-card h3 #_include-fragments #_all',
+            pageFilter: '',
+            content: 'true',
+            selectorType: 'other',
+            manifestId: 'merchcardupdates.json',
+            targetManifestId: false,
+            modifiers: [
+              'include-fragments',
+              'all',
+            ],
+          },
+        ],
+      },
+    });
+    cards = [...document.querySelectorAll('#cards .merch-card')]
+      .map((merchCardEl) => ({ cardContent: merchCardEl.outerHTML })); // mock cards
+    const merchCards = await init(el);
+    expect(merchCards.filter).to.equal('all');
+    await delay(500);
+    expect(merchCards.querySelectorAll('h3[data-removed-manifest-id]').length).to.equal(4);
+  });
+
   it('should localize the query-index url', async () => {
     setConfig({
       ...conf,