@bytebrand/fe-ui-core-autobahn 1.0.44 → 1.0.45

package/vdp/VdpModules.tsx

@@ -27,10 +27,29 @@ import { TranslationFunction } from '../types';
 import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
-import { CalcRow, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
+import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
 
 const eur = (n: number): string => n.toLocaleString('de-DE');
 
+/** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
+ *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
+const ArcCheckIcon: React.FunctionComponent<{ size?: number; color?: string }> = ({ size = 20, color = 'currentColor' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth={2.4}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ flex: 'none' }}
+  >
+    <path d="M21.801 10A10 10 0 1 1 17 3.335" />
+    <path d="m9 11 3 3L22 4" />
+  </svg>
+);
+
 /** mileage → 'X.XXX km' (de-DE grouping). */
 function fmtKm(n: number): string {
   return `${n.toLocaleString('de-DE')} km`;
@@ -658,7 +677,7 @@ export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehic
               background: 'var(--md-good-container)',
             }}
           >
-            <Icon name="check-circle" size={18} color="var(--md-good)" />
+            <ArcCheckIcon size={20} color="var(--md-good)" />
             <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--md-good)' }}>
               {t('autobahn:marketValue.belowAverage', { rating: t('autobahn:tier.' + vehicle.rating), amount: eur(delta) })}
             </span>
@@ -1250,7 +1269,8 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
         )}
       </div>
       <div className="bb-cta-row">
-        <Button variant="filled" icon="file-check" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+        <Button variant="filled" style={{ flex: 1, minWidth: 0 }} onClick={onSecure}>
+          <DocCheckIcon />
           {t('autobahn:bottom.secureOffer')}
         </Button>
         {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
@@ -1679,14 +1699,16 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
             <div className="fin-price-grid">
               <div className="fin-rate-main">
-                {/* Figma Kaufen sheet: struck list price on its own line ABOVE the big figure */}
-                {isCash && listPrice != null && listPrice > price && (
-                  <s className="num fin-rate-old" style={{ display: 'block' }}>{eur(listPrice)} €</s>
-                )}
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                   <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
                     {isCash ? eur(price) : eur(Math.round(monthly))} €
                   </span>
+                  {/* Figma Kaufen sheet: struck list price top-right beside the big figure */}
+                  {isCash && listPrice != null && listPrice > price && (
+                    <span className="fin-rate-unit" style={{ alignSelf: 'flex-start', paddingTop: 2 }}>
+                      <s className="num fin-rate-old">{eur(listPrice)} €</s>
+                    </span>
+                  )}
                   {!isCash && (
                     <>
                       <span className="md-label-sm" style={{ fontWeight: 600, alignSelf: 'flex-end', paddingBottom: 5 }}>
@@ -1733,7 +1755,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   />
                 )}
                 <div style={{ display: 'flex', gap: 10 }}>
-                  <Button variant="filled" size="lg" icon="file-check" style={{ flex: 1 }} onClick={onSecure}>
+                  <Button variant="filled" size="lg" style={{ flex: 1 }} onClick={onSecure}>
+                    <DocCheckIcon />
                     {t('autobahn:finance.secureOffer')}
                   </Button>
                   {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
@@ -1814,7 +1837,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 )}
 
                 <div style={{ display: 'flex', gap: 10 }}>
-                  <Button variant="filled" size="lg" icon="file-check" style={{ flex: 1 }} onClick={onSecure}>
+                  <Button variant="filled" size="lg" style={{ flex: 1 }} onClick={onSecure}>
+                    <DocCheckIcon />
                     {t('autobahn:finance.requestRate')}
                   </Button>
                   {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
@@ -2091,13 +2115,14 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
   const emailOk = /.+@.+\..+/.test(email);
   const phoneDigits = (areaCode + phoneNum).replace(/\D/g, '');
   const phoneOk = phoneDigits.length >= 6;
-  // Figma round 12: the required-* follows the chosen contact channel — E-Mail* when email is
-  // preferred, Telefonnummer* when phone is; names + consent are always required.
+  // 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.
   const valid =
     firstName.trim().length > 0 &&
     lastName.trim().length > 0 &&
     consent &&
-    (pref === 'phone' ? phoneOk : emailOk);
+    phoneOk &&
+    (email.trim().length === 0 || emailOk);
 
   const submit = async (): Promise<void> => {
     if (!valid || sending) return;
@@ -2213,8 +2238,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
             <input
               style={enquiryInput}
               type="email"
-              // the required-* follows the preferred channel (Figma round 12)
-              placeholder={pref === 'email' ? t('autobahn:enquiry.form.emailPlaceholder') : t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
+              // e-mail is always optional (round 13) — no required-*
+              placeholder={t('autobahn:enquiry.form.emailPlaceholder').replace(/\*$/, '')}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               aria-label={t('autobahn:enquiry.contactMethod.email')}
@@ -2222,7 +2247,8 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
           </div>
           {/* Land (+49 fixed) · Vorwahl · Telefonnummer — outlined float-label row (Figma) */}
           <div className="enq-phone-row" style={{ marginTop: 16 }}>
-            <FloatField label={t('autobahn:enquiry.form.countryLabel')}>
+            {/* 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)" />
@@ -2236,7 +2262,7 @@ export const VdpEnquiry: React.FunctionComponent<VdpEnquiryProps> = ({
                 aria-label={t('autobahn:enquiry.form.areaCodeLabel')}
               />
             </FloatField>
-            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel') + (pref === 'phone' ? '*' : '')}>
+            <FloatField label={t('autobahn:enquiry.form.phoneNumberLabel')}>
               <input
                 type="tel"
                 value={phoneNum}