[Release] Stage to Main (#3118)

.gitignore

@@ -10,3 +10,4 @@ logs/*
 **/mas/*/stats.json
 test-html-results/
 test-results/
+test-a11y-results/

libs/blocks/library-config/library-config.js

@@ -103,7 +103,7 @@ async function loadList(type, content, list) {
     case 'assets':
       loadAssets(content, list);
       break;
-    case 'personalization_tags':
+    case 'MEP_personalization':
       loadPersonalization(content, list);
       break;
     default:
@@ -153,7 +153,7 @@ async function combineLibraries(base, supplied) {
     blocks: base.blocks.data,
     templates: base.templates?.data,
     icons: base.icons?.data,
-    personalization_tags: base.personalization?.data,
+    MEP_personalization: base.personalization?.data,
     placeholders: base.placeholders?.data,
   };
 

libs/blocks/library-config/lists/personalization.js

@@ -1,23 +1,24 @@
 import { createTag } from '../../../utils/utils.js';
 import createCopy from '../library-utils.js';
 
-const fetchTags = async (path) => {
-  const resp = await fetch(path);
-  if (!resp.ok) return [];
-  const json = await resp.json();
-  return json.data || [];
-};
-
-const categorize = (tagData) => tagData
+const categorize = (tagData, category) => tagData
   .reduce((tags, tag) => {
-    tags[tag.category] ??= [];
-    tags[tag.category].push({
+    const tagCategory = tag.category || category;
+    tags[tagCategory] ??= [];
+    tags[tagCategory].push({
       tagname: tag.tagname,
       description: tag.description,
     });
     return tags;
   }, {});
 
+const fetchTags = async (path, category) => {
+  const resp = await fetch(path);
+  if (!resp.ok) return [];
+  const json = await resp.json();
+  return categorize(json.data, category);
+};
+
 const getCopyBtn = (tagName) => {
   const copy = createTag('button', { class: 'copy' });
   copy.id = `${tagName}-tag-copy`;
@@ -31,8 +32,15 @@ const getCopyBtn = (tagName) => {
 };
 
 export default async function loadPersonalization(content, list) {
-  const tagData = await fetchTags(content[0].path);
-  const tagsObj = categorize(tagData);
+  let tagsObj = {};
+  for (const item of content) {
+    const { category, path } = item;
+    tagsObj = {
+      ...tagsObj,
+      ...await fetchTags(path, category),
+    };
+  }
+
   list.textContent = '';
 
   Object.entries(tagsObj).forEach(([category, tags]) => {

libs/blocks/marketo/marketo.js

@@ -38,6 +38,7 @@ const FORM_MAP = {
   'co-partner-names': 'program.copartnernames',
   'sfdc-campaign-id': 'program.campaignids.sfdc',
 };
+export const FORM_PARAM = 'form';
 
 export const formValidate = (formEl) => {
   formEl.classList.remove('hide-errors');
@@ -69,7 +70,7 @@ export const decorateURL = (destination, baseURL = window.location) => {
     return destinationUrl.href;
   } catch (e) {
     /* c8 ignore next 4 */
-    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`);
+    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`, { tags: 'error,marketo' });
   }
 
   return null;
@@ -91,6 +92,38 @@ export const setPreferences = (formData) => {
   Object.entries(formData).forEach(([key, value]) => setPreference(key, value));
 };
 
+const showSuccessSection = (formData, scroll = true) => {
+  const show = (el) => {
+    el.classList.remove('hide-block');
+    if (scroll) el.scrollIntoView({ behavior: 'smooth' });
+  };
+  const successClass = formData[SUCCESS_SECTION]?.toLowerCase().replaceAll(' ', '-');
+  if (!successClass) {
+    window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    return;
+  }
+  const section = document.querySelector(`.section.${successClass}`);
+  if (section) {
+    show(section);
+    return;
+  }
+  // For Marquee use case
+  const maxIntervals = 6;
+  let count = 0;
+  const interval = setInterval(() => {
+    const el = document.querySelector(`.section.${successClass}`);
+    if (el) {
+      clearInterval(interval);
+      show(el);
+    }
+    count += 1;
+    if (count > maxIntervals) {
+      clearInterval(interval);
+      window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    }
+  }, 500);
+};
+
 export const formSuccess = (formEl, formData) => {
   const el = formEl.closest('.marketo');
   const parentModal = formEl?.closest('.dialog-modal');
@@ -108,18 +141,8 @@ export const formSuccess = (formEl, formData) => {
   }
 
   if (formData?.[SUCCESS_TYPE] !== 'section') return true;
-
-  try {
-    const section = formData[SUCCESS_SECTION].toLowerCase().replaceAll(' ', '-');
-    const success = document.querySelector(`.section.${section}`);
-    success.classList.remove('hide-block');
-    success.scrollIntoView({ behavior: 'smooth' });
-    setPreference(SUCCESS_TYPE, 'message');
-  } catch (e) {
-    /* c8 ignore next 2 */
-    window.lana?.log('Error showing Marketo success section', { tags: 'errorType=warn,module=marketo' });
-  }
-
+  showSuccessSection(formData);
+  setPreference(SUCCESS_TYPE, 'message');
   return false;
 };
 
@@ -161,7 +184,7 @@ export const loadMarketo = (el, formData) => {
     .catch(() => {
       /* c8 ignore next 2 */
       el.style.display = 'none';
-      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'errorType=error,module=marketo' });
+      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'error,marketo' });
     });
 };
 
@@ -198,6 +221,15 @@ export default function init(el) {
     return;
   }
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const ungated = searchParams.get(FORM_PARAM) === 'off';
+
+  if (formData[SUCCESS_TYPE] === 'section' && ungated) {
+    el.classList.add('hide-block');
+    showSuccessSection(formData, false);
+    return;
+  }
+
   formData[SUCCESS_TYPE] = formData[SUCCESS_TYPE] || 'redirect';
 
   if (formData[SUCCESS_TYPE] === 'redirect') {

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

@@ -542,7 +542,7 @@ export default async function init(el) {
     merchCard.append(
       createTag(
         'div',
-        { slot: 'action-menu-content' },
+        { slot: 'action-menu-content', tabindex: '0' },
         actionMenuContent.innerHTML,
       ),
     );

libs/blocks/merch/merch.js

@@ -560,6 +560,23 @@ export async function initService(force = false, attributes = {}) {
     fetchCheckoutLinkConfigs.promise = undefined;
   }
   const { commerce, env: miloEnv, locale: miloLocale } = getConfig();
+
+  const extraAttrs = [
+    'checkout-workflow-step',
+    'force-tax-exclusive',
+    'checkout-client-id',
+    'allow-override',
+  ];
+
+  extraAttrs.forEach((attr) => {
+    const camelCaseAttr = attr.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    // eslint-disable-next-line no-prototype-builtins
+    if (commerce?.hasOwnProperty(camelCaseAttr)) {
+      const value = commerce[camelCaseAttr];
+      delete commerce[camelCaseAttr];
+      commerce[attr] = value;
+    }
+  });
   initService.promise = initService.promise ?? polyfills().then(async () => {
     await import('../../deps/mas/commerce.js');
     const { language, locale } = getMiloLocaleSettings(miloLocale);