@bytebrand/fe-ui-core 4.2.73 → 4.2.75

package/common.ts

@@ -30,6 +30,7 @@ export { default as VehicleSliderForSRL } from './source/components/_common/Vehi
 export { default as VehicleSmallCard } from './source/components/VehicleSmallCard/VehicleSmallCard';
 export { default as OfferPanel } from './source/components/OfferPanel/OfferPanel';
 
+export { default as FormTextField } from './source/components/_common/TextField/FormTextField';
 export { default as Tooltip } from './source/components/_common/Tooltip/Tooltip';
 export { default as TextField } from './source/components/_common/TextField/TextField';
 export { default as FormattedNumber } from './source/components/FormattedNumber/FormattedNumber';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.73",
+  "version": "4.2.75",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.styl

@@ -33,6 +33,9 @@
   font-size: 14px
   line-height: 20px
 
+.adressDataValue
+  margin-top: 16px
+
 .orderInfoAddresses
   padding-bottom: 8px
   grid-area: addresses
@@ -62,11 +65,13 @@
   @extend .labelText
   text-align: center
   padding: 16px 24px
-  border-top: 1px solid rgba(76,78,100,0.12)
   grid-area: customerSuport
 
+.supportSectionBorder
+  border-top: 1px solid rgba(76,78,100,0.12)
+
 .customerSuportButton
-  margin-top: 8px
+  margin-top: 8px !important
   color: #26C6F9 !important
   border-color: #26C6F9 !important
   border-radius: 8px !important

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.tsx

@@ -8,8 +8,8 @@ import classNames from 'classnames';
 import { TFunction } from '../../../../framework/types/types';
 
 interface IAdditionalOrderData {
-  addressData: { label: string, value: string }[];
-  carPriceData: { label: string, value: string | number }[];
+  addressData: ({ value: string; label: string; })[];
+  carPriceData: ({ value: string; label: string; })[] | any;
   overallRate: { label: string, value: number };
 }
 
@@ -27,29 +27,38 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
     return redirectToUrl('/account/kontakt');
   };
 
+  const supportSectionClassnames = classNames(
+    styles.customerSuport,
+    {[styles.supportSectionBorder]: addressData.length > 0}
+  )
+
   return (
     <div className={styles.container}>
       <div className={styles.orderInfoAddresses}>
         {addressData.map((data) => {
           const { value, label } = data;
-          return (
-            <div key={label}>
-              <div className={styles.labelText}>{label}</div>
-              <div className={styles.labelText}>{value}</div>
-            </div>
-          );
+          if (!!value) {
+            return (
+              <div key={label}>
+                <div className={styles.labelText}>{label}</div>
+                <div className={classNames(styles.labelText, styles.adressDataValue)}>{value}</div>
+              </div>
+            );
+          }
         })}
       </div>
       <div className={styles.orderPriceSection}>
         <div className={styles.orderInfoPrice}>
-          {carPriceData.map((data) => {
+          {carPriceData.map((data: { value: string, label: string }) => {
             const { value, label } = data;
-            return (
-              <div key={label} className={styles.flexContainer}>
-                <div className={styles.labelText}>{label}</div>
-                <div className={styles.labelText}>{value}</div>
-              </div>
-            );
+            if (!!value) {
+              return (
+                <div key={label} className={styles.flexContainer}>
+                  <div className={styles.labelText}>{label}</div>
+                  <div className={styles.labelText}>{value}</div>
+                </div>
+              );
+            }
           })}
         </div>
         <div className={styles.orderInfoFinancing}>
@@ -70,9 +79,9 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
           </div>
         </div>
       </div>
-      <div className={styles.customerSuport}>
-        <div>{t('customerSupportText')}</div>
-        <Button onClick={redirectToContactPage} className={styles.customerSuportButton} variant='outlined'>{t('customerSupport')}</Button>
+      <div className={supportSectionClassnames}>
+        <div>{t('MyOrderPage:customerSupportText')}</div>
+        <Button onClick={redirectToContactPage} className={styles.customerSuportButton} variant='outlined'>{t('MyOrderPage:customerSupport')}</Button>
       </div>
     </div>
   );

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.tsx

@@ -35,6 +35,43 @@ const OrderStatusSection = ({
     return redirectToUrl(`/search/vehicle/${carId}`);
   };
 
+  // transforming address object to string
+  const getTransformAddressToString = (addressObj: {[key: string]: string}) => {
+    let addressString = '';
+    if (!!addressObj) {
+      Object.keys(addressObj).forEach((key) => {
+        switch (key) {
+          case 'customerFirstname':
+          case 'customerLastname':
+            addressString = `${addressString} ${addressObj[key]}`;
+            break;
+          case 'deliveryPartner':
+          case 'customerStreet':
+          case 'deliveryStreet':
+          case 'customerZip':
+          case 'deliveryZip':
+            if (!!addressString) {
+              addressString = `${addressString}, ${addressObj[key]}`;
+            } else {
+              addressString = `${addressString} ${addressObj[key]}`;
+            }
+            break;
+          case 'customerCity':
+          case 'deliveryCity':
+            addressString = `${addressString} ${addressObj[key]}`;
+            break;
+        }
+      })
+    }
+    return addressString;
+  };
+
+  const getDataPriceItem = (value: number, label: string): {value: string, label: string} | [] => {
+    if (!!value && value !== 0) {
+      return { value: getFormattedPrice(value, '$,.2f', ' €'), label };
+    }
+  }
+
   const renderRequestedCars = () => {
     return (
       <>
@@ -56,31 +93,33 @@ const OrderStatusSection = ({
             licensePlateCost,
             registrationCost,
             transportationCost,
-            customerAddress: {
-              customerFirstname = '',
-              customerLastname = ''
-            } = {}
+            customerAddress,
+            deliveryAddress
           } = orderedCar;
 
           const additionalOrderData = {
             addressData: [
-              { label: 'Billing address:', value: `${customerFirstname} ${customerLastname}` },
-              { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
+              ...customerAddress ? [{ label: t('MyOrderPage:billingAddress'), value: getTransformAddressToString(customerAddress) }] : [],
+              ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: getTransformAddressToString(deliveryAddress) }] : []
             ],
             carPriceData: [
-              { label: 'Car price', value: getFormattedPrice(currentSalesPrice, '$,.2f', ' €') },
-              { label: 'Preparation cost', value: getFormattedPrice(preparationCost, '$,.2f', ' €')},
-              { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
-              { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
-              { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
+              ...currentSalesPrice ? [getDataPriceItem(currentSalesPrice, t('MyOrderPage:carPrice'))] : [],
+              ...preparationCost ? [getDataPriceItem(preparationCost, t('MyOrderPage:preparationCost'))] : [],
+              ...registrationCost ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
+              ...licensePlateCost ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
+              ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
               ...buyingType !== 'buy' ? [
-                { label: `${buyingType} rate`, value: `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` },
-                { label: 'Running time (months)', value: `${paybackPeriod} months` },
-                { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
+                ...monthlyInstallment ? [
+                  { 
+                    label: t(`MyOrderPage:${buyingType}Rate`),
+                    value: t('MyOrderPage:monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f', '', '€') })
+                  }] : [],
+                ...paybackPeriod ? [{ label: t('MyOrderPage:runningTime'), value: t('MyOrderPage:paybackPeriod', { paybackPeriod })}] : [],
+                ...deposit ? [getDataPriceItem(deposit, t('MyOrderPage:deposit'))] : []
               ] : []
             ],
             overallRate: {
-              label: 'Your overall rate',
+              label: t('MyOrderPage:yourOverallRate'),
               value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
             }
           };

package/source/components/_common/DropDown/FormDropDown.tsx

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import styles from './FormDropDown.styl';
 
 import DropDown from './DropDown';
-
-type ErrorPositionType = 'TopRight' | 'TopLeft' | 'BottomRight' | 'BottomLeft';
+import { ErrorPositionType } from '../TextField/FormTextField';
 
 interface IFormDropDownProps {
   // mobx form field instance

package/source/components/_common/Radio/FormRadioGroup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
 
 import RadioGroup from './RadioGroup';
 import styles from './FormRadioGroup.styl';
@@ -7,19 +8,16 @@ import styles from './FormRadioGroup.styl';
 interface IFormRadioGroupProps {
   children: any;
   className?: string;
+
+  // mobx form field instance
   field: any;
+
   containerClassName?: string;
   childClassName?: string;
 }
 
-interface IFormRadioGroupState {
-  field: {
-    name?: string;
-    value?: string;
-  };
-}
-
-class FormRadioGroup extends React.Component<IFormRadioGroupProps, IFormRadioGroupState> {
+@observer
+class FormRadioGroup extends React.Component<IFormRadioGroupProps> {
   static defaultProps = {
     className: '',
     label: false,
@@ -27,39 +25,16 @@ class FormRadioGroup extends React.Component<IFormRadioGroupProps, IFormRadioGro
     childClassName: ''
   };
 
-  constructor(props: IFormRadioGroupProps) {
-    super(props);
-    this.state = {
-      field: {
-        name: '',
-        value: ''
-      }
-    };
-  }
-
-  handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>, value?: any) => {
-    const { name, onChange } = this.props.field;
-    this.setState(() => ({
-      field: {
-        name,
-        value
-      }
-    }));
-    onChange(event, value);
-  };
-
   render() {
-    const { className, containerClassName, childClassName, field } = this.props;
-    const { name, value } = this.state.field;
+    const { field, className, containerClassName, childClassName } = this.props;
+
     const hasError = field.hasError;
     const error = field.error;
 
     const _props = {
-      name,
-      value,
+      ...field.bind(),
       containerClassName,
       childClassName,
-      onChange: this.handleRadioChange,
       error: hasError
     };
 

package/source/components/_common/TextField/FormTextField.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import FormTextField from './FormTextField';
+
+
+const field = {
+  error: 'Something went wrong',
+  hasError: true,
+  bind: () => {
+    const { bind, ...rest } = field;
+    return rest;
+  }
+};
+
+storiesOf('_Common_UI', module)
+  .add('FormTextField', () => (
+    <div>
+      <FormTextField errorPosition='BottomRight' field={field}/>
+    </div>
+  ));

package/source/components/_common/TextField/FormTextField.styl

@@ -0,0 +1,35 @@
+.field
+  position: relative
+
+.errorText
+  position: absolute
+  display: block
+  width: 100%
+  z-index: 1
+  font-family: "Arial Standard", Arial
+  font-weight: 400;
+  font-style: normal
+  font-size: 10px
+  color: rgb(204, 51, 51)
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  box-sizing border-box
+  padding: 0 2px
+
+.errorBottomLeft,
+.errorTopLeft
+  text-align: left
+
+.errorBottomRight,
+.errorTopRight
+  text-align: right
+
+.errorBottomLeft,
+.errorBottomRight
+  bottom: -15px
+
+.errorTopLeft,
+.errorTopRight
+  top: -15px
+

package/source/components/_common/TextField/FormTextField.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
+import styles from './FormTextField.styl';
+import TextField from './TextField';
+
+export type ErrorPositionType = 'TopRight' | 'TopLeft' | 'BottomRight' | 'BottomLeft';
+
+interface IFormTextFieldProps {
+  errorPosition?: ErrorPositionType;
+  className?: string;
+  // TODO: change this when mobx-react-form supports typescript
+  field: any;
+  type?: string;
+
+  min?: number;
+  step?: number;
+  max?: number;
+
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+@observer
+class FormTextField extends React.Component<IFormTextFieldProps, {}> {
+  static defaultProps = {
+    className: '',
+    errorPosition: 'BottomLeft',
+    t: () => ''
+  };
+
+  render() {
+    const { className, errorPosition, field, type, min, step, max, onKeyPress } = this.props;
+    const errorClassName = classnames(styles.errorText, styles[`error${errorPosition}`]);
+
+    const hasError = field.hasError;
+    const error = field.error;
+
+    const props = {
+      ...field.bind(),
+      min, step, max,
+      onKeyPress
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <TextField error={hasError && error} {...props} type={type || field.type} />
+        {hasError && error ? (<span className={errorClassName}>{error}</span>) : false}
+      </div>
+    );
+  }
+}
+
+export default FormTextField;