From 90be4696af9c0f23318af4ad752328712fd04460 Mon Sep 17 00:00:00 2001 From: Marco Date: Sun, 19 Jul 2026 23:57:03 +0000 Subject: [PATCH] feat: add /bestellbestaetigung order confirmation page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Matches the Figma mockup (checkmark hero, order summary card, delivery-status panel, testimonial band) with the checkout's 4-step bar inserted (all steps done) and the "Bis dahin: Lass dich inspirieren" block omitted, per request. Extracted the step bar into a shared CheckoutSteps component so /checkout and /bestellbestaetigung don't duplicate it. The actually- selected shipping cost and payment method are captured into a sessionStorage snapshot by /checkout's "Jetzt kaufen" click (there's no real order backend, so this click is what "placing the order" means here) and read back on the confirmation page — not just defaulted to the first active method of each, so the receipt matches what the shopper actually picked. Also tightened the checkout newsletter-consent copy ("Wenn du zustimmst" instead of "Wenn du oben zustimmst"). --- .../components/BestellbestaetigungContent.tsx | 243 ++++++++++++++++++ app/bestellbestaetigung/page.tsx | 28 ++ app/checkout/components/CheckoutContent.tsx | 80 ++---- app/components/CheckoutSteps.tsx | 59 +++++ app/lib/cart.ts | 8 + app/lib/order.ts | 23 ++ .../bestellbestaetigung-testimonial-photo.jpg | Bin 0 -> 12965 bytes 7 files changed, 389 insertions(+), 52 deletions(-) create mode 100644 app/bestellbestaetigung/components/BestellbestaetigungContent.tsx create mode 100644 app/bestellbestaetigung/page.tsx create mode 100644 app/components/CheckoutSteps.tsx create mode 100644 app/lib/order.ts create mode 100644 public/bestellbestaetigung-testimonial-photo.jpg diff --git a/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx b/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx new file mode 100644 index 0000000..a3e35d5 --- /dev/null +++ b/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx @@ -0,0 +1,243 @@ +"use client"; + +import { useEffect, useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +import type { CartItem } from "../../lib/cart"; +import { useProducts } from "../../lib/products"; +import { formatPrice, formatDate } from "../../lib/format"; +import { Reveal } from "../../components/Reveal"; +import { CheckoutSteps } from "../../components/CheckoutSteps"; +import { ORDER_KEY, type OrderSnapshot } from "../../lib/order"; + +export function BestellbestaetigungContent() { + const products = useProducts(); + const [order, setOrder] = useState(null); + const [checked, setChecked] = useState(false); + + // The snapshot was already written (and the cart already cleared) by + // /checkout's "Jetzt kaufen" click, before it ever navigated here — see + // CheckoutContent.tsx's handlePurchase(). This is a pure read of that + // browser-only value, deferred to an effect (not a lazy useState + // initializer) purely to avoid an SSR/hydration mismatch: the server + // has no sessionStorage, so it must render the same "nothing yet" state + // the client shows before this effect runs. + useEffect(() => { + try { + const raw = window.sessionStorage.getItem(ORDER_KEY); + // eslint-disable-next-line react-hooks/set-state-in-effect -- reading a browser-only store on mount to avoid an SSR/hydration mismatch, see comment above + if (raw) setOrder(JSON.parse(raw)); + } catch { + // ignore — falls through to the "no order" state below + } + setChecked(true); + }, []); + + if (!checked) return null; + + if (!order) { + return ( + +

+ Keine Bestellung gefunden +

+

+ Hier gibt es gerade nichts zu bestätigen — vielleicht ist die Sitzung abgelaufen. +

+ + Zum Shop + + + ); + } + + const productsLoading = products.length === 0; + const items = order.items + .map((entry) => ({ entry, product: products.find((p) => p.id === entry.id) })) + .filter((row): row is { entry: CartItem; product: NonNullable<(typeof row)["product"]> } => Boolean(row.product)); + + const subtotal = items.reduce((sum, { entry, product }) => sum + entry.qty * product.price, 0); + const total = subtotal + order.shippingCost; + + return ( + <> + {/* items-start + same pt-8/px as /checkout's own header block — not + centered, so the bar sits at the exact same left edge/position a + shopper just saw on the previous step. */} + + + + + {/* Hero — success badge, headline, short recap */} + +
+
+
+ +
+
+ +

+ Vielen Dank! +

+

+ Deine Bestellung ist bei uns eingegangen. +

+
+ + {!productsLoading && ( +
+

Deine Bestellung macht sich jetzt auf den Weg zu dir.

+

+ Du erhältst in Kürze eine Bestellbestätigung per E-Mail mit allen Details. +

+
+ )} + + + {!productsLoading && ( + +
+ {/* Order meta */} +
+
+

Bestellnummer

+

{order.orderNumber}

+
+
+

Bestelldatum

+

+ {formatDate(order.orderDateIso)} +

+
+
+

Zahlungsmethode

+

{order.paymentMethodTitle}

+
+
+ + {/* Items + totals */} +
+

+ Bestellübersicht +

+ + {items.map(({ entry, product }) => ( +
+
+ {product.name} +
+
+

{product.name}

+

+ {entry.qty} × {formatPrice(product.price)} inkl. MwSt. +

+
+

+ {formatPrice(entry.qty * product.price)} +

+
+ ))} + +
+ +
+ Zwischensumme + + {formatPrice(subtotal)} +
+
+ Versand + + + {order.shippingCost === 0 ? "Kostenlos" : formatPrice(order.shippingCost)} + +
+ +
+ +
+ + Gesamtbetrag + + + {formatPrice(total)} +
+
+
+ + {/* Delivery status panel */} +
+
+ +
+

Deine Bestellung wird bearbeitet.

+

+ Wir versenden in der Regel innerhalb von 1–2 Werktagen. +

+

+ Du erhältst eine E-Mail, sobald dein Paket unterwegs ist. +

+
+ + )} + + {/* Testimonial band — same photo+quote pattern as /not-found (see + that page's own comment); bestellbestaetigung-testimonial-photo.jpg + is cropped from the actual mockup pixels the same way. Explicit + md:h- (not just min-h-), so the image and quote columns are + pinned to an identical height regardless of how many lines the + quote wraps to — a min-height alone lets the taller of the two + content-driven columns stretch the row past what the other side + visually fills up to. */} + +
+ +
+
+
+

+ „Produktivität beginnt nicht mit mehr – sondern mit dem, was wirklich zählt.“ +

+
+

Björn

+
+ + + ); +} diff --git a/app/bestellbestaetigung/page.tsx b/app/bestellbestaetigung/page.tsx new file mode 100644 index 0000000..56a4478 --- /dev/null +++ b/app/bestellbestaetigung/page.tsx @@ -0,0 +1,28 @@ +import type { Metadata } from "next"; +import { BestellbestaetigungContent } from "./components/BestellbestaetigungContent"; +import { TrustRow } from "../components/TrustRow"; +import { Footer } from "../components/Footer"; + +// robots: noindex — transactional page, same reasoning as /cart and +// /checkout (this one doubles as a receipt, not something to surface in +// search results). +export const metadata: Metadata = { + title: "Bestellbestätigung", + description: "Deine Bestellung bei einfach produktiv wurde erfolgreich aufgegeben.", + robots: { + index: false, + follow: true, + }, +}; + +export default function BestellbestaetigungPage() { + return ( + <> +
+ + +
+