@bytebrand/fe-ui-core-autobahn 1.0.80 → 1.0.82

package/vdp/VdpModules.tsx

@@ -27,7 +27,7 @@ import { TranslationFunction } from '../types';
 import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars } 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, ToggleRow } from './FinanceCalculator';
+import { AddServicesTooltipBody, CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips, ToggleRow } from './FinanceCalculator';
 import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
@@ -1460,6 +1460,12 @@ export interface VdpBottomBarProps {
   ratingLabel?: string;
   /** primary CTA click. */
   onSecure?: () => void;
+  /** true once the customer already has an offer request/checkout in progress for this car —
+   *  turns the primary CTA green (see .fin-cta-secured) instead of the default filled style. */
+  secured?: boolean;
+  /** overrides the primary CTA label while `secured` is true (e.g. "Zur Bestellung"). Ignored
+   *  when `secured` is false — the CTA keeps its own default label in that case. */
+  secureLabel?: string;
   /** phone CTA click. */
   onCall?: () => void;
   /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
@@ -1488,6 +1494,8 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   oldMonthly,
   ratingLabel,
   onSecure,
+  secured,
+  secureLabel,
   onCall,
   onOpenAdjust,
   down,
@@ -1501,10 +1509,10 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   const rate = monthly != null ? monthly : vehicle.monthly;
   const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
   const evalTier = tierIdx >= 0 ? tierIdx : 1;
-  // "good" collapses into the same "Top-Preis" label as the actual top tier (superscript marks
-  // the collapse) — identical convention to CarCard's PriceEvalCol / FinanceCalculator's pill.
   const isGoodTier = TIER_KEYS[evalTier] === 'good';
-  const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // each tier shows its own real label now (Top/Guter/Fairer/Erhöht/Hoher Preis) — no more
+  // collapsing 'good' onto the "Top-Preis" claim. Pill styling (colour/bg/class/footnote) unchanged.
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
   const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
   const evalPillBackground = isGoodTier ? TIER_BACKGROUNDS[0] : TIER_BACKGROUNDS[evalTier];
   // condition summary — same wording/order as FinanceCalculator's own .fin-cond (financing
@@ -1713,6 +1721,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
       <div className="bb-cta-row">
         <Button
           variant="filled"
+          className={secured ? 'fin-cta-secured' : undefined}
           style={{
             width: isCash ? undefined : 180,
             flex: isCash ? 1 : undefined,
@@ -1730,8 +1739,8 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
           }}
           onClick={onSecure}
         >
-          <DocCheckIcon size={23} />
-          {t('autobahn:bottom.secureOffer')}
+          {secured ? <Icon name="shield-check" size={18} /> : <DocCheckIcon size={23} />}
+          {secured && secureLabel ? secureLabel : t('autobahn:bottom.secureOffer')}
         </Button>
         {/* padding:0 — icon-only button (same fix as the sheet's phone button) */}
         {onCall && (
@@ -2192,18 +2201,172 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           {/* ============================== DESKTOP (≥601px) — always-expanded breakdown, no tabs
               (the desktop .fin-calc-card owns its own tabs outside this modal) ============================== */}
           <div className="hide-mobile">
-            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
-              <span className="num" style={{ fontSize: 34, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-1px' }}>
-                {eur(monthly)} €{oldMonthly != null && <> <s className="fin-rate-old">{eur(Math.round(oldMonthly))} €</s></>}
-              </span>
-              <span className="md-label-sm">{t('autobahn:finance.perMonth')}</span>
+            <div className={'fin-price-grid' + (isCash ? ' fin-price-grid--cash' : '')} style={{ marginBottom: 14 }}>
+              <div className="fin-rate-main">
+                {isCash && listPrice != null && listPrice > price && (
+                  <div
+                    style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0 }}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setUvpTooltipOpen((v) => !v)}
+                  >
+                    <s className="num fin-rate-old fin-rate-old-list">
+                      {eur(listPrice)} €
+                      <span
+                        className="pp-eyebrow-badge"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setUvpTooltipOpen((v) => !v);
+                        }}
+                      >
+                        2
+                      </span>
+                      {uvpTooltipOpen && (
+                        <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            type="button"
+                            className="pp-uvp-tooltip-close"
+                            aria-label={t('autobahn:modal.close')}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setUvpTooltipOpen(false);
+                            }}
+                          >
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                            </svg>
+                          </button>
+                          <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                        </div>
+                      )}
+                    </s>
+                  </div>
+                )}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
+                  {isCash ? (
+                    <span
+                      className={`num fin-rate-cash-mobile${
+                        (() => {
+                          const digits = String(Math.round(price)).length;
+                          if (digits >= 8) return ' fin-rate-cash-mobile--len8';
+                          if (digits === 7) return ' fin-rate-cash-mobile--len7';
+                          if (digits === 6) return ' fin-rate-cash-mobile--len6';
+                          return '';
+                        })()
+                      }`}
+                      style={{ fontSize: 45, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                    >
+                      {eur(price)} €<sup>1</sup>
+                    </span>
+                  ) : (
+                    <>
+                      <span
+                        className={`num fin-rate-hero${
+                          (() => {
+                            const digits = String(Math.round(monthly)).length;
+                            if (digits >= 6) return ' fin-rate-hero--len6';
+                            if (digits === 5) return ' fin-rate-hero--len5';
+                            if (digits === 4) return ' fin-rate-hero--len4';
+                            return '';
+                          })()
+                        }`}
+                        style={{ fontSize: 65, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                      >
+                        {eur(Math.round(monthly))}<span style={{ marginLeft: 6 }}>€</span>
+                      </span>
+                      <span className="fin-rate-unit">
+                        {oldMonthly != null && (
+                          <span
+                            style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => setUvpTooltipOpen((v) => !v)}
+                          >
+                            <span className="pp-eyebrow">
+                              {t('autobahn:card.price.uvpRateLabel')}
+                              <span
+                                className="pp-eyebrow-badge"
+                                role="button"
+                                tabIndex={0}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setUvpTooltipOpen((v) => !v);
+                                }}
+                              >
+                                3
+                              </span>
+                              {uvpTooltipOpen && (
+                                <div
+                                  className={'pp-uvp-tooltip' + (mode === 'leasing' ? ' pp-uvp-tooltip--leasing' : '')}
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <button
+                                    type="button"
+                                    className="pp-uvp-tooltip-close"
+                                    aria-label={t('autobahn:modal.close')}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      setUvpTooltipOpen(false);
+                                    }}
+                                  >
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                      <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                                    </svg>
+                                  </button>
+                                  <div className="pp-uvp-tooltip-body">
+                                    {t(
+                                      mode === 'leasing'
+                                        ? 'autobahn:card.price.uvpRateTooltipBodyLeasing'
+                                        : 'autobahn:card.price.uvpRateTooltipBody',
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                            </span>
+                            <s
+                              className={`num fin-rate-old fin-rate-example-price${
+                                String(Math.round(oldMonthly)).length >= 5
+                                  ? ' fin-rate-example-price--len5'
+                                  : String(Math.round(oldMonthly)).length === 4
+                                    ? ' fin-rate-example-price--len4'
+                                    : ''
+                              }`}
+                            >
+                              {eur(Math.round(oldMonthly))} €
+                            </s>
+                          </span>
+                        )}
+                        <span className="fin-rate-example-suffix">
+                          {t('autobahn:finance.perMonth')}
+                        </span>
+                      </span>
+                    </>
+                  )}
+                </div>
+              </div>
+              <div className="fin-eval-col">
+                <div className="fin-eval-pill-cell">
+                  {ratingLabel && (
+                    <span
+                      className={`fin-eval-pill${TIER_KEYS[evalTier] === 'good' ? ' fin-eval-pill--good' : ''}`}
+                      style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                    >
+                      {evalTierLabel}
+                      {TIER_KEYS[evalTier] === 'good' && <sup>4</sup>}
+                    </span>
+                  )}
+                </div>
+                <div className="fin-eval-bar-cell">{ratingLabel && <EvalBar tier={evalTier} />}</div>
+              </div>
             </div>
             {/* adjustment sliders — change a value and every figure below recomputes live (via the page) */}
             {adjustable && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
                 <div>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
+                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabelSheet')}</span>
                     <span className="num" style={{ fontWeight: 700 }}>
                       {eur(down)} €
                     </span>
@@ -2266,6 +2429,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 checked={!!withAddServices}
                 disabled={addServicesDisabled}
                 onChange={onToggleAddServices}
+                tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
+                tooltipCloseLabel={t('autobahn:modal.close')}
               />
             )}
             <div ref={desktopBreakdownRef} style={!isCash ? { marginTop: 18 } : undefined}>
@@ -2564,7 +2729,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
               </div>
             )}
 
-            <div className={'fin-price-grid' + (isCash ? ' fin-price-grid--cash' : '')}>
+            <div className={'fin-price-grid' + (isCash ? ' fin-price-grid--cash' : '')} style={{ paddingBottom: 10 }}>
               <div className="fin-rate-main">
                 {/* Figma Kaufen sheet: struck list price ABOVE the price, aligned to its right
                     edge (inline-beside wraps — the 44px phone hero fills the whole column) */}
@@ -2728,12 +2893,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
             {isCash ? (
               <>
                 <div>
-                  <CalcRow className="calcrow--payment" label={t('autobahn:finance.paymentLabel')}>
+                  <CalcRow className="calcrow--payment" label={t('autobahn:finance.paymentLabel')} last={!available}>
                     {t('autobahn:finance.paymentValue')}
                   </CalcRow>
-                  <CalcRow className="calcrow--payment" label={t('autobahn:finance.warrantyLabel')} last={!available}>
-                    {t('autobahn:finance.warrantyValue')}
-                  </CalcRow>
                   {/* Lieferung row disabled per request, replaced by real availability
                       (carStore.isAvailable) — same "Sofort verfügbar" wording as VdpTrustRow.
                   <CalcRow className="calcrow--payment" label={t('autobahn:finance.deliveryLabel')} last>
@@ -2755,6 +2917,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     disabled={addServicesDisabled}
                     onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
                     staticNote={t('autobahn:finance.addServicesIncluded')}
+                    tooltip={<AddServicesTooltipBody t={t} isCash />}
+                    tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}
                 {/* pushed to the sheet's bottom edge — Figma keeps a big breathing gap above */}
@@ -2810,8 +2974,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     <div>
                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-                          {t('autobahn:finance.downPaymentSliderLabel')}
-                          <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+                          {t('autobahn:finance.downPaymentSliderLabelSheet')}
                         </span>
                         <span className="num fin-down-value" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
                           {eur(down)} €
@@ -2842,7 +3005,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         >
                           <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                             {t('autobahn:finance.annualMileageLabel')}
-                            <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
                           </span>
                           <span className="num" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
                             {eur(annualMileage)} km
@@ -2891,6 +3053,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
+                    tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
+                    tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}