Generate invoice PDFs attached to order confirmation, and send emails on order status changes

Invoice PDFs (§14 UStG line items, tenant-configurable VAT rate) are now generated at checkout and attached to the confirmation email, plus available on demand from the order-detail page. Payload-side, orders now also email the customer on shipped/cancelled/return_requested/returned, with Stornorechnung/Gutschrift correction PDFs attached for the latter two so the original invoice's immutable number stays honest.
2026-07-22 09:49:56 +00:00
parent fa02d95dff
commit 5232b14cdf
15 changed files with 1077 additions and 24 deletions
@@ -0,0 +1,218 @@
+import React from "react";
+import { Document, Page, View, Text, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
+import { formatPrice, 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
+// app/api/account/orders/[orderNumber]/invoice/route.ts — same render
+// function both times, so a re-download always matches what was emailed.
+//
+// Built-in Helvetica, not a registered web font — this renders inside the
+// 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.
+const BRAND = "#f6a701";
+const TEXT_MUTED = "#6b6b69";
+const BORDER = "#e5e0d8";
+
+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 },
+  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 },
+  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 },
+  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 },
+  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,
+  },
+  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,
+  },
+});
+
+export type InvoiceItem = { productName: string; quantity: number; unitPrice: number };
+
+export type InvoiceOrder = {
+  orderNumber: string;
+  invoiceNumber: string;
+  invoiceIssuedAt: string;
+  customerFirstName: string;
+  customerLastName: string;
+  deliveryMethod: "address" | "packstation";
+  street?: string | null;
+  packstationNumber?: string | null;
+  postNumber?: string | null;
+  zip: string;
+  city: string;
+  country: string;
+  items: InvoiceItem[];
+  subtotal: number;
+  shippingCost: number;
+  discountAmount: number;
+  discountCode: string | null;
+  total: number;
+};
+
+export type InvoiceSeller = {
+  sellerName: string;
+  sellerStreet: string;
+  sellerZip: string;
+  sellerCity: string;
+  sellerCountry: string;
+  sellerEmail: string;
+  vatId: string;
+  taxRatePercent: number;
+  bankDetails?: string | null;
+};
+
+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 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>
+
+        <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>
+          ))}
+        </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>
+          )}
+          <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>
+      </Page>
+    </Document>
+  );
+}
+
+export async function renderInvoicePdf(order: InvoiceOrder, seller: InvoiceSeller): Promise<Buffer> {
+  return renderToBuffer(<InvoiceDocument order={order} seller={seller} />);
+}