@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/OfferDetailedSection/OfferDetailedSection.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import _get from 'lodash/get';
+import { IOfferDetailedSectionProps } from '../../types/types';
+import TabsComponent from '../MdTabs/MdTabs';
+import PanelConfig from './partials/PanelConfig';
+import styles from './OfferDetailedSection.styl';
+import { offerTranslate } from '../../locales/legacy/data';
+
+const OfferDetailedSection: React.FunctionComponent<IOfferDetailedSectionProps> = ({
+  t,
+  car,
+  OfferBlockComponent,
+  OfferRequestButtonWrapper,
+  offerBlockProps,
+  setActiveTab,
+  activeTab,
+  ...config
+}) => {
+  const [isOpenDetails, setToggleDetailsClick] = useState(false);
+  const onToggleDetailsClick = () => setToggleDetailsClick(!isOpenDetails);
+  const modifeActiveTab = activeTab === 2 ? 0 : activeTab;
+  const mainConfig = {
+    t,
+    car,
+    OfferBlockComponent,
+    OfferRequestButtonWrapper,
+    offerBlockProps,
+    isOpenDetails,
+    onToggleDetailsClick,
+    activeTab: modifeActiveTab
+  };
+
+  const financingConfig = {
+    ...mainConfig,
+    config: _get(config, 'financing', {}),
+    titleKey: 'financingDetails',
+    prefixPrice: t('leasing.prefixPrice'),
+    titleDetails: t('leasing.financingDetalis'),
+    postfix: '3',
+    descriptionDetails: t('leasing.financingDescription'),
+    priceTabActiveIndex: 0
+  };
+
+  const leasingConfig = {
+    ...mainConfig,
+    config: _get(config, 'leasing', {}),
+    prefixPrice: t('leasing.prefixPrice'),
+    titleKey: 'leasingDetails',
+    postfix: '1,3',
+    titleDetails: t('leasing.leasingDetalis'),
+    descriptionDetails: t('leasing.leasingDescription'),
+    priceTabActiveIndex: 1
+  };
+
+  const tabsTitles = [
+    {
+      title: t('vehicleProps:title.financing'),
+      children: <PanelConfig {...financingConfig} />
+    },
+    {
+      title: t('vehicleProps:title.leasing'),
+      children: <PanelConfig { ...leasingConfig} />,
+      isDisable: !_get(config, 'leasing.isActive', false)
+    },
+    {
+      title: t('vehicleProps:title.abo'),
+      isDisable: true
+    }
+  ];
+
+  const tabsProps = {
+    tabsTitles,
+    onTabPriceSelect: setActiveTab,
+    priceTabActiveIndex: modifeActiveTab
+  };
+
+  return (
+    <div className={styles.offerDetailedBlock}>
+      <TabsComponent {...tabsProps} />
+    </div>
+  );
+};
+
+OfferDetailedSection.defaultProps = {
+  t: (phrase: string) => _get(offerTranslate(), phrase.replace(':', '.'), phrase)
+};
+
+export default React.memo(OfferDetailedSection, (props, nextProps) => { // shouldComponentUpdate
+  const {
+    activeTab, t,
+    financing: { monthlyInstallment, annualMileage, withFinalInstallment },
+    leasing: { monthlyInstallment: lMonthlyInstallment } } = props;
+
+  return t                    === nextProps.t
+    && activeTab              === nextProps.activeTab
+    && monthlyInstallment     === nextProps.financing.monthlyInstallment
+    && annualMileage          === nextProps.financing.annualMileage
+    && lMonthlyInstallment    === nextProps.leasing.monthlyInstallment
+    && withFinalInstallment   === nextProps.financing.withFinalInstallment;
+});

package/compat/OfferDetailedSection/partials/PanelConfig.styl

@@ -0,0 +1,132 @@
+@import '../../legacy-theme/mixins.styl'
+
+.flexRow
+  display: flex
+
+.slidersBlock
+  width: 100%
+  position relative
+
+  +media-phone-up()
+    max-width: 336px;
+    padding-right: 14px;
+    &::after
+      content: '';
+      position: absolute;
+      z-index: 2;
+      right: 0;
+      top: 0;
+      width: 1px;
+      height: 100%
+      background-color $grey-5f;
+ 
+  [class^='OfferCheckboxGroup__labelContent']
+    @media (min-width: 990px) and (max-width: 1073px)
+      max-width: 230px   
+
+.wrapConfigDetails
+  box-sizing: border-box
+  width: 100%;
+
+  +media-phone-up()
+    padding-left: 16px
+    padding-bottom: 15px
+
+.wrapConfigDetailsMobile
+  margin: 0
+  width: 100%
+  border-radius: 0
+  padding-bottom: 12px;
+  +media-tablet-landscape-up()
+    padding: 10px 0
+
+.detailsHeaderWrap
+  display flex
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px
+
+.detailsHeader
+  font-weight: bold
+  font-size: 14px
+  line-height: 16px;
+  color: rgba(#000 83%);
+  display block
+
+.detailsSubHeader
+  font-size: 10px
+  color: rgba(0, 0, 0, 0.63);
+
+.detailsPrice
+  color: $lightGreen;
+  font-weight bold
+  font-size: 30px
+  display flex
+  align-items: flex-start;
+  line-height: 1;
+
+.detailsUnit
+  color: $lightGreen;
+  font-weight bold
+  font-size: 16px
+  padding-top: 2px;
+
+.borderLine
+  width: 100%
+  height: 1px;
+  border: 0;
+  border-top: 1px solid $grey-f5;
+  margin-top: 12px
+
+.borderLineMargin8
+  composes: borderLine
+  margin: 8px 0 8px 0
+
+.configItem
+  display: flex;
+  justify-content: space-between;
+  color: rgba(#000, .63);
+  font-size: 11px
+  margin-top: 12px
+
+.configItemNoMarginTop
+  composes: configItem
+  margin-top: 0
+
+.slidersBlockDescription
+  font-size: 12px
+  margin-bottom: 4px
+  text-align: justify
+  color: rgba(#000, 63%);
+
+.controlsContainerMain
+  margin-top: 10px;
+
+.toggleDetails
+  font-size: 14px;
+  color: rgba(51, 51, 51, 0.83);
+  height: 46px
+  display flex
+  margin-top: 20px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+.detailsIcon
+  width: 12px;
+  fill: $skyBlue
+
+.toggleDetailsOpen
+  font-weight: bold;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  & > .detailsIcon
+    transform: rotate(180deg);
+
+.currentPriceWrap
+  display flex
+  align-items: flex-start;
+
+.prefixPrice
+  font-size: 14px;
+  color: $lightGreen;
+  margin-right: 8px;

package/compat/OfferDetailedSection/partials/PanelConfig.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import { Hidden, Visible } from 'react-grid-system';
+import { getFormattedPrice } from '../../../utils/CommonUtils';
+import { IPanelConfigProps } from '../../../types/types';
+import VehicleFormattedPrice from '../../VehicleFormattedPrice/VehicleFormattedPrice';
+import RequestOffer from '../../OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import styles from './PanelConfig.styl';
+import ExpansionPanel from '../../ExpansionPanel/ExpansionPanel';
+
+const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
+  t,
+  car,
+  prefixPrice,
+  OfferRequestButtonWrapper,
+  titleKey,
+  titleDetails,
+  descriptionDetails,
+  priceTabActiveIndex,
+  config,
+  activeTab,
+  OfferBlockComponent,
+  offerBlockProps,
+  postfix,
+  isAlternative
+}) => {
+  const requestOfferProps = {
+    t,
+    car,
+    OfferRequestButtonWrapper,
+    priceTabActiveIndex,
+    isAlternative,
+    controlsClassContainer: styles.controlsContainerMain,
+    onShowOfferDetails: offerBlockProps.onShowOfferDetails
+  };
+
+  const renderConfigDetails = (mobileMode = false) => {
+    const configDetails = Object.keys(config).length !== 0 && config.constructor === Object
+      ? [
+        { name: 'currentSalesPriceExtraCost', unit: ' €' },
+        { name: 'onetimeSpecialPayment', unit: ' €' },
+        { name: 'netLoanAmount', unit: ' €', delimiter: true },
+        { name: 'paymentProtectionInsurance', unit: ' €' },
+        { name: 'paybackPeriod', unit: ` ${t('leasing.month')}`, format: '' },
+        { name: 'finalInstallment', unit: ' €' },
+        { name: 'grossLoanAmount', unit: ' €', delimiter: true },
+        { name: 'grossLoanAmountWithoutFinalInstallment', unit: ' €' },
+        { name: 'nominalInterestRate', unit: ' %', delimiter: true },
+        { name: 'annualPercentageRate', unit: ' %' }
+      ] : [];
+
+    const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
+    return (
+      <div className={wrapperClassName}>
+        <Hidden xs sm md>
+          <div className={styles.detailsHeaderWrap}>
+            <span className={styles.detailsHeader}>{titleDetails}</span>
+            <div className={styles.currentPriceWrap}>
+              {prefixPrice && <span className={styles.prefixPrice}>{prefixPrice}</span>}
+              <VehicleFormattedPrice
+                price={config.monthlyInstallment}
+                numbersAfterDot={0}
+                disableStyles={true}
+                postfix={postfix}
+                className={styles.detailsPrice}
+                unitClassName={styles.detailsUnit}
+              />
+            </div>
+          </div>
+          <hr className={styles.borderLine} />
+        </Hidden>
+        {configDetails.map((item: any) => {
+          const name = item.options ? t(`leasing.${item.name}`, item.options) : t(`leasing.${item.name}`);
+          const format = 'format' in item ? item.format : '$,.2f';
+          const itemClassName = item.delimiter ? styles.configItemNoMarginTop : styles.configItem;
+          return (
+            <React.Fragment key={item.name}>
+              {item.delimiter ? <hr className={styles.borderLineMargin8} /> : null}
+              <div className={itemClassName}>
+                <span>{name}</span>
+                <span>{`${getFormattedPrice(config[item.name], format)} ${item.unit}`}</span>
+              </div>
+            </React.Fragment>
+          );
+        })}
+        <Hidden xs sm md>
+          <RequestOffer {...requestOfferProps} />
+        </Hidden>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.flexRow}>
+        <div className={styles.slidersBlock}>
+          {descriptionDetails && <div className={styles.slidersBlockDescription}>{descriptionDetails}</div>}
+          <Hidden xs sm md>
+            <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />
+          </Hidden>
+        </div>
+        <Hidden xs sm md>
+          {renderConfigDetails()}
+        </Hidden>
+      </div>
+      <Visible xs sm md>
+      <ExpansionPanel
+        title={t(`sidebar.financingDetalis.${titleKey}`)}
+      >
+        {renderConfigDetails(true)}
+      </ExpansionPanel>
+      </Visible>
+    </>
+  );
+};
+
+PanelConfig.defaultProps = {
+};
+
+export default PanelConfig;

package/compat/OfferPanel/AboAccordion/AboAccordion.styl

@@ -0,0 +1,25 @@
+@import '../../legacy-theme/mixins.styl'
+    
+.blockTitle
+  color: $skyBlue
+  font-size: 12px
+  font-weight: 700
+  padding: 10px 0
+
+.margin
+	margin-left: 10px
+
+.optionsWrapper
+  display: block
+
+.optionItem
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-top: 12px
+
+.faqItem
+  font-size: 12px
+  display: block
+  color: $skyBlue
+  margin-top: 15px

package/compat/OfferPanel/AboAccordion/AboAccordion.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+// import { makeStyles } from '@mui/styles';
+// import {
+//   Accordion, AccordionDetails, AccordionSummary, Typography, SvgIcon, Divider
+// } from '@mui/material';
+
+// import { FIFTEEN } from '../../../constants/core';
+// import SvgArrowDownBlue from '@bytebrand/fe-ui-core-autobahn/iconsvg/SVG/common/ArrowDownBlue';
+// import Tooltip from '../../Tooltip/Tooltip';
+// import OfferCheckboxGroup from '../OfferCheckboxGroup/OfferCheckboxGroup';
+// import AboColorOptions from './AboColorOptions/AboColorOptions';
+// import AboIncludedServices from './AboIncludedServices/AboIncludedServices';
+// import AboFaq from './AboFaq/AboFaq';
+// import styles from './AboAccordion.styl';
+
+export interface IAboAccordion {
+  priceTabIndex?: number;
+  additionalService?: any;
+  isOfferDetailedTabs?: boolean;
+  isOfferDetailsAbo?: boolean;
+  isOpeningAboModal?: boolean;
+  transferInstallments?: any;
+  t?: (phrase: string, config?: any) => string;
+  onAboFaqClick?: (index: number) => void;
+}
+// const useStyles = makeStyles(theme => ({
+//   root: { width: '100%', '&. MuiAccordion-root:before': { position: 'relative' } },
+//   heading: {
+//     fontSize: theme.typography.pxToRem(FIFTEEN),
+//     flexShrink: 0
+//   },
+//   hideBorder: {
+//     '&.MuiPaper-elevation1': { boxShadow: 'none', margin: 0 },
+//     '& .MuiAccordionSummary-root': { padding: 0, minHeight: 0 },
+//     '& .MuiAccordionSummary-content': { margin: 0, display: 'block' },
+//     '& .MuiAccordionDetails-root': { padding: 0 },
+//     '& .MuiTypography-body1': { width: '100%', fontSize: '12px' },
+//     '&.Mui-expanded:first-child': { marginTop: '11px' }
+//   },
+//   details: {
+//     '&.MuiAccordionDetails-root': { marginBottom: '11px', display: 'block' }
+//   },
+//   summary: {
+//     '&.MuiAccordionSummary-root': { padding: 0 },
+//     '&.checkboxWrapped': { margin: 0 }
+//   }
+// }));
+
+const AboAccordion = (
+//   {
+//   additionalService,
+//   priceTabIndex,
+//   transferInstallments,
+//   t,
+//   onAboFaqClick,
+//   isOfferDetailsAbo = false,
+//   isOfferDetailedTabs = false,
+//   isOpeningAboModal = false
+// }
+) => {
+  return <div></div>;
+  // // const classes = useStyles();
+  // const [expanded, setExpanded] = useState('');
+
+  // const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
+  //   setExpanded(isExpanded ? panel : '');
+  // };
+  // const renderAccordionSummary = (summaryName: string) => (
+  //   <h3 className={styles.blockTitle}>
+  //     {summaryName}
+  //     <Tooltip positionX='left' tooltipClassName={styles.margin} description={t('modals:financing.homeTooltip')} iconName='InfoTransparent' />
+  //   </h3>
+  // );
+  // const isAboAccordionExpanded0 = expanded === 'panel0';
+  // const isAboAccordionExpanded1 = expanded === 'panel1';
+  // const aboAccordionOptions = [
+  //   {
+  //     summary: isAboAccordionExpanded0 || isOfferDetailedTabs
+  //       ? renderAccordionSummary('Fahrzeuganlieferung')
+  //       : <OfferCheckboxGroup {...{ transferInstallments, additionalService, isAboAccordionExpanded0, priceTabIndex }} />,
+  //     details: <OfferCheckboxGroup   {...{ transferInstallments, additionalService, priceTabIndex }} />
+  //   }, {
+  //     summary: isAboAccordionExpanded1 || isOfferDetailedTabs
+  //       ? renderAccordionSummary('Wunschoptionen')
+  //       : <AboColorOptions desiredColor={t('modals:financing.desiredColor')} isAboAccordionExpanded1={isAboAccordionExpanded1} />,
+  //     details: <AboColorOptions desiredColor={t('modals:financing.desiredColor')} />
+  //   }, {
+  //     summary: renderAccordionSummary('Inklusivleistungen im Monatspreis'),
+  //     details: <AboIncludedServices isOfferDetailsAbo={isOfferDetailsAbo} />
+  //   }, {
+  //     summary: renderAccordionSummary('FAQ'),
+  //     details: <AboFaq onAboFaqClick={onAboFaqClick} />
+  //   }
+  // ];
+
+  // return (
+  //   <div className={classes.root}>
+  //     {aboAccordionOptions.map((option: any, index: number) => {
+  //       if ((isOfferDetailsAbo && index < 2) || (isOfferDetailedTabs && index > 1) || (isOpeningAboModal && index > 1)) return;
+  //       return (
+  //         <Fragment key={index}>
+  //           {(!!index && !isOpeningAboModal) && <Divider light />}
+  //           <Accordion
+  //             className={classes.hideBorder}
+  //             expanded={expanded === `panel${index}` || isOfferDetailedTabs || isOfferDetailsAbo || isOpeningAboModal}
+  //             onChange={handleChange(`panel${index}`)}>
+  //             {!isOpeningAboModal &&
+  //               <AccordionSummary
+  //                 className={classes.summary}
+  //                 expandIcon={(!isOfferDetailedTabs && !isOfferDetailsAbo && !isOpeningAboModal) && <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' />}
+  //                 aria-controls={`panel${index}bh-content`}
+  //                 id={`panel${index}bh-header`}>
+  //                 <Typography className={classes.heading} component={'div'}>{option.summary}</Typography>
+  //               </AccordionSummary>
+  //             }
+  //             <AccordionDetails className={classes.details}>
+  //               <Typography component={'div'}>{option.details}</Typography>
+  //             </AccordionDetails>
+  //           </Accordion >
+  //         </Fragment>
+  //       );
+  //     }
+  //     )}
+  //   </div >
+  // );
+};
+
+export default AboAccordion;

package/compat/OfferPanel/AboAccordion/AboColorOptions/AboColorOptions.styl

@@ -0,0 +1,12 @@
+.checkboxesWrapper
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.checkboxFlex 
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.multiColored
+  display: flex

package/compat/OfferPanel/AboAccordion/AboColorOptions/AboColorOptions.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { aboColorOptions } from '../../../../constants/core';
+import Radio from '../../../Radio/Radio';
+import RadioGroup from '../../../Radio/RadioGroup';
+
+import styles from './AboColorOptions.styl';
+
+interface IAboColorOptions {
+  isAboAccordionExpanded1?: boolean;
+  desiredColor?: string;
+}
+
+const AboColorOptions: React.FC<IAboColorOptions> = ({ desiredColor, isAboAccordionExpanded1 = true }) => {
+  const [aboColor, setAboColor] = useState(aboColorOptions[0]);
+  const onChangeAboColor = (event: any) => {
+    setAboColor(event.target.value);
+  };
+  return (
+    <div className={styles.checkboxesWrapper}>
+      <span>
+        {desiredColor}
+      </span>
+      <span className={styles.checkboxFlex}>
+        <span>+345 €</span>
+        {isAboAccordionExpanded1 && <RadioGroup containerClassName={styles.multiColored} onChange={onChangeAboColor} value={aboColor} name='colors'>
+          {aboColorOptions.map((color, index) =>
+            <Radio squareRadioClassname='squareRadio' key={index} value={color} color={color} fill={index === 2 ? 'blue' : 'white'} />
+          )}
+        </RadioGroup>}
+      </span>
+    </div>
+  );
+};
+
+export default AboColorOptions;

package/compat/OfferPanel/AboAccordion/AboFaq/AboFaq.styl

@@ -0,0 +1,21 @@
+@import '../../../legacy-theme/theme.styl'
+
+.checkboxesWrapper
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-bottom: 7px
+  margin-top: 16px
+
+.checkboxFlex 
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.multiColored
+  display: flex
+
+.faqItem 
+  display: block
+  margin-top: 15px
+  color: $skyBlue

package/compat/OfferPanel/AboAccordion/AboFaq/AboFaq.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { aboFaq } from '../../../../constants/core';
+import styles from './AboFaq.styl';
+
+interface IAboFaq {
+  onAboFaqClick?: (index: number) => void;
+}
+
+const AboFaq: FC<IAboFaq> = ({ onAboFaqClick }) => {
+  return (
+    <>
+      {aboFaq.map((item, index) =>
+        <span
+          className={styles.faqItem}
+          onClick={() => onAboFaqClick(index)}
+          key={item}
+        >
+          {item}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default AboFaq;

package/compat/OfferPanel/AboAccordion/AboIncludedServices/AboIncludedServices.styl

@@ -0,0 +1,14 @@
+.optionsWrapper
+  display: block
+
+.optionItem
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-top: 12px
+
+.optionItemCenter
+  justify-content: start
+
+.optionText
+  margin-left: 10px

package/compat/OfferPanel/AboAccordion/AboIncludedServices/AboIncludedServices.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { aboIncludedServices } from '../../../../constants/core';
+import IconSVG from '../../../../iconsvg/IconSVG';
+
+import styles from './AboIncludedServices.styl';
+
+const AboIncludedServices = ({ isOfferDetailsAbo = false }) => {
+
+  return (
+    <span className={styles.optionsWrapper}>
+      {aboIncludedServices.map((service, index) => (
+        <span key={index}>
+          {/* {isMobileOnly ?
+            <span className={styles.optionItemMobile}>
+              <span><IconSVG name='doubleDone' /></span>
+              <span className={styles.optionItemTextMobile}>{service}</span>
+            </span>
+            : */}
+          {
+            isOfferDetailsAbo ?
+              <span className={`${styles.optionItemCenter} ${styles.optionItem}`}>
+                <span><IconSVG name='doubleDone' /></span>
+                <span className={styles.optionText}>{service}</span>
+              </span>
+              :
+              <span className={styles.optionItem}>
+                <span>{service}</span>
+                <span><IconSVG name='done' /></span>
+              </span>
+          }
+          {/* } */}
+        </span>
+      ))
+      }
+    </span>
+  );
+};
+
+export default AboIncludedServices;