[Release] Stage to Main (#2580)

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

@@ -18,10 +18,11 @@ import {
   lanaLog,
   logErrorFor,
   toFragment,
-  getFederatedUrl,
   federatePictureSources,
 } from '../global-navigation/utilities/utilities.js';
 
+import { getFederatedUrl } from '../../utils/federated.js';
+
 import { replaceKey } from '../../features/placeholders.js';
 
 const { miloLibs, codeRoot, locale, mep } = getConfig();

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

@@ -1,5 +1,6 @@
 import { getMetadata, getConfig } from '../../../../utils/utils.js';
-import { toFragment, lanaLog, getFederatedUrl } from '../../utilities/utilities.js';
+import { toFragment, lanaLog } from '../../utilities/utilities.js';
+import { getFederatedUrl } from '../../../../utils/federated.js';
 
 const metadata = {
   seo: 'breadcrumbs-seo',

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

@@ -652,7 +652,9 @@ class Gnav {
   };
 
   loadSearch = () => {
-    if (this.blocks?.search?.instance) return null;
+    const instanceAlreadyExists = !!this.blocks?.search?.instance;
+    const searchNotInContent = !this.searchPresent();
+    if (instanceAlreadyExists || searchNotInContent) return null;
 
     return this.loadDelayed().then(() => {
       this.blocks.search.instance = new this.Search(this.blocks.search.config);
@@ -968,10 +970,10 @@ class Gnav {
     return this.elements.breadcrumbsWrapper;
   };
 
-  decorateSearch = () => {
-    const searchBlock = this.content.querySelector('.search');
+  searchPresent = () => !!this.content.querySelector('.search');
 
-    if (!searchBlock) return null;
+  decorateSearch = () => {
+    if (!this.searchPresent()) return null;
 
     this.blocks.search.config.trigger = toFragment`
       <button class="feds-search-trigger" aria-label="Search" aria-expanded="false" aria-controls="feds-search-bar" daa-ll="Search">

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

@@ -1,7 +1,7 @@
 import {
   getConfig, getMetadata, loadStyle, loadLana, decorateLinks, localizeLink,
 } from '../../../utils/utils.js';
-import { getFederatedContentRoot } from '../../../utils/federated.js';
+import { getFederatedContentRoot, getFederatedUrl } from '../../../utils/federated.js';
 import { processTrackingLabels } from '../../../martech/attributes.js';
 import { replaceText } from '../../../features/placeholders.js';
 
@@ -75,20 +75,6 @@ export function toFragment(htmlStrings, ...values) {
   return fragment;
 }
 
-// TODO we should match the akamai patterns /locale/federal/ at the start of the url
-// and make the check more strict.
-export const getFederatedUrl = (url = '') => {
-  if (typeof url !== 'string' || !url.includes('/federal/')) return url;
-  if (url.startsWith('/')) return `${getFederatedContentRoot()}${url}`;
-  try {
-    const { pathname, search, hash } = new URL(url);
-    return `${getFederatedContentRoot()}${pathname}${search}${hash}`;
-  } catch (e) {
-    lanaLog({ message: `getFederatedUrl errored parsing the URL: ${url}`, e, tags: 'errorType=warn,module=utilities' });
-  }
-  return url;
-};
-
 const getPath = (urlOrPath = '') => {
   try {
     const url = new URL(urlOrPath);

libs/blocks/merch-card/merch-card.js

@@ -44,7 +44,7 @@ const HEADING_MAP = {
   },
 };
 
-const INNER_ELEMENTS_SELECTOR = 'h2, h3, h4, h5, p, ul, em';
+const INNER_ELEMENTS_SELECTOR = 'h2, h3, h4, h5, h6, p, ul, em';
 
 const MULTI_OFFER_CARDS = [PLANS, PRODUCT, MINI_COMPARE_CHART, TWP];
 // Force cards to refresh once they become visible so that the footer rows are properly aligned.
@@ -161,7 +161,9 @@ const parseContent = async (el, merchCard) => {
   if (merchCard.variant === MINI_COMPARE_CHART) {
     bodySlotName = 'body-m';
     const priceSmallType = el.querySelectorAll('h6');
-    appendSlot(priceSmallType, 'price-commitment', merchCard);
+    // Filter out any h6 elements that contain an <em> tag
+    const filteredPriceSmallType = Array.from(priceSmallType).filter((h6) => !h6.querySelector('em'));
+    if (filteredPriceSmallType.length > 0) appendSlot(filteredPriceSmallType, 'price-commitment', merchCard);
   }
 
   let headingSize = 3;
@@ -206,6 +208,40 @@ const parseContent = async (el, merchCard) => {
       }
       return;
     }
+    if (tagName === 'H6' && element.firstElementChild?.tagName === 'EM') {
+      const calloutContentWrapper = createTag('div');
+      const calloutContent = createTag('div');
+      const emElement = element.firstElementChild;
+      let imgElement = null;
+      const fragment = document.createDocumentFragment();
+
+      emElement.childNodes.forEach((child) => {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'A' && child.innerText.trim().toLowerCase() === '#icon') {
+          const [imgSrc, tooltipText] = child.getAttribute('href')?.split('#') || [];
+          imgElement = createTag('img', {
+            src: imgSrc,
+            title: decodeURIComponent(tooltipText),
+            class: 'callout-icon',
+          });
+        } else {
+          const clone = child.cloneNode(true);
+          fragment.appendChild(clone);
+        }
+      });
+
+      calloutContent.appendChild(fragment);
+      calloutContentWrapper.appendChild(calloutContent);
+
+      if (imgElement) {
+        calloutContentWrapper.classList.add('callout-content-wrapper-with-icon');
+        calloutContentWrapper.appendChild(imgElement);
+      }
+
+      const calloutSlot = createTag('div', { slot: 'callout-text' });
+      calloutSlot.appendChild(calloutContentWrapper);
+      merchCard.appendChild(calloutSlot);
+      return;
+    }
     if (isParagraphTag(tagName)) {
       bodySlot.append(element);
       merchCard.append(bodySlot);

libs/blocks/modal/modal.js

@@ -96,7 +96,12 @@ function getCustomModal(custom, dialog) {
 }
 
 async function getPathModal(path, dialog) {
-  const block = createTag('a', { href: path });
+  let href = path;
+  if (path.includes('/federal/')) {
+    const { getFederatedUrl } = await import('../../utils/federated.js');
+    href = getFederatedUrl(path);
+  }
+  const block = createTag('a', { href });
   dialog.append(block);
 
   // eslint-disable-next-line import/no-cycle

libs/blocks/quiz/quiz.js

@@ -1,7 +1,7 @@
 import {
   render, html, useEffect, useMemo, useState, useLayoutEffect,
 } from '../../deps/htm-preact.js';
-import { createTag } from '../../utils/utils.js';
+import { createTag, getConfig } from '../../utils/utils.js';
 import { GetQuizOption } from './quizoption.js';
 import { DecorateBlockBackground, DecorateBlockForeground } from './quizcontainer.js';
 import {
@@ -292,7 +292,9 @@ const App = ({
     return optionItem && optionItem[prop] ? optionItem[prop] : '';
   };
 
-  return html`<div class="quiz-container">
+  const { locale } = getConfig();
+
+  return html`<div class="quiz-container${locale?.ietf === 'ja-JP' ? ' jpwordwrap-disabled' : ''}">
                   ${selectedQuestion.questions && html`<${StepIndicator}
                     currentStep=${currentStep} 
                     totalSteps=${totalSteps}