@bytebrand/fe-ui-core 4.8.26 → 4.8.28

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

@@ -1,23 +1,23 @@
-import { styled } from '@mui/system';
-import Button from '../../_common/Button/Button';
-import IconSVG from '../../_common/IconSVG/IconSVG';
-
-export const StyledButton = styled(Button)({
-  height: 35,
-  lineHeight: 'unset',
-  fontWeight: 'bold',
-  borderRadius: 2,
-  fontSize: 13,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ['@media all and (min-width: 992px)'] :// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
-    { textTransform: 'uppercase' }
-});
-
-export const StyledIconSVG = styled(IconSVG)({
-  marginRight: 10,
-  fill: '#4C4E648A',
-  width: '14px',
-  height: 'auto'
-});
+import { styled } from '@mui/system';
+import Button from '../../_common/Button/Button';
+import IconSVG from '../../_common/IconSVG/IconSVG';
+
+export const StyledButton = styled(Button)({
+  height: 35,
+  lineHeight: 'unset',
+  fontWeight: 'bold',
+  borderRadius: 2,
+  fontSize: 13,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ['@media all and (min-width: 992px)'] :// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
+    { textTransform: 'uppercase' }
+});
+
+export const StyledIconSVG = styled(IconSVG)({
+  marginRight: 10,
+  fill: '#4C4E648A',
+  width: '14px',
+  height: 'auto'
+});

package/source/components/_common/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 '../../../framework/types/types';
-import styles from './OfferRequestButtonWrapper.styl';
-
-import { supportPhoneLink } from '../../../framework/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 '../../../framework/types/types';
+import styles from './OfferRequestButtonWrapper.styl';
+
+import { supportPhoneLink } from '../../../framework/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/source/components/_common/PropertySelector/PSGroup.story.js

@@ -1,93 +1,93 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PropertySelector from './PropertySelector';
-import PSGroup from './PSGroup';
-
-import styles from './PSGroup.story.styl';
-
-export class PSGroupDefault extends React.Component {
-  state = {
-    value: ['always']
-  };
-  action = action('change');
-
-  onChange = (event, value) => {
-    // value here have to be single string|number or array
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  render() {
-    return (
-      <PSGroup name='availability' behavior='checkbox' value={this.state.value} containerClassName={styles.default} onChange={this.onChange}>
-        <PropertySelector value='1' content='cbd_selector_exterior_color_brown' label='Brown' type='color' />
-        <PropertySelector value='2' content='cbd_selector_exterior_color_blue' label='Blue' type='color' />
-        <PropertySelector value='3' content='cbd_selector_exterior_color_green' label='Green' type='color' disabled={true}  />
-      </PSGroup>
-    );
-  }
-}
-
-export class PSGroupHorizontal extends React.Component {
-  state = {
-    value: ['M_Sport']
-  };
-
-  action = action('change');
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  renderSubModel = (index) => {
-    const models = ['320 | 2.0 | Automatic', '320 | 2.0 | Diesel', '320 | 2.0'];
-
-    return (
-      <div className={styles.equipment}>
-        <div className={styles.column}>
-          <span className={styles.value}>
-            {models[index]}
-          </span>
-        </div>
-        <div className={styles.column}>
-          <span className={styles.title}>
-            Power
-          </span>
-          <span className={styles.value}>
-            184 PS / 138 KW
-          </span>
-        </div>
-        <div className={styles.column}>
-          <span className={styles.title}>
-            Built by
-          </span>
-          <span className={styles.value}>
-            7/2015 – 12/2018
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <PSGroup name='sub_model' behavior='radio' containerClassName={styles.horizontal} childClassName={styles.horizontalChild} value={this.state.value} onChange={this.onChange}>
-        <PropertySelector label={this.renderSubModel(0)} value='M_Sport' />
-        <PropertySelector label={this.renderSubModel(1)} value='M_Sport_Coupe' />
-        <PropertySelector label={this.renderSubModel(2)} value='M_Sport_Diesel' />
-      </PSGroup>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-.add('PSGroup', () => (
-  <div>
-    <p className={styles.text}>Checkbox behavior</p>
-    <PSGroupDefault />
-    <p className={styles.text}>Radio button behavior</p>
-    <PSGroupHorizontal />
-  </div>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PropertySelector from './PropertySelector';
+import PSGroup from './PSGroup';
+
+import styles from './PSGroup.story.styl';
+
+export class PSGroupDefault extends React.Component {
+  state = {
+    value: ['always']
+  };
+  action = action('change');
+
+  onChange = (event, value) => {
+    // value here have to be single string|number or array
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  render() {
+    return (
+      <PSGroup name='availability' behavior='checkbox' value={this.state.value} containerClassName={styles.default} onChange={this.onChange}>
+        <PropertySelector value='1' content='cbd_selector_exterior_color_brown' label='Brown' type='color' />
+        <PropertySelector value='2' content='cbd_selector_exterior_color_blue' label='Blue' type='color' />
+        <PropertySelector value='3' content='cbd_selector_exterior_color_green' label='Green' type='color' disabled={true}  />
+      </PSGroup>
+    );
+  }
+}
+
+export class PSGroupHorizontal extends React.Component {
+  state = {
+    value: ['M_Sport']
+  };
+
+  action = action('change');
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  renderSubModel = (index) => {
+    const models = ['320 | 2.0 | Automatic', '320 | 2.0 | Diesel', '320 | 2.0'];
+
+    return (
+      <div className={styles.equipment}>
+        <div className={styles.column}>
+          <span className={styles.value}>
+            {models[index]}
+          </span>
+        </div>
+        <div className={styles.column}>
+          <span className={styles.title}>
+            Power
+          </span>
+          <span className={styles.value}>
+            184 PS / 138 KW
+          </span>
+        </div>
+        <div className={styles.column}>
+          <span className={styles.title}>
+            Built by
+          </span>
+          <span className={styles.value}>
+            7/2015 – 12/2018
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <PSGroup name='sub_model' behavior='radio' containerClassName={styles.horizontal} childClassName={styles.horizontalChild} value={this.state.value} onChange={this.onChange}>
+        <PropertySelector label={this.renderSubModel(0)} value='M_Sport' />
+        <PropertySelector label={this.renderSubModel(1)} value='M_Sport_Coupe' />
+        <PropertySelector label={this.renderSubModel(2)} value='M_Sport_Diesel' />
+      </PSGroup>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+.add('PSGroup', () => (
+  <div>
+    <p className={styles.text}>Checkbox behavior</p>
+    <PSGroupDefault />
+    <p className={styles.text}>Radio button behavior</p>
+    <PSGroupHorizontal />
+  </div>
+));

package/source/components/_common/PropertySelector/PSGroup.story.styl

@@ -1,25 +1,25 @@
-@import '../../../theme/theme.styl'
-
-.default
-  composes: default
-  display: flex
-  flex-direction: column
-
-.horizontal
-  border: 1px solid lightgray
-  padding: 10px
-  border-radius: 5px
-  margin-bottom: 20px
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-
-.horizontalChild
-  margin-bottom: 0 !important
-  margin-right: 10px
-
-.text
-  font-family: $font-style-arial
-  font-size: $font-size-h3
-  font-weight: $font-weight-medium
+@import '../../../theme/theme.styl'
+
+.default
+  composes: default
+  display: flex
+  flex-direction: column
+
+.horizontal
+  border: 1px solid lightgray
+  padding: 10px
+  border-radius: 5px
+  margin-bottom: 20px
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+
+.horizontalChild
+  margin-bottom: 0 !important
+  margin-right: 10px
+
+.text
+  font-family: $font-style-arial
+  font-size: $font-size-h3
+  font-weight: $font-weight-medium

package/source/components/_common/PropertySelector/PSGroup.styl

@@ -1,5 +1,5 @@
-.container
-  position: relative
-
-.child
-  box-sizing: border-box
+.container
+  position: relative
+
+.child
+  box-sizing: border-box