Redesign invoice PDFs, add correction-invoice downloads, return reasons, and per-product tax/bundle support

Invoice + Stornorechnung/Gutschrift PDFs get a modern header-band layout,
a "bereits beglichen" badge for immediately-paid orders, labelled bank
details, and a per-tax-rate summary breakdown. Correction invoices can
now be re-downloaded from the account (regenerated deterministically,
not stored as files, same approach as the original invoice). Return
requests capture a reason. Products can define bundles (bundleItems) and
a per-product VAT rate override, both snapshotted onto order items.

app/lib/invoicePdf.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Document, Page, View, Text, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
-import { formatPrice, formatDate } from "./format";
+import { formatDate } from "./format";
 
 // Generated synchronously in the checkout request (see app/lib/orderEmail.ts)
 // and attached to the order-confirmation email, plus available on-demand via
@@ -11,60 +11,58 @@ import { formatPrice, formatDate } from "./format";
 // checkout request's own fire-and-forget email step; a font-fetch failure
 // there is one more way to lose the invoice attachment for no real design
 // benefit. Same choice as the Payload-side correction-invoice PDF
-// (src/lib/correctionInvoicePdf.tsx in the backend repo) — brand color via
-// StyleSheet, not Georgia/Playfair.
+// (src/lib/correctionInvoicePdf.tsx in the backend repo, kept visually in
+// sync with this file by eye — not shared code, two separate deployments).
 const BRAND = "#f6a701";
+const BRAND_TINT = "#fdf1d9";
 const TEXT_MUTED = "#6b6b69";
 const BORDER = "#e5e0d8";
+const BG_MUTED = "#f8f5f1";
+const SUCCESS = "#2f8f4e";
+const SUCCESS_TINT = "#e7f5eb";
 
 const styles = StyleSheet.create({
-  page: { padding: 48, fontSize: 10, fontFamily: "Helvetica", color: "#1a1a18" },
-  wordmark: { fontFamily: "Helvetica-Bold", fontSize: 13, marginBottom: 32 },
-  kindLabel: { fontFamily: "Helvetica-Bold", fontSize: 20, color: BRAND, marginBottom: 24 },
-  addressRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 28 },
+  page: { padding: 0, fontSize: 10, fontFamily: "Helvetica", color: "#1a1a18" },
+  headerBand: { backgroundColor: BRAND_TINT, padding: 32, flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  wordmark: { fontFamily: "Helvetica-Bold", fontSize: 14 },
+  kindLabel: { fontFamily: "Helvetica-Bold", fontSize: 22, color: BRAND, letterSpacing: 1 },
+  body: { padding: 32 },
+  addressRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 24 },
   addressBlock: { width: "45%" },
   addressLabel: { fontSize: 8, color: TEXT_MUTED, marginBottom: 4, textTransform: "uppercase" },
   addressLine: { fontSize: 10, lineHeight: 1.5 },
-  metaRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 20 },
-  metaLabel: { fontSize: 8, color: TEXT_MUTED },
+  metaRow: { flexDirection: "row", gap: 10, marginBottom: 16, flexWrap: "wrap" },
+  metaBox: { borderWidth: 1, borderColor: BORDER, borderRadius: 6, paddingVertical: 8, paddingHorizontal: 12 },
+  metaLabel: { fontSize: 7, color: TEXT_MUTED, textTransform: "uppercase", marginBottom: 2 },
   metaValue: { fontSize: 10, fontFamily: "Helvetica-Bold" },
-  table: { marginTop: 8, borderTopWidth: 1, borderTopColor: BORDER },
-  tableHeader: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: BORDER, paddingVertical: 6 },
-  tableRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: BORDER, paddingVertical: 6 },
+  paidBadge: { backgroundColor: SUCCESS_TINT, borderRadius: 6, paddingVertical: 8, paddingHorizontal: 12, justifyContent: "center" },
+  paidBadgeText: { fontSize: 10, fontFamily: "Helvetica-Bold", color: SUCCESS },
+  table: { borderRadius: 6, overflow: "hidden", borderWidth: 1, borderColor: BORDER, marginTop: 8, marginBottom: 16 },
+  tableHeader: { flexDirection: "row", backgroundColor: BG_MUTED, paddingVertical: 8, paddingHorizontal: 10 },
+  tableRow: { flexDirection: "row", paddingVertical: 8, paddingHorizontal: 10, borderTopWidth: 1, borderTopColor: BORDER },
+  tableRowAlt: { backgroundColor: BG_MUTED },
   colName: { flex: 3 },
   colQty: { flex: 1, textAlign: "right" },
   colPrice: { flex: 1, textAlign: "right" },
   colTotal: { flex: 1, textAlign: "right" },
   headerCell: { fontSize: 8, color: TEXT_MUTED, textTransform: "uppercase" },
-  summary: { marginTop: 16, alignItems: "flex-end" },
-  summaryRow: { flexDirection: "row", width: 220, justifyContent: "space-between", paddingVertical: 2 },
+  bundleLine: { fontSize: 8, color: TEXT_MUTED, marginTop: 2 },
+  summary: { alignItems: "flex-end", marginBottom: 24 },
+  summaryBox: { width: 240, backgroundColor: BG_MUTED, borderRadius: 6, padding: 14 },
+  summaryRow: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 2 },
   summaryLabel: { fontSize: 10, color: TEXT_MUTED },
   summaryValue: { fontSize: 10 },
-  grandTotalRow: {
-    flexDirection: "row",
-    width: 220,
-    justifyContent: "space-between",
-    paddingTop: 8,
-    marginTop: 6,
-    borderTopWidth: 1,
-    borderTopColor: BORDER,
-  },
+  grandTotalRow: { flexDirection: "row", justifyContent: "space-between", paddingTop: 8, marginTop: 6, borderTopWidth: 1, borderTopColor: BORDER },
   grandTotalLabel: { fontSize: 12, fontFamily: "Helvetica-Bold" },
   grandTotalValue: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  footer: {
-    position: "absolute",
-    bottom: 40,
-    left: 48,
-    right: 48,
-    fontSize: 8,
-    color: TEXT_MUTED,
-    borderTopWidth: 1,
-    borderTopColor: BORDER,
-    paddingTop: 12,
-  },
+  footer: { borderTopWidth: 1, borderTopColor: BORDER, paddingTop: 12, fontSize: 8, color: TEXT_MUTED },
 });
 
-export type InvoiceItem = { productName: string; quantity: number; unitPrice: number };
+function formatPrice(amount: number): string {
+  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
+}
+
+export type InvoiceItem = { productName: string; quantity: number; unitPrice: number; taxRatePercent: number; bundleContents?: string | null };
 
 export type InvoiceOrder = {
   orderNumber: string;
@@ -79,6 +77,7 @@ export type InvoiceOrder = {
   zip: string;
   city: string;
   country: string;
+  paymentMethodTitle: string;
   items: InvoiceItem[];
   subtotal: number;
   shippingCost: number;
@@ -99,114 +98,159 @@ export type InvoiceSeller = {
   bankDetails?: string | null;
 };
 
+// "Überweisung" (bank transfer) is the only payment method on this shop
+// that ISN'T settled immediately — Kreditkarte/PayPal both capture at
+// checkout. Rather than hardcode a list of "immediate" method titles
+// (fragile the moment a new one is added in Payload's payment-methods
+// collection), the only method that's ever NOT immediate is named
+// explicitly — everything else defaults to "paid already".
+function isPaidImmediately(paymentMethodTitle: string): boolean {
+  return paymentMethodTitle !== "Überweisung";
+}
+
+// Distributes the order-level discount/shipping proportionally across each
+// item's gross line total before computing that line's net/tax — so the
+// per-rate summary still reconciles exactly to `order.total` even when a
+// discount or shipping cost is present alongside items taxed at different
+// rates. Falls back to the seller's default rate for any line that
+// predates this field (older orders had no per-item snapshot).
+function groupByTaxRate(order: InvoiceOrder, defaultRate: number): { rate: number; net: number; tax: number; gross: number }[] {
+  const groups = new Map<number, number>();
+  for (const item of order.items) {
+    const rate = item.taxRatePercent ?? defaultRate;
+    const lineGross = item.quantity * item.unitPrice;
+    groups.set(rate, (groups.get(rate) ?? 0) + lineGross);
+  }
+  const scale = order.subtotal > 0 ? (order.subtotal - order.discountAmount + order.shippingCost) / order.subtotal : 1;
+  return Array.from(groups.entries())
+    .map(([rate, lineGross]) => {
+      const gross = lineGross * scale;
+      const net = gross / (1 + rate / 100);
+      return { rate, net, tax: gross - net, gross };
+    })
+    .sort((a, b) => b.rate - a.rate);
+}
+
 function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller: InvoiceSeller }) {
-  const rate = seller.taxRatePercent;
-  const grossTotal = order.total;
-  const netTotal = grossTotal / (1 + rate / 100);
-  const taxTotal = grossTotal - netTotal;
+  const rateGroups = groupByTaxRate(order, seller.taxRatePercent);
+  const paid = isPaidImmediately(order.paymentMethodTitle);
   const deliveryLine =
     order.deliveryMethod === "address" ? order.street : `Packstation ${order.packstationNumber} · Postnummer ${order.postNumber}`;
 
   return (
     <Document>
       <Page size="A4" style={styles.page}>
-        <Text style={styles.wordmark}>einfach produktiv.</Text>
-        <Text style={styles.kindLabel}>Rechnung</Text>
-
-        <View style={styles.addressRow}>
-          <View style={styles.addressBlock}>
-            <Text style={styles.addressLabel}>Von</Text>
-            <Text style={styles.addressLine}>{seller.sellerName}</Text>
-            <Text style={styles.addressLine}>{seller.sellerStreet}</Text>
-            <Text style={styles.addressLine}>
-              {seller.sellerZip} {seller.sellerCity}
-            </Text>
-            <Text style={styles.addressLine}>{seller.sellerCountry}</Text>
-          </View>
-          <View style={styles.addressBlock}>
-            <Text style={styles.addressLabel}>An</Text>
-            <Text style={styles.addressLine}>
-              {order.customerFirstName} {order.customerLastName}
-            </Text>
-            <Text style={styles.addressLine}>{deliveryLine}</Text>
-            <Text style={styles.addressLine}>
-              {order.zip} {order.city}
-            </Text>
-            <Text style={styles.addressLine}>{order.country}</Text>
-          </View>
+        <View style={styles.headerBand}>
+          <Text style={styles.wordmark}>einfach produktiv.</Text>
+          <Text style={styles.kindLabel}>RECHNUNG</Text>
         </View>
 
-        <View style={styles.metaRow}>
-          <View>
-            <Text style={styles.metaLabel}>Rechnungs-Nr.</Text>
-            <Text style={styles.metaValue}>{order.invoiceNumber}</Text>
-          </View>
-          <View>
-            <Text style={styles.metaLabel}>Datum</Text>
-            <Text style={styles.metaValue}>{formatDate(order.invoiceIssuedAt)}</Text>
-          </View>
-          <View>
-            <Text style={styles.metaLabel}>Bestellnummer</Text>
-            <Text style={styles.metaValue}>{order.orderNumber}</Text>
-          </View>
-          <View>
-            <Text style={styles.metaLabel}>USt-IdNr.</Text>
-            <Text style={styles.metaValue}>{seller.vatId}</Text>
-          </View>
-        </View>
-
-        <View style={styles.table}>
-          <View style={styles.tableHeader}>
-            <Text style={[styles.colName, styles.headerCell]}>Artikel</Text>
-            <Text style={[styles.colQty, styles.headerCell]}>Menge</Text>
-            <Text style={[styles.colPrice, styles.headerCell]}>Einzelpreis</Text>
-            <Text style={[styles.colTotal, styles.headerCell]}>Betrag</Text>
-          </View>
-          {order.items.map((item, i) => (
-            <View style={styles.tableRow} key={i}>
-              <Text style={styles.colName}>{item.productName}</Text>
-              <Text style={styles.colQty}>{item.quantity}</Text>
-              <Text style={styles.colPrice}>{formatPrice(item.unitPrice)}</Text>
-              <Text style={styles.colTotal}>{formatPrice(item.quantity * item.unitPrice)}</Text>
+        <View style={styles.body}>
+          <View style={styles.addressRow}>
+            <View style={styles.addressBlock}>
+              <Text style={styles.addressLabel}>Von</Text>
+              <Text style={styles.addressLine}>{seller.sellerName}</Text>
+              <Text style={styles.addressLine}>{seller.sellerStreet}</Text>
+              <Text style={styles.addressLine}>
+                {seller.sellerZip} {seller.sellerCity}
+              </Text>
+              <Text style={styles.addressLine}>{seller.sellerCountry}</Text>
             </View>
-          ))}
-        </View>
-
-        <View style={styles.summary}>
-          <View style={styles.summaryRow}>
-            <Text style={styles.summaryLabel}>Zwischensumme</Text>
-            <Text style={styles.summaryValue}>{formatPrice(order.subtotal)}</Text>
-          </View>
-          {order.discountAmount > 0 && (
-            <View style={styles.summaryRow}>
-              <Text style={styles.summaryLabel}>Rabatt{order.discountCode ? ` (${order.discountCode})` : ""}</Text>
-              <Text style={styles.summaryValue}>-{formatPrice(order.discountAmount)}</Text>
+            <View style={styles.addressBlock}>
+              <Text style={styles.addressLabel}>An</Text>
+              <Text style={styles.addressLine}>
+                {order.customerFirstName} {order.customerLastName}
+              </Text>
+              <Text style={styles.addressLine}>{deliveryLine}</Text>
+              <Text style={styles.addressLine}>
+                {order.zip} {order.city}
+              </Text>
+              <Text style={styles.addressLine}>{order.country}</Text>
             </View>
-          )}
-          <View style={styles.summaryRow}>
-            <Text style={styles.summaryLabel}>Versand</Text>
-            <Text style={styles.summaryValue}>{order.shippingCost === 0 ? "Kostenlos" : formatPrice(order.shippingCost)}</Text>
           </View>
-          <View style={styles.summaryRow}>
-            <Text style={styles.summaryLabel}>Netto</Text>
-            <Text style={styles.summaryValue}>{formatPrice(netTotal)}</Text>
-          </View>
-          <View style={styles.summaryRow}>
-            <Text style={styles.summaryLabel}>zzgl. {rate}% MwSt.</Text>
-            <Text style={styles.summaryValue}>{formatPrice(taxTotal)}</Text>
-          </View>
-          <View style={styles.grandTotalRow}>
-            <Text style={styles.grandTotalLabel}>Gesamt</Text>
-            <Text style={styles.grandTotalValue}>{formatPrice(grossTotal)}</Text>
-          </View>
-        </View>
 
-        <View style={styles.footer}>
-          <Text>
-            {seller.sellerName} · {seller.sellerStreet}, {seller.sellerZip} {seller.sellerCity} · {seller.sellerEmail} · USt-IdNr.{" "}
-            {seller.vatId}
-          </Text>
-          {seller.bankDetails ? <Text style={{ marginTop: 4 }}>{seller.bankDetails}</Text> : null}
+          <View style={styles.metaRow}>
+            <View style={styles.metaBox}>
+              <Text style={styles.metaLabel}>Rechnungs-Nr.</Text>
+              <Text style={styles.metaValue}>{order.invoiceNumber}</Text>
+            </View>
+            <View style={styles.metaBox}>
+              <Text style={styles.metaLabel}>Datum</Text>
+              <Text style={styles.metaValue}>{formatDate(order.invoiceIssuedAt)}</Text>
+            </View>
+            <View style={styles.metaBox}>
+              <Text style={styles.metaLabel}>Bestellnummer</Text>
+              <Text style={styles.metaValue}>{order.orderNumber}</Text>
+            </View>
+            <View style={styles.metaBox}>
+              <Text style={styles.metaLabel}>USt-IdNr.</Text>
+              <Text style={styles.metaValue}>{seller.vatId}</Text>
+            </View>
+            {paid && (
+              <View style={styles.paidBadge}>
+                <Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
+              </View>
+            )}
+          </View>
+
+          <View style={styles.table}>
+            <View style={styles.tableHeader}>
+              <Text style={[styles.colName, styles.headerCell]}>Artikel</Text>
+              <Text style={[styles.colQty, styles.headerCell]}>Menge</Text>
+              <Text style={[styles.colPrice, styles.headerCell]}>Einzelpreis</Text>
+              <Text style={[styles.colTotal, styles.headerCell]}>Betrag</Text>
+            </View>
+            {order.items.map((item, i) => (
+              <View style={[styles.tableRow, i % 2 === 1 ? styles.tableRowAlt : {}]} key={i}>
+                <View style={styles.colName}>
+                  <Text>{item.productName}</Text>
+                  {item.bundleContents ? <Text style={styles.bundleLine}>{item.bundleContents}</Text> : null}
+                </View>
+                <Text style={styles.colQty}>{item.quantity}</Text>
+                <Text style={styles.colPrice}>{formatPrice(item.unitPrice)}</Text>
+                <Text style={styles.colTotal}>{formatPrice(item.quantity * item.unitPrice)}</Text>
+              </View>
+            ))}
+          </View>
+
+          <View style={styles.summary}>
+            <View style={styles.summaryBox}>
+              {order.discountAmount > 0 && (
+                <View style={styles.summaryRow}>
+                  <Text style={styles.summaryLabel}>Rabatt{order.discountCode ? ` (${order.discountCode})` : ""}</Text>
+                  <Text style={styles.summaryValue}>-{formatPrice(order.discountAmount)}</Text>
+                </View>
+              )}
+              <View style={styles.summaryRow}>
+                <Text style={styles.summaryLabel}>Versand</Text>
+                <Text style={styles.summaryValue}>{order.shippingCost === 0 ? "Kostenlos" : formatPrice(order.shippingCost)}</Text>
+              </View>
+              {rateGroups.map((g) => (
+                <React.Fragment key={g.rate}>
+                  <View style={styles.summaryRow}>
+                    <Text style={styles.summaryLabel}>Netto ({g.rate}%)</Text>
+                    <Text style={styles.summaryValue}>{formatPrice(g.net)}</Text>
+                  </View>
+                  <View style={styles.summaryRow}>
+                    <Text style={styles.summaryLabel}>zzgl. {g.rate}% MwSt.</Text>
+                    <Text style={styles.summaryValue}>{formatPrice(g.tax)}</Text>
+                  </View>
+                </React.Fragment>
+              ))}
+              <View style={styles.grandTotalRow}>
+                <Text style={styles.grandTotalLabel}>Gesamt</Text>
+                <Text style={styles.grandTotalValue}>{formatPrice(order.total)}</Text>
+              </View>
+            </View>
+          </View>
+
+          <View style={styles.footer}>
+            <Text>
+              {seller.sellerName} · {seller.sellerStreet}, {seller.sellerZip} {seller.sellerCity} · {seller.sellerEmail} · USt-IdNr.{" "}
+              {seller.vatId}
+            </Text>
+            {seller.bankDetails ? <Text style={{ marginTop: 4 }}>Bankverbindung (für Überweisung): {seller.bankDetails}</Text> : null}
+          </View>
         </View>
       </Page>
     </Document>