@bytebrand/fe-ui-core-autobahn 1.0.86 → 1.0.87

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

@@ -28,13 +28,20 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
 
   useEffect(
     () => {
+      // switches represent "is allowed" (true = allowed). Default to off (nothing
+      // allowed) unless the visitor already saved a choice on a previous visit.
+      const savedConfigRaw = localStorage.getItem('cookieConfig');
+      const savedConfig = savedConfigRaw ? JSON.parse(savedConfigRaw) : null;
+      const savedDisabledAnalytics: string[] = savedConfig?.analytics || [];
+      const savedDisabledMarketing: string[] = savedConfig?.marketing || [];
+
       const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: !!savedConfig && !savedDisabledAnalytics.includes(item) }), {});
 
       const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: !!savedConfig && !savedDisabledMarketing.includes(item) }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -42,11 +49,9 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    // per-item state is stored inverted (false = this item is on — see isChecked below),
-    // so turning the master ON (value=true) must store false on every item, not true.
     const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
 
     setAnalyticsSwitches(newAnalyticsSwitches);
     setAnalyticsMasterSwitch(value);
@@ -55,7 +60,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   const onHandleMarketingSwitchValue = (value: boolean) => {
     const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -136,7 +141,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           {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);
+            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === true);
             return (
               <div className={styles.switchBlock} key={cookie} >
                 <span className={styles.switchBlockTitle}>{cookie}</span>
@@ -144,7 +149,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
                   value={isChecked}
-                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                  onChange={(newValue: boolean) => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, newValue)}
                 />
               </div>
             );
@@ -160,7 +165,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           {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);
+            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === true);
             return (
               <div className={styles.switchBlock} key={cookie} >
                 <span className={styles.switchBlockTitle}>{cookie}</span>
@@ -168,7 +173,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
                   value={isChecked}
-                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                  onChange={(newValue: boolean) => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, newValue)}
                 />
               </div>
             )
@@ -177,7 +182,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
       </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>
+        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>
   );

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

@@ -3,6 +3,7 @@ import IconSVG from '../../../../iconsvg/IconSVG';
 import Button from '../../../Button/Button';
 import styles from './PreviewCookieModal.styl';
 import { updateCookieList } from '../../../../utils/CommonUtils';
+import { COOKIE_SCHEMA } from '../../../../constants/common';
 
 interface IPreviewCookieModal {
   toggleModal: () => void;
@@ -13,15 +14,15 @@ interface IPreviewCookieModal {
 const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
   const environment = window.location.origin;
   const onAcceptAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify({}));
+    localStorage.setItem('cookieConfig', JSON.stringify({ marketing: [], analytics: [] }));
     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']
+      marketing: Object.values(COOKIE_SCHEMA.marketing).reduce((acc: string[], val: string[]) => acc.concat(val), []),
+      analytics: Object.values(COOKIE_SCHEMA.analytics).reduce((acc: string[], val: string[]) => acc.concat(val), [])
     }));
     updateCookieList(handleSentryInit);
     toggleModal();

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.86",
-  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
-  "main": "index.ts",
-  "license": "UNLICENSED",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.12",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.87",
+  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.12",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}