MWPW-161076 and 158127 MEP replace not working as expected (#3111)

* stash

* ready to publish

* interact call coming back but timing out

* working on a fast connection

* clean up ifs

* working with promise

* use camel case on let variable

* unit tests

* update unit tests

* MWPW-149504 [MILO][MEP] Move entitlements object to the same JSON file used by the library (#3047)

* create mepxlg branch

* update library

* require full hostname match

* update reference for unit test

* switch to use config instead of domain list and stub response in unit test

* update fetch to 2

* updating another fetch to 2

* restore normalizePath to use preview domains on preview links

* preload segment list json

* use getFederatedUrl instead

* import at top so we don't have to make normalizePath async

* MWPW-148129 [MILO][MEP][GNAV] Able to use select by url feature with federated link (#3064)

* add federated link function to registerInBlockActions

* add to unit test

* add unit test coverage

* change spreadsheet name

* deleteMarkedEls inside handleCommands instead of after

* remove handleCommands from gnav

* remove duplicate from merge conflict resolution

* MWPW-158127 MEP Add support for identifying iPad on Safari as a mobile device and as iOS (#3119)

* Add tablet test fix

* Adjust line for linting

* Add safariIpad

---------

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

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

@@ -340,9 +340,9 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   if (mepFragment?.targetManifestId) body.dataset.adobeTargetTestid = mepFragment.targetManifestId;
   const commands = mepGnav?.commands;
   if (commands?.length) {
-    const { handleCommands, deleteMarkedEls } = await import('../../../features/personalization/personalization.js');
+    /* c8 ignore next 3 */
+    const { handleCommands } = await import('../../../features/personalization/personalization.js');
     handleCommands(commands, body, true, true);
-    deleteMarkedEls(body);
   }
   const inlineFrags = [...body.querySelectorAll('a[href*="#_inline"]')];
   if (inlineFrags.length) {

libs/features/personalization/personalization.js

@@ -6,17 +6,20 @@ import { getFederatedUrl } from '../../utils/federated.js';
 
 /* c8 ignore start */
 const PHONE_SIZE = window.screen.width < 550 || window.screen.height < 550;
+const safariIpad = navigator.userAgent.includes('Macintosh') && navigator.maxTouchPoints > 1;
 export const PERSONALIZATION_TAGS = {
   all: () => true,
   chrome: () => navigator.userAgent.includes('Chrome') && !navigator.userAgent.includes('Edg'),
   firefox: () => navigator.userAgent.includes('Firefox'),
   safari: () => navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome'),
   edge: () => navigator.userAgent.includes('Edg'),
   android: () => navigator.userAgent.includes('Android'),
-  ios: () => /iPad|iPhone|iPod/.test(navigator.userAgent),
+  ios: () => /iPad|iPhone|iPod/.test(navigator.userAgent) || safariIpad,
   windows: () => navigator.userAgent.includes('Windows'),
-  mac: () => navigator.userAgent.includes('Macintosh'),
-  'mobile-device': () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Touch/i.test(navigator.userAgent),
+  mac: () => navigator.userAgent.includes('Macintosh') && !safariIpad,
+  'mobile-device': () => safariIpad
+    || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Touch/i
+      .test(navigator.userAgent),
   phone: () => PERSONALIZATION_TAGS['mobile-device']() && PHONE_SIZE,
   tablet: () => PERSONALIZATION_TAGS['mobile-device']() && !PHONE_SIZE,
   desktop: () => !PERSONALIZATION_TAGS['mobile-device'](),
@@ -495,7 +498,17 @@ export const updateFragDataProps = (a, inline, sections, fragment) => {
   }
 };
 
-export function handleCommands(commands, rootEl, forceInline = false, forceRootEl = false) {
+export const deleteMarkedEls = (rootEl = document) => {
+  [...rootEl.querySelectorAll(`.${CLASS_EL_DELETE}`)]
+    .forEach((el) => el.remove());
+};
+
+export function handleCommands(
+  commands,
+  rootEl = document,
+  forceInline = false,
+  forceRootEl = false,
+) {
   const section1 = document.querySelector('main > div');
   commands.forEach((cmd) => {
     const { action, content, selector } = cmd;
@@ -529,6 +542,7 @@ export function handleCommands(commands, rootEl, forceInline = false, forceRootE
       cmd.completed = true;
     }
   });
+  deleteMarkedEls(rootEl);
   return commands.filter((cmd) => !cmd.completed
     && cmd.selectorType !== IN_BLOCK_SELECTOR_PREFIX);
 }
@@ -887,11 +901,6 @@ export async function getManifestConfig(info = {}, variantOverride = false) {
   return manifestConfig;
 }
 
-export const deleteMarkedEls = (rootEl = document) => {
-  [...rootEl.querySelectorAll(`.${CLASS_EL_DELETE}`)]
-    .forEach((el) => el.remove());
-};
-
 const normalizeFragPaths = ({ selector, val, action, manifestId, targetManifestId }) => ({
   selector: normalizePath(selector),
   val: normalizePath(val),
@@ -1047,7 +1056,6 @@ export async function applyPers(manifests) {
   }
 
   config.mep.commands = handleCommands(config.mep.commands);
-  deleteMarkedEls();
 
   const pznList = results.filter((r) => (r.experiment?.manifestType === TRACKED_MANIFEST_TYPE));
   if (!pznList.length) return;