@bytebrand/fe-ui-core 4.3.1 → 4.4.0

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

@@ -8,7 +8,7 @@ export const IconSvgWrapper = styled(IconSVG)(props => ({
   height: '10px'
 }));
 
-export const TooltipWrapper = styled('div')(props => ({
+export const TooltipWrapper = styled('div')(() => ({
   // zIndex: props.zindex ? props.zindex : 9996,
   display: 'inline-block'
 }));

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -17,8 +17,8 @@ interface IMaterialTooltip {
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
-))(props => ({
-  zIndex: props.zindex ? props.zindex : 9996,
+))(({ zindex }: { zindex: number }) => ({
+  zIndex: zindex ? zindex : 9996,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#fff',
     color: '#4C4E64AD',
@@ -46,7 +46,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
   };
 
   const onHandleMenuToggle = debounce(
-    (event: any) => {
+    (_: any) => {
       setIsOpen(() => !isOpen);
     },
     50

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

@@ -3,7 +3,6 @@ import useModal from '../../../framework/hooks/useModal';
 import { updateCookieList } from '../../../framework/utils/CommonUtils';
 import Modal from './Modal';
 
-
 export interface ICookieModal {
   handleSentryInit?: () => void;
 }
@@ -43,9 +42,8 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     : <></>;
 };
 
-
 CookieModal.defaultProps = {
-  handleSentryInit: () => {},
+  handleSentryInit: () => {}
 };
 
 export default CookieModal;

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

@@ -10,5 +10,6 @@ export const BaseModalWrapper = styled('div')({
   boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
   borderRadius: '10px',
   maxWidth: '600px',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  outline: 'none'
 });

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

@@ -12,12 +12,8 @@ interface IBasicModal {
 }
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  const { onClearModalState } = modalProps;
   return (
-    <Modal open={isVisible} onClose={() => {
-      // toggleModal();
-      // onClearModalState();
-    }}>
+    <Modal open={isVisible}>
       <BaseModalWrapper>
         {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
       </BaseModalWrapper>

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

@@ -4,7 +4,11 @@ import TestModal from './modals/TestModal';
 import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
 import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
 
-const ModalsConfig = {
+interface IModalConfigProps {
+  [key: string]: (props: any) => JSX.Element;
+}
+
+const ModalsConfig: IModalConfigProps = {
   TEST_MODAL: (props: any) => {
     return <TestModal { ...props } />;
   },

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

@@ -1,7 +1,7 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 16px 10px 25px 25px
+  padding: 13px 15px 28px;
   text-align: center
   box-sizing: border-box
   max-width: 600px
@@ -9,10 +9,13 @@
 .modalTitle
   font-family: sans-serif
   font-weight: bold
-  font-size: 24px;
+  font-size: 16px;
   line-height: 133.4%;
   color: rgba(76, 78, 100, 0.87)
-  margin-top: 20px
+  margin-top: 12px
+  +media-tablet-up()
+    font-size: 24px;
+    margin-top: 20px
 
 .modalContent
   font-family: sans-serif
@@ -21,9 +24,11 @@
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
+  margin-top: 12px
   margin-right: 25px
 
+  +media-tablet-up()
+    margin-top: 20px
 .accordions
   height: 278px
   overflow-y: scroll
@@ -52,7 +57,6 @@
 .modalBtn
   height: 38px
   text-transform: capitalize !important
-  font-size: 11px !important;
   +media-tablet-landscape-up()
     min-width: 222px !important
     font-size: 14px !important;
@@ -62,10 +66,22 @@
 
 .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
+  text-align: left
+
+.switchBlockTitle
+  width: 140px;
+
+.switchBlockLink
+  color: rgba(76, 78, 100, 0.87);
+  text-decoration-line: underline;
+  font-size: 10px;
+
+  &:focus
+    text-decoration-line: underline;
+  &:hover
+    text-decoration-line: none;

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import _merge from 'lodash/merge';
 import classNames from 'classnames';
-
+import _get from 'lodash/get';
 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 { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../../framework/constants/common';
 import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 import styles from './ManageCookieModal.styl';
@@ -16,16 +16,25 @@ interface IManageCookieModal {
   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({});
-  const [marketingSwitches, setMarketingSwitches] = useState({});
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(false);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(false);
+  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 }), {});
+      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+
+      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+        .reduce((acc, val) => acc.concat(val), [])
+        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -33,13 +42,18 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
+    .reduce((acc, val) => acc.concat(val), [])
+    .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 }), {});
+    const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
+    .reduce((acc, val) => acc.concat(val), [])
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -60,7 +74,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     onChange: () => {}
   };
 
-  const onAccept = (value?: object) => {
+  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]) || []
@@ -69,6 +83,22 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     updateCookieList(handleSentryInit);
     toggleModal();
   };
+  
+  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...analyticsSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setAnalyticsSwitches(updatedSwitches);
+  };
+
+  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
+    const updatedSwitches = { ...marketingSwitches };
+    for (const item of cookiesFromCategory) {
+      updatedSwitches[item] = !isChecked
+    }
+    setMarketingSwitches(updatedSwitches);
+  };
 
   return (
     <div className={styles.modalWrapper}>
@@ -83,12 +113,16 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           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>
-          )}
+          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
+            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch sx={{ marginLeft: 'auto' }} disabled={true} value={true} onChange={() => {}} />
+              </div>
+            );
+          })}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Analytisch'
@@ -97,15 +131,22 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           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>
-          )}
+          {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);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={analytcisMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                />
+              </div>
+            );
+          })}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Marketing'
@@ -114,19 +155,26 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           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>
-          )}
+          {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);
+            return (
+              <div className={styles.switchBlock} key={cookie} >
+                <span className={styles.switchBlockTitle}>{cookie}</span>
+                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
+                <MaterialSwitch
+                  sx={{ marginLeft: 'auto' }}
+                  value={marketingMasterSwitch}
+                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                />
+              </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={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
         <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>

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

@@ -1,12 +1,12 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 26px 60px 38px
+  padding: 28px 58px 28px
   text-align: center
   box-sizing: border-box
   max-width: 600px
-  +media-phone-only()
-    padding: 13px 15px 28px
+  +media-tablet-down()
+    padding: 16px 15px 28px
 
 .modalTitle
   font-family: sans-serif
@@ -16,37 +16,52 @@
   color: rgba(76, 78, 100, 0.87)
   margin-top: 20px
 
+  +media-tablet-down()
+    font-size: 16px;
+    margin-top: 8px;
+
 .modalContent
   font-family: sans-serif
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 14px;
+  line-height: 16px;
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
-  +media-phone-only()
-    column-gap: 0
+  +media-tablet-down()
+    column-gap: 0;
+    max-height: 320px;
+    overflow-y: scroll;
+    padding-right: 10px;
+    margin-right: -10px;
+    margin-top: 8px
+
+.logoContainer
+  display: flex
+  justify-content: space-between
 
 .buttonsContainer
-  margin-top: 20px
+  margin-top: 12px
   display: flex
   justify-content: space-between
   gap: 36px;
-  +media-phone-only()
+  +media-tablet-down()
     column-gap: 0
 
 .modalBtn
   height: 38px
   text-transform: capitalize !important
   min-width: calc(50% - 18px) !important
-  +media-phone-only()
+  +media-tablet-down()
     font-size: 11px !important
 
 .outlinedBtnLeft
-  float: right;
+  display: flex;
+  justify-content: flex-end;
   color: #005CCB;
   font-size: 16px;
   text-decoration: none;
-
-.clearfix
-  clear: both;
+  margin-top: 12px;
+  margin-bottom: 0;
+  margin-left: auto;
+  max-width: 80px;

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

@@ -18,21 +18,28 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
     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']
+    }));
+    updateCookieList(handleSentryInit);
+    toggleModal();
+  };
+
   return (
     <div className={styles.modalWrapper}>
-      <IconSVG name='autodeLogo' customDimensions />
+      <div className={styles.logoContainer}>
+        <IconSVG name='autodeLogo' customDimensions />
+        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
+      </div>
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
-        Wenn Sie auf "Zustimmen" klicken, ermöglichen Sie uns über Cookies das Nutzerverhalten 
-        für alle User zu optimieren und Ihnen individuelle Empfehlungen auch auf Drittseiten anzuzeigen. 
-        Durch die Zustimmung erteilen Sie uns Ihre ausdrückliche Einwilligung. 
-        Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. 
-        Dies ist auch später jederzeit im Bereich "Cookie-Richtlinie" möglich. 
-        Die relevante Datenschutzerklärung finden Sie&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>hier</a>.
-        <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
+        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
       </div>
-      <div className={styles.clearfix}></div>
+      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
       <div className={styles.buttonsContainer}>
         <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
         <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -23,13 +23,18 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
   const dealerId = _get(car, 'metaData.ownerId') || null;
   const carId = _get(car, '_id', '');
   const onAutoDeIdClick = () => {
-    btnEl.current.onClick();
+    btnEl.current?.click();
   };
 
   const controlsContainerClassName = classnames(
     styles.controlsContainer,
     controlsClassContainer
   );
+
+  const getRef = (ref: HTMLButtonElement): void => {
+    btnEl.current = ref;
+  };
+ 
   return (
     <>
       <div className={controlsContainerClassName}>
@@ -41,8 +46,9 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
             _: void,
             isLoading: boolean,
             isSale: boolean,
-            isAlternative: boolean
-            ) => {
+            isAlternative: boolean,
+            isSuccess: boolean
+          ) => {
             const { metaData } = car;
             const isAlternativeType = !!metaData && !!metaData.type;
             const offerButtonClassName = classnames(
@@ -52,10 +58,12 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
               { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
             );
 
+
             const getRequestButtonTitle = () => {
               if (isSale) return t('sidebar.requestOfferSale');
               // tslint:disable-next-line:no-else-after-return
               else if (isAlternativeType) return t('sidebar.importRequest');
+              else if (isSuccess) return t('CheckoutPage:onlineCheckoutModal.toMyOrder');
               else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
               else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');
               else return t('sidebar.requestOffer');
@@ -63,10 +71,10 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
             return (
               <StyledButton
-                refs={btnEl}
                 className={offerButtonClassName}
                 onClick={onClick}
                 loading={isLoading}
+                getRef={getRef}
               >
                 {isOfferRequested
                   ? null

package/source/components/_common/Range/Range.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
-import { ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 interface IRangeProps {
   children?: JSX.Element;
@@ -11,10 +11,12 @@ interface IRangeProps {
   step: number;
   units: string;
   value: number;
+  withRangeLimit?: boolean;
   onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
+  maxFinancingFirstInstallment?: number;
 }
 
-const Theme = {
+const Theme = createTheme({
   components: {
     MuiSlider: {
       styleOverrides: {
@@ -22,18 +24,10 @@ const Theme = {
           padding: '2px 6px',
           fontSize: 12
         }
-      },
-      palette: {
-        primary: {
-          main: '#005CCB'
-        },
-        color: {
-          main: '#005CCB'
-        }
       }
     }
   }
-};
+});
 
 const Range: React.FC<IRangeProps> = ({
   min,
@@ -41,8 +35,24 @@ const Range: React.FC<IRangeProps> = ({
   step,
   value,
   units,
-  onChange
+  withRangeLimit,
+  onChange,
+  maxFinancingFirstInstallment
 }: IRangeProps) => {
+  const [rangeValue, setRangeValue] = useState<number | number[]>(0);
+
+  useEffect(
+    () => {
+      setRangeValue(value);
+    },
+    [value]
+  )
+
+  const onChangeRange = (event: Event, value: number | number[]) => {
+    setRangeValue(value);
+    onChange(event, value)
+  }
+
   const formttedValue = (value: number) => {
     return (
       <>
@@ -55,13 +65,13 @@ const Range: React.FC<IRangeProps> = ({
     <ThemeProvider theme={Theme}>
       <Slider
         min={min}
-        max={max}
+        max={withRangeLimit ? maxFinancingFirstInstallment : max}
         step={step}
         disableSwap={isMobileOnly ? true : false}
         valueLabelDisplay='auto'
         valueLabelFormat={formttedValue}
-        value={value}
-        onChange={(event: Event, value: number | number[]) => onChange(event, value)}
+        value={rangeValue}
+        onChange={onChangeRange}
         sx={{
           color: '#005CCB'
         }}

package/source/components/_common/UserMenu/MaterialMenu.styled.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@mui/system';
 import { createTheme } from '@mui/material/styles';
-import zIndex from '@mui/material/styles/zIndex';
 
 export const Theme = createTheme({
   components: {

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, MouseEvent } from 'react';
 import Menu from '@mui/material/Menu';
 import ListItem from './MaterialMenuItem';
 import { ThemeProvider } from '@mui/material/styles';
@@ -24,7 +24,7 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
@@ -42,7 +42,7 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
     <ThemeProvider theme={Theme}>
       <div className={containerClassname}>
         <HeaderComponent
-          onClick={(e) => {
+          onClick={(e: MouseEvent<HTMLDivElement>) => {
             if (anchorEl) {
               handleClose();
             } else {