[Release] Stage to Main (#2055)

libs/blocks/caas-config/caas-config.js

@@ -999,6 +999,7 @@ const Configurator = ({ rootEl }) => {
   }, [state.placeholderUrl]);
 
   useEffect(async () => {
+    if (!state.tagsUrl) return;
     const { tags, errorMsg } = await loadCaasTags(state.tagsUrl);
     setPanels(getPanels(tags));
     setError(errorMsg || '');

libs/blocks/global-footer/global-footer.js

@@ -18,6 +18,8 @@ import {
   lanaLog,
   logErrorFor,
   toFragment,
+  getFederatedUrl,
+  federatePictureSources,
 } from '../global-navigation/utilities/utilities.js';
 
 import { replaceKey } from '../../features/placeholders.js';
@@ -90,6 +92,9 @@ class Footer {
     regionParent?.appendChild(region);
     socialParent?.appendChild(social);
 
+    const path = getFederatedUrl(url);
+    federatePictureSources({ section: this.body, forceFederate: path.includes('/federal/') });
+
     // Order is important, decorateFooter makes use of elements
     // which have already been created in previous steps
     const tasks = [

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

@@ -269,7 +269,6 @@ class Gnav {
     };
 
     this.setupUniversalNav();
-    decorateLinks(this.content);
     this.elements = {};
   }
 
@@ -949,7 +948,7 @@ export default async function init(block) {
   try {
     const { locale, mep } = getConfig();
     const url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
-    const content = await fetchAndProcessPlainHtml({ url, shouldDecorateLinks: false })
+    const content = await fetchAndProcessPlainHtml({ url })
       .catch((e) => lanaLog({
         message: `Error fetching gnav content url: ${url}`,
         e,

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

@@ -320,9 +320,11 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
     await Promise.all(fragPromises);
   }
 
-  if (shouldDecorateLinks) decorateLinks(body);
-
-  federatePictureSources({ section: body, forceFederate: path.includes('/federal/') });
+  // federatePictureSources should only be called after decorating the links.
+  if (shouldDecorateLinks) {
+    decorateLinks(body);
+    federatePictureSources({ section: body, forceFederate: path.includes('/federal/') });
+  }
 
   const blocks = body.querySelectorAll('.martech-metadata');
   if (blocks.length) {

libs/blocks/modal/modal.js

@@ -176,14 +176,45 @@ export async function getModal(details, custom) {
   return dialog;
 }
 
+export function getHashParams(hashStr) {
+  if (!hashStr) return {};
+  return hashStr.split(':').reduce((params, part) => {
+    if (part.startsWith('#')) {
+      params.hash = part;
+    } else {
+      const [key, val] = part.split('=');
+      if (key === 'delay' && parseInt(val, 10) > 0) {
+        params.delay = parseInt(val, 10) * 1000;
+      }
+    }
+    return params;
+  }, {});
+}
+
+export function delayedModal(el) {
+  const { hash, delay } = getHashParams(el?.dataset.modalHash);
+  if (!delay || !hash) return false;
+  el.classList.add('hide-block');
+  const modalOpenEvent = new Event(`${hash}:modalOpen`);
+  const pagesModalWasShownOn = window.sessionStorage.getItem(`shown:${hash}`);
+  el.dataset.modalHash = hash;
+  el.href = hash;
+  if (!pagesModalWasShownOn?.includes(window.location.pathname)) {
+    setTimeout(() => {
+      window.location.replace(hash);
+      sendAnalytics(modalOpenEvent);
+      window.sessionStorage.setItem(`shown:${hash}`, `${pagesModalWasShownOn || ''} ${window.location.pathname}`);
+    }, delay);
+  }
+  return true;
+}
+
 // Deep link-based
 export default function init(el) {
   const { modalHash } = el.dataset;
-  if (window.location.hash === modalHash && !document.querySelector(`div.dialog-modal${modalHash}`)) {
-    const details = findDetails(window.location.hash, el);
-    if (details) return getModal(details);
-  }
-  return null;
+  if (delayedModal(el) || window.location.hash !== modalHash || document.querySelector(`div.dialog-modal${modalHash}`)) return null;
+  const details = findDetails(window.location.hash, el);
+  return details ? getModal(details) : null;
 }
 
 // Click-based modal

libs/features/personalization/add-preview-to-config.js

@@ -27,7 +27,7 @@ export default async function addPreviewToConfig({
       }
     });
 
-    config.mep.override.split(',').forEach((manifestPair) => {
+    config.mep.override.split('---').forEach((manifestPair) => {
       const manifestPath = manifestPair.trim().toLowerCase().split('--')[0];
       if (!persManifestPaths.includes(manifestPath)) {
         persManifests.push({ manifestPath });

libs/features/personalization/personalization.js

@@ -755,6 +755,8 @@ export async function applyPers(manifests) {
   const config = getConfig();
 
   if (!manifests?.length) return;
+  if (!config?.mep) config.mep = {};
+  config.mep.handleFragmentCommand = handleFragmentCommand;
   let experiments = manifests;
   for (let i = 0; i < experiments.length; i += 1) {
     experiments[i] = await getPersConfig(experiments[i], config.mep?.override);
@@ -788,7 +790,5 @@ export async function applyPers(manifests) {
     const val = r.experiment?.manifestOverrideName || r.experiment?.manifest;
     return getFileName(val).replace('.json', '').trim().slice(0, 15);
   });
-  if (!config?.mep) config.mep = {};
   config.mep.martech = `|${pznVariants.join('--')}|${pznManifests.join('--')}`;
-  config.mep.handleFragmentCommand = handleFragmentCommand;
 }

libs/utils/utils.js

@@ -100,7 +100,6 @@ const AUTO_BLOCKS = [
   { 'pdf-viewer': '.pdf' },
   { video: '.mp4' },
   { merch: '/tools/ost?' },
-  { 'offer-preview': '/tools/commerce' },
 ];
 const DO_NOT_INLINE = [
   'accordion',
@@ -1044,6 +1043,7 @@ async function processSection(section, config, isDoc) {
     const { default: loadInlineFrags } = await import('../blocks/fragment/fragment.js');
     const fragPromises = inlineFrags.map((link) => loadInlineFrags(link));
     await Promise.all(fragPromises);
+    await decoratePlaceholders(section.el, config);
     const newlyDecoratedSection = decorateSection(section.el, section.idx);
     section.blocks = newlyDecoratedSection.blocks;
     section.preloadLinks = newlyDecoratedSection.preloadLinks;

test/blocks/modals/modals.test.js

@@ -1,11 +1,26 @@
 import { readFile, sendKeys } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
 import { delay, waitForElement, waitForRemoval } from '../../helpers/waitfor.js';
-import init, { getModal } from '../../../libs/blocks/modal/modal.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+const {
+  default: init,
+  getModal,
+  getHashParams,
+  delayedModal,
+} = await import('../../../libs/blocks/modal/modal.js');
 
 describe('Modals', () => {
+  beforeEach(() => {
+    // eslint-disable-next-line no-underscore-dangle
+    window._satellite = { track: sinon.spy() };
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
+
   it('Doesnt load modals on page load with no hash', async () => {
     window.location.hash = '';
     const modal = document.querySelector('.dialog-modal');
@@ -169,4 +184,43 @@ describe('Modals', () => {
     // Test passing, means there was no error thrown
     await hashChangeTriggered;
   });
+
+  it('validates and returns proper hash parameters', () => {
+    expect(getHashParams()).to.deep.equal({});
+    expect(getHashParams('#delayed-modal:delay=0')).to.deep.equal({ hash: '#delayed-modal' });
+    expect(getHashParams('#delayed-modal:delay=1')).to.deep.equal({
+      delay: 1000,
+      hash: '#delayed-modal',
+    });
+  });
+
+  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;
+    await delay(1000);
+    expect(el.classList.contains('hide-block')).to.be.true;
+    const modal = waitForElement('#delayed-modal');
+    expect(modal).to.be.not.null;
+    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();
+  });
+
+  it('does not show the modal if it was shown on this page', async () => {
+    const el = document.createElement('a');
+    el.setAttribute('data-modal-hash', '#dm:delay=1');
+    window.sessionStorage.setItem('shown:#dm', window.location.pathname);
+    expect(delayedModal(el)).to.be.true;
+    await delay(1000);
+    // eslint-disable-next-line no-underscore-dangle
+    expect(window._satellite.track.called).to.be.false;
+    const modal = document.querySelector('#dm');
+    expect(modal).to.not.exist;
+    window.sessionStorage.removeItem('shown:#dm');
+    el.remove();
+  });
 });

test/features/personalization/mocks/deprecatedActions/manifestInsertContentAfter.json

@@ -12,6 +12,16 @@
       "firefox": "",
       "android": "",
       "ios": ""
+    },
+    {
+      "action": "insertContentAfter",
+      "selector": "main > div",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/fragments/insertafter#delayed-modal:delay=1",
+      "firefox": "",
+      "android": "",
+      "ios": ""
     }
   ],
   ":type": "sheet"