Webview fixes

_src/blocks/columns/columns.css

@@ -294,7 +294,6 @@
   color:#006DFF;
   font-weight: 300;
 }
-
 .columns.ferrari-text .columns-text-col{
   font-weight: 300;
 }
@@ -689,7 +688,6 @@
   .columns.ferrari-text h2{
     font-size: 45px;
   }
-
   .columns.ferrari-text .columns-text-col{
     font-size: 30px;
   }
@@ -1508,14 +1506,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link {
     justify-content: center;
   }
 
-  &.grey-button{
-    .button-container a{
-      background-color: #0000;
-      border-color: #000;
-      color: #000
-    }
-  }
-
   table{
     margin-bottom: 15px;
   }

_src/blocks/four-cards/four-cards.css

@@ -162,14 +162,6 @@
   font: normal normal normal 16px/24px var(--body-font-family);
 }
 
-.white-background .four-cards > ul > li {
-  background-color: #fff;
-}
-
-.affiliate .four-cards > ul > li {
-  flex: 0 1 31%;
-}
-
 .creator-cards .four-cards > ul > li {
   font-size: 18px;
 }
@@ -321,13 +313,6 @@
     grid-gap: 14px;
   }
 
-  .affiliate .four-cards > ul {
-    display: flex;
-    flex-wrap: wrap; 
-    gap: 20px; 
-    justify-content: center;
-  }
-
   .four-cards-container.dotted-lines {
     ul {
       li:not(:first-child) {

_src/blocks/four-cards/four-cards.js

@@ -1,5 +1,3 @@
-import { matchHeights } from '../../scripts/utils/utils.js';
-
 export default async function decorate(block, options) {
   const {
     // eslint-disable-next-line no-unused-vars
@@ -49,6 +47,4 @@ export default async function decorate(block, options) {
     const { decorateIcons } = await import('../../scripts/utils/utils.js');
     decorateIcons(block.closest('.section'));
   }
-
-  matchHeights(block, 'h3');
 }

_src/blocks/hero/hero.css

@@ -260,12 +260,6 @@ main .hero h1 {
   margin: 0 0 25px;
 }
 
-main .affiliate .hero h1 {
- color: #006DFF;
- font-size: 48px;
-}
-
-
 main .hero h2 {
   font-size: 18px;
   color: var(--text-color);
@@ -286,10 +280,6 @@ main .hero h4 {
   margin: 0 0 9px;
 }
 
-main .affiliate  .hero h4{
-  font-weight: 300;
-}
-
 main .hero.black-background h1,
 main .hero.black-background h2,
 main .hero.black-background h4 {
@@ -642,7 +632,6 @@ main .hero-container.ferrari-migration .hero .hero-content h1{
   color: #FFF;
   line-height: 1;
 }
-
 main .hero-container.ferrari-migration .hero .hero-content h2{
   color: #FFF;
   font-weight: 300;
@@ -843,10 +832,6 @@ main .hero-container.ferrari-migration .hero .hero-content a img{
     padding: 40px 0 0;
   }
 
-  main .affiliate .hero .hero-content>div  {
-    width: 50%;
-  }
-
   main .hero .hero-content .breadcrumb a {
     line-height: 1;
     letter-spacing: .96px;

_src/blocks/hero/hero.js

@@ -7,33 +7,6 @@ import {
   getBrowserName,
 } from '../../scripts/utils/utils.js';
 
-import { UserAgent } from '../../scripts/libs/user-agent/user-agent.js';
-
-function detectAndRenderOSContent(osLinkMapping, androidTemplate, iosTemplate, block) {
-  const button = block.querySelector('a.button');
-  const dynamicTextElement = button.parentNode.nextElementSibling;
-  switch (UserAgent.os) {
-    case 'android':
-      button.classList.add('android');
-      button.href = osLinkMapping.android.googlePlay;
-      dynamicTextElement.querySelectorAll('a').forEach((anchor, index) => {
-        anchor.textContent = osLinkMapping[androidTemplate.split(',')[index].trim()].text;
-        anchor.href = osLinkMapping[androidTemplate.split(',')[index].trim()].link;
-      });
-      break;
-    case 'ios':
-      button.classList.add('ios');
-      button.href = osLinkMapping.ios.appStore;
-      dynamicTextElement.querySelectorAll('a').forEach((anchor, index) => {
-        anchor.textContent = osLinkMapping[iosTemplate.split(',')[index].trim()].text;
-        anchor.href = osLinkMapping[iosTemplate.split(',')[index].trim()].link;
-      });
-      break;
-    default:
-      break;
-  }
-}
-
 /**
  * Builds hero block and prepends to main in a new section.
  * @param {Element} element The container element
@@ -121,41 +94,10 @@ export default function decorate(block) {
     percentProduct,
     firefoxUrl,
     buttonImage,
-    iosLink,
-    androidLink,
-    windowsLink,
-    macLink,
-    androidTemplate,
-    iosTemplate,
-    appStoreLink,
-    googlePlayLink,
   } = block.closest('.section').dataset;
 
   buildHeroBlock(block);
   renderBubble(block);
-  if (androidLink && iosLink) {
-    const osLinkMapping = {
-      android: {
-        link: androidLink,
-        googlePlay: googlePlayLink,
-        text: 'Android',
-      },
-      ios: {
-        link: iosLink,
-        appStore: appStoreLink,
-        text: 'iOS',
-      },
-      windows: {
-        link: windowsLink,
-        text: 'Windows',
-      },
-      mac: {
-        link: macLink,
-        text: 'macOS',
-      },
-    };
-    detectAndRenderOSContent(osLinkMapping, androidTemplate, iosTemplate, block);
-  }
   // Eager load images to improve LCP
   [...block.querySelectorAll('img')].forEach((el) => el.setAttribute('loading', 'eager'));
 

_src/blocks/image-columns/image-columns.css

@@ -37,10 +37,6 @@
   justify-items: center;
 }
 
-.affiliate .image-columns > div > .image-columns-img-col{
-  flex: 0 1 50%;
-}
-
 .image-columns.text_smaller > div > .image-columns-txt-col {
   flex: 0 1 45%;
 }
@@ -174,22 +170,11 @@ main .image-columns.quotes > div > .image-columns-img-col img{
   padding-left: var(--body-padding);
 }
 
-.affiliate .image-columns > div > .image-columns-txt-col p {
-  padding-left: 0;
-  margin-top: 16px;
-}
-
 @media (min-width: 1400px) {
   .image-columns > div > .image-columns-txt-col p {
     font-size: 18px;
   }
 
-  .affiliate .image-columns > div > .image-columns-txt-col p {
-    font-size: 16px;
-    padding-left: 0;
-    margin-top: 16px;
-  }
-
   .ferrari .image-columns-wrapper{
     padding: 0;
     max-width: 1292px;

_src/blocks/mbox-canvas/mbox-canvas.js

@@ -1,4 +1,8 @@
-import { Target } from '../../scripts/libs/data-layer.js';
+import {
+  AdobeDataLayerService,
+  PageLoadStartedEvent,
+  Target,
+} from '../../scripts/libs/data-layer.js';
 import { decorateMain, detectModalButtons } from '../../scripts/scripts.js';
 import { loadBlocks } from '../../scripts/lib-franklin.js';
 
@@ -28,6 +32,29 @@
   return parameters;
 }
 
+
+/**
+ * Updates the PageLoadStartedEvent with dynamic content from the offer
+ * and pushes it to the AdobeDataLayerService.
+ *
+ * @param {Object} offer - The offer object containing dynamic content.
+ * @param {string} mboxName - The name of the mbox to extract content from.
+ * @returns {Promise<void>} - A promise that resolves when the event is updated and pushed.
+ */
+async function updatePageLoadStartedEvent(offer, mboxName) {
+  const match = offer[mboxName].content.offer.match(/\/([^/]+)\.plain\.html$/);
+  const result = match ? match[1] : null;
+  const newObject = await new PageLoadStartedEvent();
+  newObject.page.info.name = newObject.page.info.name.replace('<dynamic-content>', result);
+
+  Object.entries(newObject.page.info).forEach(([key, value]) => {
+    if (value === '<dynamic-content>') {
+      newObject.page.info[key] = result;
+    }
+  });
+  AdobeDataLayerService.push(newObject);
+}
+
 export default async function decorate(block) {
   const {
     // eslint-disable-next-line no-unused-vars
@@ -46,6 +73,7 @@
     parameters,
   }]);
   const page = await fetch(`${offer[mboxName].content.offer}`);
+  updatePageLoadStartedEvent(offer, mboxName);
   const offerHtml = await page.text();
   const decoratedOfferHtml = decorateHTMLOffer(offerHtml);
   block.querySelector('.canvas-content').innerHTML = decoratedOfferHtml.innerHTML;

_src/blocks/product-comparison-table/product-comparison-table.js

@@ -9,8 +9,7 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c
 
   const priceRoot = document.createElement('div');
   priceRoot.classList.add('product-comparison-price');
-  const oldPriceText = block.closest('.section').dataset.old_price_text ?? '';
-  const newPriceLabel = block.closest('.section').dataset.new_price_label ?? '';
+  const oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price';
   const oldPriceElement = document.createElement('p');
   priceRoot.appendChild(oldPriceElement);
   oldPriceElement.innerText = '-';
@@ -21,29 +20,15 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c
   priceElement.classList.add('current-price-container');
   const priceAppliedOnTime = document.createElement('p');
   priceRoot.appendChild(priceAppliedOnTime);
-  // create a mock buyzone for free products
-  if (code.includes('free')) {
-    oldPriceElement.innerHTML = `
-     <div class="old-price-box">
-      </div>
-    `;
-    priceElement.innerHTML = `<div class="new-price-box">
-      <span class="await-loader total-text">${label} </span>
-      <sup class="per-price"> </sup>
-    </div>`;
-    priceAppliedOnTime.innerHTML = '<p><p>';
-    return priceRoot;
-  }
 
   oldPriceElement.innerHTML = `
     <div class="old-price-box">
       <span  data-store-hide="no-price=discounted;type=visibility">${oldPriceText} <del data-store-price="full"></del></span>
-      <span class="savings d-none" data-store-hide="no-price=discounted;type=visibility">Savings <span data-store-discount="percentage"><span></span>
+      <span class="savings d-none">Savings <del data-store-discount="percentage"></del></span>
     </div>`;
   priceElement.innerHTML = `
     <div class="new-price-box">
-      <span class="await-loader total-text" data-store-price="discounted||full"> </span>
-      <sup class="per-price"> ${newPriceLabel} </sup>
+      <span class="await-loader total-text" data-store-price="discounted||full"></span>
     </div>`;
   priceAppliedOnTime.innerHTML = label;
 
@@ -190,7 +175,7 @@ function buildTableHeader(block) {
       paragraphBefore?.classList.add('per-year-statement');
       const paragraphAfter = buttonSection.nextElementSibling;
       paragraphAfter?.classList.add('product-comparison-header-subtitle');
-      paragraphAfter?.nextElementSibling?.classList.add('product-comparison-header-subtitle');
+      paragraphAfter?.nextElementSibling.classList.add('product-comparison-header-subtitle');
     }
   });
 }
@@ -298,5 +283,4 @@ export default function decorate(block) {
 
   matchHeights(block, 'h3');
   matchHeights(block, '.old-price-container');
-  matchHeights(block, '.product-comparison-price');
 }

_src/blocks/webview-table/webview-table.css

@@ -62,6 +62,10 @@
     }
 
     p:last-of-type{
+        font-size: 14px;
+    }
+
+    p:nth-of-type(2){
         margin-bottom: 4px;
         font-size: 16px;
     }