@bytebrand/fe-ui-core-autobahn 1.0.141 → 1.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "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/theme/md3.css

@@ -6544,15 +6544,15 @@ line-height: 31px;
     align-items: flex-end;
     padding: 0;
   }
-  /* one fixed height, whatever is inside (collapsed rate controls, the details below them, or
-     the Kaufen tab) — sized off the fixed inset:0 scrim, i.e. the CURRENT visible height, not
-     vh (on iOS Safari 100vh > the visible area while the toolbar shows, which pushed the sheet's
-     top off-screen). No height change on "Finanzierungs-Details" = no jump; the details are
-     already rendered below the CTAs and only get scrolled to. */
+  /* one fixed height (the original 85vh look), whatever is inside — collapsed rate controls,
+     the expanded details, or the Kaufen tab. Opening "Finanzierungs-Details" no longer grows the
+     sheet (was min-height 85vh -> 100vh, which jumped it over the page header and, on iOS
+     Safari where 100vh > the visible area, pushed its top off-screen); the details scroll
+     inside instead. max-height caps it to the fixed inset:0 scrim's CURRENT visible height. */
   .md3 .fin-modal {
     max-width: none;
-    height: calc(100% - 24px);
-    max-height: none;
+    height: 85vh;
+    max-height: calc(100% - 24px);
     background: #FFFFFF;
     box-shadow: 0px -4px 18px rgba(0, 0, 0, 0.13);
     border-radius: 26px 26px 0px 0px;

package/vdp/VdpModules.tsx

@@ -2216,16 +2216,19 @@ 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 page's "Finanzierungsdetails" link (initialShowBreakdown): open the
-  // sheet scrolled to the breakdown instead of the rate controls at its top. Desktop always shows
-  // the breakdown inline but it can sit below the fold of .fin-modal-body's own scroll area too —
-  // whichever of the two refs is actually visible (show-mobile/hide-mobile via CSS) is used.
+  // mobile-only: the Finanzierungs-/Leasingdetails breakdown starts collapsed (opened via "Rate
+  // anpassen") or expanded (opened directly via the page's details link) — reset on every open,
+  // since this component stays mounted (the page always renders it, gated by `open`).
+  const [showBreakdown, setShowBreakdown] = React.useState(!!initialShowBreakdown);
+  // Desktop always shows the breakdown inline but it can sit below the fold of .fin-modal-body's
+  // own scroll area too — whichever of the two refs is actually visible (show-mobile/hide-mobile
+  // via CSS) is the one scrolled to.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
-  // mobile: the breakdown is always rendered below the CTAs (it peeks in at the bottom of the
-  // fixed-height sheet); the "Finanzierungs-/Leasing-Details" button just scrolls the sheet body
-  // until the "Repräsentatives Beispiel" headline sits at its top — the sheet itself never
-  // changes height, so nothing jumps. Hand-rolled rAF ease-out so the duration is ours.
+  // mobile (ADV-276): revealing the breakdown scrolls the sheet body until the "Repräsentatives
+  // Beispiel" headline sits at its top — not all the way down to the CTA row under the breakdown.
+  // The sheet keeps its fixed height (see .fin-modal in md3.css), so nothing jumps; only the
+  // body scrolls. Hand-rolled rAF ease-out so the duration is ours, not the browser's.
   const breakdownScrollRaf = React.useRef(0);
   const scrollSheetToBreakdown = React.useCallback((): void => {
     const el = mobileBreakdownRef.current;
@@ -2247,14 +2250,25 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     breakdownScrollRaf.current = window.requestAnimationFrame(step);
   }, []);
   React.useEffect(() => () => window.cancelAnimationFrame(breakdownScrollRaf.current), []);
+  // opened directly via the page's details link: open expanded and scrolled to the breakdown.
   React.useEffect(() => {
-    if (!open || !initialShowBreakdown) return;
+    if (!open) return;
+    setShowBreakdown(!!initialShowBreakdown);
+    if (!initialShowBreakdown) return;
     const timer = window.setTimeout(() => {
       if (mobileBreakdownRef.current?.offsetParent) scrollSheetToBreakdown();
       else desktopBreakdownRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
-  }, [open, initialShowBreakdown, scrollSheetToBreakdown]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialShowBreakdown]);
+  // in-sheet details toggle: scroll once the expanded breakdown has rendered. Collapsing doesn't scroll.
+  const revealBreakdownRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!showBreakdown || !revealBreakdownRef.current) return;
+    revealBreakdownRef.current = false;
+    scrollSheetToBreakdown();
+  }, [showBreakdown, scrollSheetToBreakdown]);
 
   // mobile-only: swipe-down-to-dismiss on the grabber/header (the mockup's drag handle).
   // The sheet follows the finger (imperative transform — no re-renders while dragging);
@@ -3429,7 +3443,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {/* centered ⓘ details link (mockup shows no chevron) — scrolls to the breakdown below */}
                 <button
                   type="button"
-                  onClick={scrollSheetToBreakdown}
+                  onClick={() => {
+                    revealBreakdownRef.current = !showBreakdown;
+                    setShowBreakdown((v) => !v);
+                  }}
                   style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>
                   <span
                     style={{
@@ -3447,86 +3464,58 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
                   </span>
                 </button>
-                {/* same row-by-row breakdown table as desktop (breakdownRows, built once above),
-                    always rendered below the CTAs so it peeks in at the sheet's bottom. */}
-                <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
-                  <p
-                    style={{
-                      fontFamily: 'Arial, Helvetica, Arimo, 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, Arimo, 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 style={{ width: '100%' }}>
-                    <p
-                      style={{
-                        fontFamily: 'Arial, Helvetica, Arimo, 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
+                {/* mobile "Finanzierungsdetails" toggle reveals the same row-by-row breakdown
+                    table as desktop (breakdownRows, built once above). */}
+                {showBreakdown && (
+                  <>
+                    <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
+                      <p
+                        style={{
+                          fontFamily: 'Arial, Helvetica, Arimo, 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, Arimo, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 9,
+                          lineHeight: '12px',
+                          color: '#5B6B7F',
+                          marginBottom: 5,
+                        }}
+                      >
+                        {t('autobahn:modal.vatDisclaimer')}
+                      </p>
+                      {breakdownRows}
+                    </div>
+                    <div
                       style={{
-                        fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
-                        fontWeight: 400,
-                        fontSize: 12,
-                        lineHeight: '13px',
-                        color: '#0E2238',
-                        margin: 0,
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 10,
+                        background: '#FAFBFD',
+                        border: '1px solid #D4DDE7',
+                        borderRadius: 6,
+                        padding: 10,
+                        marginBottom: 10,
                       }}
                     >
-                      {lenderName || (isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName'))}
-                    </p>
-                    {/* leasing's Darlehensgeber-style card also discloses the contract type
-                        (Figma: "Vertragsart: Restwertleasing"), split off by its own divider */}
-                    {isLease && (
-                      <>
-                        <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
+                      <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, Arimo, sans-serif',
@@ -3538,7 +3527,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             marginBottom: 3,
                           }}
                         >
-                          {t('autobahn:modal.contractTypeLabel')}
+                          {isLease ? t('autobahn:modal.leaseLenderLabel') : t('autobahn:modal.lenderLabel')}
                         </p>
                         <p
                           style={{
@@ -3550,122 +3539,198 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             margin: 0,
                           }}
                         >
-                          {t('autobahn:modal.contractTypeValue')}
+                          {lenderName || (isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName'))}
                         </p>
-                      </>
+                        {/* leasing's Darlehensgeber-style card also discloses the contract type
+                            (Figma: "Vertragsart: Restwertleasing"), split off by its own divider */}
+                        {isLease && (
+                          <>
+                            <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
+                            <p
+                              style={{
+                                fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
+                                fontWeight: 700,
+                                fontSize: 14,
+                                lineHeight: '13px',
+                                color: '#0E2238',
+                                margin: 0,
+                                marginBottom: 3,
+                              }}
+                            >
+                              {t('autobahn:modal.contractTypeLabel')}
+                            </p>
+                            <p
+                              style={{
+                                fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
+                                fontWeight: 400,
+                                fontSize: 12,
+                                lineHeight: '13px',
+                                color: '#0E2238',
+                                margin: 0,
+                              }}
+                            >
+                              {t('autobahn:modal.contractTypeValue')}
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    {/* leasing-only mandatory-package disclosure (Figma "Hinweisbox") — the
+                        Rundum-Sorglos-Paket is compulsory for leasing (unlike financing, where
+                        it's an optional add-on), so it gets its own callout instead of a bullet. */}
+                    {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, Arimo, sans-serif',
+                            fontWeight: 400,
+                            fontSize: 10,
+                            lineHeight: '10px',
+                            textAlign: 'justify',
+                            color: '#0E2238',
+                            margin: 0,
+                          }}
+                        >
+                          {t('autobahn:modal.packageMandatoryNotice', { amount: eur(addServicesCostRaw ?? 0) })}
+                        </p>
+                      </div>
                     )}
-                  </div>
-                </div>
-                {/* leasing-only mandatory-package disclosure (Figma "Hinweisbox") — the
-                    Rundum-Sorglos-Paket is compulsory for leasing (unlike financing, where
-                    it's an optional add-on), so it gets its own callout instead of a bullet. */}
-                {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, Arimo, 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, Arimo, 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, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
-                      {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
-                    </p>
-                    <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
-                      {t('autobahn:modal.legalFootnoteListPriceLease')}
-                    </p>
-                    <p
-                      style={{
-                        fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
-                        fontWeight: 400,
-                        fontSize: 12,
-                        lineHeight: '12px',
+                        fontWeight: 700,
+                        fontSize: 13.3,
+                        lineHeight: '17px',
                         color: '#0E2238',
                         margin: 0,
-                        paddingBottom: 10,
+                        marginBottom: 7,
                       }}
                     >
-                      {t('autobahn:modal.closingDisclaimerLine1')}
-                      <br />
-                      {t('autobahn:modal.closingDisclaimerLine2')}
+                      {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}
+                    {isLease ? (
+                      <>
+                        <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
+                          {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
+                        </p>
+                        <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
+                          {t('autobahn:modal.legalFootnoteListPriceLease')}
+                        </p>
+                        <p
                           style={{
                             fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
                             fontWeight: 400,
                             fontSize: 12,
                             lineHeight: '12px',
                             color: '#0E2238',
+                            margin: 0,
+                            paddingBottom: 10,
                           }}
                         >
-                          {notice}
-                        </li>
-                      ))}
-                    </ul>
-                    <p
-                      style={{
-                        fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
-                        fontWeight: 400,
-                        fontSize: 12,
-                        lineHeight: '12px',
-                        color: '#0E2238',
-                        margin: 0,
-                        paddingBottom: 10,
-                      }}
-                    >
-                      {t('autobahn:modal.listPriceFootnote')}
-                    </p>
+                          {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, Arimo, sans-serif',
+                                fontWeight: 400,
+                                fontSize: 12,
+                                lineHeight: '12px',
+                                color: '#0E2238',
+                              }}
+                            >
+                              {notice}
+                            </li>
+                          ))}
+                        </ul>
+                        <p
+                          style={{
+                            fontFamily: 'Arial, Helvetica, Arimo, 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, 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, Arimo, sans-serif',
+                          fontWeight: 700,
+                          fontSize: 16,
+                          lineHeight: '18px',
+                          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>
                   </>
                 )}
               </>