MWPW-158142 [MEP] check for MEP placeholders as fragmentless content …

…is inserted (#2919)

* Initial checkin. Working state.

* Code refactor.

* Unit test initial checkin.

* Refactor into reusable function.

* Removed old code.

* Linting.

* update unit test to call create content

---------

Co-authored-by: vgoodric <[email protected]>

libs/features/personalization/personalization.js

@@ -148,6 +148,17 @@ const createFrag = (el, action, content, manifestId, targetManifestId) => {
   return frag;
 };
 
+export function replacePlaceholders(value, placeholders) {
+  let val = value;
+  const matches = val.match(/{{(.*?)}}/g);
+  if (!matches) return val;
+  matches.forEach((match) => {
+    const key = match.replace(/{{|}}/g, '').trim();
+    if (placeholders[key]) val = val.replace(match, placeholders[key]);
+  });
+  return val;
+}
+
 export const createContent = (el, content, manifestId, targetManifestId, action, modifiers) => {
   if (action === 'replace') {
     addIds(el, manifestId, targetManifestId);
@@ -158,11 +169,16 @@ export const createContent = (el, content, manifestId, targetManifestId, action,
     return el;
   }
   if (getSelectorType(content) !== 'fragment') {
+    const config = getConfig();
+    const newContent = replacePlaceholders(content, config.placeholders);
+
     if (action === 'replace') {
-      el.innerHTML = content;
+      el.innerHTML = newContent;
+
       return el;
     }
-    const container = createTag('div', {}, content);
+
+    const container = createTag('div', {}, newContent);
     addIds(container, manifestId, targetManifestId);
     return container;
   }
@@ -926,17 +942,6 @@ export function handleFragmentCommand(command, a) {
   return false;
 }
 
-function replacePlaceholders(value, placeholders) {
-  let val = value;
-  const matches = val.match(/{{(.*?)}}/g);
-  if (!matches) return val;
-  matches.forEach((match) => {
-    const key = match.replace(/{{|}}/g, '').trim();
-    if (placeholders[key]) val = val.replace(match, placeholders[key]);
-  });
-  return val;
-}
-
 export function parseNestedPlaceholders({ placeholders }) {
   if (!placeholders) return;
   Object.entries(placeholders).forEach(([key, value]) => {

test/features/personalization/parseNestedPlaceholders.test.js

@@ -1,19 +1,31 @@
 import { expect } from '@esm-bundle/chai';
-import { parseNestedPlaceholders } from '../../../libs/features/personalization/personalization.js';
+import { parseNestedPlaceholders, createContent } from '../../../libs/features/personalization/personalization.js';
+import { getConfig } from '../../../libs/utils/utils.js';
 
-const config = {
-  placeholders: {
-    'promo-product-name': 'CC All Apps',
-    'promo-header': 'Buy now and save {{promo-discount}}% off {{promo-product-name}}.',
-    'promo-discount': '50',
-    'promo-description': 'For just {{promo-price}}, get 20+...',
-    'promo-price': 'US$49.99',
-  },
+const config = getConfig();
+config.placeholders = {
+  'promo-product-name': 'CC All Apps',
+  'promo-header': 'Buy now and save {{promo-discount}}% off {{promo-product-name}}.',
+  'promo-discount': '50',
+  'promo-description': 'For just {{promo-price}}, get 20+...',
+  'promo-price': 'US$49.99',
 };
-describe('test different values', () => {
+describe('test different values for parseNestedPlaceholders', () => {
   it('should update placeholders', () => {
     parseNestedPlaceholders(config);
     expect(config.placeholders['promo-header']).to.equal('Buy now and save 50% off CC All Apps.');
     expect(config.placeholders['promo-description']).to.equal('For just US$49.99, get 20+...');
   });
 });
+describe('test createContent', () => {
+  const el = document.createElement('div');
+  it('append action', () => {
+    const newContent = createContent(el, '{{promo-discount}}', false, false, 'append', []);
+    expect(newContent.innerHTML).to.equal('50');
+  });
+  it('replace action', () => {
+    el.innerHTML = 'Hello World';
+    const newContent = createContent(el, '{{promo-discount}}', false, false, 'replace', []);
+    expect(newContent.innerHTML).to.equal('50');
+  });
+});