Stage test

libs/blocks/media/media.css

@@ -439,3 +439,100 @@ div[class*="-up"] .media .foreground > .media-row {
     height: 120px;
   }
 }
+
+/* In the delayed modal used for promotions */
+.media.in-modal > .container.foreground {
+  width: 250px;
+}
+
+@media (min-width: 430px) and (orientation: portrait) {
+  .media.in-modal > .container.foreground {
+    width: 320px;
+  }
+}
+
+@media (min-width: 430px) and (orientation: landscape) {
+  .media.in-modal > .container.foreground {
+    width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .media.in-modal:not(.full-bleed-image) > .container.foreground {
+    width: 500px;
+  }
+}
+
+@media (min-width: 829px) {
+  .media.in-modal:not(.full-bleed-image) > .container.foreground {
+    width: 700px;
+  }
+}
+
+@media (min-width: 1366px) {
+  .media.in-modal > .container.foreground {
+    width: 800px;
+  }
+}
+
+.media.in-modal > .container.foreground > .media-row {
+  display: grid;
+  gap: 0;
+}
+
+.media.in-modal.full-bleed-image {
+  padding: 0;
+}
+
+.media.in-modal.full-bleed-image > .container.foreground {
+  width: 100%;
+}
+
+@media (orientation: portrait) {
+  .media.in-modal > .container.foreground > .media-row {
+    grid-template-rows: 1fr auto;
+  }
+
+  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:first-child {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:nth-child(2) {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
+@media (orientation: landscape) {
+  .media.in-modal > .container.foreground > .media-row {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .media.in-modal > .container.foreground > .media-row div:first-child {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .media.in-modal > .container.foreground > .media-row div:nth-child(2) {
+    grid-area: 1 / 2 / 2 / 3;
+  }
+}
+
+.media.in-modal > .container.foreground > .media-row > .text {
+  width: auto;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .text {
+  padding: var(--spacing-s);
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image {
+  height: 100%;
+}
+
+.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}

libs/blocks/modal/modal.css

@@ -25,6 +25,48 @@
   z-index: 103;
 }
 
+.dialog-modal.delayed-modal {
+  width: 300px;
+  max-width: none;
+  border-radius: var(--l-rounded-corners);
+}
+
+@media (min-width: 430px) and (orientation: portrait) {
+  .dialog-modal.delayed-modal {
+    width: 370px;
+  }
+}
+
+@media (min-width: 430px) and (orientation: landscape) {
+  .dialog-modal.delayed-modal {
+    width: 600px;
+  }
+}
+
+@media (min-width: 576px) and (orientation: portrait) {
+  .dialog-modal.delayed-modal {
+    width: 516px;
+  }
+}
+
+@media (min-width: 768px) {
+  .dialog-modal.delayed-modal {
+    width: 600px;
+  }
+}
+
+@media (min-width: 829px) {
+  .dialog-modal.delayed-modal {
+    width: 800px;
+  }
+}
+
+@media (min-width: 1366px) {
+  .dialog-modal.delayed-modal {
+    width: 900px;
+  }
+}
+
 .dialog-modal.upgrade-flow-modal {
   height: 100%;
   width: 100%;

libs/blocks/modal/modal.js

@@ -10,6 +10,8 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
   </g>
 </svg>`;
 
+let isDelayedModal = false;
+
 export function findDetails(hash, el) {
   const id = hash.replace('#', '');
   const a = el || document.querySelector(`a[data-modal-hash="${hash}"]`);
@@ -53,6 +55,7 @@ export function closeModal(modal) {
 
   const hashId = window.location.hash.replace('#', '');
   if (hashId === modal.id) window.history.pushState('', document.title, `${window.location.pathname}${window.location.search}`);
+  isDelayedModal = false;
 }
 
 function isElementInView(element) {
@@ -96,6 +99,16 @@ export async function getModal(details, custom) {
 
   if (custom) getCustomModal(custom, dialog);
   if (details) await getPathModal(details.path, dialog);
+  if (isDelayedModal) {
+    dialog.classList.add('delayed-modal');
+    const mediaBlock = dialog.querySelector('div.media');
+    if (mediaBlock) {
+      mediaBlock.classList.add('in-modal');
+      const { miloLibs, codeRoot } = getConfig();
+      const base = miloLibs || codeRoot;
+      loadStyle(`${base}/styles/rounded-corners.css`);
+    }
+  }
 
   const localeModal = id?.includes('locale-modal') ? 'localeModal' : 'milo';
   const analyticsEventName = window.location.hash ? window.location.hash.replace('#', '') : localeModal;
@@ -195,6 +208,7 @@ export function getHashParams(hashStr) {
 export function delayedModal(el) {
   const { hash, delay } = getHashParams(el?.dataset.modalHash);
   if (!delay || !hash) return false;
+  isDelayedModal = true;
   el.classList.add('hide-block');
   const modalOpenEvent = new Event(`${hash}:modalOpen`);
   const pagesModalWasShownOn = window.sessionStorage.getItem(`shown:${hash}`);

libs/blocks/quiz-entry/quiz-entry.js

@@ -54,14 +54,17 @@ const App = ({
     return optionItem && optionItem[prop] ? optionItem[prop] : '';
   };
 
-  const sendMLFieldFiCodesAnalytics = (filtered) => {
+  const sendMLFieldAnalytics = (input, isFieldText = true) => {
     let val = '';
-    if (filtered.length > 0) {
-      const fiCodes = filtered.map((result) => result.ficode);
+
+    if (isFieldText) {
+      val = `Filters|${analyticsType}|${input}`;
+    } else if (input.length > 0) {
+      const fiCodes = input.map((result) => result.ficode);
       val = `Filters|${analyticsType}|${selectedQuestion?.questions}/interest-${fiCodes.join('-')}`;
     }
-    window.alloy('sendEvent', {
-      documentUnloading: true,
+
+    const eventData = {
       xdm: {
         eventType: 'web.webinteraction.linkClicks',
         web: {
@@ -75,12 +78,15 @@ const App = ({
       data: {
         _adobe_corpnew: {
           digitalData: {
-            primaryEvent:
-            { eventInfo: { eventName: val } },
+            search: isFieldText ? { searchInfo: { keyword: val } } : undefined,
+            primaryEvent: !isFieldText ? { eventInfo: { eventName: val } } : undefined,
           },
         },
       },
-    });
+    };
+
+    // eslint-disable-next-line no-underscore-dangle
+    window._satellite?.track('event', eventData);
   };
 
   useEffect(() => {
@@ -197,17 +203,19 @@ const App = ({
           selections[item.ficode] = true;
         });
 
-        sendMLFieldFiCodesAnalytics(filtered);
+        sendMLFieldAnalytics(filtered, false);
       } else if (fiResults.errors || fiResults.error_code) {
         for (const ficode of fallback) {
           selections[ficode] = true;
         }
         if (fiResults.errors) error = fiResults.errors[0].title;
         if (fiResults.error_code) error = fiResults.message;
         window.lana.log(`ML results error - ${error}`, { tags: 'errorType=info,module=quiz-entry' });
-        sendMLFieldFiCodesAnalytics(fallback);
+        sendMLFieldAnalytics(fallback, false);
       }
 
+      sendMLFieldAnalytics(mlFieldText, true);
+
       if (debug) {
         let fiCodes = [];
         if (!fiResults.errors && !fiResults.error_code) {
@@ -223,6 +231,8 @@ const App = ({
           fiCodes = fallback.map((result) => result.ficode);
         }
         // eslint-disable-next-line no-console
+        console.log('sending ML field text to Adobe Analytics: ', `Filters|${analyticsType}|${mlFieldText}`);
+        // eslint-disable-next-line no-console
         console.log('sending ML field fiCodes to Adobe Analytics: ', `Filters|${analyticsType}|${selectedQuestion?.questions}/interest-${fiCodes.join('-')}`);
       }
     }

libs/blocks/table/table.css

@@ -357,6 +357,10 @@
   border-top-right-radius: 0;
 }
 
+[dir="rtl"] .table.merch .col-merch .col-merch-content picture {
+  margin-right: 0;
+  margin-left: 16px;
+}
 
 /* hover */
 @media (min-width: 900px) {
@@ -554,6 +558,7 @@ header.global-navigation {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   margin: 20px 30px 0;
+  gap: 30px;
 }
 
 .filter-wrapper {
@@ -566,7 +571,7 @@ header.global-navigation {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 160px;
+  max-width: 146px;
   appearance: none;
   position: relative;
   padding-right: 30px;
@@ -590,14 +595,15 @@ header.global-navigation {
   }
 }
 
-@media (max-width: 400px) {
+@media (max-width: 480px) {
   .table,
   .table.merch {
     margin: 0 2px;
-    min-width: 100%;
+    min-width: 395px;
   }
 
   .table.merch .col-merch .col-merch-content {
     flex-direction: column;
+    align-items: initial;
   }
 }

libs/features/personalization/personalization.js

@@ -827,15 +827,14 @@ export async function applyPers(manifests, postLCP = false) {
         mep: mepParam,
         mepHighlight,
         mepButton,
-        target,
       } = Object.fromEntries(PAGE_URL.searchParams);
       config.mep = {
         handleFragmentCommand,
         preview: (mepButton !== 'off' && (config.env?.name !== 'prod' || mepButton)),
         override: mepParam ? decodeURIComponent(mepParam) : '',
         highlight: (mepHighlight !== undefined && mepHighlight !== 'false'),
         mepParam,
-        targetEnabled: target,
+        targetEnabled: config.mep?.targetEnabled,
       };
     }
 

libs/utils/utils.js

@@ -908,6 +908,7 @@ async function checkForPageMods() {
   if (!mepEnabled) return;
 
   const config = getConfig();
+  config.mep = { targetEnabled };
   loadLink(
     `${config.base}/features/personalization/personalization.js`,
     { as: 'script', rel: 'modulepreload' },
@@ -918,10 +919,8 @@ async function checkForPageMods() {
     await loadMartech({ persEnabled: true, persManifests, targetEnabled });
     return;
   }
-  if (!persManifests.length) {
-    config.mep = { targetEnabled };
-    return;
-  }
+  if (!persManifests.length) return;
+
   loadIms()
     .then(() => {
       if (window.adobeIMS.isSignedInUser()) loadMartech();

test/blocks/modals/modals.test.js

@@ -197,18 +197,22 @@ describe('Modals', () => {
 
   it('shows the modal with a delay, and remembers it was shown on this page', async () => {
     window.sessionStorage.removeItem('shown:#delayed-modal');
-    const el = document.createElement('a');
-    el.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
-    expect(delayedModal(el)).to.be.true;
+    const anchor = document.createElement('a');
+    anchor.setAttribute('data-modal-path', '/fragments/promos/fragments/cc-all-apps-promo-full-bleed-image');
+    anchor.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
+    document.body.appendChild(anchor);
+    expect(delayedModal(anchor)).to.be.true;
     await delay(1000);
-    expect(el.classList.contains('hide-block')).to.be.true;
-    const modal = waitForElement('#delayed-modal');
+    expect(anchor.classList.contains('hide-block')).to.be.true;
+    const modal = await waitForElement('#delayed-modal');
     expect(modal).to.be.not.null;
+    expect(document.querySelector('#delayed-modal').classList.contains('delayed-modal'));
     expect(window.sessionStorage.getItem('shown:#delayed-modal').includes(window.location.pathname)).to.be.true;
     // eslint-disable-next-line no-underscore-dangle
     expect(window._satellite.track.called).to.be.true;
     window.sessionStorage.removeItem('shown:#delayed-modal');
-    el.remove();
+    modal.remove();
+    anchor.remove();
   });
 
   it('does not show the modal if it was shown on this page', async () => {