@bytebrand/fe-ui-core-autobahn 1.0.60 → 1.0.61

package/vdp/VdpModules.tsx

@@ -28,7 +28,7 @@ import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars, Switch }
 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 { formatEur as eur, formatPct as pct, buildFinanceExampleLine } from '../utils/financeFormat';
+import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
 
 /** 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). */
@@ -1957,54 +1957,76 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
   // never a fabricated/misleading total.
   const netto = netLoanAmount != null ? netLoanAmount : Math.max(0, price - down);
-  const rows: Array<[string, string]> = [
+  // "Rundum-Sorglos-Paket" one-time fee only counts toward the breakdown when the customer
+  // actually has it switched on (cash mode forces it on upstream) AND a real cost is known.
+  const hasAddServices = !!withAddServices && addServicesCost != null && addServicesCost > 0;
+  // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
+  // real Gesamtbetrag + the package fee. Only shown when Gesamtbetrag is known (never fabricated).
+  const totalCost = grossAmount != null && grossAmount > 0 ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : 0) : undefined;
+  const rows: Array<[string, string, boolean?]> = [
     [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
-    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
+    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
     [t('autobahn:modal.downPayment'), `${eur(down)} €`],
     ...(isLease && annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-    [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
+    [
+      isLease ? t('autobahn:modal.leasingRateCount', { count: term }) : t('autobahn:modal.monthlyRateCount', { count: term }),
+      `${eur(monthly)} €`,
+    ],
+    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+    ...(hasAddServices ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesCost as number)} €`]] as Array<[string, string]>) : []),
     ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
     [t('autobahn:modal.effectiveRate'), pct(apr)],
-    ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
-    [isLease ? t('autobahn:modal.leasingRate') : t('autobahn:modal.monthlyRate'), t('autobahn:modal.ratePerMonth', { amount: eur(monthly) })],
+    [isLease ? t('autobahn:modal.leasingAmount') : t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
     ...(grossAmount != null && grossAmount > 0 ? ([[isLease ? t('autobahn:modal.totalAmount') : t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+    ...(totalCost != null
+      ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
+          [string, string, boolean]
+        >)
+      : []),
+    ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
   ];
-  const breakdownRows = rows.map(([l, v], i) => (
+  const breakdownRows = rows.map(([l, v, bold], i) => (
     <div
       key={l}
       style={{
         display: 'flex',
-        justifyContent: 'space-between',
-        gap: 12,
-        padding: '9px 0',
-        borderBottom: i < rows.length - 1 ? '1px solid var(--md-outline-variant)' : 0,
+        alignItems: 'baseline',
+        gap: 8,
+        padding: '7px 0',
+        borderTop: '1px solid rgba(212, 221, 231, 0.95)',
       }}
     >
-      <span className="md-label-sm">{l}</span>
-      <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+      <span
+        style={{
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          fontStyle: 'normal',
+          fontWeight: bold ? 700 : 400,
+          fontSize: 13,
+          lineHeight: '13px',
+          color: '#0e2238',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {l}
+      </span>
+      <span
+        className="num"
+        style={{
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          fontStyle: 'normal',
+          fontWeight: bold ? 700 : 400,
+          fontSize: 13,
+          lineHeight: '13px',
+          color: '#0e2238',
+          whiteSpace: 'nowrap',
+          marginLeft: 'auto',
+        }}
+      >
         {v}
       </span>
     </div>
   ));
 
-  // mobile sheet footnote — the Figma representative example: real figures inline
-  // ("³ Fahrzeugpreis: … €; Effektiver Jahreszins: … %; …") followed by the PangV sentence.
-  // Only REAL config figures are included; absent ones are simply omitted — shared logic with
-  // the Meta AIA marketing-image renderer, see ../utils/financeFormat.ts.
-  const exampleLine = buildFinanceExampleLine(
-    { price, apr, down, netLoanAmount, nominalRate, finalInstallment, grossAmount },
-    {
-      vehiclePrice: t('autobahn:modal.exampleVehiclePrice'),
-      priceSuffix: t('autobahn:modal.examplePriceSuffix'),
-      apr: t('autobahn:modal.exampleApr'),
-      nominal: t('autobahn:modal.exampleNominal'),
-      net: t('autobahn:modal.exampleNet'),
-      down: t('autobahn:modal.exampleDown'),
-      final: t('autobahn:modal.exampleFinal'),
-      gross: t('autobahn:modal.exampleGross'),
-    },
-  );
-
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div
@@ -2408,7 +2430,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 </div>
 
                 {/* centered ⓘ details toggle (mockup shows no chevron) */}
-                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0' }}>
+                <button type="button" onClick={() => setShowBreakdown((v) => !v)} style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>
                   <span
                     style={{
                       display: 'inline-flex',
@@ -2425,27 +2447,180 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
                   </span>
                 </button>
-                {/* mobile mockup shows NO row-by-row breakdown table (round 9 review) — the Figma
-                    footnote: real figures inline, then the PangV sentence (round 12). */}
+                {/* mobile "Finanzierungsdetails" toggle reveals the same row-by-row breakdown
+                    table as desktop (breakdownRows, built once above) instead of the old
+                    condensed footnote line. */}
                 {showBreakdown && (
-                  <div>
+                  <>
+                    <div style={{ marginBottom: 5 }}>
+                      <p
+                        style={{
+                          fontFamily: 'Arial, Helvetica, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 16,
+                          lineHeight: '18px',
+                          color: '#0E2238',
+                          margin: 0,
+                          marginBottom: 5,
+                          paddingTop: 10,
+                          borderTop: '1px solid rgba(212, 221, 231, 0.95)',
+                        }}
+                      >
+                        {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>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 10,
+                        background: '#FAFBFD',
+                        border: '1px solid #D4DDE7',
+                        borderRadius: 6,
+                        padding: 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>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 700,
+                            fontSize: 14,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                            marginBottom: 3,
+                          }}
+                        >
+                          {t('autobahn:modal.lenderLabel')}
+                        </p>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 12,
+                            lineHeight: '13px',
+                            color: '#0E2238',
+                            margin: 0,
+                          }}
+                        >
+                          {t('autobahn:modal.lenderName')}
+                        </p>
+                      </div>
+                    </div>
                     <p
-                      className="md-label-sm"
                       style={{
+                        fontFamily: 'Arial, Helvetica, sans-serif',
+                        fontWeight: 700,
+                        fontSize: 13.3,
+                        lineHeight: '17px',
+                        color: '#0E2238',
                         margin: 0,
-                        paddingTop: 12.5,
+                        marginBottom: 7,
+                      }}
+                    >
+                      {t('autobahn:modal.legalNoticesTitle')}
+                    </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: 10,
-                        lineHeight: '10px',
-                        color: '#000000',
+                        fontSize: 12,
+                        lineHeight: '12px',
+                        color: '#0E2238',
+                        margin: 0,
+                        paddingBottom: 10,
+                        borderBottom: '1px solid rgba(212, 221, 231, 0.95)',
                       }}
                     >
-                      {exampleLine}
-                      <br />
-                      {isLease ? t('autobahn:modal.legalLeasing') : t('autobahn:modal.legalFinancing')}
+                      {t('autobahn:modal.listPriceFootnote')}
                     </p>
-                  </div>
+                    <div className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, paddingBottom: 15 }}>
+                      <Button
+                        variant="filled"
+                        size="lg"
+                        style={{
+                          width: 286,
+                          height: 50,
+                          background: '#005CFF',
+                          borderRadius: 16,
+                          justifyContent: 'flex-start',
+                          paddingLeft: 47,
+                          paddingRight: 47,
+                          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>
+                      {/* padding:0 — mbtn--lg's 30px side padding left no room for the icon at width 52 */}
+                      <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>
+                  </>
                 )}
               </>
             )}