@bytebrand/fe-ui-core-autobahn 1.0.76 → 1.0.78

package/vdp/VdpModules.tsx

@@ -24,10 +24,10 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch } from '../ui';
+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 } from './FinanceCalculator';
+import { 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
@@ -1464,6 +1464,14 @@ export interface VdpBottomBarProps {
   onCall?: () => void;
   /** opens the "Rate anpassen" sheet; when omitted the button is not rendered. */
   onOpenAdjust?: () => void;
+  /** current down payment (fin) / Sonderzahlung (leasing) in EUR — drives the .fin-cond line. */
+  down?: number;
+  /** current term in months — drives the .fin-cond line. */
+  term?: number;
+  /** leasing annual mileage (km/yr) — leasing-only part of the .fin-cond line. */
+  annualMileage?: number;
+  /** opens the Finanzierungs-/Leasingdetails popup (expanded); when omitted the link is hidden. */
+  onShowDetails?: () => void;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -1482,6 +1490,10 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   onSecure,
   onCall,
   onOpenAdjust,
+  down,
+  term,
+  annualMileage,
+  onShowDetails,
   t,
 }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
@@ -1495,6 +1507,21 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : 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
+  // "0 € Anzahlung · 60 Monate", leasing "0 € Sonderzahlung · 36 Mon. · 10.000 km/Jahr").
+  const condParts: string[] = [];
+  if (mode === 'leasing') {
+    condParts.push(
+      ...t('autobahn:card.price.leaseTerms', {
+        firstInstallment: eur(down || 0),
+        months: term,
+        mileage: annualMileage != null ? eur(annualMileage) : '',
+      }).split(' · '),
+    );
+  } else if (!isCash) {
+    condParts.push(t('autobahn:finance.downPaymentLabel', { value: eur(down || 0) }));
+    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
+  }
   const priceStyle: React.CSSProperties = isCash
     ? {
         fontFamily: 'Arial, Helvetica, sans-serif',
@@ -1665,6 +1692,24 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
           </div>
         )}
       </div>
+      {!isCash && (
+        <div className="fin-cond">
+          {condParts.map((part, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <span className="cc-terms-dot"> · </span>}
+              {part}
+            </React.Fragment>
+          ))}
+          {onShowDetails && (
+            <>
+              <span className="cc-terms-dot"> · </span>
+              <button type="button" className="cc-terms-link" onClick={onShowDetails}>
+                {mode === 'leasing' ? t('autobahn:card.price.detailsLink') : t('autobahn:finance.financingDetails')}
+              </button>
+            </>
+          )}
+        </div>
+      )}
       <div className="bb-cta-row">
         <Button
           variant="filled"
@@ -1776,40 +1821,8 @@ export const InspectionBlock: React.FunctionComponent<InspectionBlockProps> = ({
 // Finanzierungs-/Leasingdetails popup (desktop modal / mobile bottom-sheet)
 // ---------------------------------------------------------------------------
 
-/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
- *  (sized to its own content), so the space-between has to live on this wrapper, not on
- *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
-const ToggleRow: React.FunctionComponent<{
-  label: string;
-  price?: string;
-  checked: boolean;
-  disabled?: boolean;
-  onChange: (checked: boolean) => void;
-  className?: string;
-  /** cash mode: the package is always included — shows a static "inklusive" note instead of the switch. */
-  staticNote?: string;
-}> = ({ label, price, checked, disabled, onChange, className, staticNote }) => (
-  <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: staticNote ? undefined : 'space-between', gap: 10 }}>
-    <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-      {label}
-      <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
-    </span>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: staticNote ? 'auto' : undefined }}>
-      {price && (
-        <span className="num" style={{ fontWeight: 700, fontSize: 13.5, marginRight: staticNote ? 'auto' : undefined }}>
-          {price}
-        </span>
-      )}
-      {staticNote ? (
-        <span style={{ fontFamily: 'Arial', fontWeight: 400, fontSize: 15, lineHeight: '17px', color: '#0E2238' }}>
-          {staticNote}
-        </span>
-      ) : (
-        <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
-      )}
-    </div>
-  </div>
-);
+// ToggleRow lives in FinanceCalculator.tsx (imported above) — shared with the desktop
+// .fin-calc-card's own "Rate anpassen" panel, which needs the same toggles.
 
 export interface FinanceDetailsModalProps {
   /** open flag (controlled by the page). */
@@ -1943,10 +1956,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // modal's mobile "Rate anpassen" sheet renders its own separate copy of that hero row, so it
   // needs its own tooltip-open state (not shared with FinanceCalculator's instance).
   const [uvpTooltipOpen, setUvpTooltipOpen] = React.useState(false);
-  // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — scroll the
-  // modal's own scroll container down to the breakdown table instead of leaving the user at
-  // the top (desktop/mobile render it in separate hide-mobile/show-mobile branches, so try both
-  // refs and scroll whichever one is actually laid out at the current breakpoint).
+  // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — on mobile the
+  // breakdown is still gated behind its own toggle, so scroll the sheet down to reveal it instead
+  // of leaving the user at the top. Desktop always shows the breakdown inline now (no toggle), so
+  // it's excluded here — scrolling straight past the price/sliders/toggles on open was jarring.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {
@@ -1954,8 +1967,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     setShowBreakdown(!!initialShowBreakdown);
     if (!initialShowBreakdown) return;
     const timer = window.setTimeout(() => {
-      const target = [desktopBreakdownRef.current, mobileBreakdownRef.current].find((el) => el && el.offsetParent !== null);
-      target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const target = mobileBreakdownRef.current;
+      if (target && target.offsetParent !== null) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2176,7 +2189,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           </button>
         </div>
         <div className="fin-modal-body">
-          {/* ============================== DESKTOP (≥601px) — unchanged ============================== */}
+          {/* ============================== 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' }}>
@@ -2225,14 +2239,303 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   <div className="md-title-sm" style={{ marginBottom: 8 }}>
                     {t('autobahn:finance.termSelection')}
                   </div>
-                  <TermChips options={termVals} value={term} onChange={onTermChange as (n: number) => void} t={t} />
+                  <TermChips
+                    options={termVals.filter((v) => v !== 12 && v !== 96)}
+                    value={term}
+                    onChange={onTermChange as (n: number) => void}
+                    t={t}
+                  />
                 </div>
               </div>
             )}
-            <div ref={desktopBreakdownRef}>{breakdownRows}</div>
-            <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
-              {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
-            </p>
+            {/* same Mit-Schlussrate / Rundum-Sorglos-Paket toggles as the mobile sheet — desktop
+                had neither before, silently dropping two controls the mobile view already had. */}
+            {!isCash && !isLease && onToggleFinalInstallment && (
+              <ToggleRow
+                className="fin-toggle-final"
+                label={t('autobahn:finance.finalInstallmentToggle')}
+                checked={!!withFinalInstallment}
+                onChange={onToggleFinalInstallment}
+              />
+            )}
+            {!isCash && addServicesCost != null && onToggleAddServices && (
+              <ToggleRow
+                className={'fin-toggle-addservices' + (isLease ? ' fin-toggle-addservices--leasing' : '')}
+                label={t('autobahn:finance.addServicesToggle')}
+                price={t('autobahn:finance.addServicesPerMonth', { value: eur(Math.round(addServicesCost)) })}
+                checked={!!withAddServices}
+                disabled={addServicesDisabled}
+                onChange={onToggleAddServices}
+              />
+            )}
+            <div ref={desktopBreakdownRef} style={!isCash ? { marginTop: 18 } : undefined}>
+              {!isCash && (
+                <>
+                  <p
+                    style={{
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 16,
+                      lineHeight: '18px',
+                      color: '#0E2238',
+                      margin: 0,
+                      marginBottom: 5,
+                    }}
+                  >
+                    {t('autobahn:modal.representativeExample')}
+                  </p>
+                  <p
+                    style={{
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 9,
+                      lineHeight: '12px',
+                      color: '#5B6B7F',
+                      marginBottom: 5,
+                    }}
+                  >
+                    {t('autobahn:modal.vatDisclaimer')}
+                  </p>
+                </>
+              )}
+              {breakdownRows}
+            </div>
+            {isCash ? (
+              <p className="md-label-sm" style={{ marginTop: 16, lineHeight: 1.55 }}>
+                {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+              </p>
+            ) : (
+              <>
+                {/* Darlehensgeber disclosure box — same content as the mobile "Finanzierungs-Details"
+                    expander, just always visible on desktop instead of gated behind a toggle. */}
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 10,
+                    background: '#FAFBFD',
+                    border: '1px solid #D4DDE7',
+                    borderRadius: 6,
+                    padding: 10,
+                    marginTop: 10,
+                    marginBottom: 10,
+                  }}
+                >
+                  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none' }}>
+                    <path d="M2.7002 9.00001L13.5002 3.60001L24.3002 9.00001H2.7002Z" stroke="#0E2238" strokeWidth="1.6" strokeLinejoin="round" />
+                    <path d="M4.49961 10.8H22.4996M5.39961 21.6H21.5996M3.59961 24.3H23.3996" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                    <path d="M7.2002 10.8V21.6M11.7002 10.8V21.6M15.3002 10.8V21.6M19.8002 10.8V21.6" stroke="#0E2238" strokeWidth="1.6" />
+                  </svg>
+                  <div style={{ width: '100%' }}>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 700,
+                        fontSize: 14,
+                        lineHeight: '13px',
+                        color: '#0E2238',
+                        margin: 0,
+                        marginBottom: 3,
+                      }}
+                    >
+                      {isLease ? t('autobahn:modal.leaseLenderLabel') : t('autobahn:modal.lenderLabel')}
+                    </p>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 400,
+                        fontSize: 12,
+                        lineHeight: '13px',
+                        color: '#0E2238',
+                        margin: 0,
+                      }}
+                    >
+                      {isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName')}
+                    </p>
+                    {isLease && (
+                      <>
+                        <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 700,
+                            fontSize: 14,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                            marginBottom: 3,
+                          }}
+                        >
+                          {t('autobahn:modal.contractTypeLabel')}
+                        </p>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                          }}
+                        >
+                          {t('autobahn:modal.contractTypeValue')}
+                        </p>
+                      </>
+                    )}
+                  </div>
+                </div>
+                {isLease && hasAddServicesRow && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      gap: 10,
+                      background: '#F7FAFE',
+                      border: '0.5px solid #D6DEE8',
+                      borderRadius: 5,
+                      padding: '7px 8px',
+                      marginBottom: 10,
+                    }}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flex: 'none', marginTop: 2 }}>
+                      <circle cx="12" cy="12" r="10" stroke="#0E2238" strokeWidth="1.6" />
+                      <path d="M12 16v-4" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                      <path d="M12 8h.01" stroke="#0E2238" strokeWidth="1.6" strokeLinecap="round" />
+                    </svg>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 400,
+                        fontSize: 10,
+                        lineHeight: '10px',
+                        textAlign: 'justify',
+                        color: '#0E2238',
+                        margin: 0,
+                      }}
+                    >
+                      {t('autobahn:modal.packageMandatoryNotice', { amount: eur(addServicesCostRaw ?? 0) })}
+                    </p>
+                  </div>
+                )}
+                <p
+                  style={{
+                    fontFamily: 'Arial, Helvetica, sans-serif',
+                    fontWeight: 700,
+                    fontSize: 13.3,
+                    lineHeight: '17px',
+                    color: '#0E2238',
+                    margin: 0,
+                    marginBottom: 7,
+                  }}
+                >
+                  {t('autobahn:modal.legalNoticesTitle')}
+                </p>
+                {isLease ? (
+                  <>
+                    <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
+                      {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
+                    </p>
+                    <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
+                      {t('autobahn:modal.legalFootnoteListPriceLease')}
+                    </p>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 400,
+                        fontSize: 12,
+                        lineHeight: '12px',
+                        color: '#0E2238',
+                        margin: 0,
+                        paddingBottom: 10,
+                      }}
+                    >
+                      {t('autobahn:modal.closingDisclaimerLine1')}
+                      <br />
+                      {t('autobahn:modal.closingDisclaimerLine2')}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <ul style={{ margin: 0, marginBottom: 3, paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
+                      {[
+                        t('autobahn:modal.legalNoticeCreditworthiness'),
+                        t('autobahn:modal.legalNoticeExample'),
+                        t('autobahn:modal.legalNoticeTwoThirds'),
+                        t('autobahn:modal.legalNoticeVat'),
+                        t('autobahn:modal.legalNoticeAddServices'),
+                      ].map((notice) => (
+                        <li
+                          key={notice}
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '12px',
+                            color: '#0E2238',
+                          }}
+                        >
+                          {notice}
+                        </li>
+                      ))}
+                    </ul>
+                    <p
+                      style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 400,
+                        fontSize: 12,
+                        lineHeight: '12px',
+                        color: '#0E2238',
+                        margin: 0,
+                        paddingBottom: 10,
+                      }}
+                    >
+                      {t('autobahn:modal.listPriceFootnote')}
+                    </p>
+                  </>
+                )}
+                <div className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, marginTop: 4 }}>
+                  <Button
+                    variant="filled"
+                    size="lg"
+                    style={{
+                      flex: 1,
+                      height: 50,
+                      background: '#005CFF',
+                      borderRadius: 16,
+                      justifyContent: 'center',
+                      fontFamily: 'Arial, Helvetica, sans-serif',
+                      fontWeight: 700,
+                      fontSize: 14,
+                      lineHeight: '16px',
+                      textAlign: 'center',
+                      color: '#FFFFFF',
+                    }}
+                    onClick={onSecure}
+                  >
+                    <span style={{ display: 'inline-flex', marginRight: 18 }}>
+                      <DocCheckIcon size={23} />
+                    </span>
+                    {t('autobahn:finance.requestRate')}
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    size="lg"
+                    icon="phone"
+                    className="fin-sheet-call-btn"
+                    style={{
+                      width: 50,
+                      height: 50,
+                      flex: 'none',
+                      padding: 0,
+                      background: '#FFFFFF',
+                      border: '1.6px solid #005CFF',
+                      borderRadius: 16,
+                    }}
+                    onClick={onCall}
+                  />
+                </div>
+              </>
+            )}
           </div>
 
           {/* ============================== MOBILE (≤600px) — full "Rate anpassen" sheet ============================== */}
@@ -2266,7 +2569,12 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {/* 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) */}
                 {isCash && listPrice != null && listPrice > price && (
-                  <div style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0 }}>
+                  <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
@@ -2333,7 +2641,15 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       </span>
                       <span className="fin-rate-unit">
                         {oldMonthly != null && (
-                          <>
+                          <span
+                            style={{ display: 'flex', flexDirection: 'column' }}
+                            role="button"
+                            tabIndex={0}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setUvpTooltipOpen((v) => !v);
+                            }}
+                          >
                             <span className="pp-eyebrow">
                               {t('autobahn:card.price.uvpRateLabel')}
                               <span
@@ -2383,7 +2699,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             >
                               {eur(Math.round(oldMonthly))} €
                             </s>
-                          </>
+                          </span>
                         )}
                         <span className="fin-rate-example-suffix">
                           {t('autobahn:finance.perMonth')}