feat: add /bestellbestaetigung order confirmation page

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").
This commit is contained in:
Marco
2026-07-19 23:57:03 +00:00
parent f973eccca6
commit 90be4696af
7 changed files with 389 additions and 52 deletions
+8
View File
@@ -39,6 +39,14 @@ export function removeFromCart(id: string) {
writeCart(readCart().filter((i) => i.id !== id));
}
// Called by /bestellbestaetigung once it has captured a snapshot of the
// cart to display — there's no real order backend here, so "placing an
// order" just means the local cart empties out the same way it would
// after a real purchase completes.
export function clearCart() {
writeCart([]);
}
// qty <= 0 removes the item outright — the cart page's quantity stepper
// never lets the visible count go below 1, but this keeps the function
// itself safe to call with any integer without a separate remove path.
+23
View File
@@ -0,0 +1,23 @@
import type { CartItem } from "./cart";
// sessionStorage, not localStorage — this is a one-time receipt for the
// tab that just placed the order, not something that should persist
// forever. Written by /checkout's "Jetzt kaufen" click (capturing
// whichever shipping/payment method was actually selected there — the
// site has no real order backend, so this snapshot IS the order record),
// read once by /bestellbestaetigung.
export const ORDER_KEY = "ep_last_order";
export type OrderSnapshot = {
items: CartItem[];
orderNumber: string;
orderDateIso: string;
shippingCost: number;
paymentMethodTitle: string;
};
export function generateOrderNumber(): string {
const year = new Date().getFullYear();
const rand = Math.floor(1000 + Math.random() * 9000);
return `#EP-${year}-${rand}`;
}