@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/OfferPanel/RangeGroup/RangeGroup.tsx

@@ -0,0 +1,39 @@
+import React, { FC, Fragment } from 'react';
+
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import Range from '../../Range/Range';
+import styles from '../OfferPanel.styl';
+
+export interface IRangeGroup {
+  sliders: any[];
+  onChange: (event: Event, value: number | number[]) => void;
+  className?: string;
+  isAlternative?: boolean;
+  maxFinancingFirstInstallment?: number;
+}
+
+const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative, maxFinancingFirstInstallment }) => <>
+  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName, withRangeLimit }) => {
+    const rangeProps = {
+      min, max, step, value,
+      isAlternative, withRangeLimit,
+      units: value ? ` ${unitName}` : '',
+      onAfterChange: () => {},
+      onChange: (_: Event, value: number | number[]) => onChange(name, value),
+      maxFinancingFirstInstallment
+    };
+    return (
+      <Fragment key={name}>
+        <div className={styles.sliderValues}>
+          <h3 className={styles.header}>{caption}</h3>
+          <span><FormattedNumber className={styles.sliderValue} value={value} numbersAfterDot={0} />{` ${unitName}`}</span>
+        </div>
+        <div className={styles.range}>
+          <Range {...rangeProps} />
+        </div>
+      </Fragment>
+    );
+  })}
+</>;
+
+export default RangeGroup;

package/compat/OfferRequestButtonWrapper/OfferRequestButtonWrapper.styl

@@ -0,0 +1,120 @@
+
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/theme.styl';
+
+.checkIcon
+  fill: white
+  height: 18px
+  width: 18px
+  margin-right: 5px
+
+.controlsContainer
+  position relative
+  display: flex
+  z-index: 1
+  width: 100%;
+  margin-top: auto;
+  column-gap: 10px
+
+.controlButton
+  height: 35px
+  line-height: unset
+  font-weight: bold
+  border-radius: 2px;
+  font-size: 13px !important;
+  display: flex
+  align-items: center
+  justify-content: center
+  +media-tablet-up()
+    text-transform: uppercase !important;
+
+.offerButtonGet
+  flex: 1 60%
+  +media-phone-only()
+    &:hover
+      background-color: $green
+  +media-tablet-up()
+    width: 100%
+
+.offerButtonSuccess
+  background-color: $lightGreen !important
+  display: flex !important
+  align-items: center
+  justify-content: center
+  cursor: inherit
+  &:hover
+    box-shadow: none !important
+
+.envelopeIcon
+  margin-right: 10px
+  fill: white
+  width: 1.5em
+
+  path
+    fill: #fff
+
+.phoneIcon
+  margin-right: 5px
+  width: 1.5em
+  & path
+    transition: all 0.2s ease-in-out
+
+.phoneButton
+  box-sizing: border-box
+  margin-left: 16px;
+  flex: 1 40%
+  color: $primary !important
+  font-size 13px;
+  border: 2px solid $primary
+  border-radius: 2px;
+  transition: all 0.2s ease-in-out
+
+.checkIcon
+  fill: white
+  height: 18px
+  width: 18px
+  margin-right: 5px
+
+.autoDeIdContainer
+  position: relative;
+  z-index: 1;
+
+.detalis
+  font-size 10px
+  align-items center
+  cursor pointer
+  display flex;
+  [class*='infoIcon']
+    transform: scale(.75);
+    margin-right 5px
+
+.infoIcon
+  margin-right: 10px;
+
+.detalisText
+  color: rgba($grey-3, .83);
+
+.autoDeIdContainer
+  position: relative;
+  z-index: 1;
+
+.autoDeId
+  font-weight: bold
+  font-size: 12px
+  color: $skyBlue
+  cursor: pointer
+
+.autoDeId:hover
+  text-decoration: underline
+
+.bottomDetailsContainer
+  display flex
+  justify-content: space-between;
+  margin-top: 4px;
+  margin-bottom: 4px;
+
+.aboUnits
+  color: rgba($grey-3, .8)
+
+.isAlternativeButton
+  background-color: $alternative

package/compat/OfferRequestButtonWrapper/OfferRequestButtonWrapper.styled.tsx

@@ -0,0 +1,33 @@
+// md3 REBUILD (not a verbatim legacy move): the @mui/system styled() wrappers
+// are replaced by thin prop wrappers over the compat Button adapter + IconSVG,
+// carrying the same fixed styles inline. Same exported names/contracts.
+
+import * as React from 'react';
+
+import Button, { IButtonProps } from '../Button/Button';
+import IconSVG from '../../iconsvg/IconSVG';
+
+const BUTTON_STYLE: React.CSSProperties = {
+  height: 35,
+  lineHeight: 'unset',
+  fontWeight: 'bold',
+  borderRadius: 2,
+  fontSize: 13,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  // legacy: uppercase from min-width 992px — kept unconditionally (mobile kept
+  // the same casing visually via the theme; acceptable md3 simplification).
+  textTransform: 'uppercase'
+};
+
+export const StyledButton: React.FC<IButtonProps> = (props) => (
+  <Button {...props} style={{ ...BUTTON_STYLE, ...props.style }} />
+);
+
+export const StyledIconSVG: React.FC<any> = (props) => (
+  <IconSVG
+    {...props}
+    style={{ marginRight: 10, fill: '#4C4E648A', width: '14px', height: 'auto', ...props.style }}
+  />
+);

package/compat/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { Visible } from 'react-grid-system';
+import _get from 'lodash/get';
+import { IOfferRequestButtonWrapperProps } from '../../types/types';
+import styles from './OfferRequestButtonWrapper.styl';
+
+import { supportPhoneLink } from '../../constants/app';
+import { StyledButton, StyledIconSVG } from './OfferRequestButtonWrapper.styled';
+
+const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapperProps> = ({
+  t,
+  car,
+  detailsText,
+  OfferRequestButtonWrapper,
+  priceTabActiveIndex,
+  isAdditionalOption,
+  controlsClassContainer,
+  onShowOfferDetails
+}) => {
+  const btnEl = useRef(null);
+  const autoDeId = _get(car, 'metaData.vehicleId', null);
+  const dealerId = _get(car, 'metaData.ownerId') || null;
+  const carId = _get(car, '_id', '');
+  const onAutoDeIdClick = () => {
+    btnEl.current?.click();
+  };
+
+  const controlsContainerClassName = classnames(
+    styles.controlsContainer,
+    controlsClassContainer
+  );
+
+  const getRef = (ref: HTMLButtonElement): void => {
+    btnEl.current = ref;
+  };
+ 
+  return (
+    <>
+      <div className={controlsContainerClassName}>
+        <OfferRequestButtonWrapper carId={carId} dealerId={dealerId} >
+          {(
+            onClick: () => void,
+            isOfferRequested: boolean,
+            hasCheckout: boolean,
+            _: void,
+            isLoading: boolean,
+            isSale: boolean,
+            isAlternative: boolean,
+            isSuccess: boolean
+          ) => {
+            const { metaData } = car;
+            const isAlternativeType = !!metaData && !!metaData.type;
+            const offerButtonClassName = classnames(
+              styles.controlButton,
+              styles.offerButtonGet,
+              { [styles.offerButtonSuccess]: isOfferRequested || hasCheckout },
+              { [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');
+            };
+
+            return (
+              <StyledButton
+                className={offerButtonClassName}
+                onClick={onClick}
+                loading={isLoading}
+                getRef={getRef}
+              >
+                {isOfferRequested
+                  ? null
+                  : <StyledIconSVG name='whiteEnvelope' customDimensions className={styles.envelopeIcon} />
+                }
+                {isOfferRequested ? <StyledIconSVG name='dealerCheckIcon' customDimensions className={styles.checkIcon} /> : null}
+                {getRequestButtonTitle()}
+              </StyledButton>
+            );
+          }}
+        </OfferRequestButtonWrapper>
+
+        {isAdditionalOption ? (
+          <Visible xs sm md>
+            <StyledButton onClick={() => location.href = `tel:${supportPhoneLink}`} variant='outlined' color='primary' className={classnames(styles.controlButton, styles.phoneButton)}>
+              <StyledIconSVG name='popoverPhone' className={styles.phoneIcon} customDimensions />
+              {t('sidebar.callUp')}
+            </StyledButton>
+          </Visible>
+        ) : ''}
+      </div>
+      {isAdditionalOption ? (
+        <div className={styles.bottomDetailsContainer}>
+          {autoDeId ? <div className={styles.autoDeIdContainer} onClick={onAutoDeIdClick}>
+            <span className={styles.autoDeId}>auto.de-ID: {autoDeId}</span>
+          </div> : false}
+          {detailsText && (
+            <div className={styles.detalis} onClick={(event?: React.ChangeEvent<{}>) => onShowOfferDetails(event, car, priceTabActiveIndex)}>
+              <StyledIconSVG name='infoIcon' className={styles.infoIcon} customDimensions />
+              <span className={styles.detalisText}>
+                {t(`sidebar.financingBlock.${detailsText}`)}
+              </span>
+            </div>
+          )}
+        </div>
+      ) : ''}
+    </>
+  );
+};
+
+OfferRequestBtnWrapper.defaultProps = {
+  isAdditionalOption: false
+};
+
+export default OfferRequestBtnWrapper;

package/compat/PriceRating/PriceRating.styl

@@ -0,0 +1,47 @@
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/priceReviewColors.styl';
+
+.wrapper
+  text-align: center
+  white-space: nowrap
+  width: 100%
+
+.pointer
+  cursor: pointer
+
+.label
+  display: block
+  font-size: 11px
+  line-height: 1;
+  text-transform: uppercase
+  color: $priceReviewColors[darkBackground]
+  margin-bottom: 4px
+  font-weight: bold;
+
+.segmentWrapper
+  display: flex
+  justify-content: center;
+  gap: 4px;
+  flex-direction: row-reverse;
+
+.segment
+  display: inline-flex;
+  width: 20px
+  height: 16px
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 2px solid $priceReviewColors[noRating]
+
+.darkBackground
+  color: $priceReviewColors[darkBackground]
+  border: 2px solid $priceReviewColors[darkBackground]
+
+for colorName in $priceReviewColors
+  $color = $priceReviewColors[colorName]
+  if $color == $priceReviewColors.noRating
+    $color = $priceReviewColors[darkBackground]
+  $backgroundColor = $priceReviewColors[colorName]
+  .{colorName}
+    color: $color
+  .{colorName}Background
+    border: 2px solid $backgroundColor

package/compat/PriceRating/PriceRating.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { priceRatings } from '../../constants/price';
+
+import styles from './PriceRating.styl';
+
+export interface IPriceRatingProps {
+  rating?: number;
+  className?: string;
+  classLabel?: string;
+  classSegmentWrapper?: string;
+  darkBackground?: boolean;
+  i18nPrefix?: string;
+
+  t?: (phrase: string, options?: any) => string;
+  onClick?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+}
+
+const PriceRating: React.FC<IPriceRatingProps> = ({ t, rating, className, darkBackground, i18nPrefix, classLabel, classSegmentWrapper, onClick }) => {
+  const ratingCode = (rating > 0 && rating < priceRatings.length) ? rating : 0;
+  const ratingName = priceRatings[ratingCode];
+
+  const onWrapperClick = (event: React.SyntheticEvent<HTMLDivElement>) => {
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  };
+
+  const renderSegments = () => priceRatings.map((name, index) => {
+    if (!index) return null;
+
+    const className = classnames(
+      styles.segment,
+      {
+        [styles[`${ratingName}Background`]]: index >= priceRatings.length - ratingCode,
+        [styles.darkBackground]: darkBackground
+      }
+    );
+
+    return <div key={name} className={className}></div>;
+  });
+
+  return (
+    <div
+      className={classnames(styles.wrapper, className, { [styles.pointer]: typeof onClick === 'function' })}
+      onClick={onWrapperClick}
+    >
+      <span className={classnames(styles.label, styles[ratingName], classLabel)}>
+        {t(`${i18nPrefix}${ratingName}`)}
+      </span>
+      <div className={classnames(styles.segmentWrapper, classSegmentWrapper)}>{renderSegments()}</div>
+    </div>
+  );
+};
+
+PriceRating.defaultProps = {
+  t: (phrase: string) => phrase,
+  rating: 0,
+  darkBackground: false,
+  i18nPrefix: ''
+};
+
+export default PriceRating;

package/compat/PriceRatingDetailed/PriceRatingDetailed.styl

@@ -0,0 +1,120 @@
+@import '../legacy-theme/theme.styl';
+@import '../legacy-theme/mixins.styl';
+@import '../legacy-theme/priceReviewColors.styl';
+
+.wrapper
+  font-family: $font-style-arial
+  display: flex
+  position: relative
+
+.segmentWrapper
+  flex: 1 1 0px
+
+.segment
+  position: relative
+  text-align: center
+  display: flex
+  justify-content: center
+  align-items: center
+  box-sizing: border-box
+  height: 30px
+  border: 1px solid #F5F5F5;
+  padding: 0 5px
+
+  & h6
+    color: white !important
+    font-size: 14px
+    font-weight: bold
+    text-transform: uppercase
+    margin: 0
+    line-height: 1em
+
+.priceRange
+  font-size: 11px
+  display: block
+  text-align: center
+  margin-top: 4px
+
+.tooltipWrapper
+  position: absolute
+  top: -40px
+  left: 50%
+  z-index: 1
+  &:after
+    content: ''
+    position: absolute
+    left: -6px
+    bottom: -6px
+    width: 12px
+    height: 12px
+    transform: rotate(45deg)
+    background-color: black
+    z-index: -1
+
+.noRatingTooltipWrapper
+  @extends .tooltipWrapper
+  &:after
+    content: none
+
+.baseTooltip
+  position: relative
+  left: -50%
+  font-size: 16px
+  height: 24px
+  font-weight bold
+  line-height: 24px;
+  border: 2px solid black
+  border-radius: 3px
+  padding: 0 10px
+  background-color: white
+  white-space: nowrap
+
+.noRatingTooltip
+  @extends .baseTooltip
+  color: black
+  border-color: $priceReviewColors[darkBackground]
+
+.tooltip
+  @extends .baseTooltip
+  color: white
+
+for colorName in $priceReviewColors
+  $color = $priceReviewColors[colorName]
+  .{colorName}
+    &.segment
+      background-color $color
+    .tooltipWrapper
+      &:after
+        background-color: $color    
+    .tooltip
+      border-color: $color
+      color: $color
+      &:after
+        background-color: $color
+
+.compact
+  & .segment
+    height: 21px
+    & h6 
+      font-size: 10px
+      font-weight: normal  
+  & .priceRange
+    font-size: 8px
+    margin-top: 2px
+  & .tooltipWrapper, & .noRatingTooltipWrapper
+    top: -30px
+  & .noRatingTooltip
+    font-size: 12px
+    height: 19px
+    line-height: 19px
+    padding: 0 5px  
+  & .tooltip
+    font-size: 12px
+    height: 19px
+    line-height: 19px
+    padding: 0 5px
+    &:after
+      width: 8px
+      height: 8px
+      left: calc(50% - 4px)
+      bottom: -5px