@bytebrand/fe-ui-core 4.2.250 → 4.3.0

package/source/framework/utils/CommonUtils.ts

@@ -7,19 +7,23 @@ import {
   DROP_DOWN_GROUP, RATE_DEFAULT, MMS_GROUPS_KEY, MMS_GROUP_FIELDS
 } from '../constants/SearchWidget';
 import { priceRatings, priceRatingConfig } from '../constants/price';
-import { HUNDRED } from '../constants/common';
+import { GOOGLE_BUNDLE_COOKIES, HUNDRED } from '../constants/common';
 import { offers } from '../constants';
 import { FILTERS_IN_TITLE, MANUFACTURER_KEY, MAX_FILTERS_IN_TITLE, MODEL_KEY } from '../constants/Search';
 import { SearchPage as SearchPageTranslate } from '../../locales/data';
-import { isArray } from 'lodash';
 
 const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
 
 declare global {
   // tslint:disable-next-line:interface-name
   interface Window {
+    grantHotjarCookieConsent?: () => void;
+    grantCookieConsentClarity?: () => void;
+    grantCookieConsentMicrosoft?: () => void;
+    grantCookieConsentFacebook?: () => void;
     grantCookieConsentSentry?: () => void;
-    grantCookieConsent?: (disabledCookies: string[]) => void;
+    grantCookieConsent?: (list: string[]) => void;
+    allowGoogle?: () => void;
   }
 }
 
@@ -216,11 +220,10 @@ export const buildQueryForSearch = (filters: any) => {
 
     if (filterValue && filterValue.value) {
       if (MMS_GROUP_FIELDS.indexOf(filter) !== -1) {
+        MMS_GROUP[filter] = filterValue.value;
 
         if (filterValue.isSeries) {
           MMS_GROUP.SERIES = filterValue.value;
-        } else {
-          MMS_GROUP[filter] = filterValue.value;
         }
       }
     }
@@ -373,19 +376,15 @@ export const getOfferSliders = (financingConfig: any, t: (key: string, options?:
     financingConfig.common ?
     financingConfig.common.currentSalesPrice :
     financingConfig.currentSalesPrice; // TODO: fix deprecated. Correct is "financingConfig.common.currentSalesPrice"
-  if (isArray(offerObj.sliders)) {
-    const sliders: any = offerObj.sliders;
-    return sliders
-        .map((slider: any, index: number) => {
-          if (componentType === 'checkout' && index === 1 && priceTabIndex === 0) return; // remove checkout annual mileage for financing
-          if (slider.name === 'firstInstallment') slider.max = offerConfig.firstInstallmentMax || currentSalesPrice;
-          slider.value = offerConfig[slider.name];
-          slider.unitName = t(`modals:financing.${slider.unit}`);
-          slider.caption = t(`modals:financing.${slider.name}`);
-          return slider;
-        }).filter(Boolean);
-  }
-
+  return offerObj.sliders
+    .map((slider: any, index) => {
+      if (componentType === 'checkout' && index === 1 && priceTabIndex === 0) return; // remove checkout annual mileage for financing
+      if (slider.name === 'firstInstallment') slider.max = offerConfig.firstInstallmentMax || currentSalesPrice;
+      slider.value = offerConfig[slider.name];
+      slider.unitName = t(`modals:financing.${slider.unit}`);
+      slider.caption = t(`modals:financing.${slider.name}`);
+      return slider;
+    }).filter(Boolean);
 };
 
 export const checkWebpFeature = async () => {
@@ -463,9 +462,7 @@ export function getChipFilterValue(
     case 'SEATS':
     case 'CUBIC_CAPACITY':
       title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      from = !!chipFilterValue.from ? `${t('SearchPage:filters.from')} ${chipFilterValue.from}` : '';
-      to = !!chipFilterValue.to ? `${t('SearchPage:filters.to')} ${chipFilterValue.to}` : '';
-      const fromTo = (from && to) ? `${chipFilterValue.from} - ${chipFilterValue.to}` : `${from || to}`;
+      const fromTo = `${chipFilterValue.from} - ${chipFilterValue.to}`;
       filterValue = `${title} ${fromTo}`;
       break;
 
@@ -547,29 +544,64 @@ export function setUtmParameters() {
   const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
-  
 }
 
 export const updateCookieList = (handleSentryInit: () => void) => {
-  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+  let cookieConsentList = Object.keys(GOOGLE_BUNDLE_COOKIES);
+  let isHomeGoogleGranted = true; // home page google cookie
+  let isMicrosoftGranted = true; // Microsoft _uetvid _uetsid
+  let isMicrosoftClarity = true; // Microsoft Clarity _clck _clsk
+  let isFacebookGranted = true; // Facebook Clarity _fbp _f
   let isSentryGranted = true; // Sentry
-  let disabledCookies: any[] = [];
+  let isHotjarGranted = true;
+  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+
   const parsedUrl = new URL(window.location.href);
   const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
-
   Object.keys(cookieConfig).forEach((group: string) => {
     cookieConfig[group].forEach((cookie: string) => {
       Cookies.remove(cookie, { domain, path: '/' }); // manually remove selected cookies
-      if (cookie === 'sentry') {
-        isSentryGranted = false;
+      // google
+      if (cookieConsentList.includes(cookie)) {
+        cookieConsentList = cookieConsentList.filter(i => i !== cookie);  // deny google cookie consent for _gcl_au, _ga, _gid, _gat_UA-31842-13, etc
+
+        isHomeGoogleGranted = false;
       }
-      disabledCookies.push(cookie);
+      else if (cookie === 'hotjar') isHotjarGranted = false;
+      else if (cookie === '_uetvid' || cookie === '_uetsid') isMicrosoftGranted = false;
+      else if (cookie === '_clck' || cookie === '_clsk') isMicrosoftClarity = false;
+      else if (cookie === '_fbp') isFacebookGranted = false;
+      else if (cookie === 'sentry') isSentryGranted = false;
     });
   });
 
   // grant google cookies
   if (typeof window.grantCookieConsent === 'function') {
-    window.grantCookieConsent(disabledCookies);
+    window.grantCookieConsent(cookieConsentList);
+  };
+
+  // grant Microsoft cookies
+  if (isMicrosoftGranted && typeof window.grantCookieConsentMicrosoft === 'function') {
+    window.grantCookieConsentMicrosoft();
+  }
+
+  // grant Microsoft Clarity cookies
+  if (isMicrosoftClarity && typeof window.grantCookieConsentClarity === 'function') {
+    window.grantCookieConsentClarity();
+  }
+
+  // grant Facebook cookies
+  if (!isFacebookGranted && typeof window.grantCookieConsentFacebook === 'function') {
+    window.grantCookieConsentFacebook();
+  };
+
+  if (isHomeGoogleGranted && typeof window.allowGoogle === 'function') {
+    window.allowGoogle();
+  }
+
+  // grant Hotjar cookies
+  if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') {
+    window.grantHotjarCookieConsent();
   }
 
   // grant Sentry cookies
@@ -587,49 +619,6 @@ export const getCents = (value: number, prefix?: string, postfix?: string): stri
   return `${prefix}${result}${postfix}`;
 };
 
-/**
- * Generates a timestamp (Unix time) after 14 days from the current date.
- * @returns {number} Timestamp (Unix time) after 14 days.
- */
-export const getUnixTimestampAfterTwoWeeks = () => {
-  const currentDate = new Date();
-  const futureDate = new Date();
-
-  futureDate.setDate(currentDate.getDate() + 14);
-
-  const unixTimestamp = Math.floor(futureDate.getTime() / 1000);
-  return unixTimestamp;
-};
-
-/**
- * Converts a Unix timestamp to the day of the month.
- * @param {number} unixTimestamp - The Unix timestamp to convert.
- * @returns {number} Return the number of days as the result
- */
-export const convertUnixTimestampToDays = (unixTimestamp: number) => {
-  const milliseconds = Number(unixTimestamp * 1000);
-  const date = new Date(milliseconds);
-  const currentDate = new Date();
-
-  // Calculate the difference between the current date and the obtained date
-  const timeDifference = currentDate.getTime() - date.getTime();
-  const daysDifference = -Math.floor(timeDifference / (1000 * 3600 * 24));
-  return daysDifference;
-};
-
 export const priceParse = (value: any) => {
   return !!value ? Number.parseFloat(value) : null;
-};
-
-// iPad on iOS 13 detection
-export const iOS = () => {
-  return [
-    'iPad Simulator',
-    'iPhone Simulator',
-    'iPod Simulator',
-    'iPad',
-    'iPhone',
-    'iPod'
-  ].includes(navigator.platform)
-  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
-}
+};

package/source/framework/utils/DateUtils.ts

@@ -8,10 +8,10 @@ export interface IFormatTimestamp {
 
 export const timestampToDate = (timestamp: number) => {
   if (!timestamp) return 'N/A';
-  const date = new Date(timestamp * 1000);
+  const date = new Date(timestamp * 1000);// tslint:disable-line
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
-  const monthFormatted = month < 10 ? `0${month}` : month;
+  const monthFormatted = month < 10 ? '0' + month : month;// tslint:disable-line
   return (`${monthFormatted}/${year}`);
 };
 
@@ -91,11 +91,3 @@ export const getYears = (minYear = 1980, maxYear = moment().year(), reverse = fa
 export const createDateAsUTC = (date: Date): Date => new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
 
 // end for checkout datepicker
-
-export const fromUTCToDateString = (UTCDate: Date) => {
-  const date = new Date(UTCDate);
-  const day = date.getUTCDate().toString().padStart(2, '0');
-  const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
-  const year = date.getUTCFullYear();
-  return `${day}.${month}.${year}`;
-}

package/source/locales/data.ts

@@ -56,7 +56,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         na: 'N/A',
         priceSub: '/mtl.',
         priceSubMtl: '/mtl.',
-        prefixOldPrice: 'z.B.',
+        prefixOldPrice: 'ab',
         vehicleOwners: `${vehicleOption.vehicleOwners} Fahrzeughalter`,
         vehicleOwners_plural: `${count} Fahrzeughalter`,
         doorsOnly: `${vehicleOption.doorsOnly} Türen`,
@@ -164,7 +164,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         'firstRegistration': 'Erstzulassung',
         'mileage': 'Kilometerstand',
         'consumptionAndCo2': 'Kraftstoffverbrauch*',
-        'monthlyFrom': 'monatlich z.B.',
+        'monthlyFrom': 'monatlich ab',
         'buy': 'Kaufen',
         'financingDescription': 'Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.',
         'leasingDescription': 'Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.',

package/tslint.json

@@ -13,7 +13,7 @@
     "match-default-export-name": false,
     "import-name": false,
     "no-boolean-literal-compare": false,
-    "max-line-length": [false],
+    "max-line-length": [true, 200],
     "semicolon": [true, "always", "ignore-bound-class-methods"],
     "variable-name": [true, "allow-pascal-case", "allow-leading-underscore", "allow-trailing-underscore"],
     "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
@@ -32,6 +32,7 @@
     "interface-name": [true, "always-prefix"],
     "class-name": true,
     "prefer-function-over-method": false,
+    "prefer-switch": [true, {"min-cases": 2}],
     "switch-final-break": true
   },
   "rulesDirectory": []

package/utils.ts

@@ -37,8 +37,6 @@ export {
   buildQueryForSearch,
   buildBodyForRequest,
   priceParse,
-  getUnixTimestampAfterTwoWeeks,
-  convertUnixTimestampToDays,
   getCents
 } from './source/framework/utils/CommonUtils';