@bytebrand/fe-ui-core 4.2.49 → 4.2.51

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

@@ -1,27 +1,27 @@
-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;
-  name: string;
-  modalProps?: any;
-}
-
-const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) => {
-  const { onClearModalState } = modalProps;
-  return (
-    <Modal open={isVisible} onClose={() => {
-      // toggleModal();
-      // onClearModalState();
-    }}>
-      <BaseModalWrapper>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal })}
-      </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;
+  name: string;
+  modalProps?: any;
+}
+
+const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) => {
+  const { onClearModalState } = modalProps;
+  return (
+    <Modal open={isVisible} onClose={() => {
+      // toggleModal();
+      // onClearModalState();
+    }}>
+      <BaseModalWrapper>
+        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal })}
+      </BaseModalWrapper>
+    </Modal>
+  );
+};
+
+export default BasicModal;

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

@@ -1,19 +1,19 @@
-import * as React from 'react';
-
-import TestModal from './modals/TestModal';
-import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
-import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
-
-const ModalsConfig = {
-  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';
+
+const ModalsConfig = {
+  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,68 +1,68 @@
-@import '../../../../../theme/mixins.styl';
-
-.modalWrapper
-  padding: 16px 10px 25px 25px
-  text-align: center
-  box-sizing: border-box
-  max-width: 600px
-
-.modalTitle
-  font-family: sans-serif
-  font-weight: bold
-  font-size: 24px;
-  line-height: 133.4%;
-  color: rgba(76, 78, 100, 0.87)
-  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: 20px
-  margin-right: 25px
-
-.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
-  column-gap: 20px
-  +media-phone-only()
-    column-gap: 0
-
-.modalBtn
-  height: 38px
-  text-transform: capitalize !important
-  +media-phone-only()
-    font-size: 11px !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: 16px 10px 25px 25px
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 24px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  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: 20px
+  margin-right: 25px
+
+.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
+  column-gap: 20px
+  +media-phone-only()
+    column-gap: 0
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  +media-phone-only()
+    font-size: 11px !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,147 +1,147 @@
-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';
-
-const ManageCookieModal = ({ toggleModal }) => {
-  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
-  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
-  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
-  const [marketingSwitches, setMarketingSwitches] = useState({});
-
-  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?: 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));
-    updateCookieList();
-    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.
-          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>
-          {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.
-            For example, we collect information about which pages you visit to help us present more relevant information.
-          </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 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>
-          {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';
+
+const ManageCookieModal = ({ toggleModal }) => {
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
+  const [marketingSwitches, setMarketingSwitches] = useState({});
+
+  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?: 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));
+    updateCookieList();
+    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.
+          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>
+          {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.
+            For example, we collect information about which pages you visit to help us present more relevant information.
+          </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 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>
+          {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;

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

@@ -1,45 +1,45 @@
-@import '../../../../../theme/mixins.styl';
-
-.modalWrapper
-  padding: 26px 60px 56px
-  text-align: center
-  box-sizing: border-box
-  max-width: 600px
-  +media-phone-only()
-    padding: 13px 15px 28px
-
-.modalTitle
-  font-family: sans-serif
-  font-weight: bold
-  font-size: 24px;
-  line-height: 133.4%;
-  color: rgba(76, 78, 100, 0.87)
-  margin-top: 20px
-
-.modalContent
-  font-family: sans-serif
-  font-size: 16px;
-  line-height: 24px;
-  text-align: justify;
-  letter-spacing: 0.15px;
-  color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
-  +media-phone-only()
-    column-gap: 0
-
-.buttonsContainer
-  margin-top: 20px
-  display: flex
-  justify-content: center
-  column-gap: 20px
-  +media-phone-only()
-    column-gap: 0
-
-.modalBtn
-  height: 38px
-  text-transform: capitalize !important
-  +media-phone-only()
-    font-size: 11px !important
-
-.outlinedBtn
+@import '../../../../../theme/mixins.styl';
+
+.modalWrapper
+  padding: 26px 60px 56px
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+  +media-phone-only()
+    padding: 13px 15px 28px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 24px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 20px
+
+.modalContent
+  font-family: sans-serif
+  font-size: 16px;
+  line-height: 24px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 20px
+  +media-phone-only()
+    column-gap: 0
+
+.buttonsContainer
+  margin-top: 20px
+  display: flex
+  justify-content: center
+  column-gap: 20px
+  +media-phone-only()
+    column-gap: 0
+
+.modalBtn
+  height: 38px
+  text-transform: capitalize !important
+  +media-phone-only()
+    font-size: 11px !important
+
+.outlinedBtn
   border: none !important