@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -1,184 +1,184 @@
-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 '../../../MdAccordionGroup/MdAccordionGroup';
-import MaterialSwitch from '../../../MdSwitch/MdSwitch';
-import { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../constants/common';
-import { updateCookieList } from '../../../../utils/CommonUtils';
-
-import styles from './ManageCookieModal.styl';
-
-interface IManageCookieModal {
-  toggleModal: () => void;
-  handleSentryInit?: () => void;
-}
-
-interface IMarketingSwitches {
-  [key: string]: any;
-}
-
-const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
-  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(false);
-  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(false);
-  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
-  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
-
-  useEffect(
-    () => {
-      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
-        .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
-
-      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
-        .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
-      setAnalyticsSwitches(newAnalyticsSwitches);
-      setMarketingSwitches(newMarketingSwitches);
-    },
-    []
-  );
-
-  const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    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.values(COOKIE_SCHEMA.marketing)
-    .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
-    setMarketingSwitches(newMarketingSwitches);
-    setMarketingMasterSwitch(value);
-  };
-
-  const marketingSwitchProps = {
-    value: marketingMasterSwitch,
-    onChange: onHandleMarketingSwitchValue
-  };
-
-  const analyticsSwitchProps = {
-    value: analytcisMasterSwitch,
-    onChange: onHandleAnalyticsSwitchValue
-  };
-
-  const necessarySwitchProps = {
-    disabled: true,
-    value: true,
-    onChange: () => {}
-  };
-
-  const onAccept = (value?: Record<string, any>) => {
-    const cookieConfig = value || {
-      marketing: Object.keys(marketingSwitches).filter(i => !marketingSwitches[i]) || [],
-      analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
-    };
-    localStorage.setItem('cookieConfig', JSON.stringify(cookieConfig));
-    updateCookieList(handleSentryInit);
-    toggleModal();
-  };
-  
-  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
-    const updatedSwitches = { ...analyticsSwitches };
-    for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
-    }
-    setAnalyticsSwitches(updatedSwitches);
-  };
-
-  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
-    const updatedSwitches = { ...marketingSwitches };
-    for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
-    }
-    setMarketingSwitches(updatedSwitches);
-  };
-
-  return (
-    <div className={styles.modalWrapper}>
-      <IconSVG name='autodeLogo' customDimensions />
-      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
-      <div className={styles.modalContent}>Für ein bestmögliches Nutzererlebnis setzen wir Cookies und andere Technologien ein. Diese können Sie hier verwalten.</div>
-      <div className={styles.accordions}>
-        <MaterialAccordionGroup
-          title='Notwendig'
-          tooltipText='Notwendig'
-          withSwitch
-          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 => {
-            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'
-          withSwitch
-          tooltipText='Analytisch'
-          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 => {
-            const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
-            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === false);
-            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={analytcisMasterSwitch}
-                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
-                />
-              </div>
-            );
-          })}
-        </MaterialAccordionGroup>
-        <MaterialAccordionGroup
-          title='Marketing'
-          withSwitch
-          tooltipText='Marketing'
-          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 => {
-            const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
-            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === false);
-            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={marketingMasterSwitch}
-                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
-                />
-              </div>
-            )
-          })}
-        </MaterialAccordionGroup>
-      </div>
-      <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
-        <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
-      </div>
-    </div>
-  );
-};
-
-export default ManageCookieModal;
+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 '../../../MdAccordionGroup/MdAccordionGroup';
+import MaterialSwitch from '../../../MdSwitch/MdSwitch';
+import { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../constants/common';
+import { updateCookieList } from '../../../../utils/CommonUtils';
+
+import styles from './ManageCookieModal.styl';
+
+interface IManageCookieModal {
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+}
+
+interface IMarketingSwitches {
+  [key: string]: any;
+}
+
+const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(false);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(false);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
+  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
+
+  useEffect(
+    () => {
+      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+
+      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+      setAnalyticsSwitches(newAnalyticsSwitches);
+      setMarketingSwitches(newMarketingSwitches);
+    },
+    []
+  );
+
+  const onHandleAnalyticsSwitchValue = (value: boolean) => {
+    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.values(COOKIE_SCHEMA.marketing)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    setMarketingSwitches(newMarketingSwitches);
+    setMarketingMasterSwitch(value);
+  };
+
+  const marketingSwitchProps = {
+    value: marketingMasterSwitch,
+    onChange: onHandleMarketingSwitchValue
+  };
+
+  const analyticsSwitchProps = {
+    value: analytcisMasterSwitch,
+    onChange: onHandleAnalyticsSwitchValue
+  };
+
+  const necessarySwitchProps = {
+    disabled: true,
+    value: true,
+    onChange: () => {}
+  };
+
+  const onAccept = (value?: Record<string, any>) => {
+    const cookieConfig = value || {
+      marketing: Object.keys(marketingSwitches).filter(i => !marketingSwitches[i]) || [],
+      analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
+    };
+    localStorage.setItem('cookieConfig', JSON.stringify(cookieConfig));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+  
+  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...analyticsSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setAnalyticsSwitches(updatedSwitches);
+  };
+
+  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...marketingSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setMarketingSwitches(updatedSwitches);
+  };
+
+  return (
+    <div className={styles.modalWrapper}>
+      <IconSVG name='autodeLogo' customDimensions />
+      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
+      <div className={styles.modalContent}>Für ein bestmögliches Nutzererlebnis setzen wir Cookies und andere Technologien ein. Diese können Sie hier verwalten.</div>
+      <div className={styles.accordions}>
+        <MaterialAccordionGroup
+          title='Notwendig'
+          tooltipText='Notwendig'
+          withSwitch
+          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 => {
+            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'
+          withSwitch
+          tooltipText='Analytisch'
+          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 => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === false);
+            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={analytcisMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            );
+          })}
+        </MaterialAccordionGroup>
+        <MaterialAccordionGroup
+          title='Marketing'
+          withSwitch
+          tooltipText='Marketing'
+          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 => {
+            const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === false);
+            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={marketingMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            )
+          })}
+        </MaterialAccordionGroup>
+      </div>
+      <div className={styles.buttonsContainer}>
+        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
+        <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ManageCookieModal;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -1,67 +1,67 @@
-@import '../../../legacy-theme/mixins.styl';
-
-.modalWrapper
-  padding: 28px 58px 28px
-  text-align: center
-  box-sizing: border-box
-  max-width: 600px
-  +media-tablet-down()
-    padding: 16px 15px 28px
-
-.modalTitle
-  font-family: sans-serif
-  font-weight: bold
-  font-size: 24px;
-  line-height: 133.4%;
-  color: rgba(76, 78, 100, 0.87)
-  margin-top: 20px
-
-  +media-tablet-down()
-    font-size: 16px;
-    margin-top: 8px;
-
-.modalContent
-  font-family: sans-serif
-  font-size: 14px;
-  line-height: 16px;
-  text-align: justify;
-  letter-spacing: 0.15px;
-  color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
-  +media-tablet-down()
-    column-gap: 0;
-    max-height: 320px;
-    overflow-y: scroll;
-    padding-right: 10px;
-    margin-right: -10px;
-    margin-top: 8px
-
-.logoContainer
-  display: flex
-  justify-content: space-between
-
-.buttonsContainer
-  margin-top: 12px
-  display: flex
-  justify-content: space-between
-  gap: 36px;
-  +media-tablet-down()
-    column-gap: 0
-
-.modalBtn
-  height: 38px
-  text-transform: capitalize !important
-  min-width: calc(50% - 18px) !important
-  +media-tablet-down()
-    font-size: 11px !important
-
-.outlinedBtnLeft
-  display: flex;
-  justify-content: flex-end;
-  color: #005CCB;
-  font-size: 16px;
-  text-decoration: none;
-  margin-top: 12px;
-  margin-bottom: 0;
-  margin-left: auto;
+@import '../../../legacy-theme/mixins.styl';
+
+.modalWrapper
+  padding: 28px 58px 28px
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+  +media-tablet-down()
+    padding: 16px 15px 28px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 24px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 20px
+
+  +media-tablet-down()
+    font-size: 16px;
+    margin-top: 8px;
+
+.modalContent
+  font-family: sans-serif
+  font-size: 14px;
+  line-height: 16px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 20px
+  +media-tablet-down()
+    column-gap: 0;
+    max-height: 320px;
+    overflow-y: scroll;
+    padding-right: 10px;
+    margin-right: -10px;
+    margin-top: 8px
+
+.logoContainer
+  display: flex
+  justify-content: space-between
+
+.buttonsContainer
+  margin-top: 12px
+  display: flex
+  justify-content: space-between
+  gap: 36px;
+  +media-tablet-down()
+    column-gap: 0
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  min-width: calc(50% - 18px) !important
+  +media-tablet-down()
+    font-size: 11px !important
+
+.outlinedBtnLeft
+  display: flex;
+  justify-content: flex-end;
+  color: #005CCB;
+  font-size: 16px;
+  text-decoration: none;
+  margin-top: 12px;
+  margin-bottom: 0;
+  margin-left: auto;
   max-width: 80px;

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import IconSVG from '../../../../iconsvg/IconSVG';
-import Button from '../../../Button/Button';
-import styles from './PreviewCookieModal.styl';
-import { updateCookieList } from '../../../../utils/CommonUtils';
-
-interface IPreviewCookieModal {
-  toggleModal: () => void;
-  handleSentryInit?: () => void;
-  setModal: (value: string) => void;
-}
-
-const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
-  const environment = window.location.origin;
-  const onAcceptAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify({}));
-    updateCookieList(handleSentryInit);
-    toggleModal();
-  };
-
-  const onDisableAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify({
-      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid','youtube'],
-      'analytics':['sentry','callback','locale','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','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
-    }));
-    updateCookieList(handleSentryInit);
-    toggleModal();
-  };
-
-  return (
-    <div className={styles.modalWrapper}>
-      <div className={styles.logoContainer}>
-        <IconSVG name='autodeLogo' customDimensions />
-        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
-      </div>
-      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
-      <div className={styles.modalContent}>
-        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
-      </div>
-      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
-      <div className={styles.buttonsContainer}>
-        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
-        <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
-      </div>
-    </div>
-  );
-};
-
-export default PreviewCookieModal;
+import React from 'react';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import Button from '../../../Button/Button';
+import styles from './PreviewCookieModal.styl';
+import { updateCookieList } from '../../../../utils/CommonUtils';
+
+interface IPreviewCookieModal {
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+  setModal: (value: string) => void;
+}
+
+const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
+  const environment = window.location.origin;
+  const onAcceptAll = () => {
+    localStorage.setItem('cookieConfig', JSON.stringify({}));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+
+  const onDisableAll = () => {
+    localStorage.setItem('cookieConfig', JSON.stringify({
+      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid','youtube'],
+      'analytics':['sentry','callback','locale','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','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
+    }));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+
+  return (
+    <div className={styles.modalWrapper}>
+      <div className={styles.logoContainer}>
+        <IconSVG name='autodeLogo' customDimensions />
+        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+      </div>
+      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
+      <div className={styles.modalContent}>
+        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
+      </div>
+      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
+      <div className={styles.buttonsContainer}>
+        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
+        <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewCookieModal;

package/compat/CookieModal/modals/TestModal.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-
-const TestModal = () => {
-  return <div>test modal</div>;
-};
-
-export default TestModal;
+import React from 'react';
+
+const TestModal = () => {
+  return <div>test modal</div>;
+};
+
+export default TestModal;