From 38d315784d89e7c7e49d11b7717eec6fe455f581 Mon Sep 17 00:00:00 2001
From: Andrei Bogdan <andbogda@adobe.com>
Date: Thu, 22 Feb 2024 12:12:33 +0200
Subject: [PATCH 1/4] Add price, oldPrice

---
 solutions/blocks/hero/hero.js         | 111 +++++++++++++++++++++++++-
 solutions/blocks/products/products.js |   5 +-
 2 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/solutions/blocks/hero/hero.js b/solutions/blocks/hero/hero.js
index 4ec77d913..0b55aa71a 100644
--- a/solutions/blocks/hero/hero.js
+++ b/solutions/blocks/hero/hero.js
@@ -5,7 +5,8 @@ import {
   renderNanoBlocks,
   fetchProduct,
 } from '../../scripts/utils/utils.js';
-
+import { trackProduct } from '../../scripts/scripts.js';
+import { ProductCard } from '../products/products.js';
 /**
  * Builds hero block and prepends to main in a new section.
  * @param {Element} element The container element
@@ -60,6 +61,79 @@ createNanoBlock('discount', (code, variant) => {
   return root;
 });
 
+/**
+ * Nanoblock representing the new product price
+ * @param mv The modelview holding the state of the view
+ * @param text The text located before the price
+ * @param monthly Show the monthly price if equal to 'monthly'
+ * @returns Root node of the nanoblock
+ */
+function renderPrice(mv, text = '', monthly = '') {
+  // TODO simplify CSS
+  const root = createTag(
+    'div',
+    {
+      class: 'price',
+    },
+    `<strong>${mv.model.basePrice}</strong>`,
+  );
+
+  const priceElt = root.querySelector('strong');
+
+  mv.subscribe(() => {
+    if (monthly.toLowerCase() === 'monthly') {
+      if (mv.model.discountedPrice) {
+        priceElt.innerHTML = `${text} ${mv.model.discountedMonthlyPrice} ${mv.model.currency} <sup>/mo</sup>`;
+      } else {
+        priceElt.innerHTML = `${text} ${mv.model.monthlyBasePrice} ${mv.model.currency} <sup>/mo</sup>`;
+      }
+    } else if (mv.model.discountedPrice) {
+      priceElt.innerHTML = `${text} ${mv.model.discountedPrice} ${mv.model.currency}`;
+    } else {
+      priceElt.innerHTML = `${text} ${mv.model.basePrice} ${mv.model.currency}`;
+    }
+
+    trackProduct(mv.model);
+  });
+
+  return root;
+}
+
+/**
+ * Nanoblock representing the old product price
+ * @param mv The modelview holding the state of the view
+ * @param text The text located before the price
+ * @param monthly Show the monthly price if equal to 'monthly'
+ * @returns Root node of the nanoblock
+ */
+function renderOldPrice(mv, text = '', monthly = '') {
+  // TODO simplify CSS
+  const root = createTag(
+    'div',
+    {
+      class: 'price',
+    },
+    `<span class='old-price'>${text} <del>${mv.model.basePrice ?? ''} ${mv.model.currency ?? ''}</del>`,
+  );
+
+  const oldPriceElt = root.querySelector('span');
+
+  mv.subscribe(() => {
+    if (mv.model.discountedPrice) {
+      oldPriceElt.innerHTML = monthly.toLowerCase() === 'monthly'
+        ? `${text} <del>${mv.model.monthlyBasePrice} ${mv.model.currency}<sup>/mo</sup></del>`
+        : `${text} <del>${mv.model.basePrice} ${mv.model.currency}</del>`;
+      oldPriceElt.style.visibility = 'visible';
+    } else {
+      oldPriceElt.style.visibility = 'hidden';
+    }
+  });
+
+  return root;
+}
+createNanoBlock('price', renderPrice);
+createNanoBlock('oldPrice', renderOldPrice);
+
 /**
  * decorates hero block
  * @param {Element} block The hero block element
@@ -79,6 +153,41 @@ export default async function decorate(block) {
     // Apply a CSS class to each selected <ul> element
     ulsWithPicture.forEach((ul) => ul.classList.add('hero-awards'));
 
+    [...block.children].forEach((row) => {
+      if (row.classList.contains('hero-content')) {
+        [...(row.children)].forEach((col) => {
+          // col.classList.add('product-card');
+          // block.appendChild(col);
+          // checl if the column has a hero class name
+
+          const mv = new ProductCard(col);
+          renderNanoBlocks(col, mv);
+
+          // get the parent node of the em
+          const emParent = row.querySelector('.price.nanoblock em');
+          emParent.prepend(' / ');
+
+          // get the parent node of the strong
+          const strongParent = row.querySelector('.price.nanoblock strong').parentNode;
+
+          if (strongParent) {
+            emParent.parentElement.remove();
+            strongParent.appendChild(emParent);
+          }
+
+          // listen to ProductCard change and update the buttons pointing to the store url
+          mv.subscribe((card) => {
+            col.querySelectorAll('.button-container a').forEach((link) => {
+              if (link && link.href.startsWith('https://www.bitdefender.com.au/site/Store/buy')) {
+                link.href = card.url;
+              }
+            });
+          });
+        });
+      }
+      // row.remove();
+    });
+
     renderNanoBlocks(block);
 
     // move discount bubble inside the closest button
diff --git a/solutions/blocks/products/products.js b/solutions/blocks/products/products.js
index 67c9f6e39..d40a77e1c 100644
--- a/solutions/blocks/products/products.js
+++ b/solutions/blocks/products/products.js
@@ -66,7 +66,7 @@ function toModel(productCode, variantId, v) {
  * This class is also repsonsible for fetching the product variants
  * from the remote service and presenting them to the view.
  */
-class ProductCard {
+export class ProductCard {
   constructor(root) {
     this.root = root;
     this.listeners = [];
@@ -368,11 +368,8 @@ export default function decorate(block) {
     [...(row.children)].forEach((col) => {
       col.classList.add('product-card');
       block.appendChild(col);
-
       const mv = new ProductCard(col);
-
       renderNanoBlocks(col, mv);
-
       // listen to ProductCard change and update the buttons pointing to the store url
       mv.subscribe((card) => {
         col.querySelectorAll('.button-container a').forEach((link) => {

From 63c590c28ac990bf9f42610b27bd54166732bf6a Mon Sep 17 00:00:00 2001
From: Andrei Bogdan <andbogda@adobe.com>
Date: Sat, 24 Feb 2024 12:44:51 +0200
Subject: [PATCH 2/4] add css

---
 solutions/blocks/hero/hero.css | 67 +++++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/solutions/blocks/hero/hero.css b/solutions/blocks/hero/hero.css
index 303265de0..2d056a1c7 100644
--- a/solutions/blocks/hero/hero.css
+++ b/solutions/blocks/hero/hero.css
@@ -158,6 +158,10 @@ main .hero h4 {
   margin: 0 0 9px;
 }
 
+main .hero.new-hero-exp01 h4 {
+  font-size: 16px;
+  line-height: 28px;
+}
 main .hero.black-background h1,
 main .hero.black-background h2,
 main .hero.black-background h4 {
@@ -178,12 +182,9 @@ main .hero p {
   margin: 0;
 }
 
-main .hero h1 + p {
-  margin: 8px 0 0;
-  color: #616161;
-  font-size: var(--hero-font-size-xxs);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.5;
+main .hero.new-hero-exp01 h1 + p {
+  font-size: 24px;
+  line-height: 28px;
 }
 
 main .hero.comparison p {
@@ -242,6 +243,11 @@ main .hero a.button.modal {
     justify-content: center;
     align-items: center;
   }
+
+  main .hero.new-hero-exp01 a.button {
+    min-width: 146px;
+    padding: 10px 23px 8px 23px;
+  }
 }
 
 main .hero a.button span.button-text {
@@ -252,7 +258,6 @@ main .hero a.button span.button-text {
   font-weight: var(--font-weight-bold);
 }
 
-
 main .hero .discount-bubble {
   background: #2cb43d;
   border-radius: 50%;
@@ -428,7 +433,19 @@ main .hero .hero-awards li::after {
     font-size: 14px;
     margin: 0;
   }
+  main .hero.new-hero-exp01 p {
+    font-size: 16px;
+    line-height: 18px;
+  }
 
+  main .hero.new-hero-exp01 p em a {
+    font-size: 16px;
+    line-height: 18px;
+    color: #000000;
+    font-style: normal;
+    text-decoration: underline;
+    
+  }
   main .hero .hero-picture picture img {
     display: block;
     padding-left: 0;
@@ -452,6 +469,11 @@ main .hero .hero-awards li::after {
     padding: 0 20px 0 0;
   }
 
+  main .hero.new-hero-exp01 .hero-content > div {
+    width: 48%;
+    padding: 0 20px 0 0;
+  }
+
   main .hero.comparison .hero-content > div {
     width: 65%;
     padding: 40px 0 0;
@@ -502,12 +524,27 @@ main .hero .hero-awards li::after {
   main .hero h1 {
     font-size: 56px;
   }
+  main .hero.new-hero-exp01 h1 {
+    color: #006DFF;
+    font-size: 40px;
+  }
+
+  main .hero.new-hero-exp01 h1 strong {
+    font-weight: var(--font-weight-regular);
+
+  }
 
   main .hero .hero-picture picture img {
     display: block;
     padding-left: 25%;
   }
 
+  main .hero.new-hero-exp01 .hero-picture picture img {
+    display: block;
+    padding-left: 0;
+    object-fit: fill;
+  }
+
   main .hero .discount-bubble {
     width: 83px;
     height: 83px;
@@ -521,10 +558,22 @@ main .hero .hero-awards li::after {
     font-size: 14px;
   }
 
-  main .hero .hero-content {
-    min-height: 725px;
+  main .hero.new-hero-exp01 .hero-content {
+    min-height: 498px;
     max-width: var(--section-large-desktop-max-width);
     padding-left: var(--section-large-desktop-padding);
     padding-right: var(--section-large-desktop-padding);
   }
+  
+}
+
+
+main .hero.new-hero-exp01 .nanoblock span.old-price del {
+  font-size: 16px;
+  line-height: 18px;
 }
+
+main .hero.new-hero-exp01 .nanoblock strong {
+  font-size: 40px;
+  line-height: 45px;
+}
\ No newline at end of file

From 495ffe5c6522c76ed5e7a551c98c5702de5cff77 Mon Sep 17 00:00:00 2001
From: Andrei Bogdan <andbogda@adobe.com>
Date: Mon, 26 Feb 2024 10:31:16 +0200
Subject: [PATCH 3/4] update spacing between elements

---
 solutions/blocks/hero/hero.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/solutions/blocks/hero/hero.css b/solutions/blocks/hero/hero.css
index 2d056a1c7..bc9ab4705 100644
--- a/solutions/blocks/hero/hero.css
+++ b/solutions/blocks/hero/hero.css
@@ -143,6 +143,9 @@ main .hero h1 {
   margin: 0 0 25px;
 }
 
+main .hero.new-hero-exp01 h1 {
+  margin: 0 0 10px;
+}
 main .hero h2 {
   font-size: 18px;
   color: var(--text-color);
@@ -161,6 +164,7 @@ main .hero h4 {
 main .hero.new-hero-exp01 h4 {
   font-size: 16px;
   line-height: 28px;
+  margin: 31px 0 14px 0;
 }
 main .hero.black-background h1,
 main .hero.black-background h2,
@@ -185,6 +189,7 @@ main .hero p {
 main .hero.new-hero-exp01 h1 + p {
   font-size: 24px;
   line-height: 28px;
+  margin: 0 0 10px;
 }
 
 main .hero.comparison p {
@@ -246,8 +251,10 @@ main .hero a.button.modal {
 
   main .hero.new-hero-exp01 a.button {
     min-width: 146px;
-    padding: 10px 23px 8px 23px;
+    padding: 9px 23px 9px 23px;
+    margin: 8px 39px 0 0;
   }
+
 }
 
 main .hero a.button span.button-text {
@@ -436,6 +443,7 @@ main .hero .hero-awards li::after {
   main .hero.new-hero-exp01 p {
     font-size: 16px;
     line-height: 18px;
+    margin: 6px 0 0 0;
   }
 
   main .hero.new-hero-exp01 p em a {
@@ -576,4 +584,11 @@ main .hero.new-hero-exp01 .nanoblock span.old-price del {
 main .hero.new-hero-exp01 .nanoblock strong {
   font-size: 40px;
   line-height: 45px;
+}
+
+main .hero.new-hero-exp01 .nanoblock em {
+  font-size: 12px;
+  line-height: 14px;
+  position: relative;
+  top: -21px;
 }
\ No newline at end of file

From 51e7df3a581f1088426517034e101dae0571b521 Mon Sep 17 00:00:00 2001
From: Andrei Bogdan <andbogda@adobe.com>
Date: Tue, 27 Feb 2024 12:04:53 +0200
Subject: [PATCH 4/4] fix npm lint issues

---
 solutions/blocks/hero/hero.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/solutions/blocks/hero/hero.css b/solutions/blocks/hero/hero.css
index bc9ab4705..6726b8578 100644
--- a/solutions/blocks/hero/hero.css
+++ b/solutions/blocks/hero/hero.css
@@ -146,6 +146,7 @@ main .hero h1 {
 main .hero.new-hero-exp01 h1 {
   margin: 0 0 10px;
 }
+
 main .hero h2 {
   font-size: 18px;
   color: var(--text-color);
@@ -164,8 +165,9 @@ main .hero h4 {
 main .hero.new-hero-exp01 h4 {
   font-size: 16px;
   line-height: 28px;
-  margin: 31px 0 14px 0;
+  margin: 31px 0 14px;
 }
+
 main .hero.black-background h1,
 main .hero.black-background h2,
 main .hero.black-background h4 {
@@ -186,12 +188,6 @@ main .hero p {
   margin: 0;
 }
 
-main .hero.new-hero-exp01 h1 + p {
-  font-size: 24px;
-  line-height: 28px;
-  margin: 0 0 10px;
-}
-
 main .hero.comparison p {
   font-size: 18px;
   font-weight: 400;
@@ -203,6 +199,12 @@ main .hero.comparison p {
   margin: 24px 0 0;
 }
 
+main .hero.new-hero-exp01 h1 + p {
+  font-size: 24px;
+  line-height: 28px;
+  margin: 0 0 10px;
+}
+
 main .hero.black-background h1 + p {
   color: var(--text-dark-color);
 }
@@ -251,7 +253,7 @@ main .hero a.button.modal {
 
   main .hero.new-hero-exp01 a.button {
     min-width: 146px;
-    padding: 9px 23px 9px 23px;
+    padding: 9px 23px;
     margin: 8px 39px 0 0;
   }
 
@@ -440,20 +442,22 @@ main .hero .hero-awards li::after {
     font-size: 14px;
     margin: 0;
   }
+
   main .hero.new-hero-exp01 p {
     font-size: 16px;
     line-height: 18px;
-    margin: 6px 0 0 0;
+    margin: 6px 0 0;
   }
 
   main .hero.new-hero-exp01 p em a {
     font-size: 16px;
     line-height: 18px;
-    color: #000000;
+    color: #000;
     font-style: normal;
     text-decoration: underline;
     
   }
+
   main .hero .hero-picture picture img {
     display: block;
     padding-left: 0;
@@ -532,6 +536,7 @@ main .hero .hero-awards li::after {
   main .hero h1 {
     font-size: 56px;
   }
+
   main .hero.new-hero-exp01 h1 {
     color: #006DFF;
     font-size: 40px;