@bytebrand/fe-ui-core 4.2.239 → 4.2.241

package/package.json

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

package/source/components/Checkout/CheckoutStepper/CheckoutStepper.styl

@@ -30,5 +30,193 @@
 [class*='MuiPickersToolbar-toolbar']
 	background-color: #005CCB !important;
 
-[class*='MuiStepIcon-root'][class*='Mui-active']
-	color: #005CCB !important;
+
+// @import '../../../theme/mixins.styl'
+
+// .root
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-alternativeLabel']
+// 		fontSize: 10
+// 		maxWidth: 56
+
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-active']
+// 		fontWeight: bold
+
+// 	& [class*='MuiSvgIcon-root']
+// 		width: 24
+// 		height: 24
+
+// 	& [class*='MuiStepConnector-line']
+// 		borderWidth: 2px
+	
+// 	& [class*='MuiStepConnector-vertical']
+// 		marginLeft: 50,
+// 		padding: 12px 0 16px
+
+// .active
+//   @media (min-width: 992px):
+// 		backgroundColor: rgba(0, 92, 203, 0.08)
+
+// 	& [class*='MuiStepIcon-text']
+//     fill: white !important
+
+// 	& [class*='MuiStepIcon-active']
+// 		color: #005CCB
+// 		fontWeight: bold
+// 	& [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// .isCompleted
+// 	& [class*='MuiStep-vertical'] + [class*='MuiStepConnector-vertical']
+//     & [class*='MuiStepConnector-line']
+// 			borderColor: #005CCB
+
+// .stepper
+//   & [class*='MuiStepper-root']
+// 		padding: 0
+// 		// overflow: 'scroll'
+
+// .labelWrap
+//   & [class*='MuiStepLabel-label']
+// 		marginTop: 7
+// 		lineHeight: 11px
+
+// .verticalWrap
+// 	padding: 14px 0 14px 26px
+// 	borderRadius: 0px 38px 38px 0px
+// 	boxSizing: border-box
+
+// 	& [class*='MuiStepLabel-iconContainer']
+// 		paddingRight: 17
+
+// 	& [class*='MuiSvgIcon-root']
+// 		width: 48
+// 		height: 48
+
+// 	& [class*='MuiStepLabel-label']
+// 		color: rgba(0, 0, 0, 0.83)
+// 		fontWeight: bold
+// 		fontSize: 22
+
+// .default
+// 	& [class*='MuiStepIcon-text']
+// 		fill: grey
+
+// 	& [class*='MuiStepIcon-root']
+// 		color: transparent
+// 		border: 1px solid grey
+// 		boxSizing: border-box
+// 		borderRadius: 50%
+
+// 	& [class*='MuiStepLabel-label']
+// 		color: rgba(0, 0, 0, 0.38)
+// 		fontWeight: 400
+
+// .completeStep
+// 	color: #005CCB
+// 	& [class*='MuiStepIcon-root']
+// 		borderColor: #005CCB
+// 		borderWidth: 2px
+
+// 	& [class*='MuiStepIcon-text']
+// 		fill: #005CCB
+// 		fontWeight: bold
+		
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-alternativeLabel']
+// 		color: #005CCB
+
+//   & [class*='MuiStepLabel-label']
+// 		color: #005CCB
+
+//   & [class*='MuiStepConnector-lineVertical']
+// 		borderColor: #005CCB
+
+// .completeLine
+//   & [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// 	& [class*='MuiStepConnector-line'][class*='MuiStepConnector-lineVertical']
+// 		borderColor: #005CCB
+
+// .activeLine
+// 	& [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// .minutes
+// 	fontSize: 14
+// 	color: rgba(0, 0, 0, 0.63)
+// 	display: block
+// 	textAlign: left
+// 	fontWeight: 400
+
+// .buttonItem
+// 	margin: 0
+// 	padding: 0
+
+// // .checkoutFooter:
+// // 	display: 'block'
+// // 	width: '100%'
+// // 	textAlign: 'center'
+// // 	background: '#f2f2f2'
+// // 	color: '#757575'
+// // 	fontSize: '7px'
+
+// // .checkoutFooterItem:
+// // 	margin: '0 4px'
+
+// // .buttonWeiter
+// // 	width: '328px'
+// // 	margin: '16px auto'
+// // 	display: 'block'
+// // 	height: '44px'
+// // 	textTransform: 'none'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// .stepperWrapper
+// 	width: 100%
+// 	overflow: hidden
+
+// +media-tablet-landscape-up()
+// 	.stepperWrapper
+// 		box-sizing: border-box
+// 		background-color: #fff
+// 		width: 376px
+// 		box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.15);
+// 		position fixed
+// 		z-index: 1;
+// 		padding: 35px 8px 35px
+// 		height: 100%
+
+// 	.menuArrow
+// 		position: absolute;
+// 		right: 0;
+// 		top: 50%;
+// 		max-width: 17px;
+// 		transform: rotate(-90deg) translateY(-50%);
+// 		transform-origin: 0 center;
+// 		path
+// 			fill: rgba(0, 0, 0, 0.38);
+
+
+
+// [class*='MuiPickersToolbar-toolbar']
+// 	background-color: #005CCB !important;

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.styl

@@ -2,7 +2,7 @@
 
 .editableFieldWrapper
   font-family: $font-style-arial
-  margin-top: 10px
+  margin-top: 16px
 
 .header 
   display: flex
@@ -12,7 +12,7 @@
 .field
   display: flex
   justify-content: space-between
-  margin-top: 10px
+  margin-top: 16px
   color: $black60
   font-size: 14px
 

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.tsx

@@ -15,18 +15,18 @@ interface IOrderOverviewItem {
     rate?: string;
   };
   activeStep: number;
-  dontShowEdit?:boolean;
   handleStep: (index: number) => () => void;
   titleClassName?: string;
   fieldClassName?: string;
   fieldWrapperClassName?: string;
 }
 
-const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
+const OrderOverviewItem: FC<IOrderOverviewItem> = ({ fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
   const wrapperClasses = classnames(
     styles.editableFieldWrapper,
     { [fieldWrapperClassName]: fieldWrapperClassName }
   );
+
   return (
     <div className={wrapperClasses}>
       <div>
@@ -34,7 +34,7 @@ const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, fields, handl
         <span className={titleClassName}>{fields.title} {fields.additionalTitle && <span className={styles.additionalTitle}>{fields.additionalTitle}</span>}</span>
         <span className={styles.fieldLineWrapper} data-testid='editIcon' onClick={() => handleStep(activeStep)()}>
           {fields.oneLineRate && <span className={classnames(styles.fieldLine, fieldClassName)}>{fields.oneLineRate}</span>}
-          {!dontShowEdit &&!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
+          {!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
         </span>
       </div>
       {fields.content && fields.content.map((fields, index) => (

package/source/components/InfoBlocks/FirstInfoBlock/FirstInfoBlockItem/FirstInfoBlockItem.styl

@@ -22,7 +22,7 @@
     align-items: center;
     width: 100%;
     grid-template-columns: 1fr 82px;
-    grid-column-gap: 9px;
+    grid-column-gap: 44px;
     padding: 17px 0
 
     & + &
@@ -33,7 +33,7 @@
   align-items: center;
 
 .icon
-  margin-right: 0
+  margin-right: 22px
   width: 64px
   height: 64px
   display block;
@@ -42,16 +42,18 @@
   +media-phone-only()
     width: 82px
     height: 82px
+    margin-right: 0
     grid-column: 2;
     grid-row: 1 / span 3;
 
 .title
-  font-size: 16px;
+  font-size: 18px
   margin-bottom: 5px
   color: $grey-3a;
   +media-phone-only()
+    font-size: 16px;
     grid-row: 1 / span 1;
-    text-align: start;
+    text-align: justify;
     color: $grey-32;
 
 .textContent

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

@@ -93,8 +93,4 @@
   font-size: 14px
 
 .montlyUnit
-  font-size: 8px
-
-.priceValue
-  text-align: right
-  min-width 100px
+  font-size: 8px

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

@@ -55,7 +55,7 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
               return (
                 <div key={label} className={styles.flexContainer}>
                   <div className={styles.labelText}>{label}</div>
-                  <div className={classNames(styles.labelText, styles.priceValue)}>{value}</div>
+                  <div className={styles.labelText}>{value}</div>
                 </div>
               );
             }

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

@@ -3,7 +3,6 @@ import styles from './OrderStatusSection.styl';
 import OrderStatusCard from './OrderStatusCard';
 // import Image from '../../../_common/Image/Image';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
-import AdditionalOrderInfo from './AdditionalOrderInfo';
 
 // tslint:disable-next-line:interface-name
 interface ITFunction {
@@ -26,11 +25,6 @@ interface IOrderStatusCar {
   registration: boolean;
   currentSalesPrice: number;
   onClick: () => void;
-  isFinishedOrder?: boolean;
-  additionalOrderInfoProps?: any;
-  wonStatus?: string;
-  transformedDeliveryDate?: string | null;
-  delivery?: boolean;
 }
 
 const OrderStatusCar = ({
@@ -47,11 +41,7 @@ const OrderStatusCar = ({
   request,
   registration,
   currentSalesPrice,
-  onClick,
-  additionalOrderInfoProps,
-  wonStatus,
-  transformedDeliveryDate,
-  delivery
+  onClick
 }: IOrderStatusCar) => {
   const ref = useRef(null);
   const [activeStep, setActiveStep] = useState(0); // 0 - when we have no active steps
@@ -60,7 +50,7 @@ const OrderStatusCar = ({
     { icon: 'orderReceivedDashboard', selector: 'selector_status_order_received' },
     { icon: 'preparaionDashboard', selector: 'selector_status_preparation' },
     { icon: 'registrationDashboard', selector: 'selector_status_registration' },
-    selfPickup || !delivery ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
+    selfPickup ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
     : { icon: 'deliveryDashboard', selector: 'selector_status_delivery' },
     { icon: 'handingOverDashboard', selector: 'selector_status_handing_over' }
   ];
@@ -104,43 +94,37 @@ const OrderStatusCar = ({
               <img data-testid='car-image' src={imageUrl}/>
             </div>
             <div className={styles.requestId}>{request}</div>
-            <div className={styles.carPayment}>
-              {wonStatus === 'won' && !!transformedDeliveryDate ? transformedDeliveryDate
-              : <>
-                  {t(`buyingType.${buyingType}`)},&nbsp;
-                  {buyingType !== 'buy' && `${t('paybackPeriod', { paybackPeriod })},`}&nbsp;
-                  {buyingType === 'buy' ?
-                    t('currentSalesPrice', { currentSalesPrice: getFormattedPrice(currentSalesPrice) })
-                    : t('monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f') })
-                  }
-                </>
+            <div className={styles.carPayment} >
+              {t(`buyingType.${buyingType}`)},&nbsp;
+              {buyingType !== 'buy' && `${t('paybackPeriod', { paybackPeriod })},`}&nbsp;
+              {buyingType === 'buy' ?
+                t('currentSalesPrice', { currentSalesPrice: getFormattedPrice(currentSalesPrice) })
+                : t('monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f') })
               }
             </div>
           </div>
         </div>
-        {wonStatus === 'won' ? <AdditionalOrderInfo { ...additionalOrderInfoProps } />
-          : <div className={styles.cardsSection} ref={ref}>
-              {cardItems.map((card, index) => {
-                const { icon, selector } = card;
+        <div className={styles.cardsSection} ref={ref}>
+          {cardItems.map((card, index) => {
+            const { icon, selector } = card;
 
-                const statusDescription = !registration && index === 2 ?
-                                          t('orderStatus.independentRegistration') :
-                                          t(`orderStatus.${selector}_desc`);
+            const statusDescription = !registration && index === 2 ?
+                                      t('orderStatus.independentRegistration') :
+                                      t(`orderStatus.${selector}_desc`);
 
-                return (
-                  <OrderStatusCard
-                    title={t(`orderStatus.${selector}`)}
-                    description={statusDescription}
-                    icon={icon}
-                    key={index}
-                    isActive={index + 1 === activeStep}
-                    isDisabled={index + 1 > activeStep}
-                    isDone={index + 1 < activeStep}
-                  />
-                );
-              })}
-            </div>
-        }
+            return (
+              <OrderStatusCard
+                title={t(`orderStatus.${selector}`)}
+                description={statusDescription}
+                icon={icon}
+                key={index}
+                isActive={index + 1 === activeStep}
+                isDisabled={index + 1 > activeStep}
+                isDone={index + 1 < activeStep}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );

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

@@ -7,7 +7,6 @@ import styles from './OrderStatusSection.styl';
 import { Skeleton } from '@mui/material';
 
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
-import { fromUTCToDateString } from '../../../../framework/utils/DateUtils';
 
 interface ITFunction {
   <T = string>(key: string, options?: object): T;
@@ -21,7 +20,6 @@ interface IOrderStatusSection {
   isFetching: boolean;
   withAdditionalInfo?: boolean; // for using on /account/my-order.
   orderedCars: any[]; // TODO: create interface for orderedCars, when the object is formatted by the backend
-  wonCars?: any[];
 }
 
 const OrderStatusSection = ({
@@ -29,7 +27,6 @@ const OrderStatusSection = ({
   t,
   redirectToUrl,
   orderedCars,
-  wonCars,
   isFetching,
   withAdditionalInfo = false
 }: IOrderStatusSection) => {
@@ -44,21 +41,23 @@ const OrderStatusSection = ({
     if (!!addressObj) {
       Object.keys(addressObj).forEach((key) => {
         switch (key) {
-          case 'firstname':
-          case 'lastname':
+          case 'customerFirstname':
+          case 'customerLastname':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
-          case 'partner':
-          case 'street':
-          case 'zip':
-          case 'number':
+          case 'deliveryPartner':
+          case 'customerStreet':
+          case 'deliveryStreet':
+          case 'customerZip':
+          case 'deliveryZip':
             if (!!addressString) {
               addressString = `${addressString}, ${addressObj[key]}`;
             } else {
               addressString = `${addressString} ${addressObj[key]}`;
             }
             break;
-          case 'city':
+          case 'customerCity':
+          case 'deliveryCity':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
           default: addressString = `${addressString} ${addressObj[key]}`;
@@ -113,21 +112,10 @@ const OrderStatusSection = ({
     }
   }
 
-  const carPriceWithWarrantyTitle = (warranty: { warrantyPackage: string, warrantyCost: number, warrantyPeriod: number }) => {
-    if (!warranty || !warranty.warrantyCost) {
-      return t('MyOrderPage:carPrice');
-    }
-    const warrantyPackage = t(`MyOrderPage:${warranty.warrantyPackage}`);
-    const warrantyPeriod = t(`MyOrderPage:${warranty.warrantyPeriod}year`, { warrantyPeriod: warranty.warrantyPeriod });
-    const carPriceIncWarrantyTitle =
-      `${t('MyOrderPage:carPrice')} ${t('MyOrderPage:incWarranty', { warrantyPackage, warrantyPeriod })}`;
-    return carPriceIncWarrantyTitle;
-  };
-
-  const renderRequestedCars = (cars: any[] = []) => {
+  const renderRequestedCars = () => {
     return (
       <>
-        {!!cars && cars.map((orderedCarData: any, index: number) => {
+        {!!orderedCars && orderedCars.map((orderedCarData: any, index: number) => {
           if (orderedCarData && typeof orderedCarData.car === 'object') {
             const orderedCar = { ...defaultCarProps, ...orderedCarData };
             const { car: { _id } } = orderedCar;
@@ -142,7 +130,6 @@ const OrderStatusSection = ({
               request,
               registration,
               currentSalesPrice,
-              totalPrice,
               deposit,
               preparationCost,
               licensePlateCost,
@@ -151,31 +138,20 @@ const OrderStatusSection = ({
               customerAddress,
               deliveryAddress,
               firstRate,
-              paymentProtectionInsuranceCost,
-              wonStatus,
-              warranty,
-              deliveryDate,
-              isLicensePlateFee,
-              delivery,
-              extrasSumCost
+              paymentProtectionInsuranceCost
             } = orderedCar;
-
-            const transformedDeliveryDate = !!deliveryDate ? `${t('MyOrderPage:deliveredOn')} ${fromUTCToDateString(deliveryDate)}` : null;
-
-            const currentSalesPriceWithWarranty = !!warranty && !!warranty.warrantyCost ? currentSalesPrice + warranty.warrantyCost : currentSalesPrice;
   
             const additionalOrderData = {
               addressData: [
                 ...customerAddress ? [{ label: t('MyOrderPage:billingAddress'), value: getTransformAddressToString(customerAddress) }] : [],
-                ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: selfPickup ? t('MyOrderPage:selfPickup') : getTransformAddressToString(deliveryAddress) }] : []
+                ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: getTransformAddressToString(deliveryAddress) }] : []
               ],
               carPriceData: [
-                ...currentSalesPrice ? [getDataPriceItem(currentSalesPriceWithWarranty, carPriceWithWarrantyTitle(warranty))] : [],
+                ...currentSalesPrice ? [getDataPriceItem(currentSalesPrice, t('MyOrderPage:carPrice'))] : [],
                 ...preparationCost ? [getDataPriceItem(preparationCost, t('MyOrderPage:preparationCost'))] : [],
-                ...extrasSumCost ? [getDataPriceItem(extrasSumCost, t('MyOrderPage:extrasSumCost'))] : [],
-                ...registrationCost && registration ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
-                ...licensePlateCost && isLicensePlateFee ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
-                ...!!transportationCost && delivery ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
+                ...registrationCost ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
+                ...licensePlateCost ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
+                ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
                 ...paymentProtectionInsuranceCost ? [getDataPriceItem(paymentProtectionInsuranceCost, t('MyOrderPage:paymentProtectionInsuranceCost'))]: [],
                 ...firstRate ? [getDataPriceItem(firstRate, t('MyOrderPage:firstRate'))] : [],
                 ...buyingType !== 'buy' ? [
@@ -189,8 +165,8 @@ const OrderStatusSection = ({
                 ] : []
               ],
               overallRate: {
-                label: (buyingType === 'buy' || wonStatus === 'won') ? t('MyOrderPage:yourOverallPrice') : t('MyOrderPage:yourOverallRate'),
-                value: buyingType === 'buy' || wonStatus === 'won' ? totalPrice : monthlyInstallment
+                label: t('MyOrderPage:yourOverallRate'),
+                value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
               }
             };
   
@@ -217,26 +193,18 @@ const OrderStatusSection = ({
               request,
               registration,
               currentSalesPrice,
-              onClick: () => onDetailsClick(_id),
-              additionalOrderInfoProps,
-              wonStatus,
-              transformedDeliveryDate,
-              delivery
+              onClick: () => onDetailsClick(_id)
             };
   
-            const title = wonStatus === 'pending' ? <span>
-                {t('orderStatus.title')}:&nbsp;
-                <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
-              </span>
-              : <span>{t('orderStatus.myOrder')}</span>;
+            const title = <span>
+              {t('orderStatus.title')}:&nbsp;
+              <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
+            </span>;
   
             return (
               <DashboardSection key={index} title={title}>
-                <OrderStatusCar { ...orderStatusCarProps } />
-                {withAdditionalInfo && wonStatus === 'pending' ?
-                  <AdditionalOrderInfo { ...additionalOrderInfoProps } />
-                  : null
-                }
+                <OrderStatusCar  { ...orderStatusCarProps } />
+                {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null}
               </DashboardSection>
             );  
           }
@@ -251,10 +219,7 @@ const OrderStatusSection = ({
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>
-        : <>
-          {renderRequestedCars(orderedCars)}
-          {renderRequestedCars(wonCars)}
-        </>
+        : renderRequestedCars()
       }
     </>
   );

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

@@ -26,12 +26,4 @@
 
 .highlights
   padding-top: 0;
-  margin-top: 6px;
-
-.skeletonInfoContainer:not(:first-child)
-  margin-top: 6px
-
-.skeletonInfoContainer
-  [class*='MuiSkeleton-root']
-    transform: none
-    height: 309px
+  margin-top: 6px;