@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -1,199 +1,199 @@
-import * as React from 'react';
-import VehicleFormattedPrice from '../../../VehicleFormattedPrice/VehicleFormattedPrice';
-import IconSVG from '../../../../iconsvg/IconSVG';
-import classnames from 'classnames';
-// import Tooltip from '../../../Tooltip/Tooltip';
-import styles from './VechiclePriceItem.styl';
-// import { isMobileOnly } from 'react-device-detect';
-import { IPrice } from '../../../../types/types';
-import MaterialTooltip from '../../../MdTooltip/MdTooltip';
-
-export interface IVehiclePriceItemProps {
-  priceTitle: string;
-  tooltipDescription?: string;
-  priceSub?: string;
-  price?: IPrice;
-  isTotal: Boolean;
-  isNewPriceCategory: Boolean;
-  showAboIcon: Boolean;
-  isPriceDisable: Boolean;
-  isAlternativeText?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
-  perMonthCurrent?: number;
-  iconName?: string;
-  prefixOldPrice?: string;
-  perMonthOld?: number;
-  totalCurrent?: number;
-  totalOld?: number;
-  positionX?: string;
-  positionY?: string;
-  url?: string;
-  target?: string;
-  rel?: string;
-  routeObj?: any;
-  linkTag?: string;
-  isStrikeShown?: boolean;
-  combineRefAlternative?: boolean;
-  postfix?: string;
-  margin?: number;
-  isMarge?: boolean;
-}
-class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  routeToActiveTab = () => {
-    const { priceTitle } = this.props;
-    localStorage.setItem('activeTabCDP', priceTitle);
-  }
-
-  render(): React.ReactNode {
-    const {
-      priceTitle,
-      perMonthCurrent,
-      perMonthOld,
-      url,
-      target,
-      rel,
-      totalOld,
-      totalCurrent,
-      tooltipDescription,
-      // positionX,
-      // positionY,
-      // iconName,
-      postfix,
-      linkTag,
-      routeObj,
-      // combineRefAlternative,
-      prefixOldPrice,
-      // margin,
-      isAlternativeText,
-      vehicleComponentName,
-      priceSub,
-      isTotal = false,
-      showAboIcon = false,
-      isPriceDisable = false,
-      isNewPriceCategory = false,
-      isStrikeShown = false,
-      isMarge
-    } = this.props;
-
-    const stylesItem = classnames(
-      styles.priceItem,
-      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.priceItemSearch]: vehicleComponentName === 'search' },
-      { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
-      { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-      // landing (/angebot) cards are a narrow 4-up grid on desktop where the inline monthly
-      // label would overflow — keep it stacked there, inline only on the wide single-column mobile.
-      { [styles.priceItemLanding]: vehicleComponentName === 'landing' },
-      { [styles.priceItemDisable]: isPriceDisable },
-      { [styles.priceItemBuy]: isTotal }
-    );
-
-    const priceItemCategoryClassName = classnames(
-      styles.priceItemCategory,
-      { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
-      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
-      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
-    );
-
-    return (
-      <div className={stylesItem}>
-        {React.createElement(linkTag, {
-          children: priceTitle,
-          ...routeObj,
-          target,
-          rel,
-          onClick: this.routeToActiveTab,
-          className: priceItemCategoryClassName,
-          href: url
-        })}
-        {tooltipDescription && (
-          <MaterialTooltip
-            className={styles.tooltipWrapFavorites}
-            text={tooltipDescription}
-            // positionX={positionX}
-            // positionY={positionY}
-            icon='infoIcon'
-            disabled={isPriceDisable}
-          />
-        )}
-        {isNewPriceCategory && (
-          <span className={styles.priceNewBlock}>neu</span>
-        )}
-        {isAlternativeText && <span className={styles.isAlternativeText}>{isAlternativeText}</span>}
-        {showAboIcon && !isPriceDisable && <IconSVG className={styles.aboPartnerIcon} name='aboPartner' />}
-        {React.createElement(linkTag, {
-          children: (
-            <>
-              {!isPriceDisable ? (
-                <>
-                  {isStrikeShown && perMonthOld && (
-                    <div className={styles.oldPriceWrap}>
-                      {prefixOldPrice && <span className={styles.prefixOldPrice}>{prefixOldPrice}</span>}
-                      <VehicleFormattedPrice
-                        numbersAfterDot={0}
-                        className={styles.oldPrice}
-                        price={perMonthOld}
-                        size='semimedium'
-                        isOld
-                        disableStyles
-                      />
-                    </div>
-                  )}
-
-                  {perMonthCurrent && (
-                    <span className={styles.priceCurrentWrap}>
-                      {/* ADV-70 (design): monthly label ("mtl."/"mth.") now sits BEFORE the rate
-                          instead of as a "/mtl." suffix after it. */}
-                      {priceSub && <span className={styles.priceMtlPrefix}>{priceSub.replace(/^\//, '')}</span>}
-                      <VehicleFormattedPrice
-                        numbersAfterDot={0}
-                        price={perMonthCurrent}
-                        postfix={postfix}
-                        className={styles.priceMtl}
-                        isNew={isStrikeShown}
-                        size='semimedium'
-                      />
-                    </span>
-                  )}
-                </>
-              ) : (
-                <span className={styles.noPrice}>---</span>
-              )}
-
-              {isStrikeShown && isTotal && !isMarge && (
-                <VehicleFormattedPrice
-                  numbersAfterDot={0}
-                  className={styles.oldPrice}
-                  price={totalOld}
-                  postfix={isStrikeShown ? '2' : ''}
-                  size='semimedium'
-                  isOld
-                  disableStyles
-                />
-              )}
-              {totalCurrent && isTotal && (
-                <VehicleFormattedPrice
-                  numbersAfterDot={0}
-                  price={totalCurrent}
-                  isNew={isStrikeShown}
-                  toRound={false}
-                  size='semimedium'
-                  afterCommaClassName={styles.priceAfterComma}
-                  postfix={postfix}
-                />
-              )}
-            </>
-          ),
-          ...routeObj,
-          target,
-          rel,
-          onClick: this.routeToActiveTab,
-          className: styles.priceItemPrice,
-          href: url
-        })}
-      </div>
-    );
-  }
-}
-export default VehiclePriceItem;
+import * as React from 'react';
+import VehicleFormattedPrice from '../../../VehicleFormattedPrice/VehicleFormattedPrice';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import classnames from 'classnames';
+// import Tooltip from '../../../Tooltip/Tooltip';
+import styles from './VechiclePriceItem.styl';
+// import { isMobileOnly } from 'react-device-detect';
+import { IPrice } from '../../../../types/types';
+import MaterialTooltip from '../../../MdTooltip/MdTooltip';
+
+export interface IVehiclePriceItemProps {
+  priceTitle: string;
+  tooltipDescription?: string;
+  priceSub?: string;
+  price?: IPrice;
+  isTotal: Boolean;
+  isNewPriceCategory: Boolean;
+  showAboIcon: Boolean;
+  isPriceDisable: Boolean;
+  isAlternativeText?: string;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  perMonthCurrent?: number;
+  iconName?: string;
+  prefixOldPrice?: string;
+  perMonthOld?: number;
+  totalCurrent?: number;
+  totalOld?: number;
+  positionX?: string;
+  positionY?: string;
+  url?: string;
+  target?: string;
+  rel?: string;
+  routeObj?: any;
+  linkTag?: string;
+  isStrikeShown?: boolean;
+  combineRefAlternative?: boolean;
+  postfix?: string;
+  margin?: number;
+  isMarge?: boolean;
+}
+class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
+  routeToActiveTab = () => {
+    const { priceTitle } = this.props;
+    localStorage.setItem('activeTabCDP', priceTitle);
+  }
+
+  render(): React.ReactNode {
+    const {
+      priceTitle,
+      perMonthCurrent,
+      perMonthOld,
+      url,
+      target,
+      rel,
+      totalOld,
+      totalCurrent,
+      tooltipDescription,
+      // positionX,
+      // positionY,
+      // iconName,
+      postfix,
+      linkTag,
+      routeObj,
+      // combineRefAlternative,
+      prefixOldPrice,
+      // margin,
+      isAlternativeText,
+      vehicleComponentName,
+      priceSub,
+      isTotal = false,
+      showAboIcon = false,
+      isPriceDisable = false,
+      isNewPriceCategory = false,
+      isStrikeShown = false,
+      isMarge
+    } = this.props;
+
+    const stylesItem = classnames(
+      styles.priceItem,
+      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.priceItemSearch]: vehicleComponentName === 'search' },
+      { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
+      { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+      // landing (/angebot) cards are a narrow 4-up grid on desktop where the inline monthly
+      // label would overflow — keep it stacked there, inline only on the wide single-column mobile.
+      { [styles.priceItemLanding]: vehicleComponentName === 'landing' },
+      { [styles.priceItemDisable]: isPriceDisable },
+      { [styles.priceItemBuy]: isTotal }
+    );
+
+    const priceItemCategoryClassName = classnames(
+      styles.priceItemCategory,
+      { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
+      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
+      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
+    );
+
+    return (
+      <div className={stylesItem}>
+        {React.createElement(linkTag, {
+          children: priceTitle,
+          ...routeObj,
+          target,
+          rel,
+          onClick: this.routeToActiveTab,
+          className: priceItemCategoryClassName,
+          href: url
+        })}
+        {tooltipDescription && (
+          <MaterialTooltip
+            className={styles.tooltipWrapFavorites}
+            text={tooltipDescription}
+            // positionX={positionX}
+            // positionY={positionY}
+            icon='infoIcon'
+            disabled={isPriceDisable}
+          />
+        )}
+        {isNewPriceCategory && (
+          <span className={styles.priceNewBlock}>neu</span>
+        )}
+        {isAlternativeText && <span className={styles.isAlternativeText}>{isAlternativeText}</span>}
+        {showAboIcon && !isPriceDisable && <IconSVG className={styles.aboPartnerIcon} name='aboPartner' />}
+        {React.createElement(linkTag, {
+          children: (
+            <>
+              {!isPriceDisable ? (
+                <>
+                  {isStrikeShown && perMonthOld && (
+                    <div className={styles.oldPriceWrap}>
+                      {prefixOldPrice && <span className={styles.prefixOldPrice}>{prefixOldPrice}</span>}
+                      <VehicleFormattedPrice
+                        numbersAfterDot={0}
+                        className={styles.oldPrice}
+                        price={perMonthOld}
+                        size='semimedium'
+                        isOld
+                        disableStyles
+                      />
+                    </div>
+                  )}
+
+                  {perMonthCurrent && (
+                    <span className={styles.priceCurrentWrap}>
+                      {/* ADV-70 (design): monthly label ("mtl."/"mth.") now sits BEFORE the rate
+                          instead of as a "/mtl." suffix after it. */}
+                      {priceSub && <span className={styles.priceMtlPrefix}>{priceSub.replace(/^\//, '')}</span>}
+                      <VehicleFormattedPrice
+                        numbersAfterDot={0}
+                        price={perMonthCurrent}
+                        postfix={postfix}
+                        className={styles.priceMtl}
+                        isNew={isStrikeShown}
+                        size='semimedium'
+                      />
+                    </span>
+                  )}
+                </>
+              ) : (
+                <span className={styles.noPrice}>---</span>
+              )}
+
+              {isStrikeShown && isTotal && !isMarge && (
+                <VehicleFormattedPrice
+                  numbersAfterDot={0}
+                  className={styles.oldPrice}
+                  price={totalOld}
+                  postfix={isStrikeShown ? '2' : ''}
+                  size='semimedium'
+                  isOld
+                  disableStyles
+                />
+              )}
+              {totalCurrent && isTotal && (
+                <VehicleFormattedPrice
+                  numbersAfterDot={0}
+                  price={totalCurrent}
+                  isNew={isStrikeShown}
+                  toRound={false}
+                  size='semimedium'
+                  afterCommaClassName={styles.priceAfterComma}
+                  postfix={postfix}
+                />
+              )}
+            </>
+          ),
+          ...routeObj,
+          target,
+          rel,
+          onClick: this.routeToActiveTab,
+          className: styles.priceItemPrice,
+          href: url
+        })}
+      </div>
+    );
+  }
+}
+export default VehiclePriceItem;