Merge branch 'stage' into MWPW-147172

* stage:
  Mwpw-142267:  Merch What's Included and Merch Mnemonic List (TwP) (#2554)
  MWPW-149124 Improve Focus Page for Performance Improvement Tiger Team  (#2391)
  Correctly send the created PR slacks (#2566)
  MWPW-153167: caas-config change to enable hiding date detail information (#2553)
  MWPW-152016 - Localization target preview for transcreation (#2564)
  Relax CORS restrictions for module imports (#2549)
  MWPW-153600 [PEP] loader bar on PEP prompt is seen loaded Left to right in RTL locale (#2548)
  MWPW-146962 [milo] Text link behaving like button in FAQ section (#2530)
  MWPW-152280 MEP: Only preload fragments that are in the 1st section (#2525)
  MWPW-152697 Fix Marketo mobile horizontal scroll (#2514)
  MWPW-151513: Search results vanished when user clicks on Marquee CTA:Start free trail (#2406)
  MWPW-154013 PEP prompt redirection is broken in stage after the PEP dismissal PR merge (#2547)
  MWPW-153962: Introduce maslibs query parameter (#2544)
  Central georouting support (#2531)
  [MWPW-152278] Avoid empty CSS requests (#2524)
  MWPW-152918 Fix Marketo button font (#2513)

# Conflicts:
#	libs/deps/merch-card.js

.github/workflows/merge-to-main.yaml

@@ -9,6 +9,7 @@ on:
 
 env:
   MILO_RELEASE_SLACK_WH: ${{ secrets.MILO_RELEASE_SLACK_WH }}
+  MILO_STAGE_SLACK_WH: ${{secrets.MILO_STAGE_SLACK_WH}}
 
 jobs:
   merge-to-main:

head.html

@@ -1,4 +1,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<script src="/libs/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
+<script src="/libs/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/libs/styles/styles.css"/>
 <link rel="icon" href="data:," size="any"/>

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

@@ -1,6 +1,6 @@
 /* eslint-disable compat/compat */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* global ClipboardItem */
+
 import {
   createContext,
   html,
@@ -363,6 +363,7 @@ const UiPanel = () => html`
   <${Input} label="Use Light Text" prop="useLightText" type="checkbox" />
   <${Input} label="Use Overlay Links" prop="useOverlayLinks" type="checkbox" />
   <${Input} label="Show total card count at top" prop="showTotalResults" type="checkbox" />
+  <${Input} label="Hide date for on-demand content" prop="hideDateInterval" type="checkbox" />
   <${Select} label="Card Style" prop="cardStyle" options=${defaultOptions.cardStyle} />
   <${Select} options=${defaultOptions.accessibilityLevel} prop="accessibilityLevel" label="Card Accessibility Title Level" />
   <${Select} label="Layout" prop="container" options=${defaultOptions.container} />

libs/blocks/caas/utils.js

@@ -595,6 +595,7 @@ export const getConfig = async (originalState, strs = {}) => {
         lastModified: strs.lastModified || 'Last modified {date}',
       },
       detailsTextOption: state.detailsTextOption,
+      hideDateInterval: state.hideDateInterval,
       setCardBorders: state.setCardBorders,
       showFooterDivider: state.showFooterDivider,
       useOverlayLinks: state.useOverlayLinks,
@@ -798,6 +799,7 @@ export const defaultState = {
   headers: [],
   hideCtaIds: [],
   hideCtaTags: [],
+  hideDateInterval: false,
   includeTags: [],
   language: 'caas:language/en',
   layoutType: '4up',

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

@@ -1,23 +1,14 @@
 import {
   getConfig, getMetadata, loadStyle, loadLana, decorateLinks, localizeLink,
 } from '../../../utils/utils.js';
+import { getFederatedContentRoot } from '../../../utils/federated.js';
 import { processTrackingLabels } from '../../../martech/attributes.js';
 import { replaceText } from '../../../features/placeholders.js';
 
 loadLana();
 
 const FEDERAL_PATH_KEY = 'federal';
 
-// TODO when porting this to milo core, we should define this on config level
-// and allow consumers to add their own origins
-const allowedOrigins = [
-  'https://www.adobe.com',
-  'https://business.adobe.com',
-  'https://blog.adobe.com',
-  'https://milo.adobe.com',
-  'https://news.adobe.com',
-];
-
 export const selectors = {
   globalNav: '.global-navigation',
   curtain: '.feds-curtain',
@@ -84,27 +75,6 @@ export function toFragment(htmlStrings, ...values) {
   return fragment;
 }
 
-// TODO we might eventually want to move this to the milo core utilities
-let federatedContentRoot;
-export const getFederatedContentRoot = () => {
-  if (federatedContentRoot) return federatedContentRoot;
-
-  const { origin } = window.location;
-
-  federatedContentRoot = allowedOrigins.some((o) => origin.replace('.stage', '') === o)
-    ? origin
-    : 'https://www.adobe.com';
-
-  if (origin.includes('localhost') || origin.includes('.hlx.')) {
-    // Akamai as proxy to avoid 401s, given AEM-EDS MS auth cross project limitations
-    federatedContentRoot = origin.includes('.hlx.live')
-      ? 'https://main--federal--adobecom.hlx.live'
-      : 'https://www.stage.adobe.com';
-  }
-
-  return federatedContentRoot;
-};
-
 // 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 = '') => {

libs/blocks/marketo/marketo.css

@@ -275,6 +275,7 @@
   border: 2px solid var(--color-accent);
   border-radius: 24px;
   color: var(--color-white);
+  font-family: var(--body-font-family);
   font-weight: 700;
   padding: 0 24px;
   font-size: 16px;
@@ -533,7 +534,7 @@
   background-color: #123456
 }
 
-.resource-form .marketo {
+.resource-form.section.two-up .marketo {
   margin-left: calc(var(--grid-margins-width) * -1 / 2);
   margin-right: calc(var(--grid-margins-width) * -1 / 2);
 }

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

@@ -36,7 +36,7 @@ const fail = (el, err = '') => {
   return el;
 };
 
-/** Parse andd prepare cards */
+/** Parse and prepare cards */
 async function getCardsRoot(config, html) {
   const cards = `<div>${html}</div>`;
   const fragment = document.createRange().createContextualFragment(

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

@@ -135,6 +135,11 @@ const parseTwpContent = async (el, merchCard) => {
       const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul');
       const bodySlot = createTag('div', { slot: 'body-xs' }, content);
       merchCard.append(bodySlot);
+
+      const whatsIncludedLink = bodySlot.querySelector('a[href*="merch-whats-included"]');
+      if (whatsIncludedLink) {
+        whatsIncludedLink.classList.add('merch-whats-included');
+      }
     } else if (index === 2) { // Footer section
       const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase()));
       const footer = createTag('div', { slot: 'footer' }, footerContent);

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css

@@ -0,0 +1,6 @@
+.merch-mnemonic-list {
+  display: flex;
+  height: 380px;
+  flex-flow: column;
+  flex-wrap: wrap;
+}

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js

@@ -0,0 +1,21 @@
+import '../../deps/merch-mnemonic-list.js';
+import '../../deps/merch-card.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const rows = el.querySelectorAll(':scope p:not([class])');
+  if (rows.length < 1) return;
+  [...rows].forEach((paragraph) => {
+    const merchMnemonicList = createTag('merch-mnemonic-list');
+    paragraph.setAttribute('slot', 'description');
+    const picture = paragraph.querySelector('picture');
+    const img = picture.querySelector('img');
+    const icon = createTag('merch-icon', { slot: 'icon', size: 's', src: img.src });
+    picture.remove();
+    if (icon) merchMnemonicList.appendChild(icon);
+    if (paragraph) merchMnemonicList.appendChild(paragraph);
+    el.appendChild(merchMnemonicList);
+  });
+};
+
+export default init;

libs/blocks/merch-twp/merch-twp.js

@@ -72,6 +72,19 @@ export default async function init(el) {
   content.querySelector('h4').setAttribute('slot', 'detail-xl');
   twp.append(...[...content.querySelectorAll(':scope > h4, merch-card')]);
 
+  const whatsIncludedFragment = el.querySelector('.fragment[data-path*="merch-whats-included"]');
+  if (whatsIncludedFragment) {
+    const whatsIncludedSlot = createTag(
+      'div',
+      {
+        slot: 'merch-whats-included',
+        class: 'hidden merch-whats-included-container',
+      },
+      whatsIncludedFragment,
+    );
+    twp.append(whatsIncludedSlot);
+  }
+
   const cciFooter = createTag('div', { slot: 'cci-footer' });
   cciFooter.append(...[...content.querySelectorAll('p:not(hr ~ p)')]);
   const cctFooter = createTag('div', { slot: 'cct-footer' });

libs/blocks/merch-whats-included/merch-whats-included.css

@@ -0,0 +1,37 @@
+.merch-whats-included-container > .fragment {
+  width: inherit;
+  height: inherit;
+  max-height: 100%;
+  display: block;
+}
+
+.merch-whats-included-container .content h3 {
+  margin: 0;
+}
+
+.merch-whats-included-container .fragment .container {
+  display: contents;
+}
+
+.merch-whats-included-container .fragment .content {
+  float: right;
+}
+
+.merch-whats-included-container .fragment .content a[is="checkout-link"] {
+  margin-inline-start: var(--spacing-xxs);
+}
+
+@media screen and (max-width: 767px) {
+  .merch-whats-included-container {
+    position: fixed;
+    overflow: hidden scroll;
+  }
+
+  .merch-mnemonic-list {
+    height: auto;
+  }
+
+  .merch-whats-included-container .fragment .container {
+    grid-auto-flow: row;
+  }
+}

libs/blocks/merch-whats-included/merch-whats-included.js

@@ -0,0 +1,30 @@
+import '../../deps/merch-whats-included.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const styles = Array.from(el.classList);
+  const mobileRows = styles.find((style) => /\d/.test(style));
+  const heading = el.querySelector('h3, h4');
+  const content = el.querySelector('.section');
+
+  const contentSlot = createTag(
+    'div',
+    { slot: 'content' },
+    content.innerHTML,
+  );
+  const whatsIncluded = createTag(
+    'merch-whats-included',
+    { mobileRows: mobileRows || 1 },
+  );
+  if (heading) {
+    heading.setAttribute('slot', 'heading');
+    whatsIncluded.appendChild(heading);
+  }
+
+  whatsIncluded.appendChild(contentSlot);
+  const divsWithoutClass = contentSlot.querySelectorAll('div:not([class])');
+  divsWithoutClass.forEach((div) => div.remove());
+  el.replaceWith(whatsIncluded);
+};
+
+export default init;

libs/blocks/merch/merch.css

@@ -15,7 +15,7 @@ span.placeholder-resolved[data-template="strikethrough"], span.price.price-strik
   visibility: inherit;
 }
 
-a[is='checkout-link'] > span {
+a[is='checkout-link'].con-button > span {
   display: inline-block;
   text-align: center;
   width: 100%;

libs/blocks/merch/merch.js

@@ -122,6 +122,32 @@ const LOADING_ENTITLEMENTS = 'loading-entitlements';
 let log;
 let upgradeOffer = null;
 
+/**
+ * Given a url, calculates the hostname of MAS platform.
+ * Supports, www prod, stage, local and feature branches.
+ * if params are missing, it will return the latest calculated or default value.
+ * @param {string} hostname optional
+ * @param {string} maslibs optional
+ * @returns base url for mas platform
+ */
+export function getMasBase(hostname, maslibs) {
+  let { baseUrl } = getMasBase;
+  if (!baseUrl) {
+    if (maslibs === 'stage') {
+      baseUrl = 'https://www.stage.adobe.com/mas';
+    } else if (maslibs === 'local') {
+      baseUrl = 'http://localhost:9001';
+    } else if (maslibs) {
+      const extension = /.page$/.test(hostname) ? 'page' : 'live';
+      baseUrl = `https://${maslibs}.hlx.${extension}`;
+    } else {
+      baseUrl = 'https://www.adobe.com/mas';
+    }
+    getMasBase.baseUrl = baseUrl;
+  }
+  return baseUrl;
+}
+
 export async function polyfills() {
   if (polyfills.promise) return polyfills.promise;
   let isSupported = false;
@@ -326,15 +352,18 @@ export async function getModalAction(offers, options) {
 }
 
 export async function getCheckoutAction(offers, options, imsSignedInPromise) {
-  const [downloadAction, upgradeAction, modalAction] = await Promise.all([
-    getDownloadAction(options, imsSignedInPromise, offers),
-    getUpgradeAction(options, imsSignedInPromise, offers),
-    getModalAction(offers, options),
-  ]).catch((e) => {
+  try {
+    await imsSignedInPromise;
+    const [downloadAction, upgradeAction, modalAction] = await Promise.all([
+      getDownloadAction(options, imsSignedInPromise, offers),
+      getUpgradeAction(options, imsSignedInPromise, offers),
+      getModalAction(offers, options),
+    ]);
+    return downloadAction || upgradeAction || modalAction;
+  } catch (e) {
     log?.error('Failed to resolve checkout action', e);
     return [];
-  });
-  return downloadAction || upgradeAction || modalAction;
+  }
 }
 
 /**
@@ -349,7 +378,15 @@ export async function initService(force = false) {
   const { env, commerce = {}, locale } = getConfig();
   commerce.priceLiteralsPromise = fetchLiterals(PRICE_LITERALS_URL);
   initService.promise = initService.promise ?? polyfills().then(async () => {
-    const commerceLib = await import('../../deps/commerce.js');
+    const { hostname, searchParams } = new URL(window.location.href);
+    let commerceLibPath = '../../deps/commerce.js';
+    if (/hlx\.(page|live)$|localhost$|www\.stage\.adobe\.com$/.test(hostname)) {
+      const maslibs = searchParams.get('maslibs');
+      if (maslibs) {
+        commerceLibPath = `${getMasBase(hostname, maslibs)}/libs/commerce.js`;
+      }
+    }
+    const commerceLib = await import(commerceLibPath);
     const service = await commerceLib.init(() => ({
       env,
       commerce,
@@ -376,8 +413,9 @@ export async function getCommerceContext(el, params) {
 }
 
 /**
- * Checkout parameter can be set Merch link, code config (scripts.js) or be a default from tacocat.
- * To get the default, 'undefinded' should be passed, empty string will trigger an error!
+ * Checkout parameter can be set on the merch link,
+ * code config (scripts.js) or be a default from tacocat.
+ * To get the default, 'undefined' should be passed, empty string will trigger an error!
  *
  * clientId - code config -> default (adobe_com)
  * workflow - merch link -> metadata -> default (UCv3)

libs/blocks/modal/modal.js

@@ -12,6 +12,7 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
 </svg>`;
 
 let isDelayedModal = false;
+let prevHash = '';
 
 export function findDetails(hash, el) {
   const id = hash.replace('#', '');
@@ -65,6 +66,10 @@ 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;
+  if (prevHash) {
+    window.location.hash = prevHash;
+    prevHash = '';
+  }
 }
 
 function isElementInView(element) {
@@ -254,5 +259,8 @@ window.addEventListener('hashchange', (e) => {
   } else {
     const details = findDetails(window.location.hash, null);
     if (details) getModal(details);
+    if (e.oldURL?.includes('#')) {
+      prevHash = new URL(e.oldURL).hash;
+    }
   }
 });