@bytebrand/fe-ui-core-autobahn 1.0.146 → 1.0.147

package/vdp/VdpModules.tsx

@@ -2225,37 +2225,81 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   // via CSS) is the one scrolled to.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
-  // mobile (ADV-276): revealing the breakdown scrolls the sheet body until the "Repräsentatives
-  // Beispiel" headline sits at its top — but never so far that the CTA row under the breakdown
-  // comes into view (on tall screens the breakdown is shorter than the sheet, so the headline
-  // then stops lower, with the bottom CTA row still just below the fold).
-  // 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.
+  // mobile (ADV-276): the sheet opens sized to its rate controls — its bottom edge sits right
+  // under the "Finanzierungs-/Leasing-Details" link (the [data-sheet-fold] element; on Kaufen its
+  // CTA row), with the always-mounted breakdown below the fold, reachable by scrolling by hand.
+  // Tapping the link expands the sheet to (nearly) the full screen (.fin-modal--expanded, 0.35s
+  // height transition in md3.css) and scrolls the body until the "Repräsentatives Beispiel"
+  // headline sits at its top — never so far that the CTA row under the breakdown comes into
+  // view (on tall screens the breakdown is shorter than the sheet; the headline stops lower).
+  // Targets are re-read every frame so the scroll and the growing sheet finish together.
   const mobileBottomCtaRef = React.useRef<HTMLDivElement | null>(null);
   const breakdownScrollRaf = React.useRef(0);
-  const scrollSheetToBreakdown = React.useCallback((): void => {
-    const el = mobileBreakdownRef.current;
-    const body = el?.closest('.fin-modal-body') as HTMLElement | null | undefined;
-    if (!el || !body) return;
-    const from = body.scrollTop;
-    const bodyTop = body.getBoundingClientRect().top;
-    const headlineTop = el.getBoundingClientRect().top - bodyTop + from;
-    const cta = mobileBottomCtaRef.current;
-    const ctaLimit = cta ? cta.getBoundingClientRect().top - bodyTop + from - body.clientHeight : Infinity;
-    const to = Math.max(0, Math.min(headlineTop - 8, ctaLimit, body.scrollHeight - body.clientHeight));
-    if (to === from) return;
+  const animateSheetScroll = React.useCallback((target: (body: HTMLElement) => number): void => {
+    const body = mobileBreakdownRef.current?.closest('.fin-modal-body') as HTMLElement | null | undefined;
+    if (!body) return;
     window.cancelAnimationFrame(breakdownScrollRaf.current);
-    const duration = 400;
+    const from = body.scrollTop;
+    const duration = 450;
     let start: number | null = null;
     const step = (now: number): void => {
       if (start === null) start = now;
       const p = Math.min(1, (now - start) / duration);
+      const to = Math.max(0, Math.min(target(body), body.scrollHeight - body.clientHeight));
       body.scrollTop = from + (to - from) * (1 - Math.pow(1 - p, 3));
       if (p < 1) breakdownScrollRaf.current = window.requestAnimationFrame(step);
     };
     breakdownScrollRaf.current = window.requestAnimationFrame(step);
   }, []);
+  const scrollSheetToBreakdown = React.useCallback((): void => {
+    animateSheetScroll((body) => {
+      const el = mobileBreakdownRef.current;
+      if (!el) return body.scrollTop;
+      const bodyTop = body.getBoundingClientRect().top;
+      const headlineTop = el.getBoundingClientRect().top - bodyTop + body.scrollTop;
+      const cta = mobileBottomCtaRef.current;
+      const ctaLimit = cta ? cta.getBoundingClientRect().top - bodyTop + body.scrollTop - body.clientHeight : Infinity;
+      return Math.min(headlineTop - 8, ctaLimit);
+    });
+  }, [animateSheetScroll]);
   React.useEffect(() => () => window.cancelAnimationFrame(breakdownScrollRaf.current), []);
+  // collapsed sheet height = everything down to the [data-sheet-fold] element's bottom edge (its
+  // own bottom padding is the breathing gap — the body's padding only exists at the very end of
+  // the scroll content, so the breakdown would peek in there); re-measured when the content changes size (tab switch, leasing's extra
+  // slider, rate text) or the viewport does. Fed to md3.css as --fin-sheet-fold (mobile only).
+  const sheetRef = React.useRef<HTMLDivElement | null>(null);
+  const [sheetFold, setSheetFold] = React.useState<number | null>(null);
+  const [sheetAnimated, setSheetAnimated] = React.useState(false);
+  React.useLayoutEffect(() => {
+    if (!open) return;
+    const sheet = sheetRef.current;
+    const content = sheet?.querySelector('.fin-modal-body > .show-mobile') as HTMLElement | null | undefined;
+    if (!sheet || !content) return;
+    const measure = (): void => {
+      const body = sheet.querySelector('.fin-modal-body') as HTMLElement | null;
+      const fold = content.querySelector('[data-sheet-fold]') as HTMLElement | null;
+      if (!body || !fold || !content.offsetParent) return;
+      const bodyRect = body.getBoundingClientRect();
+      const foldBottom = fold.getBoundingClientRect().bottom - bodyRect.top + body.scrollTop;
+      const h = bodyRect.top - sheet.getBoundingClientRect().top + foldBottom;
+      setSheetFold(Math.floor(h));
+    };
+    measure();
+    // height transition only from the next frame on — the first measure must not animate the
+    // freshly opened sheet from the 85vh fallback down to its fold
+    const raf = window.requestAnimationFrame(() => setSheetAnimated(true));
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
+    ro?.observe(content);
+    window.addEventListener('resize', measure);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      ro?.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, [open, mode]);
+  React.useEffect(() => {
+    if (!open) setSheetAnimated(false);
+  }, [open]);
   // opened directly via the page's details link: open expanded and scrolled to the breakdown.
   React.useEffect(() => {
     if (!open) return;
@@ -2268,19 +2312,19 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     return () => window.clearTimeout(timer);
     // 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.
+  // in-sheet details link: expanding scrolls down to the breakdown, collapsing back to the top.
   const revealBreakdownRef = React.useRef(false);
   React.useEffect(() => {
-    if (!showBreakdown || !revealBreakdownRef.current) return;
+    if (!revealBreakdownRef.current) return;
     revealBreakdownRef.current = false;
-    scrollSheetToBreakdown();
-  }, [showBreakdown, scrollSheetToBreakdown]);
+    if (showBreakdown) scrollSheetToBreakdown();
+    else animateSheetScroll(() => 0);
+  }, [showBreakdown, scrollSheetToBreakdown, animateSheetScroll]);
 
   // 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);
   // released past 90px it slides out and closes, otherwise it springs back. The element
   // unmounts on close (`open` gate), so the inline transform never leaks into the next open.
-  const sheetRef = React.useRef<HTMLDivElement | null>(null);
   const dragStartY = React.useRef<number | null>(null);
   const onGrabStart = (e: React.TouchEvent): void => {
     // sheet gesture is phone-only — the desktop centered modal must not be draggable
@@ -2298,7 +2342,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     const dy = e.changedTouches[0].clientY - dragStartY.current;
     dragStartY.current = null;
     const el = sheetRef.current;
-    el.style.transition = 'transform var(--dur-2, .25s)';
+    // keep .fin-modal's own height transition (expand/collapse) alongside the spring-back
+    el.style.transition = 'transform var(--dur-2, .25s), height 0.35s var(--ease-standard, ease)';
     if (dy > 90) {
       el.style.transform = 'translateY(100%)';
       window.setTimeout(onClose, 200);
@@ -2509,7 +2554,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   return (
     <div className="fin-modal-scrim" onClick={onClose}>
       <div
-        className="fin-modal"
+        className={'fin-modal' + (showBreakdown ? ' fin-modal--expanded' : '') + (sheetAnimated ? ' fin-modal--animated' : '')}
+        style={sheetFold != null ? ({ '--fin-sheet-fold': `${sheetFold}px` } as React.CSSProperties) : undefined}
         role="dialog"
         aria-modal="true"
         aria-label={title}
@@ -3265,7 +3311,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                   />
                 )}
                 {/* pushed to the sheet's bottom edge — Figma keeps a big breathing gap above */}
-                <div className="fin-sheet-cta-row fin-sheet-cta-row--cash" style={{ display: 'flex', gap: 7, marginTop: 'auto' }}>
+                <div data-sheet-fold="" className="fin-sheet-cta-row fin-sheet-cta-row--cash" style={{ display: 'flex', gap: 7, marginTop: 'auto' }}>
                   <Button
                     variant="filled"
                     size="lg"
@@ -3449,8 +3495,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {/* centered ⓘ details link (mockup shows no chevron) — scrolls to the breakdown below */}
                 <button
                   type="button"
+                  data-sheet-fold=""
                   onClick={() => {
-                    revealBreakdownRef.current = !showBreakdown;
+                    revealBreakdownRef.current = true;
                     setShowBreakdown((v) => !v);
                   }}
                   style={{ ...expanderBtnStyle, justifyContent: 'center', padding: '2px 0 20px' }}>