@bytebrand/fe-ui-core 4.0.268 → 4.1.1

package/package.json

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

package/source/components/Alternative/DealerInfo.styl

@@ -86,12 +86,25 @@
     text-align: right
     font-weight: 700
     font-size: 16px;
-    color: $black80
+    color: $black80;
+    width: 60px;
 
 .ourPriceInput:focus
     outline: none
 
 .editIcon
-    width: 3rem;
+    width: 1.5rem;
     height: auto;
-    fill: $skyBlue
+    fill: $skyBlue
+
+.ourPriceBlock
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+
+.ourPrice
+    color: $skyBlue !important;
+    cursor: pointer;
+
+.editIconBlock
+    cursor: pointer;

package/source/components/Alternative/DealerInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import styles from './DealerInfo.styl';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import VehicleFormattedPrice from '../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
@@ -17,6 +17,7 @@ interface IDealerInfo {
 const DealerInfo = ({ infoSections, t, dealerPrice, ourMargin, link, linkName, currentSalesPrice, onCurrentSalesPriceChange }: IDealerInfo) => {
   const [isPriceUpdating, setPriceUpdating] = useState(false);
   const [newPrice, setNewPrice] = useState(dealerPrice);
+  const inputRef = useRef(null);
 
   const handleSubmit = () => {
     setPriceUpdating(false);
@@ -87,25 +88,32 @@ const DealerInfo = ({ infoSections, t, dealerPrice, ourMargin, link, linkName, c
             />
           </span>
         </span>
-        <span className={styles.priceItem} onClick={() => setPriceUpdating(true)}>
+        <span className={styles.priceItem}>
           <span>
             {t('vehicleProps:alternative.ourPrice')}
           </span>
           {isPriceUpdating
-            ? <>
+            ? <div className={styles.ourPriceBlock}>
                 <input 
                   className={styles.ourPriceInput}
                   type="number" 
                   value={newPrice}
                   onChange={(e) => setNewPrice(+e.target.value)}
+                  ref={inputRef}
+                  onBlur={() => setPriceUpdating(false)}
                 />
-                <div onClick={handleSubmit}>
+                <span className={styles.editIconBlock} onClick={handleSubmit}>
                   <IconSVG className={styles.editIcon} customDimensions name='editIcon'></IconSVG>
-                </div>
-            </>
-            : <span>
+                </span>
+            </div>
+            : <span onClick={() => {
+              setPriceUpdating(true);
+              setTimeout(() => {
+                inputRef.current.focus();
+              }, 200)
+            }}>
               <VehicleFormattedPrice
-                className={styles.price}
+                className={classnames(styles.price, styles.ourPrice)}
                 numbersAfterDot={0}
                 price={currentSalesPrice}
                 unit='€'

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

@@ -6,8 +6,8 @@ import { getFormattedPrice } from '../../../framework/utils/CommonUtils';
 import { IPanelConfigProps } from '../../../framework/types/types';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
-import IconSVG from '../../_common/IconSVG/IconSVG';
 import styles from './PanelConfig.styl';
+import ExpansionPanel from '../../_common/ExpansionPanel/ExpansionPanel';
 
 const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   t,
@@ -108,16 +108,11 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
         </Hidden>
       </div>
       <Visible xs sm md>
-        <span className={classnames(styles.toggleDetails, { [styles.toggleDetailsOpen]: isOpenDetails })} onClick={onToggleDetailsClick}>
-          {t(`sidebar.financingDetalis.${titleKey}`)}
-
-          <IconSVG
-            name='menuArrow'
-            className={styles.detailsIcon}
-            customDimensions
-          />
-        </span>
-        {isOpenDetails ? renderConfigDetails(true) : null}
+      <ExpansionPanel
+        title={t(`sidebar.financingDetalis.${titleKey}`)}
+      >
+        {renderConfigDetails(true)}
+      </ExpansionPanel>
       </Visible>
     </>
   );

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
 import classnames from 'classnames';
 import _get from 'lodash/get';
 import LazyLoad from 'react-lazyload';
@@ -64,7 +64,7 @@ interface IVehicleSmallCardProps {
   src?: string;
   url?: string;
   iconName?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
   showSlider?: boolean;
   showOfferBtn?: boolean;
   showFavoriteStar?: boolean;
@@ -81,7 +81,7 @@ interface IVehicleSmallCardProps {
   currentPage?: number;
 }
 
-const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props) => {
+const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   const {
     t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
     isTop,
@@ -239,14 +239,14 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
     statsData
   };
 
-  const linkBaseUrl = (e: React.MouseEvent<HTMLImageElement>) => {
+  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
     e.preventDefault();
     if (baseUrl) window.open(baseUrl, '_blank');
   };
-
+  console.log(`%cqqq VSC [${id}] = `, 'font-weight: bold;color: #90ee90', id );
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      {React.createElement(linkTag, {
+      {createElement(linkTag, {
         children: <VehicleTitle {...favoriteProps} />,
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
@@ -254,7 +254,7 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
         href: url
       })}
 
-      {React.createElement(linkTag, {
+      {createElement(linkTag, {
         children: (
           <>
             {showSlider ? (
@@ -269,7 +269,7 @@ const VehicleSmallCard: React.FunctionComponent<IVehicleSmallCardProps> = (props
                           {offerSource || ownerName ? (
                             <>
                               <IconSVG className={styles.svgIcon} name='linkAlternative' />
-                              <span onClick={(e: React.MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
+                              <span onClick={(e: MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
                                 {!typeAlternative ? ownerName : t(`cbd:${offerSource}`)}
                               </span>
                             </>
@@ -339,4 +339,19 @@ VehicleSmallCard.defaultProps = {
   onDetailsClick: () => { }
 };
 
-export default VehicleSmallCard;
+// export default VehicleSmallCard;
+export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponentUpdate
+  const {
+    t,
+    price: {
+      financing: { monthlyInstallment, annualMileage, withFinalInstallment },
+      leasing: { monthlyInstallment: lMonthlyInstallment }
+    }
+  } = props;
+
+  return t                    === nextProps.t
+    && monthlyInstallment     === nextProps.price.financing.monthlyInstallment
+    && annualMileage          === nextProps.price.financing.annualMileage
+    && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
+    && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment;
+});