From 240c3a65ec56b7dec3a20f436371aab6b7c095a2 Mon Sep 17 00:00:00 2001
From: cod17828 <cod17828@adobe.com>
Date: Fri, 20 Dec 2024 16:30:05 +0100
Subject: [PATCH] removing .renew-banner className and styles, using
 notification block instead of aside block updating jest test

---
 edsdme/scripts/scripts.js  |  4 ++--
 edsdme/scripts/utils.js    | 12 +++---------
 edsdme/styles/styles.css   | 31 -------------------------------
 test/scripts/utils.jest.js | 15 +++++++--------
 4 files changed, 12 insertions(+), 50 deletions(-)

diff --git a/edsdme/scripts/scripts.js b/edsdme/scripts/scripts.js
index 7232905..7fb0194 100644
--- a/edsdme/scripts/scripts.js
+++ b/edsdme/scripts/scripts.js
@@ -108,10 +108,10 @@ function setUpPage() {
   redirectLoggedinPartner();
   updateIMSConfig();
   await preloadResources(CONFIG.locales, miloLibs);
-  const { loadArea, setConfig, getConfig, loadBlock } = await import(`${miloLibs}/utils/utils.js`);
+  const { loadArea, setConfig, getConfig } = await import(`${miloLibs}/utils/utils.js`);
 
   setConfig({ ...CONFIG, miloLibs });
-  await getRenewBanner(getConfig, loadBlock);
+  await getRenewBanner(getConfig);
   await loadArea();
   partnerIsSignedIn();
   if (partnerIsSignedIn()) {
diff --git a/edsdme/scripts/utils.js b/edsdme/scripts/utils.js
index ca57e02..a08d2bd 100644
--- a/edsdme/scripts/utils.js
+++ b/edsdme/scripts/utils.js
@@ -199,7 +199,7 @@ export function isRenew() {
   return { accountStatus, daysNum };
 }
 
-export async function getRenewBanner(getConfig, loadBlock) {
+export async function getRenewBanner(getConfig) {
   const renew = isRenew();
   if (!renew) return;
   const { accountStatus, daysNum } = renew;
@@ -223,16 +223,10 @@ export async function getRenewBanner(getConfig, loadBlock) {
     const componentData = data.replace('$daysNum', daysNum);
     const parser = new DOMParser();
     const doc = parser.parseFromString(componentData, 'text/html');
-    const aside = doc.querySelector('.aside');
-    aside.classList.add('renew-banner');
+    const block = doc.querySelector('.notification');
 
     const div = document.createElement('div');
-    div.style.position = 'sticky';
-    div.style.top = '64px';
-    div.style.zIndex = 1;
-
-    await loadBlock(aside);
-    div.appendChild(aside);
+    div.appendChild(block);
 
     const main = document.querySelector('main');
     if (main) main.insertBefore(div, main.firstChild);
diff --git a/edsdme/styles/styles.css b/edsdme/styles/styles.css
index 3d0ff2f..f91518b 100644
--- a/edsdme/styles/styles.css
+++ b/edsdme/styles/styles.css
@@ -6,37 +6,6 @@
  *
  *
  */
-
-/* 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;
-}
-
 .personalization-hide {
   display: none;
 }
diff --git a/test/scripts/utils.jest.js b/test/scripts/utils.jest.js
index 1e91793..cb16180 100644
--- a/test/scripts/utils.jest.js
+++ b/test/scripts/utils.jest.js
@@ -332,13 +332,12 @@ describe('Test utils.js', () => {
     const getConfig = () => ({ locale: '' });
     global.fetch = jest.fn(() => Promise.resolve({
       ok: true,
-      text: () => Promise.resolve('<div class="aside">Test</div>'),
+      text: () => Promise.resolve('<div class="notification">Test</div>'),
     }));
-
     const main = document.createElement('main');
     document.body.appendChild(main);
-    await getRenewBanner(getConfig, jest.fn());
-    const banner = document.querySelector('.renew-banner');
+    await getRenewBanner(getConfig);
+    const banner = document.querySelector('.notification');
     expect(banner).toBeTruthy();
   });
   it('Don\'t show renew banner', async () => {
@@ -356,13 +355,13 @@ describe('Test utils.js', () => {
     const getConfig = () => ({ locale: '' });
     global.fetch = jest.fn(() => Promise.resolve({
       ok: true,
-      text: () => Promise.resolve('<div class="aside">Test</div>'),
+      text: () => Promise.resolve('<div class="notification">Test</div>'),
     }));
 
     const main = document.createElement('main');
     document.body.appendChild(main);
-    await getRenewBanner(getConfig, jest.fn());
-    const banner = document.querySelector('.renew-banner');
+    await getRenewBanner(getConfig);
+    const banner = document.querySelector('.notification');
     expect(banner).toBeFalsy();
   });
   it('Renew banner fetch error', async () => {
@@ -381,7 +380,7 @@ describe('Test utils.js', () => {
     global.fetch = jest.fn(() => Promise.resolve({ ok: false }));
     const main = document.createElement('main');
     document.body.appendChild(main);
-    expect(await getRenewBanner(getConfig, jest.fn())).toEqual(null);
+    expect(await getRenewBanner(getConfig)).toEqual(null);
   });
   it('Update ims config if user is signed in', () => {
     jest.useFakeTimers();