MWPW-155099 - renew banner

edsdme/scripts/scripts.js

@@ -1,7 +1,7 @@
-import { setLibs, redirectLoggedinPartner, updateIMSConfig } from './utils.js';
+import { setLibs, redirectLoggedinPartner, updateIMSConfig, getRenewBanner } from './utils.js';
 
 // Add project-wide style path here.
-const STYLES = '';
+const STYLES = '/edsdme/styles/styles.css';
 
 // Use 'https://milo.adobe.com/libs' if you cannot map '/libs' to milo's origin.
 const LIBS = '/libs';
@@ -18,7 +18,7 @@ const imsClientId = prodHosts.includes(window.location.host) ? 'MILO_PARTNERS_PR
 const CONFIG = {
   codeRoot: '/edsdme',
   contentRoot: '/edsdme/partners-shared',
-  imsClientId: imsClientId,
+  imsClientId,
   geoRouting: 'on',
   // fallbackRouting: 'off',
   locales: {
@@ -74,8 +74,9 @@ const miloLibs = setLibs(LIBS);
 (async function loadPage() {
   redirectLoggedinPartner();
   updateIMSConfig();
-  const { loadArea, setConfig } = await import(`${miloLibs}/utils/utils.js`);
+  const { loadArea, setConfig, getConfig, loadBlock } = await import(`${miloLibs}/utils/utils.js`);
 
   setConfig({ ...CONFIG, miloLibs });
+  await getRenewBanner(getConfig, loadBlock);
   await loadArea();
 }());

edsdme/scripts/utils.js

@@ -150,6 +150,73 @@ export function redirectLoggedinPartner() {
   window.location.assign(target);
 }
 
+export async function getRenewBanner(getConfig, loadBlock) {
+  const programType = getCurrentProgramType();
+  const accountExpiration = getPartnerDataCookieValue(programType, 'accountanniversary');
+  if (!accountExpiration) return;
+
+  const expirationDate = new Date(accountExpiration);
+  const now = new Date();
+
+  let metadataKey;
+  let daysNum;
+
+  const differenceInMilliseconds = expirationDate - now;
+  const differenceInDays = Math.abs(differenceInMilliseconds) / (1000 * 60 * 60 * 24);
+  const differenceInDaysRounded = Math.floor(differenceInDays);
+
+  if (differenceInMilliseconds > 0) {
+    if (differenceInDaysRounded === 0) {
+      metadataKey = 'banner-account-expires-today';
+    } else if (differenceInDays < 30) {
+      metadataKey = 'banner-account-expires';
+      daysNum = differenceInDaysRounded;
+    } else {
+      return;
+    }
+  } else if (differenceInMilliseconds < 0) {
+    if (differenceInDays < 90) {
+      metadataKey = 'banner-account-suspended';
+      daysNum = 90 - differenceInDaysRounded;
+    } else {
+      return;
+    }
+  }
+
+  const config = getConfig();
+  const { prefix } = config.locale;
+  const defaultPath = `${prefix}/edsdme/partners-shared/fragments/${metadataKey}`;
+  const path = getMetadataContent(metadataKey) ?? defaultPath;
+  const url = new URL(path, window.location.origin);
+
+  try {
+    const response = await fetch(`${url}.plain.html`);
+    if (!response.ok) throw new Error(`Network response was not ok ${response.statusText}`);
+
+    const data = await response.text();
+    const componentData = daysNum ? data.replace('$daysNum', daysNum) : data;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(componentData, 'text/html');
+    const aside = doc.querySelector('.aside');
+    aside.classList.add('renew-banner');
+
+    const div = document.createElement('div');
+    div.style.position = 'sticky';
+    div.style.top = '64px';
+    div.style.zIndex = 10;
+
+    await loadBlock(aside);
+    div.appendChild(aside);
+
+    const main = document.querySelector('main');
+    if (main) main.insertBefore(div, main.firstChild);
+  } catch (error) {
+    console.error('There has been a problem with your fetch operation:', error);
+    // eslint-disable-next-line consistent-return
+    return null;
+  }
+}
+
 export function updateIMSConfig() {
   const imsReady = setInterval(() => {
     if (!window.adobeIMS) return;

edsdme/styles/styles.css

@@ -1,8 +1,38 @@
-/* 
+/*
  * Put project specific base styles here.
  *
  * Note: The proect does not load this file.
  *       You will need to load these using scripts.js.
- * 
+ *
  *
  */
+
+/* renew banner */
+.aside.notification.renew-banner .foreground.container,
+.aside.notification.extra-small.renew-banner .foreground.container {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.aside.notification.renew-banner .foreground.container .text,
+.aside.notification.extra-small.renew-banner .foreground.container .text {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 32px;
+  flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 600px) {
+  .aside.notification.renew-banner .foreground.container .text,
+  .aside.notification.extra-small.renew-banner .foreground.container .text {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+}
+
+.aside.renew-banner .foreground.container .text .body-m {
+  margin-bottom: 0;
+  font-size: 16px;
+  font-weight: bold;
+}