@bytebrand/fe-ui-core 4.1.91 → 4.1.93

package/package.json

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

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -67,7 +67,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const stylesItem = classnames(
       styles.priceItem,
       { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.priceItemComparable]: vehicleComponentName === 'comparable'},
+      { [styles.priceItemComparable]: vehicleComponentName === 'comparable' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
     );
@@ -76,7 +76,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
       { [styles.priceItemCategoryFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable'}
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' }
     );
     return (
       <div className={stylesItem}>

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -69,6 +69,7 @@ interface IVehicleSmallCardProps {
   children?: ReactNode;
   showSlider?: boolean;
   showOfferBtn?: boolean;
+  hasInteriorExteriorPhoto?: boolean;
   showFavoriteStar?: boolean;
   minimizeData?: boolean;
   onContainerClick?: (event?: any) => void;
@@ -130,6 +131,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     iconName,
     showSlider,
     percentage,
+    hasInteriorExteriorPhoto,
     showOfferBtn = false,
     showFavoriteStar = true,
     minimizeData = false,
@@ -163,6 +165,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   const decoratedSliderProps = {
     t,
     id,
+    hasInteriorExteriorPhoto,
     ...label,
     ...stats,
     ...slider,

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -228,6 +228,7 @@ import DiscountRibbonNew from './SVG/slider/DiscountRibbonNew';
 import FullscreenWindow from './SVG/slider/FullscreenWindow';
 import FullScreen from './SVG/slider/Fullscreen';
 import Rotate360 from './SVG/slider/360';
+import Rotate360New from './SVG/slider/360New';
 import ToBuy from './SVG/slider/ToBuy';
 import Checked from './SVG/slider/Checked';
 import Easy from './SVG/slider/Easy';
@@ -302,6 +303,8 @@ import RegistrationDashboard from './SVG/common/RegistrationDashboard';
 import DeliveryDashboard from './SVG/common/DeliveryDashboard';
 import HandingOverDashboard from './SVG/common/HandingOverDashboard';
 import PickupDashboard from './SVG/common/PickupDashboard';
+import DashboardQuestionMark from './SVG/common/DashboardQuestionMark';
+
 interface IComponentsProp {
   [key: string]: (props: any) => React.ReactNode;
 }
@@ -505,6 +508,7 @@ const components: IComponentsProp = {
   discountRibbonMobile: DiscountRibbonMobile,
   discountRibbonNew: DiscountRibbonNew,
   rotate360: Rotate360,
+  rotate360New: Rotate360New,
   fullScreen: FullScreen,
   fullscreenWindow: FullscreenWindow,
   toBuy: ToBuy,
@@ -695,7 +699,8 @@ const components: IComponentsProp = {
   registrationDashboard: RegistrationDashboard,
   deliveryDashboard: DeliveryDashboard,
   handingOverDashboard: HandingOverDashboard,
-  pickupDashboard: PickupDashboard
+  pickupDashboard: PickupDashboard,
+  dashboardQuestionMark:DashboardQuestionMark
 };
 
 export default components;

package/source/components/_common/IconSVG/SVG/common/DashboardQuestionMark.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const DashboardQuestionMark = (
+  props: any
+) => (
+  <svg
+    width="28"
+    height="27"
+    viewBox="0 0 28 27"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M12.3513 21.6065H15.018V18.9399H12.3513V21.6065ZM13.6847 0.273193C6.32468 0.273193 0.351349 6.24653 0.351349 13.6065C0.351349 20.9665 6.32468 26.9399 13.6847 26.9399C21.0447 26.9399 27.018 20.9665 27.018 13.6065C27.018 6.24653 21.0447 0.273193 13.6847 0.273193ZM13.6847 24.2732C7.80468 24.2732 3.01802 19.4865 3.01802 13.6065C3.01802 7.72653 7.80468 2.93986 13.6847 2.93986C19.5647 2.93986 24.3513 7.72653 24.3513 13.6065C24.3513 19.4865 19.5647 24.2732 13.6847 24.2732ZM13.6847 5.60653C10.738 5.60653 8.35135 7.99319 8.35135 10.9399H11.018C11.018 9.47319 12.218 8.27319 13.6847 8.27319C15.1513 8.27319 16.3513 9.47319 16.3513 10.9399C16.3513 13.6065 12.3513 13.2732 12.3513 17.6065H15.018C15.018 14.6065 19.018 14.2732 19.018 10.9399C19.018 7.99319 16.6313 5.60653 13.6847 5.60653Z" fill="#005CCB"/>
+  </svg>
+);
+
+export default DashboardQuestionMark;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/slider/360New.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const Svg360New = (props: any) => (
+  <svg
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path fillRule="evenodd" clipRule="evenodd" d="M19.2731 12.0024C19.2854 11.774 19.2917 11.5352 19.2917 11.2855C19.2917 11.1381 19.2896 10.9914 19.2854 10.8455C20.9575 11.7695 21.9814 13.0117 21.9814 14.3777C21.9814 16.8116 18.7309 18.8525 14.3546 19.4004V18.3921C16.0124 18.1721 17.47 17.7275 18.5982 17.1434C20.2857 16.2698 20.9814 15.24 20.9814 14.3777C20.9814 13.6409 20.4735 12.7818 19.2731 12.0024ZM8.73484 18.2452V16.9993C8.73484 16.8454 8.90151 16.7491 9.03484 16.8261L12.3089 18.7164C12.4422 18.7934 12.4422 18.9858 12.3089 19.0628L9.03484 20.9531C8.90151 21.03 8.73484 20.9338 8.73484 20.7799V19.2622C4.82573 18.562 2.01855 16.6395 2.01855 14.3777C2.01855 13.0115 3.04264 11.7692 4.71506 10.8452C4.71086 10.9912 4.70874 11.138 4.70874 11.2855C4.70874 11.5353 4.71462 11.7743 4.72619 12.0028C3.52623 12.7822 3.01855 13.641 3.01855 14.3777C3.01855 15.24 3.71425 16.2698 5.40178 17.1434C6.31839 17.618 7.45254 18.0005 8.73484 18.2452Z" fill="#636578"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M12.5852 4.01221H11.371H8.76601C8.17317 4.01221 7.93534 4.05632 7.82485 4.10914L7.82398 4.10955C7.78226 4.12949 7.739 4.15017 7.66339 4.36463L6.90141 7.76114L6.89787 7.77689L6.89333 7.79238C6.36163 9.60562 6.44052 12.1325 6.61804 13.7916C6.65081 14.0978 6.91756 14.3404 7.25825 14.3404H7.51156C7.75013 14.3404 7.94353 14.147 7.94353 13.9084C7.94353 13.5663 8.22089 13.289 8.56302 13.289L11.3769 13.289L12.6228 13.289C12.6231 13.289 12.6234 13.289 12.6238 13.289H13.9287H15.3304C15.6726 13.289 15.9499 13.5663 15.9499 13.9084C15.9499 14.147 16.1433 14.3404 16.3819 14.3404H16.6927C17.0621 14.3404 17.3517 14.0778 17.3866 13.7448C17.5607 12.0842 17.633 9.5881 17.1064 7.79238L17.1018 7.77689L17.0983 7.76114L16.3363 4.36463C16.2607 4.15017 16.2175 4.12949 16.1757 4.10955L16.1749 4.10914C16.0644 4.05632 15.8265 4.01221 15.2337 4.01221H12.5852ZM12.6228 14.289L13.9287 14.289H15.001C15.1677 14.8951 15.7228 15.3404 16.3819 15.3404H16.6927C17.539 15.3404 18.2893 14.7252 18.3812 13.8491C18.5576 12.1668 18.6497 9.51711 18.0706 7.52675L17.3059 4.11822L17.3 4.09191L17.2913 4.06638C17.1801 3.7402 17.0155 3.40262 16.6062 3.20696C16.2639 3.04331 15.8059 3.01221 15.2337 3.01221H12.5852H11.371H8.76601C8.19381 3.01221 7.73577 3.04331 7.3935 3.20696C6.98426 3.40262 6.81959 3.7402 6.70842 4.06638L6.69972 4.09191L6.69381 4.11822L5.92913 7.52675C5.3446 9.5359 5.44389 12.2173 5.62372 13.898C5.71431 14.7446 6.43952 15.3404 7.25825 15.3404H7.51156C8.17066 15.3404 8.72577 14.8951 8.89243 14.289H11.3759C11.3763 14.289 11.3766 14.289 11.3769 14.289L12.6228 14.289Z" fill="#636578"/>
+    <path d="M17.5619 7.56836V7.56836C13.9305 8.65377 10.0509 8.65178 6.41895 7.56836V7.56836" stroke="#636578" stroke-linecap="round"/>
+    <circle cx="8.15374" cy="10.3359" r="0.768972" fill="#636578"/>
+    <circle cx="15.8442" cy="10.4555" r="0.768972" fill="#636578"/>
+  </svg>
+);
+
+export default Svg360New;
+/* tslint:enable */

package/source/components/_common/withStats/withStats.styl

@@ -19,7 +19,8 @@ $indent = 10px
   justify-content: flex-start
   font-size: $font-size-default
   padding: 0 $indent
-  box-sizing: border-box
+  box-sizing: border-box;
+  gap: 0.6em;
   user-select: none;
 
   &::after
@@ -38,7 +39,6 @@ $indent = 10px
   align-items: center
   justify-content: space-around;
   height: inherit;
-  gap: 0.6em;
 
   &:last-of-type
     margin-left: auto

package/source/components/_common/withStats/withStats.tsx

@@ -82,6 +82,19 @@ export default function withStats(WrappedComponent: any) {
       );
     };
 
+    renderRotateSvg = (): JSX.Element => {
+      const { hasInteriorExteriorPhoto, images } = this.props;
+      const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
+      if (!hasExteriorPhotos) return null;
+      return (
+        <div className={styles.section}>
+          {hasExteriorPhotos ? (
+            <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
+          ) : null}
+        </div>
+      );
+    };
+
     renderStarButton = () => {
       const { isFavoured, onFavoriteClick } = this.props;
       if (!onFavoriteClick) return null;
@@ -100,7 +113,6 @@ export default function withStats(WrappedComponent: any) {
       const { statsData, isFavoured, onFavoriteClick } = this.props;
       if (!statsData) return null;
       const { totalCarImpCount, totalFavCount } = statsData;
-
       const favoritesClassName = classnames(
         styles.statsFavoritesCount,
         {
@@ -162,6 +174,7 @@ export default function withStats(WrappedComponent: any) {
           <WrappedComponent {...wrappedComponentProps} onSlideChange={this.onSlideChange} isReferenceSearch={isReferenceSearch} />
           <div className={classnames(styles.controls, styles[statsSize])}>
             {this.renderImagesData()}
+            {this.renderRotateSvg()}
             {this.renderStarButton()}
             {this.renderStatsData()}
           </div>