@bytebrand/fe-ui-core-autobahn 1.0.99 → 1.0.101

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -68,11 +68,12 @@
   border: none !important;
 
 .zustimmenBtn
-  width: calc(50% - 18px) !important
-  min-width: calc(50% - 18px) !important
+  padding: 9.95px 36.87px 11.05px 35.63px !important
+  width: 142.5px !important
+  min-width: 142.5px !important
   height: 38px !important
-  background: #005CCB !important
-  border-radius: 4px !important
+  background: #005CFF !important
+  border-radius: 16px !important
   display: flex !important
   align-items: center !important
   justify-content: center !important

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -26,13 +26,14 @@
     margin-top: 8px;
 
 .modalContent
-  font-family: sans-serif
+  margin-top: 3px
+  font-family: 'Arial'
+  font-weight: 400
   font-size: 14px;
   line-height: 16px;
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 20px
   +media-tablet-down()
     font-family: 'Arial';
     font-weight: 400;
@@ -65,6 +66,7 @@
     font-size: 11px !important
 
 .necessaryCookiesBtn
+  text-transform: none !important
   display: flex !important
   flex-direction: column !important
   align-items: center !important
@@ -72,10 +74,10 @@
   width: 184px !important
   min-width: 184px !important
   height: 38px !important
-  background: #005CCB !important
+  background: #005CFF !important
   box-shadow: 0px 4px 8px -4px rgba(76, 78, 100, 0.42) !important
-  border-radius: 4px !important
-  font-family: 'Inter' !important
+  border-radius: 16px !important
+  font-family: 'Arial' !important
   font-weight: 500 !important
   font-size: 14px !important
   line-height: 24px !important
@@ -83,9 +85,11 @@
   color: #FFFFFF !important
 
 .anpassenBtn
-  border: 1px solid rgba(102, 108, 255, 0.5) !important
+  box-sizing: border-box !important
+  padding: 9.95px 39.39px 11.05px 40.11px !important
+  border: 1px solid #005CFF !important
   box-shadow: none !important
-  border-radius: 4px !important
+  border-radius: 16px !important
   width: 142.5px !important
   min-width: 142.5px !important
   height: 38px !important
@@ -94,17 +98,19 @@
   justify-content: center !important
   text-align: center !important
   font-family: 'Arial' !important
+  font-style: normal !important
   font-weight: 400 !important
   font-size: 14px !important
   line-height: 16px !important
-  color: #1976D2 !important
+  color: #005CFF !important
 
 .zustimmenBtn
+  padding: 9.95px 36.87px 11.05px 35.63px !important
   width: 142.5px !important
   min-width: 142.5px !important
   height: 38px !important
-  background: #005CCB !important
-  border-radius: 4px !important
+  background: #005CFF !important
+  border-radius: 16px !important
   display: flex !important
   align-items: center !important
   justify-content: center !important
@@ -120,6 +126,7 @@
   display: flex;
   justify-content: flex-end;
   font-family: 'Arial';
+  font-style: normal;
   font-weight: 400;
   color: #005CCB;
   font-size: 16px;

package/locales/de/autobahn.json

@@ -699,7 +699,7 @@
     "vehiclePrice": "Fahrzeugpreis ggf. inkl. MwSt.",
     "leasingAmount": "Leasingbetrag",
     "netLoanAmount": "Nettodarlehensbetrag",
-    "downPayment": "Sonderzahlung",
+    "downPayment": "Anzahlung",
     "annualMileage": "Laufleistung / Jahr",
     "term": "Vertragslaufzeit",
     "months": "{{months}} Monat",

package/locales/en/autobahn.json

@@ -699,7 +699,7 @@
     "vehiclePrice": "Vehicle price (incl. VAT, if applicable)",
     "leasingAmount": "Leasing amount",
     "netLoanAmount": "Net loan amount",
-    "downPayment": "Special payment",
+    "downPayment": "Down payment",
     "annualMileage": "Mileage / year",
     "term": "Contract term",
     "months": "{{months}} month",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.99",
+  "version": "1.0.101",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/vdp/VdpModules.tsx

@@ -2057,13 +2057,22 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // "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;
   // one-time package figure shown in the breakdown: 0 € while bundled into the rate (its cost is
   // already carried inside `monthly` instead), the real flat price when switched off.
   const addServicesRowValue = withAddServices ? 0 : addServicesCostRaw ?? 0;
   const hasAddServicesRow = addServicesCostRaw != null && addServicesCostRaw > 0;
+  // Grand total (Figma "Gesamtbelastung inkl. Anzahlung & Paket") — down payment + the config's
+  // real Gesamtbetrag + the package fee. The package is mandatory (see packageMandatoryNotice) —
+  // the toggle only decides HOW it's paid (bundled into the rate vs. a separate one-time charge),
+  // never WHETHER it's owed, so the total must include it either way: `addServicesCost` when
+  // bundled (toggle on), the raw one-time fee (`addServicesRowValue`, same as the breakdown row
+  // above it) when paid separately (toggle off) — previously dropped to 0 in the off case, so the
+  // grand total silently excluded a cost the breakdown row directly above it was still showing.
+  // Only shown when Gesamtbetrag is known (never fabricated).
+  const totalCost =
+    grossAmount != null && grossAmount > 0
+      ? down + grossAmount + (hasAddServices ? (addServicesCost as number) : hasAddServicesRow ? addServicesRowValue : 0)
+      : undefined;
 
   let rows: Array<[string, string, boolean?]>;
   if (isLease) {
@@ -2122,7 +2131,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
       [t('autobahn:modal.netLoanAmount'), `${eurCents(netto)} €`],
       ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eurCents(grossAmount)} €`]] as Array<[string, string]>) : []),
       ...(totalCost != null
-        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eurCents(totalCost)} €`, true]] as Array<
+        ? ([[hasAddServices || hasAddServicesRow ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eurCents(totalCost)} €`, true]] as Array<
             [string, string, boolean]
           >)
         : []),