MWPW-155079 [MILO][MEP] Manifests not changing domains (#2626)

* replace overridePersonalizationVariant function

* Fix chaining

* Move parseMepParam

* add additional optional chaining operator

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

* Refactor personalization.js

* Remove comment

* Add TargetManifestId

* Remove comment

* Add targetManifestId test

* Refactor addMepHighlightAndTargetManifestIdGnav

* Remove console.log from test

* Shorten function name

* Limits targetManifestId to target exp and adds missing name to  manifestId

* Fix test

* Handle default selectedVariant issue

* Mostly done

* Merging in prop display update

* Unit tests fixed

* Add targetmanifestid to useblockcode

* refactor to remove unnecessary import

* Remove commented code

* Removing unused functions

* Update tests, not including replacePage

* Shorten Function Name

* move insert inline back to fragment.js

* additional cleanup and unit tests

* Fix adobeTargetTestId issues

* add optional chaining

* Update condition for addAnalyticsForUseBlockCode

* Refactor to handle analytics for updatemetadata

* Fix useBlockCode test

* Fix merged merged test

* Remove applyPers from preload fragments test

* Fix martech init post-merge

* Fix tests and martech merge cleanup

* Dynamically import personalization.js

* add 2 ignore comments

* add conditional chaining

* Remove mwpw-146528 temp files

* MWPW-152275 Move manifest.json request up while waiting on sstats / etc. (#2608)

* add preload

* shorten if and and conditional chaining

* run loop even if Target is off

* Add nullish coalescing assignment suggestion

* MWPW-154998 [MEP][MILO] Manifests do not execute in the right order when there is a disabled manifest (#2616)

* add default execution order

* unit test

* normalizePath

* add normalizePath back into preload

* MWPW-155568 [MILO][MEP] If MEP is completely off, mep param should still show button (#2658)

don't return if param is present but empty

---------

Co-authored-by: markpadbe <markp@adobe.com>
Co-authored-by: Mark Perry <124626043+markpadbe@users.noreply.github.com>

libs/blocks/fragment/fragment.js

@@ -32,12 +32,6 @@ const updateFragMap = (fragment, a, href) => {
   }
 };
 
-const setManifestIdOnChildren = (sections, manifestId) => {
-  [...sections[0].children].forEach(
-    (child) => (child.dataset.manifestId = manifestId),
-  );
-};
-
 const insertInlineFrag = (sections, a, relHref) => {
   // Inline fragments only support one section, other sections are ignored
   const fragChildren = [...sections[0].children];
@@ -79,7 +73,7 @@ export default async function init(a) {
   }
 
   const path = new URL(a.href).pathname;
-  if (mep?.fragments?.[path] && mep) {
+  if (mep?.fragments?.[path]) {
     relHref = mep.handleFragmentCommand(mep?.fragments[path], a);
     if (!relHref) return;
   }
@@ -122,15 +116,10 @@ export default async function init(a) {
   }
 
   updateFragMap(fragment, a, relHref);
-
-  if (a.dataset.manifestId) {
-    if (inline) {
-      setManifestIdOnChildren(sections, a.dataset.manifestId);
-    } else {
-      fragment.dataset.manifestId = a.dataset.manifestId;
-    }
+  if (a.dataset.manifestId || a.dataset.adobeTargetTestid) {
+    const { updateFragDataProps } = await import('../../features/personalization/personalization.js');
+    updateFragDataProps(a, inline, sections, fragment);
   }
-
   if (inline) {
     insertInlineFrag(sections, a, relHref);
   } else {

libs/blocks/global-navigation/global-navigation.js

@@ -33,7 +33,7 @@ import {
   toFragment,
   trigger,
   yieldToMain,
-  addMepHighlight,
+  addMepHighlightAndTargetId,
 } from './utilities/utilities.js';
 
 import { replaceKey, replaceKeyArray } from '../../features/placeholders.js';
@@ -919,14 +919,14 @@ class Gnav {
         observer.observe(dropdownTrigger, { attributeFilter: ['aria-expanded'] });
 
         delayDropdownDecoration({ template: triggerTemplate });
-        return addMepHighlight(triggerTemplate, item);
+        return addMepHighlightAndTargetId(triggerTemplate, item);
       }
       case 'primaryCta':
       case 'secondaryCta':
         // Remove its 'em' or 'strong' wrapper
         item.parentElement.replaceWith(item);
 
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${decorateCta({ elem: item, type: itemType, index: index + 1 })}
           </div>`, item);
       case 'link': {
@@ -945,15 +945,15 @@ class Gnav {
           <div class="feds-navItem${activeModifier}">
             ${linkElem}
           </div>`;
-        return addMepHighlight(linkTemplate, item);
+        return addMepHighlightAndTargetId(linkTemplate, item);
       }
       case 'text':
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${item.textContent}
           </div>`, item);
       default:
         /* c8 ignore next 3 */
-        return addMepHighlight(toFragment`<div class="feds-navItem feds-navItem--centered">
+        return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
             ${item}
           </div>`, item);
     }

libs/blocks/global-navigation/utilities/menu/menu.js

@@ -11,7 +11,7 @@ import {
   toFragment,
   trigger,
   yieldToMain,
-  addMepHighlight,
+  addMepHighlightAndTargetId,
 } from '../utilities.js';
 
 const decorateHeadline = (elem, index) => {
@@ -317,7 +317,7 @@ const decorateMenu = (config) => logErrorFor(async () => {
           ${menuContent}
         </div>
       </div>`;
-    addMepHighlight(menuTemplate, content);
+    addMepHighlightAndTargetId(menuTemplate, content);
 
     decorateCrossCloudMenu(menuTemplate);
 

libs/blocks/global-navigation/utilities/utilities.js

@@ -47,13 +47,12 @@ export const logErrorFor = async (fn, message, tags) => {
   }
 };
 
-export function addMepHighlight(el, source) {
-  let { manifestId } = source.dataset;
-  if (!manifestId) {
-    const closestManifestId = source?.closest('[data-manifest-id]');
-    if (closestManifestId) manifestId = closestManifestId.dataset.manifestId;
-  }
+export function addMepHighlightAndTargetId(el, source) {
+  let { manifestId, targetManifestId } = source.dataset;
+  manifestId ??= source?.closest('[data-manifest-id]')?.dataset?.manifestId;
+  targetManifestId ??= source?.closest('[data-adobe-target-testid]')?.dataset?.adobeTargetTestid;
   if (manifestId) el.dataset.manifestId = manifestId;
+  if (targetManifestId) el.dataset.adobeTargetTestid = targetManifestId;
   return el;
 }
 
@@ -310,6 +309,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   const text = await res.text();
   const { body } = new DOMParser().parseFromString(text, 'text/html');
   if (mepFragment?.manifestId) body.dataset.manifestId = mepFragment.manifestId;
+  if (mepFragment?.targetManifestId) body.dataset.adobeTargetTestid = mepFragment.targetManifestId;
   const commands = mepGnav?.commands;
   if (commands?.length) {
     const { handleCommands, deleteMarkedEls } = await import('../../../features/personalization/personalization.js');