Merge pull request #178 from bitdefender/creators-update

update creator after feedback
bitdefender · Aug 29, 2024 · 55b69f1 · 55b69f1
2 parents 644303a + 9601a4e
commit 55b69f1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css
@@ -242,7 +242,7 @@
   }
 
   .creators .columns-container p {
-    font: normal normal normal 24px/33px "Arial", sans-serif;
+    font: normal normal normal 24px/33px Arial, sans-serif;
   }
 
   .creators .columns-container p.button-container {
@@ -256,7 +256,7 @@
     background: #E72325 0% 0% no-repeat padding-box;
     border-radius: 40px;
     justify-content: center;
-    font: normal normal 500 18px/24px "Roboto", sans-serif;
+    font: normal normal 500 18px/24px Roboto, sans-serif;
   }
 }
 

diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css
@@ -315,6 +315,9 @@
   font-size: 40px;
   font-weight: bold;
 }
+.new-prod-boxes-container .prod-newprice .per-m {
+  font-size: 20px;
+}
 .new-prod-boxes-container .newprice-container {
   line-height: 1;
 }

diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js
@@ -49,7 +49,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName,
 export default async function decorate(block, options) {
   const {
     // eslint-disable-next-line no-unused-vars
-    products, familyProducts, monthlyProducts, priceType, pid, mainProduct,
+    products, familyProducts, monthlyProducts, priceType, pid, mainProduct, type,
   } = block.closest('.section').dataset;
   // if options exists, this means the component is being called from aem
   if (options) {
@@ -233,7 +233,7 @@ export default async function decorate(block, options) {
                   ${subtitle.innerText.trim() ? `<p class="subtitle">${subtitle.querySelector('td').innerHTML.trim()}</p>` : ''}
 
                   ${radioButtons ? planSwitcher.outerHTML : ''}
-
+                  
                   ${pricesBox.outerHTML}
 
                   ${buyLink.outerHTML}
@@ -285,9 +285,12 @@ export default async function decorate(block, options) {
             discountPercentage = Math.round(
               (1 - (product.discount.discounted_price) / product.price) * 100,
             );
-            oldPrice = product.price;
-            newPrice = product.discount.discounted_price;
             let currencyLabel = product.currency_label;
+            oldPrice = product.price;
+            newPrice = `${product.discount.discounted_price}${currencyLabel}`;
+            if (!prodName.endsWith('m') && type === 'monthly') {
+              newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')}${currencyLabel} <span class="per-m">${price.textContent.replace('0', '')}</span>`;
+            }
             // priceElement.classList.add('hero-aem__prices');
             priceElement.innerHTML = `
               <div class="hero-aem__price mt-3">
@@ -296,7 +299,7 @@ export default async function decorate(block, options) {
                     <span class="prod-save">Save ${discountPercentage}%<span class="save"></span></span>
                 </div>
                 <div class="newprice-container mt-2">
-                  <span class="prod-newprice">${newPrice}${currencyLabel}</span>
+                  <span class="prod-newprice">${newPrice.replace('.00', '')}</span>
                 </div>
               </div>`;
             block.children[key].querySelector('.hero-aem__prices').appendChild(priceElement);