@bytebrand/fe-ui-core-autobahn 1.0.56 → 1.0.58

package/utils/priceRating.ts

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
-//
-// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
-// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
-// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
+  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+    return predictablePrice;
+  }
+
+  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
+}
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice) return 0;
+
+
+  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};

package/vdp/VdpModules.tsx

@@ -24,7 +24,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
@@ -2495,6 +2495,7 @@ export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ cou
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 12,
+        border: '1px solid #D4DDE7',
         // sits between the finance card (order:3) and the highlights card (order:4) in the
         // mobile .vdp-grid flex flow — tie-broken to AFTER the aside by JSX/DOM source order.
         order: 3,
@@ -2682,6 +2683,12 @@ const FloatField: React.FunctionComponent<{
   </label>
 );
 
+/** phone country-code options for the "Land" dropdown (Figma: DE/AT/CH pinned first, then A–Z). */
+const ENQUIRY_COUNTRY_CODES: DropdownOption[] = [
+  '+49', '+43', '+41', '+7', '+31', '+32', '+33', '+34', '+36', '+39', '+40', '+44', '+45', '+46',
+  '+47', '+48', '+352', '+358', '+359', '+380', '+385', '+386', '+420', '+421', '+423',
+].map((code) => ({ value: code, label: code }));
+
 /** [icon, i18n label key] — resolved against the drilled t in the component. */
 const ENQUIRY_BENEFITS: ReadonlyArray<[string, string]> = [
   ['clock', 'autobahn:enquiry.benefits.fastResponse'],
@@ -2704,6 +2711,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
+  const [countryCode, setCountryCode] = useState('+49');
   const [areaCode, setAreaCode] = useState('');
   const [phoneNum, setPhoneNum] = useState('');
   const [consent, setConsent] = useState(false);
@@ -2719,15 +2727,18 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
 
   const emailOk = /.+@.+\..+/.test(email);
   const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
-  const phoneOk = phoneDigits.length >= 6;
-  // Round 13 (explicit spec): PHONE is always required (the * sits on the country-code field),
-  // e-mail is always optional (validated only when filled); names + consent always required.
+  // backend (contact-form-users) caps the concatenated phoneMain (countryCode + areaCode +
+  // phoneNum) at 22 chars total — mirrored here so an over-length number is caught before submit.
+  const phoneOk = phoneDigits.length >= 6 && countryCode.length + areaCode.trim().length + phoneNum.trim().length <= 22;
+  // Round 14: which channel is required follows the E-Mail/Telefon toggle — the * moves
+  // between the e-mail field and the country-code field accordingly; the other channel
+  // stays optional (validated only when filled); names + consent always required.
   const valid =
     firstName.trim().length > 0 &&
     lastName.trim().length > 0 &&
     consent &&
-    phoneOk &&
-    (email.trim().length === 0 || emailOk);
+    (pref === 'email' ? emailOk : phoneOk) &&
+    (pref === 'email' ? phoneDigits.length === 0 || phoneOk : email.trim().length === 0 || emailOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -2736,7 +2747,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
     const note = t('autobahn:enquiry.preferredContact', {
       channel: pref === 'email' ? t('autobahn:enquiry.contactMethod.email') : t('autobahn:enquiry.contactMethod.phone'),
     });
-    const phone = phoneDigits ? `+49 ${areaCode.trim()} ${phoneNum.trim()}`.replace(/\s+/g, ' ').trim() : '';
+    const phone = phoneDigits ? `${countryCode}${areaCode.trim()}${phoneNum.trim()}`.replace(/\s+/g, '') : '';
     try {
       await onSubmit({
         name: `${firstName.trim()} ${lastName.trim()}`,
@@ -2843,26 +2854,30 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <input
               style={enquiryInput}
               type="email"
-              // e-mail is always optional (round 13) — no required-*
-              placeholder={t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
+              // asterisk shows only while e-mail is the selected contact channel (round 14)
+              placeholder={pref === 'email' ? t('autobahn:enquiry.form.emailPlaceholder') : t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               aria-label={t('autobahn:enquiry.contactMethod.email')}
             />
           </div>
-          {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
+          {/* Land (country-code dropdown) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
           <div className="enq-phone-row" style={{ marginTop: 16 }}>
-            {/* phone is always required — the * sits on the country-code field (round 13) */}
-            <FloatField label={t('autobahn:enquiry.form.countryLabel') + '*'}>
-              <span className="enq-country num">
-                +49
-                <Icon name="chevron-down" size={14} color="var(--md-on-surface-variant)" />
-              </span>
+            {/* * sits on the country-code field only while Telefon is the selected channel (round 14) */}
+            <FloatField label={t('autobahn:enquiry.form.countryLabel') + (pref === 'phone' ? '*' : '')}>
+              <Dropdown
+                value={countryCode}
+                options={ENQUIRY_COUNTRY_CODES}
+                onChange={setCountryCode}
+                ariaLabel={t('autobahn:enquiry.form.countryLabel')}
+                className="enq-country"
+              />
             </FloatField>
             <FloatField label={t('autobahn:enquiry.form.areaCodeLabel')}>
               <input
                 type="tel"
                 placeholder="1638"
+                maxLength={5}
                 value={areaCode}
                 onChange={(e) => setAreaCode(e.target.value)}
                 aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
@@ -2872,6 +2887,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
               <input
                 type="tel"
                 placeholder="5857458"
+                maxLength={13}
                 value={phoneNum}
                 onChange={(e) => setPhoneNum(e.target.value)}
                 aria-label={t('autobahn:enquiry.form.phoneNumberLabel')}