@bytebrand/fe-ui-core 4.2.130 → 4.2.132

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.130",
+  "version": "4.2.132",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/MaterialSwitch/MaterialSwitch.tsx

@@ -7,10 +7,11 @@ interface IMaterialSwitch {
   disabled?: boolean;
   onChange: (value: boolean) => void;
   label?: any;
+  sx?: any;
   labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
 }
 
-const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlacement }: IMaterialSwitch) => {
+const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPlacement }: IMaterialSwitch) => {
   const [checked, setChecked] = useState(value);
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(event.target.checked);
@@ -19,6 +20,7 @@ const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlaceme
   return (
     <FormControlLabel
       label={label}
+      sx={sx}
       labelPlacement={labelPlacement}
       control={
         <Switch

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -67,10 +67,17 @@
 
 .switchBlock
   display: flex
-  justify-content: space-between
   align-items: center
   font-size: 12px
   line-height: 15px
   letter-spacing: 1px
   color: rgba(76, 78, 100, 0.87)
-  text-align: left
+  text-align: left
+
+.switchBlockTitle
+  width: 140px;
+
+.switchBlockLink
+  color: rgba(76, 78, 100, 0.87);
+  text-decoration-line: underline;
+  font-size: 8px;

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import _merge from 'lodash/merge';
 import classNames from 'classnames';
-
+import _get from 'lodash/get';
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
-import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
+import { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../../framework/constants/common';
 import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 import styles from './ManageCookieModal.styl';
@@ -28,8 +28,14 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
 
   useEffect(
     () => {
-      const newAnalyticsSwitches = Object.keys(COOKIE_SCHEMA.analytics).reduce((acc, item) => ({ ...acc, [item]: true }), {});
-      const newMarketingSwitches = Object.keys(COOKIE_SCHEMA.marketing).reduce((acc, item) => ({ ...acc, [item]: true }), {});
+      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+
+      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -37,13 +43,17 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setAnalyticsSwitches(newAnalyticsSwitches);
     setAnalyticsMasterSwitch(value);
   };
 
   const onHandleMarketingSwitchValue = (value: boolean) => {
-    const newMarketingSwitches = Object.keys(marketingSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -73,6 +83,22 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     updateCookieList(handleSentryInit);
     toggleModal();
   };
+  
+  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: [key: string], isChecked: boolean) => {
+    const updatedSwitches = { ...analyticsSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setAnalyticsSwitches(updatedSwitches);
+  };
+
+  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: [key: string], isChecked: boolean) => {
+    const updatedSwitches = { ...marketingSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setMarketingSwitches(updatedSwitches);
+  };
 
   return (
     <div className={styles.modalWrapper}>
@@ -87,12 +113,16 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={necessarySwitchProps}
         >
           <span>Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert. Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
-          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.necessary[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch disabled={true} value={true} onChange={() => {}} />
-            </div>
-          )}
+          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch sx={{ marginLeft: 'auto' }} disabled={true} value={true} onChange={() => {}} />
+              </div>
+            );
+          })}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Analytisch'
@@ -101,15 +131,22 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={analyticsSwitchProps}
         >
           <span>Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen, damit wir Ihnen relevantere Informationen präsentieren können.</span>
-          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.analytics[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch
-                value={analyticsSwitches[cookie]}
-                onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie] })); }}
-              />
-            </div>
-          )}
+          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === true);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={isChecked}
+                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            );
+          })}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Marketing'
@@ -118,15 +155,22 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={marketingSwitchProps}
         >
           <span>Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites. Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
-          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.marketing[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch
-                value={marketingSwitches[cookie]}
-                onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie] }))}
-              />
-            </div>
-          )}
+          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === true);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={isChecked}
+                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            )
+          })}
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>

package/source/components/_common/withStats/withStats.tsx

@@ -79,7 +79,7 @@ const withStats = (WrappedComponent: any) => ({
   };
 
   const renderRotateSvg = (): JSX.Element => {
-    const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
     if (!hasExteriorPhotos) return null;
     return (
       <div className={styles.section}>

package/source/framework/constants/common.ts

@@ -8,76 +8,91 @@ export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 
 export const HUNDRED = 100;
 
-export const GOOGLE_BUNDLE_COOKIES = {
-  analytics_storage: { name: 'Google-Analytics' },
-  ad_storage: { name: 'Google-Werbeausrichtung' },
-  functionality_storage: { name: 'Google-Funktionalität' },
-  personalization_storage: { name: 'Google-Personalisierung' },
-  security_storage: { name: 'Google-Sicherheit' }
-};
+export const GOOGLE_BUNDLE_COOKIES = [
+  'analytics_storage',
+  'ad_storage',
+  'functionality_storage',
+  'personalization_storage',
+  'security_storage'
+];
 
 /* tslint:disable */
-export interface INecessaryCookieSchema {
-  [key: string]: {
-    [key: string]: {
-      name: string;
-    }
-  };
+
+export const COOKIE_SCHEMA_LINKS = {
+  ['auto.de']: 'https://www.auto.de/datenschutz/',
+  Cloudflare: 'https://www.cloudflare.com/de-de/gdpr/introduction/',
+  Firebase: 'https://firebase.google.com/support/privacy?hl=de',
+  Google: 'https://policies.google.com/privacy?hl=de',
+  Criteo: 'https://www.criteo.com/de/privacy/',
+  Facebook: 'https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0',
+  ['Google Analytics']: 'http://datenschutzbestimmungen/',
+  Hotjar: 'https://www.hotjar.com/legal/policies/privacy/de/',
+  Microsoft: 'https://privacy.microsoft.com/de-de/privacystatement'
 }
 
-export const COOKIE_SCHEMA: INecessaryCookieSchema = {
+export const COOKIE_SCHEMA = {
   necessary: {
-    cf_chl_2: { name: 'Cloudflare für Webverkehr zu identifizieren' },
-    cf_chl_rc_ni: { name: 'Cloudflare für den internen Gebrauch' },
-    ['next-i18next']: { name: 'Spracheinstellungen' },
-    cf_chl_prog: { name: 'Cloudflare für JS' }
+    ['auto.de']: ['next-i18next'],
+    Cloudflare: [
+      'cf_chl_2',
+      'cf_chl_rc_ni',
+      'cf_chl_prog'
+    ]
   },
   analytics: {
-    PugT: {name: 'PubMatic' },
-    locale: {name: 'Personio' },
-    uid: { name: 'criteo' },
-    callback: { name: 'callback' },
-    demdex: { name: 'demdex' },
-    _fbp: { name: 'Facebook' },
-    hotjar: { name: 'Hotjar-Analytics'},
-    _clck: { name: 'Clarity' },
-    _clsk: { name: 'Clarity' },
-    _uetsid: { name: 'Microsoft-Werbeausrichtung' },
-    _uetvid: { name: 'Microsoft-Werbeausrichtung' },
-    sentry: { name: 'Sentry' },
-    ...GOOGLE_BUNDLE_COOKIES
+    ['auto.de']: [
+      'sentry',
+      'callback',
+      'locale'
+    ],
+    ['Google Analytics']: [
+      '_clck',
+      '_clsk',
+      '_uetsid',
+      '_uetvid',
+      ...GOOGLE_BUNDLE_COOKIES
+    ],
+    Criteo: [
+      'uid',
+      'PugT',
+      'demdex',
+      'cto_bundle',
+      'tuuid',
+      'tuuid_lu',
+      'c',
+      'CMID',
+      'CMPS',
+      'CMPRO',
+      'uuid2',
+      'um',
+      'umeh',
+      'KRTBCOOKIE_97',
+      'IDSYNC',
+      'dpm',
+      '_kuid_',
+      'visitor-id',
+      'data-c-ts',
+      'data-c',
+      'CMTS',
+      'mv_tokens',
+      'A3',
+      'mv_tokens_eu-v1',
+      'am_tokens',
+      'am_tokens_eu-v1',
+      'iteo'
+    ],
+    Hotjar: ['hotjar'],
+    Facebook: ['_fbp']
   },
   marketing: {
-    test_cookie: { name: 'doubleclick.net' },
-    tuuid: { name: '360yield.com' },
-    tuuid_lu: { name: '360yield.com' },
-    c: { name: 'bidswitch.net' },
-    CMID: { name: 'casalemedia.com' },
-    CMPS: { name: 'casalemedia.com' },
-    CMPRO: { name: 'casalemedia.com' },
-    uuid2: { name: 'adnxs.com' },
-    IDE: { name: 'Google DoubleClick' },
-    um: { name: '360yield.com' },
-    umeh: { name: '360yield.com' },
-    cf: { name: 'id5-sync.com' },
-    cip: { name: 'id5-sync.com' },
-    cnac: { name: 'id5-sync.com' },
-    car: { name: 'id5-sync.com' },
-    KRTBCOOKIE_97: { name: 'PubMatic' },
-    IDSYNC: { name: 'analytics.yahoo.com' },
-    dpm: { name: 'Demdex' },
-    _kuid_: { name: 'Krux' },
-    cto_bundle: { name: 'Criteo' },
-    ['visitor-id']: { name: 'media.net' },
-    ['data-c-ts']: { name: 'media.net' },
-    ['data-c']: { name: 'media.net' },
-    CMTS: { name: 'casalemedia.com' },
-    ['mv_tokens']: { name: 'mediavine' },
-    A3: { name: 'yahoo.com' },
-    ['mv_tokens_eu-v1']: { name: 'mediavine' },
-    am_tokens: { name: 'mediavine' },
-    ['am_tokens_eu-v1']: { name: 'mediavine' },
-    iteo: { name: 'mediavine' }
+    Google: [
+      'test_cookie',
+      'IDE',
+      'cf',
+      'cip',
+      'cnac',
+      'car'
+    ]
   }
 };
 

package/source/framework/utils/CommonUtils.ts

@@ -17,13 +17,8 @@ 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?: (list: string[]) => void;
-    allowGoogle?: () => void;
+    grantCookieConsent?: (disabledCookies: string[]) => void;
   }
 }
 
@@ -548,69 +543,25 @@ export function setUtmParameters() {
 }
 
 export const updateCookieList = (handleSentryInit: () => void) => {
-  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 isHotjarGranted = true;
-  let isCriteoGranted = true;
   const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
-
+  let isSentryGranted = true; // Sentry
+  let disabledCookies: any[] = [];
   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
-      // 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;
-      } 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') {
+      if (cookie === 'sentry') {
         isSentryGranted = false;
-      } else if (cookie === 'uid' && 'cto_bundle') {
-        isCriteoGranted = false;
       }
+      disabledCookies.push(cookie);
     });
   });
 
   // grant google cookies
-  if (isCriteoGranted && typeof window.grantCookieConsent === 'function') {
-    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();
+  if (typeof window.grantCookieConsent === 'function') {
+    window.grantCookieConsent(disabledCookies);
   }
 
   // grant Sentry cookies