@bytebrand/fe-ui-core 4.1.66 → 4.1.68

package/package.json

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

package/source/components/_common/Modal/CookieModal.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import useModal from '../../../framework/hooks/useModal';
+import { updateCookieList } from '../../../framework/utils/CommonUtils';
+import Modal from './Modal';
+
+const CookieModal = () => {
+  const { isVisible, toggleModal } = useModal();
+  const [modal, setModal] = useState('');
+
+  useEffect(() => {
+    const cookieConfig = localStorage.getItem('cookieConfig');
+    if (!cookieConfig) {
+      setModal('PREVIEW_COOKIE_MODAL');
+      toggleModal();
+    } else setTimeout(() => { updateCookieList(); }, 3000);
+  }, []);
+
+  const onClearModalState = () => {
+    setModal('');
+  };
+
+  const modalProps = {
+    onClearModalState,
+    setModal
+  };
+
+  return isVisible
+    ? <Modal
+        isVisible={isVisible}
+        toggleModal={toggleModal}
+        name={modal}
+        modalProps={modalProps}
+      />
+    : <></>;
+};
+
+export default CookieModal;

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

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import _merge from 'lodash/merge';
-import styles from './ManageCookieModal.styl';
+import classNames from 'classnames';
 
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
-import classNames from 'classnames';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
 import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
-import Cookies from 'js-cookie';
-import { config } from '../../../../../framework/constants/app';
+import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
+
+import styles from './ManageCookieModal.styl';
 
 const ManageCookieModal = ({ onClearModalState }) => {
   const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
@@ -43,6 +43,7 @@ const ManageCookieModal = ({ onClearModalState }) => {
     value: marketingMasterSwitch,
     onChange: onHandleMarketingSwitchValue
   };
+  
   const analyticsSwitchProps = {
     value: analytcisMasterSwitch,
     onChange: onHandleAnalyticsSwitchValue
@@ -54,18 +55,13 @@ const ManageCookieModal = ({ onClearModalState }) => {
     onChange: () => {}
   };
 
-  const onAccept = (value?: object) => {
+  const onAccept = (value?: object) => {    
     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));
-
-    Object.keys(cookieConfig).forEach((group) => {
-      cookieConfig[group].forEach((cookie: string) => {
-        Cookies.remove(cookie, { path: '/' });
-      });
-    });
+    updateCookieList();
     onClearModalState();
   };
 
@@ -139,8 +135,8 @@ const ManageCookieModal = ({ onClearModalState }) => {
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
-        <Button onClick={() => onAccept({})} className={styles.modalBtn}>zustimmen</Button>
+        <Button onClick={() => onAccept()}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Auswahl speichern</Button>
+        <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>
   );

package/source/framework/utils/CommonUtils.ts

@@ -529,4 +529,13 @@ export function setUtmParameters() {
   expiresDate.setDate(expiresDate.getDate() + 1);
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${config.DOMAIN};path=/`;
-}
+};
+
+export const updateCookieList = () => {
+  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+  Object.keys(cookieConfig).forEach((group: string) => {
+    cookieConfig[group].forEach((cookie: string) => {
+      Cookies.remove(cookie, { path: '/', domain: config[process.env.NODE_ENV].DOMAIN });
+    })
+  });
+};