[Release] Stage to Main (#2495)

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

@@ -72,12 +72,7 @@ class Footer {
     this.body = await fetchAndProcessPlainHtml({
       url,
       shouldDecorateLinks: false,
-    })
-      .catch((e) => lanaLog({
-        message: `Error fetching footer content ${url}`,
-        e,
-        tags: 'errorType=error,module=global-footer',
-      }));
+    });
 
     if (!this.body) return;
 
@@ -153,7 +148,13 @@ class Footer {
 
   loadIcons = async () => {
     const file = await fetch(`${base}/blocks/global-footer/icons.svg`);
-
+    if (!file.ok) {
+      lanaLog({
+        message: 'Issue with loadIcons',
+        e: `${file.statusText} url: ${file.url}`,
+        tags: 'errorType=info,module=global-footer',
+      });
+    }
     const content = await file.text();
     const elem = toFragment`<div class="feds-footer-icons">${content}</div>`;
     this.block.append(elem);

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

@@ -5,7 +5,6 @@ import {
   loadIms,
   decorateLinks,
   loadScript,
-  loadStyle,
 } from '../../utils/utils.js';
 import {
   closeAllDropdowns,
@@ -23,6 +22,7 @@ import {
   loadBaseStyles,
   loadBlock,
   loadDecorateMenu,
+  rootPath,
   loadStyles,
   logErrorFor,
   selectors,
@@ -409,14 +409,14 @@ class Gnav {
           Search,
         ] = await Promise.all([
           loadBlock('../features/search/gnav-search.js'),
-          loadStyles('features/search/gnav-search.css'),
+          loadStyles(rootPath('features/search/gnav-search.css')),
         ]);
         this.Search = Search;
 
         if (!this.useUniversalNav) {
           const [ProfileDropdown] = await Promise.all([
             loadBlock('../features/profile/dropdown.js'),
-            loadStyles('features/profile/dropdown.css'),
+            loadStyles(rootPath('features/profile/dropdown.css')),
           ]);
           this.ProfileDropdown = ProfileDropdown;
         }
@@ -465,6 +465,11 @@ class Gnav {
     const profileData = await fetch(`https://${env.adobeIO}/profile`, { headers });
 
     if (profileData.status !== 200) {
+      lanaLog({
+        message: 'GNAV: decorateProfile has failed to fetch profile data',
+        e: `${profileData.statusText} url: ${profileData.url}`,
+        tags: 'errorType=info,module=gnav',
+      });
       return;
     }
 
@@ -515,7 +520,7 @@ class Gnav {
     const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.1';
     await Promise.all([
       loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
-      loadStyle(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
+      loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
     ]);
 
     const getChildren = () => {
@@ -638,7 +643,7 @@ class Gnav {
       webappPrompt,
     ] = await Promise.all([
       import('../../features/webapp-prompt/webapp-prompt.js'),
-      loadStyle(`${base}/features/webapp-prompt/webapp-prompt.css`),
+      loadStyles(`${base}/features/webapp-prompt/webapp-prompt.css`),
     ]);
 
     webappPrompt.default({ promptPath, entName, parent: this.blocks.universalNav, getAnchorState });
@@ -1006,12 +1011,7 @@ export default async function init(block) {
   try {
     const { mep } = getConfig();
     const url = await getSource();
-    const content = await fetchAndProcessPlainHtml({ url })
-      .catch((e) => lanaLog({
-        message: `Error fetching gnav content url: ${url}`,
-        e,
-        tags: 'errorType=error,module=gnav',
-      }));
+    const content = await fetchAndProcessPlainHtml({ url });
     if (!content) return null;
     const gnav = new Gnav({
       content,

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

@@ -5,7 +5,6 @@ import {
   getAnalyticsValue,
   icons,
   isDesktop,
-  lanaLog,
   logErrorFor,
   selectors,
   setActiveDropdown,
@@ -308,12 +307,8 @@ const decorateMenu = (config) => logErrorFor(async () => {
     const pathElement = config.item.querySelector('a');
     if (!(pathElement instanceof HTMLElement)) return;
 
-    const content = await fetchAndProcessPlainHtml({ url: pathElement.href })
-      .catch((e) => lanaLog({
-        message: `Menu could not be fetched ${pathElement.href}`,
-        e,
-        tags: 'errorType=error,module=menu',
-      }));
+    const content = await fetchAndProcessPlainHtml({ url: pathElement.href });
+
     if (!content) return;
 
     const menuContent = toFragment`<div class="feds-menu-content">${content.innerHTML}</div>`;

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

@@ -183,18 +183,30 @@ export function getExperienceName() {
   return '';
 }
 
-export function loadStyles(path) {
+export function rootPath(path) {
   const { miloLibs, codeRoot } = getConfig();
-  return new Promise((resolve) => {
-    loadStyle(`${miloLibs || codeRoot}/blocks/global-navigation/${path}`, resolve);
+  const url = `${miloLibs || codeRoot}/blocks/global-navigation/${path}`;
+  return url;
+}
+
+export function loadStyles(url) {
+  loadStyle(url, (e) => {
+    if (e === 'error') {
+      lanaLog({
+        message: 'GNAV: Error in loadStyles',
+        e: `error loading style: ${url}`,
+        tags: 'errorType=info,module=utilities',
+      });
+    }
   });
 }
 
 // Base styles are shared between top navigation and footer,
 // since they can be independent of each other.
 // CSS imports were not used due to duplication of file include
 export async function loadBaseStyles() {
-  await loadStyles('base.css');
+  const url = rootPath('base.css');
+  await loadStyles(url);
 }
 
 export function loadBlock(path) {
@@ -212,7 +224,7 @@ export async function loadDecorateMenu() {
 
   const [{ decorateMenu, decorateLinkGroup }] = await Promise.all([
     loadBlock('./menu/menu.js'),
-    loadStyles('utilities/menu/menu.css'),
+    loadStyles(rootPath('utilities/menu/menu.css')),
   ]);
 
   resolve({
@@ -332,6 +344,13 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
     path = mepFragment.target;
   }
   const res = await fetch(path.replace(/(\.html$|$)/, '.plain.html'));
+  if (res.status !== 200) {
+    lanaLog({
+      message: 'Error in fetchAndProcessPlainHtml',
+      e: `${res.statusText} url: ${res.url}`,
+      tags: 'errorType=info,module=utilities',
+    });
+  }
   const text = await res.text();
   const { body } = new DOMParser().parseFromString(text, 'text/html');
   if (mepFragment?.manifestId) body.dataset.manifestId = mepFragment.manifestId;
@@ -360,7 +379,14 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   const blocks = body.querySelectorAll('.martech-metadata');
   if (blocks.length) {
     import('../../martech-metadata/martech-metadata.js')
-      .then(({ default: decorate }) => blocks.forEach((block) => decorate(block)));
+      .then(({ default: decorate }) => blocks.forEach((block) => decorate(block)))
+      .catch((e) => {
+        lanaLog({
+          message: 'Error in fetchAndProcessPlainHtml',
+          e,
+          tags: 'errorType=info,module=utilities',
+        });
+      });
   }
 
   body.innerHTML = await replaceText(body.innerHTML, getFedsPlaceholderConfig());

libs/blocks/merch/merch.css

@@ -8,6 +8,8 @@ span[data-wcs-osi] {
 }
 
 span.placeholder-resolved[data-template="strikethrough"], span.price.price-strikethrough {
+  font-size: var(--type-body-xs-size);
+  font-weight: normal;
   text-decoration: line-through;
 }
 

libs/utils/utils.js

@@ -154,7 +154,8 @@ function getEnv(conf) {
   if (host.includes(`${SLD}.page`)
     || host.includes(`${SLD}.live`)
     || host.includes('stage.adobe')
-    || host.includes('corp.adobe')) {
+    || host.includes('corp.adobe')
+    || host.includes('graybox.adobe')) {
     return { ...ENVS.stage, consumer: conf.stage };
   }
   return { ...ENVS.prod, consumer: conf.prod };

test/blocks/global-footer/global-footer.test.js

@@ -403,5 +403,23 @@ describe('global footer', () => {
       expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Footer could not be instantiated')));
       expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=global-footer')));
     });
+
+    it('should send LANA log when icons.svg has some network issue', async () => {
+      window.fetch.restore();
+      stub(window, 'fetch').callsFake(async (url) => {
+        if (url.includes('/footer')) {
+          return mockRes({
+            payload: fetchedFooter(
+              { regionPickerHash: '' },
+            ),
+          });
+        }
+        if (url.includes('/placeholders')) return mockRes({ payload: placeholders });
+        if (url.includes('icons.svg')) return mockRes({ payload: null, ok: false, status: 400 });
+        return null;
+      });
+      await createFullGlobalFooter({ waitForDecoration: true });
+      expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Issue with loadIcons')));
+    });
   });
 });

test/blocks/global-navigation/global-navigation.test.js

@@ -91,6 +91,21 @@ describe('global navigation', () => {
       expect(window.lana.log.getCalls().find((c) => c.args[0].includes('IMS signIn method not available'))).to.exist;
       window.adobeIMS = ogIms;
     });
+
+    it('should send LANA log when profile call in decorateProfile fails', async () => {
+      const gnav = await createFullGlobalNavigation();
+      sinon.restore();
+      sinon.stub(window, 'fetch').callsFake((url) => {
+        if (url.includes('/profile')) return mockRes({ payload: null, ok: false, status: 400 });
+        return null;
+      });
+      window.adobeIMS = {
+        isSignedInUser: () => true,
+        getAccessToken: () => 'accessToken',
+      };
+      await gnav.decorateProfile();
+      expect(window.lana.log.getCalls().find((c) => c.args[0].includes('decorateProfile has failed to fetch profile data'))).to.exist;
+    });
   });
 
   describe('basic sanity tests', () => {
@@ -1452,4 +1467,33 @@ describe('global navigation', () => {
       });
     });
   });
+
+  describe('decorateAppPrompt', () => {
+    it('should not load webapp prompt resources', async () => {
+      document.head.innerHTML = `<meta name="app-prompt" content="off" />
+      <link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
+      <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
+      <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+      `;
+      const gnav = await createFullGlobalNavigation({});
+      gnav.decorateAppPrompt();
+      const weAppPrompt = document.head.querySelector('link[href$="/webapp-prompt.css"]');
+      expect(!!weAppPrompt).to.be.false;
+    });
+
+    it('should load webapp prompt resources', async () => {
+      document.head.innerHTML = `<meta name="app-prompt" content="on" />
+      <meta name="app-prompt-entitlement" content="firefly-web-usage" />
+      <meta name="app-prompt-path" content="https://dismiss-pep--milo--adobecom.hlx.page/drafts/raghavs/pep-prompt-content"/>
+      <link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
+      <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
+      <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+      `;
+      const gnav = await createFullGlobalNavigation({});
+      window.adobeIMS = { isSignedInUser: () => true };
+      gnav.decorateAppPrompt();
+      const weAppPrompt = document.head.querySelector('link[href$="/webapp-prompt.css"]');
+      expect(!!weAppPrompt).to.be.true;
+    });
+  });
 });