MWPW-135821 introduce mep custom action & use it for card collection (a…

…dobecom#2152)

* MWPW-135821 introduce custom action

- and inaugurating first custom action for replacing cards in collection

* MWPW-135821 use prefix in selector

* MWPW-135821 adding preview data

---------

Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -28,6 +28,8 @@ const LITERAL_SLOTS = [
 // eslint-disable-next-line no-promise-executor-return
 const makePause = async (timeout = 0) => new Promise((resolve) => setTimeout(resolve, timeout));
 
+const BLOCK_NAME = 'merch-card-collection';
+
 const fail = (el, err = '') => {
   window.lana?.log(`Failed to initialize merch cards: ${err}`);
   el.innerHTML = '';
@@ -53,11 +55,13 @@ async function getCardsRoot(config, html) {
   return cardsRoot;
 }
 
-const fetchOverrideCard = (path, config) => new Promise((resolve, reject) => {
-  fetch(`${localizeLink(path, config)}.plain.html`).then((res) => {
+const fetchOverrideCard = (action, config) => new Promise((resolve, reject) => {
+  fetch(`${localizeLink(action?.target, config)}.plain.html`).then((res) => {
     if (res.ok) {
       res.text().then((cardContent) => {
-        resolve({ path, cardContent: /^<div>(.*)<\/div>$/.exec(cardContent.replaceAll('\n', ''))[1] });
+        const response = { path: action.target, cardContent: /^<div>(.*)<\/div>$/.exec(cardContent.replaceAll('\n', ''))[1] };
+        if (config?.mep?.preview) response.manifestId = action.manifestId;
+        resolve(response);
       });
     } else {
       reject(res.statusText
@@ -70,6 +74,7 @@ const fetchOverrideCard = (path, config) => new Promise((resolve, reject) => {
 });
 
 async function overrideCards(root, overridePromises, config) {
+  let overrideString = '';
   try {
     if (overridePromises?.length > 0) {
       // Wait for all override cards to be fetched
@@ -84,12 +89,16 @@ async function overrideCards(root, overridePromises, config) {
             card.replaceWith(overrideMap[card.name]);
           }
         });
+        if (config.mep.preview) {
+          overrideString = overrideData.map(({ manifestId, path }) => `${manifestId}:${path}`).join(',');
+        }
       }
     }
   } catch (error) {
     /* c8 ignore next */
     window?.lana?.log('Failed to override cards', error);
   }
+  return overrideString;
 }
 
 /**
@@ -180,7 +189,7 @@ export default async function init(el) {
     import('../../deps/merch-card.js'),
   ];
 
-  const { base } = getConfig();
+  const { base, mep } = getConfig();
   const merchStyles = new Promise((resolve) => {
     loadStyle(`${base}/blocks/merch/merch.css`, resolve);
   });
@@ -291,14 +300,20 @@ export default async function init(el) {
   }
 
   const cardsRoot = await cardsRootPromise;
-  const overrides = el.dataset[OVERRIDE_PATHS];
-  const overridePromises = overrides?.split(',').map(fetchOverrideCard);
-  await overrideCards(cardsRoot, overridePromises, config);
+  const overridePromises = mep?.custom?.[BLOCK_NAME]?.map(
+    (action) => fetchOverrideCard(action, config),
+  );
+  const overrides = await overrideCards(cardsRoot, overridePromises, config);
   await initMerchCards(attributes.filtered, preferences, cardsRoot);
   await Promise.all([merchStyles, merchCardStyles, ...deps]);
 
   merchCardCollection.append(...cardsRoot.children);
+
   merchCardCollection.displayResult = true;
+  if (config?.mep?.preview && overrides) {
+    merchCardCollection.dataset.overrides = overrides;
+  }
+
   await merchCardCollection.updateComplete;
   performance.measure(
     'merch-card-collection-render',

libs/features/personalization/personalization.js

@@ -51,6 +51,8 @@ const DATA_TYPE = {
   TEXT: 'text',
 };
 
+export const CUSTOM_SELECTOR_PREFIX = 'in-block:';
+
 export const appendJsonExt = (path) => (path.endsWith('.json') ? path : `${path}.json`);
 
 export const normalizePath = (p) => {
@@ -289,6 +291,15 @@ function getSection(rootEl, idx) {
     : rootEl.querySelector(`:scope > div:nth-child(${idx})`);
 }
 
+function registerCustomAction(cmd, manifestId) {
+  const { action, selector, target } = cmd;
+  const config = getConfig();
+  const blockName = selector.substring(CUSTOM_SELECTOR_PREFIX.length);
+  config.mep.custom ??= {};
+  config.mep.custom[blockName] ??= [];
+  config.mep.custom[blockName].push({ manifestId, action, target });
+}
+
 function getSelectedElement(selector, action, rootEl) {
   if (!selector) return null;
   if ((action.includes('appendtosection') || action.includes('prependtosection'))) {
@@ -356,6 +367,10 @@ function getSelectedElement(selector, action, rootEl) {
 function handleCommands(commands, manifestId, rootEl = document) {
   commands.forEach((cmd) => {
     const { action, selector, target } = cmd;
+    if (selector.startsWith(CUSTOM_SELECTOR_PREFIX)) {
+      registerCustomAction(cmd, manifestId);
+      return;
+    }
     if (action in COMMANDS) {
       const el = getSelectedElement(selector, action, rootEl);
       COMMANDS[action](el, target, manifestId);

test/blocks/merch-card-collection/merch-card-collection.test.js

@@ -161,7 +161,26 @@ describe('Merch Cards', async () => {
 
   it('should override cards when asked to', async () => {
     const el = document.getElementById('multipleFilters');
-    el.dataset.overrides = '/override-photoshop,/override-express';
+    setConfig({
+      ...conf,
+      mep: {
+        preview: true,
+        custom: {
+          'merch-card-collection': [
+            {
+              action: 'replace',
+              manifestId: 'promo1.json',
+              target: '/override-photoshop',
+            },
+            {
+              action: 'replace',
+              manifestId: 'promo2.json',
+              target: '/override-express',
+            },
+          ],
+        },
+      },
+    });
     cards = [...document.querySelectorAll('#cards .merch-card')]
       .map((merchCardEl) => ({ cardContent: merchCardEl.outerHTML })); // mock cards
     const merchCards = await init(el);
@@ -171,6 +190,7 @@ describe('Merch Cards', async () => {
     const express = merchCards.querySelector('merch-card[name="express"]');
     expect(photoshop.title.indexOf('PROMOTION') > 0).to.be.true;
     expect(express.title.indexOf('PROMOTION') > 0).to.be.true;
+    expect(merchCards.dataset.overrides).to.equal('promo1.json:/override-photoshop,promo2.json:/override-express');
   });
 
   it('should localize the query-index url', async () => {

test/features/personalization/actions.test.js

@@ -219,3 +219,29 @@ describe('useBlockCode action', async () => {
     expect(myBlock.textContent?.trim()).to.equal('My New Block!');
   });
 });
+
+describe('custom actions', async () => {
+  it('should not add custom configuration if not needed', async () => {
+    let manifestJson = await readFile({ path: './mocks/actions/manifestReplace.json' });
+    manifestJson = JSON.parse(manifestJson);
+    setFetchResponse(manifestJson);
+    await applyPers([{ manifestPath: '/path/to/manifest.json' }]);
+    expect(getConfig().mep.custom).to.be.undefined;
+  });
+
+  it('should add a custom action configuration', async () => {
+    let manifestJson = await readFile({ path: './mocks/actions/manifestCustomAction.json' });
+    manifestJson = JSON.parse(manifestJson);
+    setFetchResponse(manifestJson);
+
+    await applyPers([{ manifestPath: '/path/to/manifest.json' }]);
+    expect(getConfig().mep.custom).to.deep.equal({
+      'my-block': [{
+        action: 'replace',
+        manifestId: 'manifest.json',
+        target: '/fragments/fragmentreplaced',
+      },
+      ],
+    });
+  });
+});

test/features/personalization/mocks/actions/manifestCustomAction.json

@@ -0,0 +1,18 @@
+{
+  "total": 1,
+  "offset": 0,
+  "limit": 5,
+  "data": [
+    {
+      "action": "replace",
+      "selector": "in-block:my-block",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/fragments/fragmentreplaced",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    }
+  ],
+  ":type": "sheet"
+}