Dex 20840 vlaicu implementation

_src/blocks/new-prod-boxes/new-prod-boxes.js

@@ -389,26 +389,28 @@ export default async function decorate(block) {
         let productObject = await Store.getProducts([new ProductInfo(prodName), new ProductInfo(addOnProdName)]);
         let product = productObject[prodName];
         let addOnProduct = productObject[addOnProdName];
-        let addOnCost = addOnProduct.getOption(addOnProdUsers, addOnProdYears).getDiscountedPrice('value') - product.getOption(prodUsers, prodYears).getDiscountedPrice('value');
-        addOnCost = formatPrice(addOnCost, product.getCurrency());
-
-        let addOnNewPrice = newLi.querySelector('.add-on-newprice');
-        addOnNewPrice.textContent = addOnCost;
-        let addOnOldPrice = newLi.querySelector('.add-on-oldprice');
-        addOnOldPrice.textContent = formatPrice(addOnProduct.getOption(addOnProdUsers, addOnProdYears).getPrice('value'), addOnProduct.getCurrency());
-        let addOnPercentSave = newLi.querySelector('.add-on-percent-save');
-        addOnPercentSave.textContent = `${addOnPriceBox.querySelector('.prod-save').textContent} ${addOnProduct.getOption(addOnProdUsers, addOnProdYears).getDiscount('percentageWithProcent')}`;
-
-        let checkBoxSelector = newLi.querySelector('.checkmark');
-        checkBoxSelector.addEventListener('change', () => {
-          if (checkBoxSelector.checked) {
-            checkmarkList.classList.add('checked');
-            block.children[key].querySelector('.add-on-product').style.display = 'block';
-          } else {
-            checkmarkList.classList.remove('checked');
-            block.children[key].querySelector('.add-on-product').style.display = 'none';
-          }
-        });
+        if (addOnProduct) {
+          let addOnCost = addOnProduct.getOption(addOnProdUsers, addOnProdYears).getDiscountedPrice('value') - product.getOption(prodUsers, prodYears).getDiscountedPrice('value');
+          addOnCost = formatPrice(addOnCost, product.getCurrency());
+
+          let addOnNewPrice = newLi.querySelector('.add-on-newprice');
+          addOnNewPrice.textContent = addOnCost;
+          let addOnOldPrice = newLi.querySelector('.add-on-oldprice');
+          addOnOldPrice.textContent = formatPrice(addOnProduct.getOption(addOnProdUsers, addOnProdYears).getPrice('value'), addOnProduct.getCurrency());
+          let addOnPercentSave = newLi.querySelector('.add-on-percent-save');
+          addOnPercentSave.textContent = `${addOnPriceBox.querySelector('.prod-save').textContent} ${addOnProduct.getOption(addOnProdUsers, addOnProdYears).getDiscount('percentageWithProcent')}`;
+
+          let checkBoxSelector = newLi.querySelector('.checkmark');
+          checkBoxSelector.addEventListener('change', () => {
+            if (checkBoxSelector.checked) {
+              checkmarkList.classList.add('checked');
+              block.children[key].querySelector('.add-on-product').style.display = 'block';
+            } else {
+              checkmarkList.classList.remove('checked');
+              block.children[key].querySelector('.add-on-product').style.display = 'none';
+            }
+          });
+        }
       }
     });
   }

_src/blocks/products/products.js

@@ -1,3 +1,4 @@
+import { Constants } from '../../scripts/libs/constants.js';
 import {
   createNanoBlock,
   renderNanoBlocks,
@@ -44,7 +45,7 @@ function renderPlanSelector(plans, defaultSelection) {
       liStoreParameters['data-store-click-set-product'] = '';
       liStoreParameters['data-store-product-id'] = productCode;
       liStoreParameters['data-store-department'] = 'consumer';
-      liStoreParameters['data-product-type'] = productCode.slice(-1) === 'm' ? 'monthly' : 'yearly';
+      liStoreParameters['data-product-type'] = Constants.MONTHLY_PRODUCTS.includes(productCode) ? 'monthly' : 'yearly';
       liStoreParameters['data-store-product-option'] = variation;
     }
 

_src/scripts/libs/constants.js

@@ -1,5 +1,7 @@
+import Page from "./page.js"
+
 export const Constants = {
-  DEV_BASE_URL: ["localhost", "stage", ".hlx."].some((domain) => 
+  DEV_BASE_URL: ['localhost', 'stage', '.hlx.'].some((domain) => 
     window.location.hostname.includes(domain)) ? 'https://www.bitdefender.com' : '',
 
   FINGERPRINT_LOCAL_STORAGE_NAME: 'rhvID',
@@ -10,7 +12,87 @@ export const Constants = {
 
   ZUROA_LOCALES: ['nl-nl', 'nl-be'],
 
-  DEV_DOMAINS: ["localhost", "stage", ".hlx."],
+  DEV_DOMAINS: ['localhost', 'stage', '.hlx.'],
+
+  PRODUCT_ID_MAPPINGS: {
+		av: "com.bitdefender.cl.av",
+		is: "com.bitdefender.cl.is",
+		tsmd: "com.bitdefender.cl.tsmd",
+		fp: ['nl-nl', 'nl-be'].includes(Page.locale) ? "com.bitdefender.fp" : "com.bitdefender.cl.fp",
+		ps: "com.bitdefender.premiumsecurity",
+		psm: "com.bitdefender.premiumsecurity",
+		psp: "com.bitdefender.premiumsecurityplus",
+		pspm: "com.bitdefender.premiumsecurityplus",
+		soho: "com.bitdefender.soho",
+		mac: "com.bitdefender.avformac",
+		vpn: "com.bitdefender.vpn",
+		"vpn-monthly": "com.bitdefender.vpn",
+		pass: "com.bitdefender.passwordmanager",
+		passm: "com.bitdefender.passwordmanager",
+		pass_sp: "com.bitdefender.passwordmanager",
+		pass_spm: "com.bitdefender.passwordmanager",
+		bms: "com.bitdefender.bms",
+		mobile: "com.bitdefender.bms",
+		ios: "com.bitdefender.iosprotection",
+		mobileios: "com.bitdefender.iosprotection",
+		dip: "com.bitdefender.dataprivacy",
+		dipm: "com.bitdefender.dataprivacy",
+		avpm: 'com.bitdefender.cl.avplus.v2',
+		ultsec: "com.bitdefender.ultimatesecurityus",
+		ultsecplus: "com.bitdefender.ultimatesecurityplusus",
+		ultsecm: "com.bitdefender.ultimatesecurityus",
+		ultsecplusm: "com.bitdefender.ultimatesecurityplusus",
+		idthefts: "com.bitdefender.idtheftstandard",
+		idtheftp: "com.bitdefender.idtheftpremium",
+		idtheftsm: "com.bitdefender.idtheftstandard",
+		idtheftpm: "com.bitdefender.idtheftpremium",
+		// DLP
+		ts_i: 'com.bitdefender.tsmd.v2',
+		ts_f: 'com.bitdefender.tsmd.v2',
+		ps_i: 'com.bitdefender.premiumsecurity.v2',
+		ps_f: 'com.bitdefender.premiumsecurity.v2',
+		us_i: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_i_m: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_f: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_f_m: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_pf: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_pf_m: 'com.bitdefender.ultimatesecurityeu.v2',
+		us_pi: 'com.bitdefender.ultimatesecurityplusus.v2',
+		us_pi_m: 'com.bitdefender.ultimatesecurityplusus.v2',
+		us_pie: 'com.bitdefender.ultimatesecurityplusus.v2',
+		us_pie_m: 'com.bitdefender.ultimatesecurityplusus.v2',
+		us_pfe: 'com.bitdefender.ultimatesecurityplusus.v2',
+		us_pfe_m: 'com.bitdefender.ultimatesecurityplusus.v2',
+		secpass: 'com.bitdefender.securepass'
+  },
+
+  PRODUCT_ID_NAME_MAPPINGS: {
+	pass: "Bitdefender Password Manager",
+	pass_sp: "Bitdefender Password Manager Shared Plan",
+	passm: "Bitdefender Password Manager",
+	pass_spm: "Bitdefender Password Manager Shared Plan"
+  },
+
+  MONTHLY_PRODUCTS: ["psm", "pspm", "vpn-monthly", "passm", "pass_spm", "dipm", "us_i_m", "us_f_m", "us_pf_m", "us_pi_m", "us_pie_m", "us_pfe_m", "ultsecm", "ultsecplusm", "idtheftsm", "idtheftpm"],
+
+  WRONG_DEVICES_PRODUCT_IDS: {
+		'pass_sp': {
+			contentDevices: 1,
+			providerDevices: 4,
+		},
+		'pass_spm': {
+			contentDevices: 1,
+			providerDevices: 4,
+		},
+		'vpn': {
+			contentDevices: 10,
+			providerDevices: 1,
+		},
+		'vpn-monthly': {
+			contentDevices: 10,
+			providerDevices: 1,
+		}
+	},
 
   DISABLE_TARGET_PARAMS: {
     key: "dotest",

_src/scripts/libs/data-layer.js

@@ -69,16 +69,6 @@ export class PageLoadStartedEvent {
     return meta || '';
   }
 
-  /**
-   * 
-   * @param {string} param -> the parameter to be searched in the URL 
-   * @returns {string} -> value of the parameter
-   */
-  #getParamValue(param) {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get(param);
-  }
-
   /**
   * get experiment details from Target
   * @returns {Promise<{
@@ -193,17 +183,17 @@ export class PageLoadStartedEvent {
         subSubSubSection: pageSectionData.subSubSubSection,
         destinationURL: window.location.href,
         queryString: window.location.search,
-        referringURL: this.#getParamValue('adobe_mc_ref') || this.#getParamValue('ref') || document.referrer || '',
+        referringURL: Page.getParamValue('adobe_mc_ref') || Page.getParamValue('ref') || document.referrer || '',
         serverName: 'hlx.live', // indicator for AEM Success Edge
         language: pageSectionData.locale,
         sysEnv: UserAgent.os,
         ...(pageSectionData.experimentDetails &&
           { experimentDetails: pageSectionData.experimentDetails }),
       },
       attributes: {
-        promotionID: this.#getParamValue('pid') || '',
-        internalPromotionID: this.#getParamValue('icid') || '',
-        trackingID: this.#getParamValue('cid') || '',
+        promotionID: Page.getParamValue('pid') || '',
+        internalPromotionID: Page.getParamValue('icid') || '',
+        trackingID: Page.getParamValue('cid') || '',
         time: this.#getCurrentTime(),
         date: this.#getCurrentDate(),
         domain: pageSectionData.domain,

_src/scripts/libs/page.js

@@ -17,6 +17,16 @@ export default class Page {
    */
   static locale;
 
+  /**
+   * @type {string} - 'consumer', 'total-security'
+   */
+  static pageName;
+
+  /**
+   * @type {object} - {theme: 'dark', key: 'value'}
+   */
+  static queryParams;
+
   /**
    * @type {'dev' | 'stage' | 'prod'}
    */
@@ -31,6 +41,10 @@ export default class Page {
     this.langauge = this.locale.split('-')[0];
 
     this.environment = this.#getEnvironment();
+
+    this.pageName = window.location.pathname.split('/').filter(Boolean).pop();
+
+    this.queryParams = this.#getQueryParams();
   }
 
   static #getLocale() {
@@ -59,4 +73,20 @@ export default class Page {
     }
     return 'dev';
   }
+
+  /**
+  * Returns the environment name based on the hostname
+  * @returns {object}
+  */
+  static #getQueryParams() {
+    return new URLSearchParams(window.location.search);
+  }
+
+  /**
+   * Returns the value of the respective key from the query params
+   * @param {string} key
+   */
+  static getParamValue(key) {
+    return this.queryParams[key];
+  }
 }

_src/scripts/libs/store/resolver/resolver.js

@@ -230,8 +230,6 @@ export class StoreResolver {
 		storeEvent: "[data-store-event]",
 		storeKey: "[data-store-key]",
 		storeContext: "[data-store-context]",
-		storeRegion: "[data-store-region]",
-		storePlatform: "[data-store-platform]",
 		storeDevicePropertiesMapping: "[data-store-device-properties-mapping]"
 	}
 
@@ -255,8 +253,6 @@ export class StoreResolver {
 					element.dataset.storeId,
 					element.dataset.storeDepartment,
 					element.dataset.storePromotion,
-					element.dataset.storeRegion,
-					element.dataset.storePlatform
 				)
 			} catch (error) {
 				console.error(error.message)

_src/scripts/libs/store/resolver/staticAttributes/buyLink.js

@@ -20,6 +20,5 @@ export const resolve = async (element, { product, option }) => {
     button.setAttribute("data-buy-price", option.getDiscountedPrice("value") || option.getPrice("value"));
     button.setAttribute("data-old-price", option.getPrice("value"));
     button.setAttribute("data-currency", option.getSymbol());
-    button.setAttribute("data-region", product.getRegionId());
     button.setAttribute("data-variation", `${option.getDevices()}u-${option.getSubscription("years")}y`);
 }