@bytebrand/fe-ui-core 4.1.51 → 4.1.53

package/package.json

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

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import _merge from 'lodash/merge';
 import styles from './ManageCookieModal.styl';
 
 import IconSVG from '../../../IconSVG/IconSVG';
@@ -6,18 +7,46 @@ import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
 import classNames from 'classnames';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
+import { COOKIE_SCHEMA } from '@bytebrand/fe-ui-core/source/framework/constants/common';
 
 const ManageCookieModal = () => {
-  const [accordionSwitchValue, setAccordionSwitchValue] = useState(false);
-  const [switchValue, setSwitchValue] = useState(false);
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
+  const [marketingSwitches, setMarketingSwitches] = useState({});
 
-  const onHandleAccordionSwitchValue = (value: boolean) => {
-    setAccordionSwitchValue(value);
+
+  useEffect(() => {
+    const newAnalyticsSwitches = COOKIE_SCHEMA.analytics.reduce((acc, item) => ({...acc, [item]: true}), {});
+    const newMarketingSwitches = COOKIE_SCHEMA.marketing.reduce((acc, item) => ({...acc, [item]: true}), {});
+    setAnalyticsSwitches(newAnalyticsSwitches);
+    setMarketingSwitches(newMarketingSwitches);
+  }, []);
+
+  const onHandleAnalyticsSwitchValue = (value: boolean) => {
+    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {})
+    setAnalyticsSwitches(newAnalyticsSwitches);
+    setAnalyticsMasterSwitch(value);
+  };
+
+  const onHandleMarketingSwitchValue = (value: boolean) => {
+    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {})
+    setMarketingSwitches(newAnalyticsSwitches);
+    setMarketingMasterSwitch(value);
+  };
+
+  const marketingSwitchProps = {
+    value: marketingMasterSwitch,
+    onChange: onHandleMarketingSwitchValue
+  };
+  const analyticsSwitchProps = {
+    value: analytcisMasterSwitch,
+    onChange: onHandleAnalyticsSwitchValue
   };
 
-  const accordionSwitchProps = {
-    value: accordionSwitchValue,
-    onChange: onHandleAccordionSwitchValue
+  const necessarySwitchProps = {
+    value: true,
+    onChange: () => {}
   };
 
   return (
@@ -30,37 +59,63 @@ const ManageCookieModal = () => {
           title='Notwendig'
           tooltipText='tooltip text'
           withSwitch
-          switchProps={accordionSwitchProps}
+          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.
           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 =>
+            <div className={styles.switchBlock}>
+              <span>{cookie}</span>
+              <MaterialSwitch value={true} onChange={(value: boolean) => {}} />
+            </div>
+          )}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Analytisch'
           withSwitch
-          switchProps={accordionSwitchProps}
+          switchProps={analyticsSwitchProps}
         >
-          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.
-          For example, we collect information about which pages you visit to help us present more relevant information.
+          <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.
+            For example, we collect information about which pages you visit to help us present more relevant information.
+          </span>
+          {COOKIE_SCHEMA.analytics.map(cookie =>
+            <div className={styles.switchBlock}>
+              <span>{cookie}</span>
+              <MaterialSwitch
+                value={analyticsSwitches[cookie]}
+                onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie]})) }}
+              />
+            </div>
+          )}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Marketing'
           withSwitch
-          switchProps={accordionSwitchProps}
+          switchProps={marketingSwitchProps}
         >
-          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 Seiten, die Sie auf unserer
-          Website besuchen, anzeigen.
-          For example, we may serve you a personalized ad based on the pages you visit on our site.
-          <div className={styles.switchBlock}>
-            <span>Cookie</span>
-            <MaterialSwitch value={switchValue} onChange={(value: boolean) => setSwitchValue(value)} />
-          </div>
+          <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 Seiten, die Sie auf unserer
+            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 =>
+            <div className={styles.switchBlock}>
+              <span>Cookie</span>
+              <MaterialSwitch
+                value={marketingSwitches[cookie]}
+                onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie]}))}
+              />
+            </div>
+          )}
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>

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

@@ -14,6 +14,7 @@ const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
     localStorage.setItem('cookieConfig', JSON.stringify([]));
     toggleModal();
   };
+  
   return (
     <div className={styles.modalWrapper}>
       <IconSVG name='autodeLogo' customDimensions />

package/source/components/_common/TimePicker/TimePicker.tsx

@@ -3,7 +3,9 @@ import MaterialSelect from '../MaterialSelect/MaterialSelect';
 import styles from './TimePicker.styl';
 
 interface ITimePickerProps {
-  onHandleTimestampChange: (value: string) => void;
+  onHandleTimestampChange: (value: number) => void;
+  onDayChange: (value: number) => void;
+  onTimeChange: (value: number) => void;
   className: string;
   lang: string;
   time: number;
@@ -14,22 +16,24 @@ interface ITimePickerProps {
 
 const TimePicker = ({
   onHandleTimestampChange,
+  onDayChange,
+  onTimeChange,
+  day,
+  time,
   className,
   lang,
   t,
   size = 'custom'
  }: ITimePickerProps) => {
-  const date = new Date();
+  const date: any = new Date();
   const [currentDay, setCurrentDay] = useState(date.getDay());
-  const [day, setDay] = useState(0);
-  const [time, setTime] = useState(0);
   const onHandleDayChange = (value: number) => {
-    setDay(value);
+    onDayChange(value);
   };
   const onHandleTimeChange = (value: number) => {
-    setTime(value);
+    onTimeChange(value);
   };
-  const format = {
+  const format: { hour: 'numeric' | '2-digit', minute: 'numeric' | '2-digit' } = {
     hour: 'numeric',
     minute: 'numeric'
   };
@@ -70,7 +74,7 @@ const TimePicker = ({
       const time = date.toLocaleTimeString('de', format);
       const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
       currentDayRanges.push({ time, value: currentDayRanges.length, label: `${time} - ${rangeTime}` });
-    }
+    } // time ranges for current day and from current time
 
     for (let minutes = 0; minutes < ranges * 60; minutes = minutes + 30) {
       date.setHours(startTime);
@@ -78,19 +82,20 @@ const TimePicker = ({
       const time = date.toLocaleTimeString('de', format);
       const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
       dayRanges.push({ time, value: dayRanges.length, label: `${time} - ${rangeTime}` });
-    }
+    } // time ranges for full day
 
     return currentDay === new Date().getDay() && isWorkingHours() ? currentDayRanges : dayRanges;
   };
 
   useEffect(
     () => {
-      onHandleTimestampChange(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`);
+      setCurrentDay(new Date(nextWeekDaysFull[day]).getDay())
       if (isAfterWorkingHours() && date.getDay() === 0) {
         setCurrentDay(1);
       }
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
     },
-    [day, time]
+    [day, time, currentDay]
   );
 
   const getHours = (time: string) => {
@@ -100,7 +105,6 @@ const TimePicker = ({
 
   const dayOnchange = (value: number) => {
     onHandleDayChange(value);
-    setCurrentDay(new Date(nextWeekDaysFull[value]).getDay());
     onHandleTimeChange(0);
   };
 

package/source/framework/constants/common.ts

@@ -7,3 +7,10 @@ export const PLACEHOLDER_IMAGE_LARGE_URL: string = `https://images.auto.de/noima
 export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 
 export const HUNDRED = 100;
+
+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']
+}