@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -1,122 +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;
+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

@@ -1,47 +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
+@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

@@ -1,64 +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;
+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;