[MWPW-182991] Project Lingo: Language Banner

libs/blocks/caas/utils.js

@@ -664,7 +664,7 @@ export async function getCountryAndLang({ autoCountryLang, country, language, so
           || pageConfigHelper().mep?.countryIP;
 
         if (!geoCountry) {
-          const { getAkamaiCode } = await import('../../features/georoutingv2/georoutingv2.js');
+          const { default: getAkamaiCode } = await import('../../utils/geo.js');
           geoCountry = await getAkamaiCode(true);
         }
 

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

@@ -1178,7 +1178,7 @@ class Gnav {
     const promoPath = getMetadata('gnav-promo-source');
     const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
 
-    if (!promoPath || !asideJsPromise) {
+    if (!promoPath || !asideJsPromise || !fedsPromoWrapper) {
       fedsPromoWrapper?.remove();
       this.block.classList.remove('has-promo');
       return this.elements.aside;
@@ -1274,17 +1274,24 @@ class Gnav {
     if (!popup) return;
     const hasPromo = this.block.classList.contains('has-promo');
     const promoHeight = this.elements.aside?.clientHeight;
+    const languageBanner = document.querySelector('.language-banner');
+    const languageBannerHeight = languageBanner?.offsetHeight || 0;
 
     const isLocalNav = this.isLocalNav();
-    if (!isLocalNav && hasPromo) {
-      popup.style.top = `calc(0px - var(--feds-height-nav) - ${promoHeight}px)`;
+    const yOffset = window.scrollY || Math.abs(parseInt(document.body.style.top, 10)) || 0;
+
+    // Handle initial positioning for non-local nav (promo + visible language banner)
+    if (!isLocalNav && (hasPromo || languageBanner)) {
+      const langBannerNewHeight = languageBanner ? Math.max(0, languageBannerHeight - yOffset) : 0;
+      const totalOffsetHeight = (hasPromo ? promoHeight : 0) + langBannerNewHeight;
+      popup.style.top = `calc(0px - var(--feds-height-nav) - ${totalOffsetHeight}px)`;
       if (isSmallScreen) return;
     }
-    const yOffset = window.scrollY || Math.abs(parseInt(document.body.style.top, 10)) || 0;
     const navOffset = hasPromo ? `var(--feds-height-nav) - ${promoHeight}px` : 'var(--feds-height-nav)';
     popup.removeAttribute('style');
     if (isLocalNav) {
-      popup.style.top = `calc(${yOffset}px - ${navOffset} - 2px)`;
+      const langBannerOffset = languageBanner ? languageBannerHeight : 0;
+      popup.style.top = `calc(${yOffset}px - ${navOffset} - ${langBannerOffset}px - 2px)`;
     }
     const { isPresent, isSticky, height } = getBranchBannerInfo();
     if (isPresent) {

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

@@ -954,6 +954,10 @@ export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => {
                 // Optional: Disconnect the observer if you no longer need to track it
                 observer.disconnect();
               }
+              if (node.classList?.contains('language-banner')) {
+                // Update the popup position when the language banner is removed
+                updatePopupPosition();
+              }
             });
           }
         });

libs/blocks/merch/merch.js

@@ -227,7 +227,7 @@ export async function getGeoLocaleSettings(miloLocale) {
     || sessionStorage.getItem('akamai');
   if (!country) {
     try {
-      const { getAkamaiCode } = await import('../../features/georoutingv2/georoutingv2.js');
+      const { getAkamaiCode } = await import('../../utils/geo.js');
       country = await getAkamaiCode(true);
     } catch (error) {
       window.lana?.log(`Error getting Akamai code (will go with default country): ${error}`);

libs/blocks/mobile-app-banner/mobile-app-banner.js

@@ -78,7 +78,8 @@ async function branchInit(key) {
 /* eslint-enable */
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
-  if (!header || header.classList.contains('has-promo')) return;
+  const languageBanner = document.querySelector('.language-banner');
+  if (!header || header.classList.contains('has-promo') || languageBanner) return;
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);

libs/features/georoutingv2/georoutingv2.js

@@ -1,4 +1,5 @@
-import { getFederatedContentRoot, getCountry } from '../../utils/utils.js';
+import { getFederatedContentRoot } from '../../utils/utils.js';
+import { getAkamaiCode } from '../../utils/geo.js';
 
 const OLD_GEOROUTING = 'oldgeorouting';
 
@@ -75,31 +76,6 @@ export const getCookie = (name) => document.cookie
   .find((row) => row.startsWith(`${name}=`))
   ?.split('=')[1];
 
-export const getAkamaiCode = (checkedParams = false) => new Promise((resolve, reject) => {
-  let akamaiLocale = null;
-  if (!checkedParams) {
-    akamaiLocale = getCountry();
-  }
-  if (akamaiLocale !== null) {
-    resolve(akamaiLocale.toLowerCase());
-  } else {
-    /* c8 ignore next 5 */
-    fetch('https://geo2.adobe.com/json/', { cache: 'no-cache' }).then((resp) => {
-      if (resp.ok) {
-        resp.json().then((data) => {
-          const code = data.country.toLowerCase();
-          sessionStorage.setItem('akamai', code);
-          resolve(code);
-        });
-      } else {
-        reject(new Error(`Something went wrong getting the akamai Code. Response status text: ${resp.statusText}`));
-      }
-    }).catch((error) => {
-      reject(new Error(`Something went wrong getting the akamai Code. ${error.message}`));
-    });
-  }
-});
-
 // Determine if any of the locales can be linked to.
 async function getAvailableLocales(locales) {
   const fallback = getMetadata('fallbackrouting') || config.fallbackRouting;

libs/features/language-banner/language-banner.css

@@ -0,0 +1,80 @@
+.language-banner {
+  display: flex;
+  padding: 12px 20px;
+  justify-content: center;
+  align-items: center;
+  min-height: var(--feds-language-banner-height);
+  gap: 8px;
+  align-self: stretch;
+  width: 100%;
+  background-color: #3B63FB;
+  box-sizing: border-box;
+  visibility: visible;
+  position: relative;
+  z-index: 11;
+}
+
+.language-banner-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+
+.language-banner-text {
+  color: #FFF;
+  font-family: var(--body-font-family);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.language-banner-link {
+  color: #FFF;
+  font-family: var(--body-font-family);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-underline-position: from-font;
+  cursor: pointer;
+}
+
+.language-banner-link:hover {
+  color: #FFF;
+}
+
+.language-banner-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  background-color: transparent;
+}
+
+@media (min-width: 600px) {
+  .language-banner {
+    gap: 6px;
+  }
+
+  .language-banner-content {
+    justify-content: center;
+  }
+
+  .language-banner-close {
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+    width: auto;
+  }
+}

libs/features/language-banner/language-banner.js

@@ -0,0 +1,92 @@
+/* eslint-disable no-underscore-dangle */
+import { getConfig, createTag, loadStyle, getTargetMarket } from '../../utils/utils.js';
+
+function buildBanner(market, translatedUrl) {
+  const banner = document.body.querySelector('.language-banner');
+  if (!banner) return banner;
+  const messageContainer = createTag('div', { class: 'language-banner-content' });
+  const messageText = createTag('span', { class: 'language-banner-text' }, `${market.text} ${market.languageName}.`);
+  const link = createTag('a', { class: 'language-banner-link', href: translatedUrl, 'daa-ll': `${market.prefix || 'us'}|Continue` }, market.continueText || 'Continue');
+  const closeButton = createTag('button', { class: 'language-banner-close', 'aria-label': 'Close', 'daa-ll': 'Close' });
+  closeButton.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M10 0.5C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.5 15.2467 0.5 10C0.5 4.75329 4.75329 0.5 10 0.5Z" stroke="white"/>
+      <path d="M6 14.0002L14 6.00024" stroke="white" stroke-width="2"/>
+      <path d="M14 14.0002L6 6.00024" stroke="white" stroke-width="2"/>
+    </svg>
+  `;
+
+  messageContainer.append(messageText, link);
+  banner.append(messageContainer, closeButton);
+  return banner;
+}
+
+function fireAnalyticsEvent(event) {
+  const data = {
+    xdm: {},
+    data: { web: { webInteraction: { name: event?.type } } },
+  };
+  if (event?.data) data.data._adobe_corpnew = { digitalData: event.data };
+  window._satellite?.track('event', data);
+}
+
+export function sendAnalytics(event) {
+  if (window._satellite?.track) {
+    fireAnalyticsEvent(event);
+  } else {
+    window.addEventListener('alloy_sendEvent', () => {
+      fireAnalyticsEvent(event);
+    }, { once: true });
+  }
+}
+
+async function showBanner(market, config) {
+  if (!market) return;
+
+  const { pathname } = window.location;
+  const currentPrefix = config.locale.prefix;
+  const pagePath = currentPrefix ? pathname.replace(currentPrefix, '') : pathname;
+  const translatedUrl = market.prefix
+    ? `${window.location.origin}/${market.prefix}${pagePath}`
+    : `${window.location.origin}${pagePath}`;
+
+  const banner = buildBanner(market, translatedUrl);
+  if (!banner) return;
+  const { codeRoot, miloLibs } = config;
+  loadStyle(`${miloLibs || codeRoot}/features/language-banner/language-banner.css`);
+
+  const pagePrefix = config.locale.prefix?.replace('/', '') || 'us';
+  // eventName = "suggestedSite-currentSite|language-banner"
+  const eventName = `${market.prefix || 'us'}-${pagePrefix}|language-banner`;
+
+  banner.querySelector('.language-banner-link').addEventListener('click', async (e) => {
+    e.preventDefault();
+    const { setInternational } = await import('../../utils/utils.js');
+    setInternational(market.prefix || 'us');
+    if (config.lingoProjectSuccessLogging === 'on') {
+      window.lana.log(`Click: ${eventName}`, { sampleRate: 100, tags: 'lingo, lingo-language-banner-click' });
+    }
+    window.open(translatedUrl, '_self');
+  });
+
+  banner.querySelector('.language-banner-close').addEventListener('click', () => {
+    const domain = window.location.host.endsWith('.adobe.com') ? 'domain=adobe.com;' : '';
+    document.cookie = `international=${pagePrefix};path=/;${domain}`;
+    if (config.lingoProjectSuccessLogging === 'on') {
+      window.lana.log(`Close: ${eventName}`, { sampleRate: 100, tags: 'lingo, lingo-language-banner-close' });
+    }
+    banner.remove();
+  });
+
+  sendAnalytics(new Event(eventName));
+  if (config.lingoProjectSuccessLogging === 'on') {
+    window.lana.log(`Load: ${eventName}`, { sampleRate: 100, tags: 'lingo, lingo-language-banner-load' });
+  }
+}
+
+export default async function init() {
+  const market = getTargetMarket();
+  if (market) {
+    await showBanner(market, getConfig());
+  }
+}

libs/styles/styles.css

@@ -9,6 +9,7 @@
   --global-height-navPromo: 72px;
   --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
   --feds-localnav-height: 40px;
+  --feds-language-banner-height: 44px;
 
   /* Colors */
   --link-color: rgb(39, 77, 234);
@@ -764,6 +765,11 @@ header.global-navigation + .feds-localnav {
   height: var(--global-height-navPromo);
 }
 
+.language-banner {
+  height: var(--feds-language-banner-height);
+  visibility: hidden;
+}
+
 sr-only, .feds-sr-only {
   position: absolute;
   width: 1px;

libs/utils/geo.js

@@ -0,0 +1,34 @@
+import { getCountry } from './utils.js';
+/* eslint-disable no-console */
+
+/**
+ * Gets the Akamai country code from the geo2.adobe.com service.
+ * @param {boolean} [checkParams=false] - If true, checks URL parameters and session storage first.
+ * @returns {Promise<string|null>} A promise that resolves to the lowercase Akamai country code.
+ */
+export const getAkamaiCode = (checkedParams = false) => new Promise((resolve, reject) => {
+  let akamaiLocale = null;
+  if (!checkedParams) {
+    akamaiLocale = getCountry();
+  }
+  if (akamaiLocale !== null) {
+    resolve(akamaiLocale.toLowerCase());
+  } else {
+    /* c8 ignore next 5 */
+    fetch('https://geo2.adobe.com/json/', { cache: 'no-cache' }).then((resp) => {
+      if (resp.ok) {
+        resp.json().then((data) => {
+          const code = data.country.toLowerCase();
+          sessionStorage.setItem('akamai', code);
+          resolve(code);
+        });
+      } else {
+        reject(new Error(`Something went wrong getting the akamai Code. Response status text: ${resp.statusText}`));
+      }
+    }).catch((error) => {
+      reject(new Error(`Something went wrong getting the akamai Code. ${error.message}`));
+    });
+  }
+});
+
+export default getAkamaiCode;