@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/OfferPanel/MuiOfferPeriod/MuiOfferPeriod.tsx

@@ -0,0 +1,42 @@
+// md3 ADAPTER (not a verbatim legacy move): the MUI ToggleButtonGroup payback-
+// period selector is re-skinned on the md3 kit `Segmented` control. Same
+// contract ({paybackPeriod, periods, t, onChange('paybackPeriod', months)}),
+// same header, so OfferPanel and the checkout CheckoutOfferPanel only re-skin.
+
+import React, { FC } from 'react';
+import _get from 'lodash/get';
+
+import styles from '../OfferPanel.styl';
+import { modalsTranslate } from '../../../locales/legacy/data';
+import Segmented from '../../../ui/Segmented';
+
+export interface IOfferPeriod {
+  paybackPeriod: number;
+  periods: number[];
+  t: (phrase: string, config?: any) => string;
+  onChange: (key: string, value: number) => void;
+}
+
+const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
+  return (
+    <>
+      <h3 className={styles.headerPeriod}>
+        {t('modals:financing.runningTime')}
+        <span className={styles.headerSub}>{t('modals:financing.runningTimeSub')}</span>
+      </h3>
+      <div className={styles.duration}>
+        <Segmented
+          options={periods.map((period) => [String(period), String(period)] as const)}
+          value={String(paybackPeriod)}
+          onChange={(value: string) => onChange('paybackPeriod', +value)}
+        />
+      </div>
+    </>
+  );
+};
+
+OfferPeriod.defaultProps = {
+  t: (phrase: string) => _get(modalsTranslate(), phrase.replace(':', '.'), phrase)
+};
+
+export default OfferPeriod;

package/compat/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import styles from './OfferCheckboxGroup.styl';
+import classnames from 'classnames';
+import CheckboxMaterial from '../../MdCheckbox/MdCheckbox';
+import MaterialTooltip from '../../MdTooltip/MdTooltip';
+
+export interface ICheckboxProps {
+  // Native checkbox props
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  reversed?: boolean;
+  isAboAccordionExpanded0?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+
+  // Custom checkbox props
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  tooltipDescription?: React.ReactNode;
+  checkboxPriceValue: any;
+  tooltipPosX?: string;
+  error?: boolean;
+  description?: string;
+  label?: JSX.Element | string | null;
+}
+
+class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
+  static defaultProps = {
+    name: '',
+    value: '',
+    checked: false,
+    disabled: false,
+    reversed: false,
+
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+
+    containerClassName: '',
+    checkboxClassName: '',
+    labelClassName: '',
+    tooltipDescription: '',
+    checkboxPriceValue: '',
+    tooltipPosX: '',
+
+    error: false,
+    label: false
+  };
+
+  input: HTMLInputElement = null;
+
+  setInputRef = (ref: HTMLInputElement) => {
+    this.input = ref;
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { disabled, value } = this.props;
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+    if (!!event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  onKeyPress = (event: any) => {
+    const { disabled } = this.props;
+    const checked = !this.input.checked;
+    const value = this.input.value;
+
+    if (disabled) {
+      return false;
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  render() {
+    const {
+      containerClassName, labelClassName, reversed,
+      checked, disabled, error, label, tooltipDescription, labelPlacement,
+      description
+    } = this.props;
+
+    const containerClasses = classnames(
+      styles.container,
+      containerClassName,
+      { [styles.checked]: checked },
+      { [styles.error]: error },
+      { [styles.disabled]: disabled }
+    );
+
+    const labelClasses = classnames(
+      styles.label,
+      labelClassName
+    );
+
+    const wrapInputClasses = classnames(
+      styles.wrapInput,
+      { [styles.reversed]: reversed }
+    );
+    const checkboxProps = {
+      label,
+      checked,
+      labelPlacement,
+      disabled,
+      onChange: this.onChange
+    };
+    return (
+      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+        <label className={labelClasses}>
+          <div className={wrapInputClasses}>
+            {/* Visual representation of the checkbox */}
+            {/* HidePlus class for OrderOverview component */}
+            <CheckboxMaterial {...checkboxProps} />
+
+          </div>
+          {description ? (
+            <span className={styles.labelContent}>
+              {description}
+              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+            </span>
+          ) : false}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default CheckboxContainer;

package/compat/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -0,0 +1,144 @@
+@import '../../legacy-theme/mixins.styl'
+
+.container
+  position: relative
+  display: inline-block
+  vertical-align: middle
+  outline: none !important
+
+.wrapInput
+  display flex;
+
+.wrapInput.reversed
+  order: 2;
+  .checkbox
+    margin-left: 5px;
+    margin-right: 0;
+
+.container:focus
+  outline: 2px auto lighten($primary, 80%)
+  outline-offset: 2px
+
+.container.checked
+  .checkbox
+    border-color: $primary
+
+.container.disabled
+  .checkbox, .label
+    cursor: not-allowed
+
+  .label
+    color: lighten(black, 40%)
+
+  .checkbox
+    background-color: $grey-e
+    border-color: $grey-d !important
+
+.container.error
+  .checkbox
+    border-color: $darkRed !important
+
+.checkbox
+  background-color: white
+  flex-shrink: 0
+  width: 20px
+  height: 20px
+
+  border-width: 1px
+  border-style: solid
+  border-color: $grey-d
+  border-radius: 3px
+  vertical-align: middle
+
+  box-sizing: border-box
+  cursor: pointer
+  transition: border 0.2s ease-in-out
+
+.checkbox:hover,
+.container:hover .checkbox
+  border-color: $primary
+
+.checkbox.withLabel
+  margin-right: 10px
+
+.label
+  display: flex
+  flex-direction: row
+  align-items: center
+  position: relative
+  font-size: 14px
+  cursor: pointer
+  justify-content: space-between;
+
+.labelContent
+  flex: 1 1 auto
+  color: $grey-3;
+    
+.icon
+  display: block
+  width: 18px
+  height: 18px
+  padding: 3px
+  box-sizing: border-box
+
+.checkBlueIcon
+  display: block
+  width: 18px !important
+  height: auto
+  padding: 3px
+  box-sizing: border-box
+  fill: $primary
+
+/* styles for the hidden input */
+.hiddenInput
+  position: absolute
+  left: 0
+  right: 0
+  display: inline-block
+  width: 0
+  height: 0
+  visibility: hidden
+  opacity: 0
+  margin: 0
+  padding: 0
+
+.tooltipCheckbox
+  display inline-flex
+  margin-left: 3px;
+
+  svg
+    max-width: inherit;
+    max-height: inherit;
+    width: inherit !important
+
+  :global
+    .MuiTooltip-tooltip
+      max-width: 360px !important
+      font-size: 11px
+      line-height: 1.45
+      color: #4C4E64AD
+      text-align: left
+
+      b
+        display: block
+        margin-bottom: 6px
+        font-size: 12px
+        color: #1a1a1a
+
+      p
+        margin: 0 0 6px
+
+      ul
+        margin: 4px 0 0
+        padding-left: 16px
+
+      li
+        margin-bottom: 3px
+
+.checkboxPrice
+  align-self: center;
+  color: rgba(#000000, .63);
+  font-size: 12px;
+
+.hidePlus
+  display: inline-block

package/compat/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from '../OfferPanel.styl';
+import { THREE } from '../../../constants/core';
+import CheckboxContainer from './CheckboxContainer';
+
+interface IOfferPeriod {
+  priceTabIndex?: number;
+  isAboAccordionExpanded0?: boolean;
+  additionalService?: any;
+  transferInstallments?: any;
+}
+
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, isAboAccordionExpanded0 = true, priceTabIndex }) => {
+  const offerGroupClass = classNames(styles.checkboxWrapped, { [styles.checkBoxGroup]: priceTabIndex !== THREE });
+  return (
+    <div className={offerGroupClass}>
+      {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
+    </div>
+  );
+};
+
+export default OfferCheckboxGroup;

package/compat/OfferPanel/OfferPanel.styl

@@ -0,0 +1,194 @@
+@import '../legacy-theme/mixins.styl'
+
+.OfferPanel
+  font-family: $font-style-arial
+  font-size: 14px
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: span 2
+  grid-template-areas:
+    'financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper'\
+    'rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper'\
+    'offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper'\
+    'aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper'\
+    'offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup'\
+
+
+
+.financingCheckboxWrapper
+  grid-area: financingCheckboxWrapper
+  margin-top:  20px
+  [class*='container']
+    width: 100%
+  [class*='MuiCheckbox-root']
+    padding: 0
+
+.rangeGroupWrapper
+  grid-area: rangeGroupWrapper
+
+.offerPeriodWrapper
+  grid-area: offerPeriodWrapper
+
+.aboAccordionWrapper
+  grid-area: aboAccordionWrapper
+
+.offerCheckboxGroup
+  grid-area: offerCheckboxGroup
+  margin-top: 20px
+
+.header
+  font-size: 14px
+  color: $grey-3;
+  font-weight normal;
+  margin: 0 0 15px 0;
+
+.sliderValues
+  .header
+    color: #000000d4
+
+.headerSub
+  font-size: 10px
+  font-weight: normal
+  margin-left: 5px
+
+.headerPeriod
+  @extends .header
+  margin-top: 20px;
+  margin-bottom: 12px;
+  color: #000000d4
+
+.radioButton
+  width: 10px
+  height: 10px
+  border: 1px solid $grey-d
+  border-radius: 50%
+  background-color: white
+  margin-right: 5px
+  position: relative
+  flex-shrink: 0
+  display: flex
+
+.sliderValues
+  display: flex
+  justify-content: space-between
+  font-size: 12px
+  color: $primary
+  margin-top: 8px;
+  font-weight: bold;
+  margin-top: 20px
+
+.sliderValue
+  font-size: 12px
+  color: $primary;
+  font-weight: bold;
+
+.duration
+  display: flex
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px $grey-f5
+
+  [class*='MuiToggleButtonGroup-root']
+    width: 100%
+
+  label
+    flex: 1
+    font-size: 14px
+    cursor: pointer
+    border-right: none
+    user-select: none
+    text-align: center
+    position: relative
+    min-height: 40px
+    & + label
+      box-shadow: inset 1px 0 0 0 $grey-f5
+    &:before
+      content: ""
+      display: block
+      padding-top: 72%
+    &.checked
+      color: white
+      background-color: $primary
+      font-weight: bold
+      box-shadow: inset 0 0 0 1px $primary
+    &.disabled
+      background-color: $grey-d
+      border-color: $grey-d
+      color: $grey-7
+      cursor: not-allowed
+    & span
+      position: absolute
+      left: 0
+      right: 0
+      top: 0
+      bottom: 0
+      display: flex
+      justify-content: center
+      align-items: center
+    &.alternativeChecked
+      background-color: $alternative
+      box-shadow: inset 0 0 0 1px $alternative
+
+.visuallyHidden
+  position: absolute
+  width: 1px
+  heigth: 1px
+  overflow: hidden
+  clip: rect(0 0 0 0)
+
+.range
+  margin: 0 10px
+
+.checkboxContainer
+  display: block;
+  &:focus
+    outline: 0;
+
+.labelText
+  color: $grey-3;
+
+.checkboxSquare
+  border-color: $primary;
+  border-radius: 2px;
+
+  +media-phone-up()
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    border-color: $primary;
+    svg
+      width: 19px !important;
+  
+.checkboxWrapped
+  [class*='container'] + [class*='container']
+    margin-top: 10px;
+  [class*='MuiFormControlLabel-root']
+    height: 20px
+    min-height: 0
+    margin-left:0
+  .labelText
+    font-size: 12px;
+    font-weight: normal;
+
+  [class*='labelContent']
+    font-size: 12px
+
+
+.checkBoxGroup
+  [class*='container']
+    width: 100%
+
+.periods
+  display: grid
+  grid-auto-columns: auto
+
+.financingCheckboxWrapper
+  [class*='MuiFormControlLabel-root']
+    margin: 0
+    justify-content: space-between
+    width: 100%
+
+[class*='MuiIconButton-root']
+  padding:5px!important

package/compat/OfferPanel/OfferPanel.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './OfferPanel.styl';
+import { THREE } from '../../constants/core';
+import RangeGroup, { IRangeGroup } from './RangeGroup/RangeGroup';
+import { IOfferPeriod } from './OfferPeriod/OfferPeriod';
+import MuiOfferPeriod from './MuiOfferPeriod/MuiOfferPeriod';
+import OfferCheckboxGroup from './OfferCheckboxGroup/OfferCheckboxGroup';
+import AboAccordion, { IAboAccordion } from './AboAccordion/AboAccordion';
+import CheckboxMaterial from '../MdCheckbox/MdCheckbox';
+interface IFinalAdvice {
+  checked: boolean;
+  label: string;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
+  reversed?: boolean;
+  value: string;
+}
+
+interface IFinancingPanel {
+  priceTabIndex: number;
+  aboCenterPanel?: boolean;
+  isMobileOnly?: boolean;
+  isOfferDetailedTabs?: boolean;
+  isOfferDetailsAbo?: boolean;
+  isOpeningAboModal?: boolean;
+  className?: string;
+  t?: (phrase: string, config?: any) => string;
+  onChange: (key: string, value: boolean|number) => void;
+  onAboFaqClick?: (index: number) => void;
+  checkoutClassName?: string;
+  finalAdvice: IFinalAdvice;
+  additionalService: boolean;
+  transferInstallments: boolean;
+  aboAccordionProps: IAboAccordion;
+  rangeGroupProps: IRangeGroup;
+  offerPeriodProps: IOfferPeriod;
+}
+
+const OfferPanel: FC<IFinancingPanel> = ({
+  priceTabIndex,
+  isOfferDetailsAbo,
+  finalAdvice,
+  additionalService,
+  transferInstallments,
+  rangeGroupProps,
+  offerPeriodProps,
+  // aboAccordionProps,
+  className
+}) => {
+  return (
+    <form className={classNames(styles.OfferPanel, className)}>
+      {priceTabIndex === THREE && isOfferDetailsAbo
+        ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
+        : <>
+          {!priceTabIndex &&
+            <div className={styles.financingCheckboxWrapper}>
+              <CheckboxMaterial { ...finalAdvice } />
+            </div>
+          }
+          {priceTabIndex !== 2 &&
+            <div className={styles.rangeGroupWrapper}>
+              <RangeGroup {...rangeGroupProps} />
+            </div>
+          }
+
+          {priceTabIndex !== 2 &&
+            <div className={styles.offerPeriodWrapper}>
+              <MuiOfferPeriod {...offerPeriodProps} />
+            </div>
+          }
+
+          {priceTabIndex === THREE
+            ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
+        </>
+      }
+    </form>
+  );
+};
+
+export default OfferPanel;

package/compat/OfferPanel/OfferPeriod/OfferPeriod.styl

@@ -0,0 +1,25 @@
+.periods
+  display: grid
+  grid-template-columns: repeat( auto-fit, minmax(20px, 1fr) );
+  [class*='MuiFormControlLabel-root']
+    margin: 0
+    box-shadow: inset 0px 0px 0px 1px #f5f5f5;
+    min-height: 40px;
+  [class*='MuiCheckbox-root']
+    padding: 0
+    color: #333333;
+
+.period
+  width: 100%
+
+.header
+  font-size: 14px
+  color: $grey-3;
+  font-weight normal;
+  margin: 0 0 15px 0;
+
+.headerPeriod
+  @extends .header
+  margin-top: 20px;
+  margin-bottom: 12px;
+  color: #000000d4

package/compat/OfferPanel/OfferPeriod/OfferPeriod.tsx

@@ -0,0 +1,45 @@
+import React, { FC, ChangeEvent } from 'react';
+import _get from 'lodash/get';
+import styles from './OfferPeriod.styl';
+import { modalsTranslate } from '../../../locales/legacy/data';
+import CheckboxMaterial from '../../MdCheckbox/MdCheckbox';
+export interface IOfferPeriod {
+  paybackPeriod: number;
+  periods: number[];
+  t: (phrase: string, config?: any) => string;
+  onChange: (key: string, value: number) => void;
+}
+
+const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
+
+  return (
+    <>
+      <h3 className={styles.headerPeriod}>
+        {t('modals:financing.runningTime')}
+        <span className={styles.headerSub}>{t('modals:financing.runningTimeSub')}</span>
+      </h3>
+      <div className={styles.periods}>
+        {periods.map((period: number) => {
+          const isChecked = paybackPeriod === period;
+          const inputProps = {
+            type: 'period',
+            name: 'duration',
+            value: period,
+            checked: isChecked,
+            onChange: (e: ChangeEvent<HTMLInputElement>) => onChange('paybackPeriod', Number(e.target.value)),
+            className: styles.period
+          };
+          return (
+            <CheckboxMaterial {...inputProps}/>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+OfferPeriod.defaultProps = {
+  t: (phrase: string) => _get(modalsTranslate(), phrase.replace(':', '.'), phrase)
+};
+
+export default OfferPeriod;