@bytebrand/fe-ui-core 4.2.124 → 4.2.125

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

@@ -1,15 +1,15 @@
-import { styled } from '@mui/system';
-
-export const BaseModalWrapper = styled('div')({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 'calc(100% - 32px)',
-  backgroundColor: '#fff',
-  boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
-  borderRadius: '10px',
-  maxWidth: '600px',
-  boxSizing: 'border-box',
-  outline: 'none'
-});
+import { styled } from '@mui/system';
+
+export const BaseModalWrapper = styled('div')({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 'calc(100% - 32px)',
+  backgroundColor: '#fff',
+  boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
+  borderRadius: '10px',
+  maxWidth: '600px',
+  boxSizing: 'border-box',
+  outline: 'none'
+});

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

@@ -1,24 +1,24 @@
-import * as React from 'react';
-import Modal from '@mui/material/Modal';
-import ModalsConfig from './ModalsConfig';
-import { BaseModalWrapper } from './Modal.styled';
-
-interface IBasicModal {
-  isVisible: boolean;
-  toggleModal: () => void;
-  handleSentryInit?: () => void;
-  name: string;
-  modalProps?: any;
-}
-
-const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  return (
-    <Modal open={isVisible}>
-      <BaseModalWrapper>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
-      </BaseModalWrapper>
-    </Modal>
-  );
-};
-
-export default BasicModal;
+import * as React from 'react';
+import Modal from '@mui/material/Modal';
+import ModalsConfig from './ModalsConfig';
+import { BaseModalWrapper } from './Modal.styled';
+
+interface IBasicModal {
+  isVisible: boolean;
+  toggleModal: () => void;
+  handleSentryInit?: () => void;
+  name: string;
+  modalProps?: any;
+}
+
+const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
+  return (
+    <Modal open={isVisible}>
+      <BaseModalWrapper>
+        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+      </BaseModalWrapper>
+    </Modal>
+  );
+};
+
+export default BasicModal;

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

@@ -1,23 +1,23 @@
-import * as React from 'react';
-
-import TestModal from './modals/TestModal';
-import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
-import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
-
-interface IModalConfigProps {
-  [key: string]: (props: any) => JSX.Element;
-}
-
-const ModalsConfig: IModalConfigProps = {
-  TEST_MODAL: (props: any) => {
-    return <TestModal { ...props } />;
-  },
-  PREVIEW_COOKIE_MODAL: (props: any) => {
-    return <PreviewCookieModal {...props} />;
-  },
-  MANAGE_COOKIE_MODAL: (props: any) => {
-    return <ManageCookieModal {...props} />;
-  }
-};
-
-export default ModalsConfig;
+import * as React from 'react';
+
+import TestModal from './modals/TestModal';
+import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
+import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
+
+interface IModalConfigProps {
+  [key: string]: (props: any) => JSX.Element;
+}
+
+const ModalsConfig: IModalConfigProps = {
+  TEST_MODAL: (props: any) => {
+    return <TestModal { ...props } />;
+  },
+  PREVIEW_COOKIE_MODAL: (props: any) => {
+    return <PreviewCookieModal {...props} />;
+  },
+  MANAGE_COOKIE_MODAL: (props: any) => {
+    return <ManageCookieModal {...props} />;
+  }
+};
+
+export default ModalsConfig;

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

@@ -1,76 +1,76 @@
-@import '../../../../../theme/mixins.styl';
-
-.modalWrapper
-  padding: 13px 15px 28px;
-  text-align: center
-  box-sizing: border-box
-  max-width: 600px
-
-.modalTitle
-  font-family: sans-serif
-  font-weight: bold
-  font-size: 16px;
-  line-height: 133.4%;
-  color: rgba(76, 78, 100, 0.87)
-  margin-top: 12px
-  +media-tablet-up()
-    font-size: 24px;
-    margin-top: 20px
-
-.modalContent
-  font-family: sans-serif
-  font-size: 14px;
-  line-height: 24px;
-  text-align: justify;
-  letter-spacing: 0.15px;
-  color: rgba(76, 78, 100, 0.87);
-  margin-top: 12px
-  margin-right: 25px
-
-  +media-tablet-up()
-    margin-top: 20px
-.accordions
-  height: 278px
-  overflow-y: scroll
-  padding-right: 10px
-  margin-top: 16px
-  &::-webkit-scrollbar {
-    width: 6px
-  }
-  &::-webkit-scrollbar-track {
-    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #005CCB
-    border-radius: 50px
-  }
-
-.buttonsContainer
-  margin-top: 20px
-  display: flex
-  justify-content: center
-  gap: 18px;
-
-  +media-tablet-landscape-up()
-    gap: 36px;
-
-.modalBtn
-  height: 38px
-  text-transform: capitalize !important
-  font-size: 11px !important;
-  +media-tablet-landscape-up()
-    min-width: 222px !important
-    font-size: 14px !important;
-
-.outlinedBtn
-  border: none !important;
-
-.switchBlock
-  display: flex
-  justify-content: space-between
-  align-items: center
-  font-size: 12px
-  line-height: 15px
-  letter-spacing: 1px
-  color: rgba(76, 78, 100, 0.87)
+@import '../../../../../theme/mixins.styl';
+
+.modalWrapper
+  padding: 13px 15px 28px;
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 16px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 12px
+  +media-tablet-up()
+    font-size: 24px;
+    margin-top: 20px
+
+.modalContent
+  font-family: sans-serif
+  font-size: 14px;
+  line-height: 24px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 12px
+  margin-right: 25px
+
+  +media-tablet-up()
+    margin-top: 20px
+.accordions
+  height: 278px
+  overflow-y: scroll
+  padding-right: 10px
+  margin-top: 16px
+  &::-webkit-scrollbar {
+    width: 6px
+  }
+  &::-webkit-scrollbar-track {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #005CCB
+    border-radius: 50px
+  }
+
+.buttonsContainer
+  margin-top: 20px
+  display: flex
+  justify-content: center
+  gap: 18px;
+
+  +media-tablet-landscape-up()
+    gap: 36px;
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  font-size: 11px !important;
+  +media-tablet-landscape-up()
+    min-width: 222px !important
+    font-size: 14px !important;
+
+.outlinedBtn
+  border: none !important;
+
+.switchBlock
+  display: flex
+  justify-content: space-between
+  align-items: center
+  font-size: 12px
+  line-height: 15px
+  letter-spacing: 1px
+  color: rgba(76, 78, 100, 0.87)
   text-align: left

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

@@ -1,140 +1,140 @@
-import React, { useEffect, useState } from 'react';
-import _merge from 'lodash/merge';
-import classNames from 'classnames';
-
-import IconSVG from '../../../IconSVG/IconSVG';
-import Button from '../../../Button/Button';
-import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
-import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
-import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
-import { updateCookieList } from '../../../../../framework/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(true);
-  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
-  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
-  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
-
-  useEffect(
-    () => {
-      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);
-    },
-    []
-  );
-
-  const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
-    setAnalyticsSwitches(newAnalyticsSwitches);
-    setAnalyticsMasterSwitch(value);
-  };
-
-  const onHandleMarketingSwitchValue = (value: boolean) => {
-    const newMarketingSwitches = Object.keys(marketingSwitches).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();
-  };
-
-  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 =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.necessary[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch 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 =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.analytics[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch
-                value={analyticsSwitches[cookie]}
-                onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie] })); }}
-              />
-            </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 =>
-            <div className={styles.switchBlock} key={cookie} >
-              <span>{`${COOKIE_SCHEMA.marketing[cookie].name} (${cookie})`}</span>
-              <MaterialSwitch
-                value={marketingSwitches[cookie]}
-                onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie] }))}
-              />
-            </div>
-          )}
-        </MaterialAccordionGroup>
-      </div>
-      <div className={styles.buttonsContainer}>
-        <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>
-  );
-};
-
-export default ManageCookieModal;
+import React, { useEffect, useState } from 'react';
+import _merge from 'lodash/merge';
+import classNames from 'classnames';
+
+import IconSVG from '../../../IconSVG/IconSVG';
+import Button from '../../../Button/Button';
+import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
+import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
+import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
+import { updateCookieList } from '../../../../../framework/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(true);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
+  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
+
+  useEffect(
+    () => {
+      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);
+    },
+    []
+  );
+
+  const onHandleAnalyticsSwitchValue = (value: boolean) => {
+    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    setAnalyticsSwitches(newAnalyticsSwitches);
+    setAnalyticsMasterSwitch(value);
+  };
+
+  const onHandleMarketingSwitchValue = (value: boolean) => {
+    const newMarketingSwitches = Object.keys(marketingSwitches).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();
+  };
+
+  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 =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.necessary[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch 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 =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.analytics[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch
+                value={analyticsSwitches[cookie]}
+                onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie] })); }}
+              />
+            </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 =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.marketing[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch
+                value={marketingSwitches[cookie]}
+                onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie] }))}
+              />
+            </div>
+          )}
+        </MaterialAccordionGroup>
+      </div>
+      <div className={styles.buttonsContainer}>
+        <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>
+  );
+};
+
+export default ManageCookieModal;