@bytebrand/fe-ui-core 4.2.74 → 4.2.75

package/package.json

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

package/source/components/OfferDetailedSection/partials/PanelConfig.styl

@@ -19,10 +19,6 @@
       width: 1px;
       height: 100%
       background-color $grey-5f;
- 
-  [class^='OfferCheckboxGroup__labelContent']
-    @media (min-width: 990px) and (max-width: 1073px)
-      max-width: 230px   
 
 .wrapConfigDetails
   box-sizing: border-box

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -73,6 +73,9 @@
 .labelContent
   flex: 1 1 auto
   color: $grey-3;
+  @media (min-width: 990px) and (max-width: 1112px)
+    max-width: 230px
+    padding-right: 10px !important;
     
 .icon
   display: block
@@ -117,4 +120,4 @@
   font-size: 12px;
 
 .hidePlus
-  display: inline-block
+  display: inline-block

package/source/components/OfferPanel/OfferPanel.styl

@@ -167,13 +167,14 @@
   [class*='MuiFormControlLabel-root']
     height: 20px
     min-height: 0
-    margin-left:0
   .labelText
     font-size: 12px;
     font-weight: normal;
 
   [class*='labelContent']
     font-size: 12px
+    +media-phone-up()
+      padding-right: 62px;
 
 
 .checkBoxGroup
@@ -189,6 +190,3 @@
     margin: 0
     justify-content: space-between
     width: 100%
-
-[class*='MuiIconButton-root']
-  padding:5px!important

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
             }
           };