@bytebrand/fe-ui-core 4.1.60 → 4.1.61

package/package.json

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

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

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
 import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
 
-const ManageCookieModal = () => {
+const ManageCookieModal = ({ onClearModalState }) => {
   const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
   const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
   const [analyticsSwitches, setAnalyticsSwitches] = useState({});
@@ -17,8 +17,8 @@ const ManageCookieModal = () => {
 
   useEffect(
     () => {
-      const newAnalyticsSwitches = COOKIE_SCHEMA.analytics.reduce((acc, item) => ({ ...acc, [item]: true }), {});
-      const newMarketingSwitches = COOKIE_SCHEMA.marketing.reduce((acc, item) => ({ ...acc, [item]: true }), {});
+      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 }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -47,10 +47,16 @@ const ManageCookieModal = () => {
   };
 
   const necessarySwitchProps = {
+    disabled: true,
     value: true,
     onChange: () => {}
   };
 
+  const onAccept = (value: object) => {
+    localStorage.setItem('cookieConfig', JSON.stringify( value || ));
+    onClearModalState();
+  };
+
   return (
     <div className={styles.modalWrapper}>
       <IconSVG name='autodeLogo' customDimensions />
@@ -70,10 +76,10 @@ const ManageCookieModal = () => {
           For example, we store your website data collection preferences so we can honor them if you return to our site.
           You can disable these cookies in your browser settings but if you do the site may not work as intended.
           </span>
-          {COOKIE_SCHEMA.necessary.map(cookie =>
+          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie =>
             <div className={styles.switchBlock}>
-              <span>{cookie}</span>
-              <MaterialSwitch value={true} onChange={(value: boolean) => {}} />
+              <span>{`${COOKIE_SCHEMA.necessary[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch disabled={true} value={true} onChange={() => {}} />
             </div>
           )}
         </MaterialAccordionGroup>
@@ -88,9 +94,9 @@ const ManageCookieModal = () => {
             damit wir Ihnen relevantere Informationen präsentieren können.
             For example, we collect information about which pages you visit to help us present more relevant information.
           </span>
-          {COOKIE_SCHEMA.analytics.map(cookie =>
+          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie =>
             <div className={styles.switchBlock}>
-              <span>{cookie}</span>
+              <span>{`${COOKIE_SCHEMA.analytics[cookie].name} (${cookie})`}</span>
               <MaterialSwitch
                 value={analyticsSwitches[cookie]}
                 onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie] })); }}
@@ -109,9 +115,9 @@ const ManageCookieModal = () => {
             Website besuchen, anzeigen.
             For example, we may serve you a personalized ad based on the pages you visit on our site.
           </span>
-          {COOKIE_SCHEMA.marketing.map(cookie =>
+          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie =>
             <div className={styles.switchBlock}>
-              <span>Cookie</span>
+              <span>{`${COOKIE_SCHEMA.marketing[cookie].name} (${cookie})`}</span>
               <MaterialSwitch
                 value={marketingSwitches[cookie]}
                 onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie] }))}
@@ -121,8 +127,8 @@ const ManageCookieModal = () => {
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
-        <Button className={styles.modalBtn}>zustimmen</Button>
+        <Button onClick={onAccept}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
+        <Button onClick={() => onAccept({})} className={styles.modalBtn}>zustimmen</Button>
       </div>
     </div>
   );

package/source/framework/constants/common.ts

@@ -8,9 +8,12 @@ export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 
 export const HUNDRED = 100;
 
+/* tslint:disable */
 export const COOKIE_SCHEMA = {
-  necessary: ['gdpr', '__cfruid', 'cf_chl_2', 'cf_chl_rc_ni', 'next-i18next', '_cfuvid', 'cf_chl_prog', '__cf_bm'],
-  analytics: ['PugT', 'locale', '_gcl_au', '_ga', '_gid', '_gat_UA-31842-13', 'uid', 'callback', 'demdex', '_hjFirstSeen', '_hjIncludedInSessionSample', '_hjIncludedInPageviewSample', '_hjAbsoluteSessionInProgress', 'vuid'],
-  marketing: ['_fbp', 'test_cookie', 'tuuid', 'tuuid_lu', 'c', 'CMID', 'CMPS', 'CMPRO', 'uuid2', 'IDE', 'um', 'umeh', 'cf', 'cip', 'cnac', 'car', 'KRTBCOOKIE_97', 'IDSYNC', 'dpm', '_kuid_', 'fr', 'cto_bundle',
-    'visitor-id', 'data-c-ts', 'data-c', 'CMTS', 'mv_tokens', 'A3', 'mv_tokens_eu-v1', 'am_tokens', 'am_tokens_eu-v1', '_hjSessionUser_2590373', 'iteo', '_hjSession_2590373', 'MyVerivoxAuth', 'VxCheckAuth']
+  necessary: { gdpr: { name: 'DSGVO' }, __cfruid: { name: 'Cloudflare ' }, 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' }, _cfuvid: { name: 'Cloudflare WAF' }, cf_chl_prog: { name: 'Cloudflare für JS' }, __cf_bm: { name: 'Cloudflare bot' } },
+  analytics: { PugT: { name: 'PubMatic' }, locale: { name: 'Facebook' }, _gcl_au: { name: 'Google Tag Manager' }, _ga: { name: 'Google Analytics' }, _gid: { name: 'Google Analytics' }, ['_gat_UA-31842-13']: { name: 'Google Analytics' }, uid: { name: 'criteo' }, callback: { name: 'callback' }, demdex: { name: 'demdex' }, _hjFirstSeen: { name: 'Hotjar' }, _hjIncludedInSessionSample: { name: 'Hotjar' }, _hjIncludedInPageviewSample: { name: 'Hotjar' }, _hjAbsoluteSessionInProgress: { name: 'Hotjar' }, vuid: { name: 'Vimeo' } },
+  marketing: { _fbp: { name: 'PubMatic' }, test_cookie: { name: 'PubMatic' }, tuuid: { name: 'PubMatic' }, tuuid_lu: { name: 'PubMatic' }, c: { name: 'PubMatic' }, CMID: { name: 'PubMatic' }, CMPS: { name: 'PubMatic' }, CMPRO: { name: 'PubMatic' }, uuid2: { name: 'PubMatic' }, IDE: { name: 'PubMatic' }, um: { name: 'PubMatic' }, umeh: { name: 'PubMatic' }, cf: { name: 'PubMatic' }, cip: { name: 'PubMatic' }, cnac: { name: 'PubMatic' }, car: { name: 'PubMatic' },
+    KRTBCOOKIE_97: { name: 'PubMatic' }, IDSYNC: { name: 'PubMatic' }, dpm: { name: 'PubMatic' }, _kuid_: { name: 'PubMatic' }, fr: { name: 'PubMatic' }, cto_bundle: { name: 'PubMatic' }, ['visitor-id']: { name: 'PubMatic' }, ['data-c-ts']: { name: 'PubMatic' }, ['data-c']: { name: 'PubMatic' }, CMTS: { name: 'PubMatic' }, ['mv_tokens']: { name: 'PubMatic' }, A3: { name: 'PubMatic' }, ['mv_tokens_eu-v1']: { name: 'PubMatic' }, am_tokens: { name: 'PubMatic' },
+    ['am_tokens_eu-v1']: { name: 'PubMatic' }, _hjSessionUser_2590373: { name: 'PubMatic' }, iteo: { name: 'PubMatic' }, _hjSession_2590373: { name: 'PubMatic' }, MyVerivoxAuth: { name: 'PubMatic' }, VxCheckAuth: { name: 'PubMatic' }}
 };
+/* tslint:enable */