MWPW-185658: clean up libs/features/mas (#5284)

* MWPW-185658: clean up libs/features/mas

merch block and OST tool, and related resources stays in Milo.

* fix lint issue

* wip

* revert gnav test and remove merch import

* revert global-navigation.js

* remove mas from gnav

* fix imports

* revert gnav changes

* clean up

* fix importmap

* fix test

* update pkg name and maslibs local port

* update mas pkg name

* rename mas npm package name

* revert .js to .html test conversions

* revert .js to .html test conversions

* fix lint

* revert line

* revert line

* use chrome channel to avoid http2 errors

* removing this line in favor of channel: chrome Playwright setting.

* removing extraHTTPHeaders in favor of channel: chrome Playwright setting.

* improve resilience of tests in webkit

* revert line

Author: yesil

.eslintrc-code-compatibility.js

@@ -14,7 +14,6 @@ module.exports = {
   ],
   ignorePatterns: [
     '/libs/deps/*',
-    '/libs/features/mas/*',
     '/libs/navigation/dist/*',
     '/tools/loc/*',
   ],

.eslintrc.js

@@ -59,7 +59,6 @@ module.exports = {
   ],
   ignorePatterns: [
     '/libs/deps/*',
-    '/libs/features/mas/*',
     '/tools/loc/*',
     '/libs/features/spectrum-web-components/*',
     '/libs/navigation/dist/*',

.github/codeql/codeql-config.yml

@@ -5,5 +5,3 @@ paths-ignore:
   - 'tools/floodgate/**'
   - 'tools/translation/**'
   - node_modules
-  - libs/deps/mas
-  - libs/features/mas/dist

.github/workflows/run-mas-tests.yaml

@@ -7,7 +7,6 @@ logs/*
 .idea
 .iml
 .env
-**/mas/*/stats.json
 test-html-results/
 test-results/
 test-a11y-results/

.gitignore

@@ -8,6 +8,3 @@ build/*
 LICENSE
 web-test-runner.config.mjs
 codecov.yaml
-libs/features/mas/*
-!libs/features/mas/docs
-!libs/features/mas/dist

.hlxignore

@@ -9,7 +9,6 @@
 /libs/features/georouting/ @adobecom/milo-core
 /libs/features/georoutingv2/ @adobecom/milo-core
 /libs/features/icons/ @adobecom/milo-core
-/libs/features/mas/ @adobecom/tacocat
 /libs/features/personalization/ @adobecom/mep-squad
 /libs/features/seotech/ @adobecom/milo-core
 /libs/features/spectrum-web-components/ @adobecom/tacocat

CODEOWNERS

@@ -12,6 +12,7 @@ import {
   getFederatedUrl,
   getFedsPlaceholderConfig,
   shouldBlockFreeTrialLinks,
+  getCountry,
 } from '../../utils/utils.js';
 
 const cssPromise = (async () => {
@@ -55,17 +56,14 @@ const asideJsPromise = getMetadata('gnav-promo-source') ? import('./features/asi
 
 const breadCrumbsJsPromise = document.querySelector('header')?.classList.contains('has-breadcrumbs') ? import('./features/breadcrumbs/breadcrumbs.js') : null;
 
-const [utilities, placeholders, merch, { processTrackingLabels }] = await Promise.all([
+const [utilities, placeholders, { processTrackingLabels }] = await Promise.all([
   import('./utilities/utilities.js'),
   import('../../features/placeholders.js'),
-  import('../merch/merch.js'),
   import('../../martech/attributes.js'),
 ]);
 
 const { replaceKey, replaceKeyArray } = placeholders;
 
-const { getMiloLocaleSettings } = merch;
-
 const {
   closeAllDropdowns,
   createErrorPopup,
@@ -914,7 +912,7 @@ class Gnav {
       target: this.blocks.universalNav,
       env: environment,
       locale,
-      countryCode: getMiloLocaleSettings(getConfig().locale)?.country || 'US',
+      countryCode: getCountry() || 'US',
       imsClientId: window.adobeid?.client_id,
       theme: isDarkMode() ? 'dark' : 'light',
       analyticsContext: {
@@ -1540,15 +1538,15 @@ class Gnav {
           item.parentElement.replaceWith(item);
 
           return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered" role="listitem">
-              ${decorateCta({ elem: item.classList.contains('merch') ? await merch.default(item) : item, type: itemType, index: index + 1 })}
+              ${decorateCta({ elem: item.classList.contains('merch') ? await (await import('../merch/merch.js')).default(item) : item, type: itemType, index: index + 1 })}
             </div>`, item);
         case 'link': {
           let customLinkModifier = '';
           let removeCustomLink = false;
           let linkElem = item.querySelector('a');
           if (shouldBlockFreeTrialLinks(linkElem)) return null;
           if (linkElem.classList.contains('merch')) {
-            linkElem = await merch.default(linkElem);
+            linkElem = await (await import('../merch/merch.js')).default(linkElem);
           }
           const customLinksSection = item.closest('.link-group');
           linkElem.className = 'feds-navLink';
@@ -1584,7 +1582,7 @@ class Gnav {
         }
         case 'text':
           return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">
-              ${item.classList.contains('merch') ? await merch.default(item) : item.textContent}
+              ${item.classList.contains('merch') ? await (await import('../merch/merch.js')).default(item) : item.textContent}
             </div>`, item);
         default:
           /* c8 ignore next 3 */

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

@@ -5,7 +5,7 @@ import {
 import { replaceKey } from '../../features/placeholders.js';
 
 // MAS Component Names
-export const MAS_COMMERCE_SERVICE = 'commerce';
+export const COMMERCE_LIBRARY = 'commerce';
 export const MAS_MERCH_CARD = 'merch-card';
 export const MAS_MERCH_CARD_COLLECTION = 'merch-card-collection';
 export const MAS_MERCH_MNEMONIC_LIST = 'merch-mnemonic-list';
@@ -373,7 +373,7 @@ export function getMasLibs() {
   const sanitizedMasLibs = masLibs.trim().toLowerCase();
 
   if (sanitizedMasLibs === 'local') {
-    return 'http://localhost:3030/web-components/dist';
+    return 'http://localhost:3000/web-components/dist';
   }
   if (sanitizedMasLibs === 'main') {
     return 'http://www.adobe.com/mas/libs';
@@ -405,7 +405,7 @@ function getFragmentClientUrl() {
   const sanitizedMasLibs = masLibs.trim().toLowerCase();
 
   if (sanitizedMasLibs === 'local') {
-    return 'http://localhost:3030/studio/libs/fragment-client.js';
+    return 'http://localhost:3000/studio/libs/fragment-client.js';
   }
   if (sanitizedMasLibs === 'main') {
     return 'https://mas.adobe.com/studio/libs/fragment-client.js';
@@ -432,59 +432,40 @@ const failedExternalLoads = new Set();
 const loadingPromises = new Map();
 
 /**
- * Checks if mas-ff-mas-deps feature flag is enabled
- * @returns {boolean} true if flag is on
- */
-function isMasDepsFlagEnabled() {
-  const metaFlag = getMetadata('mas-ff-mas-deps');
-  if (metaFlag === 'off' || metaFlag === 'false') return false;
-  return true;
-}
-
-/**
- * Loads a MAS component either from external URL (if masLibs present) or local deps
+ * Loads a MAS component either from external URL (if masLibs present) or from production CDN
  * @param {string} componentName - Name of the component to load (e.g., 'commerce', 'merch-card')
  * @returns {Promise} Promise that resolves when component is loaded
  */
 export async function loadMasComponent(componentName) {
+  // Return existing loading promise if already in progress
   if (loadingPromises.has(componentName)) {
     return loadingPromises.get(componentName);
   }
 
+  // Component already loaded, return immediately
   if (customElements.get(componentName)) {
     return Promise.resolve();
   }
 
   const loadPromise = (async () => {
     const masLibsBase = getMasLibs();
+    const productionUrl = `https://www.adobe.com/mas/libs/${componentName}.js`;
+    const targetUrl = masLibsBase ? `${masLibsBase}/${componentName}.js` : productionUrl;
 
-    if (masLibsBase) {
-      const externalUrl = `${masLibsBase}/${componentName}.js`;
-
-      if (failedExternalLoads.has(externalUrl)) {
-        throw new Error(`Failed to load component from ${externalUrl}`);
-      }
+    // Fail fast if this URL has already failed before
+    if (failedExternalLoads.has(targetUrl)) {
+      throw new Error(`Previously failed to load component from ${targetUrl}`);
+    }
 
-      try {
-        return await import(externalUrl);
-      } catch (error) {
-        failedExternalLoads.add(externalUrl);
-        throw error;
-      }
-    } else if (isMasDepsFlagEnabled()) {
-      const masUrl = `https://www.adobe.com/mas/libs/${componentName}.js`;
-      try {
-        return await import(masUrl);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.warn(`Failed to load from MAS repository, falling back to Milo deps: ${error.message}`);
-        return import(`../../deps/mas/${componentName}.js`);
-      }
-    } else {
-      return import(`../../deps/mas/${componentName}.js`);
+    try {
+      return await import(targetUrl);
+    } catch (error) {
+      failedExternalLoads.add(targetUrl);
+      throw error;
     }
   })();
 
+  // Cache the promise and clean up when done
   loadingPromises.set(componentName, loadPromise);
   loadPromise.finally(() => loadingPromises.delete(componentName));
 
@@ -1083,7 +1064,7 @@ export async function initService(force = false, attributes = {}) {
   });
   initService.promise = initService.promise
     ?? polyfills().then(async () => {
-      await loadMasComponent(MAS_COMMERCE_SERVICE);
+      await loadMasComponent(COMMERCE_LIBRARY);
 
       // Load fragment-client.js when maslibs is present
       const fragmentClientUrl = getFragmentClientUrl();

libs/blocks/merch/merch.js

@@ -2,7 +2,7 @@ import ctaTextOption from './ctaTextOption.js';
 import {
   getConfig, getLocale, getMetadata, loadScript, loadStyle, createTag,
 } from '../../utils/utils.js';
-import { initService, loadMasComponent, getMasLibs, getMiloLocaleSettings, MAS_COMMERCE_SERVICE } from '../merch/merch.js';
+import { initService, loadMasComponent, getMasLibs, getMiloLocaleSettings, COMMERCE_LIBRARY } from '../merch/merch.js';
 
 export const AOS_API_KEY = 'wcms-commerce-ims-user-prod';
 export const CHECKOUT_CLIENT_ID = 'creative';
@@ -159,7 +159,7 @@ export async function loadOstEnv() {
   }
   await initService(true, attributes);
   // Load commerce.js based on masLibs parameter
-  masCommerceService = await loadMasComponent(MAS_COMMERCE_SERVICE);
+  masCommerceService = await loadMasComponent(COMMERCE_LIBRARY);
 
   // Get the exports - they might be in different places depending on how it was loaded
   let Log;
@@ -169,7 +169,8 @@ export async function loadOstEnv() {
     ({ Log, Defaults } = window.mas.commerce);
   } else {
     // Loaded as module
-    ({ Log, Defaults } = await import('../../deps/mas/commerce.js'));
+    // eslint-disable-next-line import/no-unresolved
+    ({ Log, Defaults } = await import('https://www.adobe.com/mas/libs/commerce.js'));
   }
 
   const defaultPlaceholderOptions = Object.fromEntries([