@bytebrand/fe-ui-core 4.2.241 → 4.2.243

package/package.json

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

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

@@ -30,193 +30,5 @@
 [class*='MuiPickersToolbar-toolbar']
 	background-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;
+[class*='MuiStepIcon-root'][class*='Mui-active']
+	color: #005CCB !important;

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

@@ -2,7 +2,7 @@
 
 .editableFieldWrapper
   font-family: $font-style-arial
-  margin-top: 16px
+  margin-top: 10px
 
 .header 
   display: flex
@@ -12,7 +12,7 @@
 .field
   display: flex
   justify-content: space-between
-  margin-top: 16px
+  margin-top: 10px
   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> = ({ fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
+const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, 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> = ({ fields, handleStep, activeS
         <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>}
-          {!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
+          {!dontShowEdit &&!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: 44px;
+    grid-column-gap: 9px;
     padding: 17px 0
 
     & + &
@@ -33,7 +33,7 @@
   align-items: center;
 
 .icon
-  margin-right: 22px
+  margin-right: 0
   width: 64px
   height: 64px
   display block;
@@ -42,18 +42,16 @@
   +media-phone-only()
     width: 82px
     height: 82px
-    margin-right: 0
     grid-column: 2;
     grid-row: 1 / span 3;
 
 .title
-  font-size: 18px
+  font-size: 16px;
   margin-bottom: 5px
   color: $grey-3a;
   +media-phone-only()
-    font-size: 16px;
     grid-row: 1 / span 1;
-    text-align: justify;
+    text-align: start;
     color: $grey-32;
 
 .textContent

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

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

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={styles.labelText}>{value}</div>
+                  <div className={classNames(styles.labelText, styles.priceValue)}>{value}</div>
                 </div>
               );
             }

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

@@ -3,6 +3,7 @@ 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 {
@@ -25,6 +26,11 @@ interface IOrderStatusCar {
   registration: boolean;
   currentSalesPrice: number;
   onClick: () => void;
+  isFinishedOrder?: boolean;
+  additionalOrderInfoProps?: any;
+  wonStatus?: string;
+  transformedDeliveryDate?: string | null;
+  delivery?: boolean;
 }
 
 const OrderStatusCar = ({
@@ -41,7 +47,11 @@ const OrderStatusCar = ({
   request,
   registration,
   currentSalesPrice,
-  onClick
+  onClick,
+  additionalOrderInfoProps,
+  wonStatus,
+  transformedDeliveryDate,
+  delivery
 }: IOrderStatusCar) => {
   const ref = useRef(null);
   const [activeStep, setActiveStep] = useState(0); // 0 - when we have no active steps
@@ -50,7 +60,7 @@ const OrderStatusCar = ({
     { icon: 'orderReceivedDashboard', selector: 'selector_status_order_received' },
     { icon: 'preparaionDashboard', selector: 'selector_status_preparation' },
     { icon: 'registrationDashboard', selector: 'selector_status_registration' },
-    selfPickup ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
+    selfPickup || !delivery ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
     : { icon: 'deliveryDashboard', selector: 'selector_status_delivery' },
     { icon: 'handingOverDashboard', selector: 'selector_status_handing_over' }
   ];
@@ -94,37 +104,43 @@ const OrderStatusCar = ({
               <img data-testid='car-image' src={imageUrl}/>
             </div>
             <div className={styles.requestId}>{request}</div>
-            <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 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>
           </div>
         </div>
-        <div className={styles.cardsSection} ref={ref}>
-          {cardItems.map((card, index) => {
-            const { icon, selector } = card;
+        {wonStatus === 'won' ? <AdditionalOrderInfo { ...additionalOrderInfoProps } />
+          : <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,6 +7,7 @@ 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;
@@ -20,6 +21,7 @@ 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 = ({
@@ -27,6 +29,7 @@ const OrderStatusSection = ({
   t,
   redirectToUrl,
   orderedCars,
+  wonCars,
   isFetching,
   withAdditionalInfo = false
 }: IOrderStatusSection) => {
@@ -41,23 +44,21 @@ const OrderStatusSection = ({
     if (!!addressObj) {
       Object.keys(addressObj).forEach((key) => {
         switch (key) {
-          case 'customerFirstname':
-          case 'customerLastname':
+          case 'firstname':
+          case 'lastname':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
-          case 'deliveryPartner':
-          case 'customerStreet':
-          case 'deliveryStreet':
-          case 'customerZip':
-          case 'deliveryZip':
+          case 'partner':
+          case 'street':
+          case 'zip':
+          case 'number':
             if (!!addressString) {
               addressString = `${addressString}, ${addressObj[key]}`;
             } else {
               addressString = `${addressString} ${addressObj[key]}`;
             }
             break;
-          case 'customerCity':
-          case 'deliveryCity':
+          case 'city':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
           default: addressString = `${addressString} ${addressObj[key]}`;
@@ -112,10 +113,21 @@ const OrderStatusSection = ({
     }
   }
 
-  const renderRequestedCars = () => {
+  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[] = []) => {
     return (
       <>
-        {!!orderedCars && orderedCars.map((orderedCarData: any, index: number) => {
+        {!!cars && cars.map((orderedCarData: any, index: number) => {
           if (orderedCarData && typeof orderedCarData.car === 'object') {
             const orderedCar = { ...defaultCarProps, ...orderedCarData };
             const { car: { _id } } = orderedCar;
@@ -130,6 +142,7 @@ const OrderStatusSection = ({
               request,
               registration,
               currentSalesPrice,
+              totalPrice,
               deposit,
               preparationCost,
               licensePlateCost,
@@ -138,20 +151,31 @@ const OrderStatusSection = ({
               customerAddress,
               deliveryAddress,
               firstRate,
-              paymentProtectionInsuranceCost
+              paymentProtectionInsuranceCost,
+              wonStatus,
+              warranty,
+              deliveryDate,
+              isLicensePlateFee,
+              delivery,
+              extrasSumCost
             } = 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: getTransformAddressToString(deliveryAddress) }] : []
+                ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: selfPickup ? t('MyOrderPage:selfPickup') : getTransformAddressToString(deliveryAddress) }] : []
               ],
               carPriceData: [
-                ...currentSalesPrice ? [getDataPriceItem(currentSalesPrice, t('MyOrderPage:carPrice'))] : [],
+                ...currentSalesPrice ? [getDataPriceItem(currentSalesPriceWithWarranty, carPriceWithWarrantyTitle(warranty))] : [],
                 ...preparationCost ? [getDataPriceItem(preparationCost, t('MyOrderPage:preparationCost'))] : [],
-                ...registrationCost ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
-                ...licensePlateCost ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
-                ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
+                ...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'))] : [],
                 ...paymentProtectionInsuranceCost ? [getDataPriceItem(paymentProtectionInsuranceCost, t('MyOrderPage:paymentProtectionInsuranceCost'))]: [],
                 ...firstRate ? [getDataPriceItem(firstRate, t('MyOrderPage:firstRate'))] : [],
                 ...buyingType !== 'buy' ? [
@@ -165,8 +189,8 @@ const OrderStatusSection = ({
                 ] : []
               ],
               overallRate: {
-                label: t('MyOrderPage:yourOverallRate'),
-                value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
+                label: (buyingType === 'buy' || wonStatus === 'won') ? t('MyOrderPage:yourOverallPrice') : t('MyOrderPage:yourOverallRate'),
+                value: buyingType === 'buy' || wonStatus === 'won' ? totalPrice : monthlyInstallment
               }
             };
   
@@ -193,18 +217,26 @@ const OrderStatusSection = ({
               request,
               registration,
               currentSalesPrice,
-              onClick: () => onDetailsClick(_id)
+              onClick: () => onDetailsClick(_id),
+              additionalOrderInfoProps,
+              wonStatus,
+              transformedDeliveryDate,
+              delivery
             };
   
-            const title = <span>
-              {t('orderStatus.title')}:&nbsp;
-              <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
-            </span>;
+            const title = wonStatus === 'pending' ? <span>
+                {t('orderStatus.title')}:&nbsp;
+                <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
+              </span>
+              : <span>{t('orderStatus.myOrder')}</span>;
   
             return (
               <DashboardSection key={index} title={title}>
-                <OrderStatusCar  { ...orderStatusCarProps } />
-                {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null}
+                <OrderStatusCar { ...orderStatusCarProps } />
+                {withAdditionalInfo && wonStatus === 'pending' ?
+                  <AdditionalOrderInfo { ...additionalOrderInfoProps } />
+                  : null
+                }
               </DashboardSection>
             );  
           }
@@ -219,7 +251,10 @@ const OrderStatusSection = ({
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>
-        : renderRequestedCars()
+        : <>
+          {renderRequestedCars(orderedCars)}
+          {renderRequestedCars(wonCars)}
+        </>
       }
     </>
   );

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

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