Kundenangebote: Auswahl im Konfigurator (Aufschlaege + Name-Zusatz)

Eingeloggte Kunden sehen ihre Angebote (customer_offers) je Produkt und waehlen eins;
Aufschlaege pro Stueck flie\u00dfen serverseitig in den Preis, Name-Zusatz + Notiz sichtbar.
Quote/Order senden jetzt den Token (auth) mit, damit die Angebote greifen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/lib/api.ts

@@ -296,11 +296,33 @@ export type QuoteInput = {
   email?: string;
   /** Segment für den Mengen-Multiplikator (B2B/B2C). */
   person_type?: 'privat' | 'unternehmen';
+  /** Gewähltes Kundenangebot (ID) – Aufschläge werden serverseitig addiert. */
+  offer?: number;
 };
 
-/** Preis serverseitig berechnen lassen – der Client rechnet nie selbst. */
+/** Preis serverseitig berechnen lassen – der Client rechnet nie selbst.
+ *  auth:true, damit bei eingeloggten Kunden der Token mitgeht (Kundenangebote). */
 export async function fetchQuote(input: QuoteInput): Promise<Quote> {
-  return request('/skrift-orders/quote', { method: 'POST', body: input, auth: false });
+  return request('/skrift-orders/quote', { method: 'POST', body: input, auth: true });
+}
+
+/* ── Kundenangebote (customer_offers) ───────────────────────────────────────── */
+
+export type OfferSurcharge = { label: string; amount: number };
+export type CustomerOffer = {
+  id: number;
+  label: string;
+  name_suffix?: string | null;
+  note?: string | null;
+  allow_multi_page?: boolean;
+  surcharges?: OfferSurcharge[] | null;
+  product?: { key: string; name: string } | null;
+};
+
+/** Angebote des eingeloggten Kunden für ein Produkt (leer, wenn nicht eingeloggt). */
+export async function fetchMyOffers(productKey: string): Promise<CustomerOffer[]> {
+  const data = await request(`/skrift-orders/my-offers?product=${encodeURIComponent(productKey)}`, { auth: true });
+  return data?.offers ?? [];
 }
 
 /* ── Motive ───────────────────────────────────────────────────────────────── */
@@ -420,6 +442,8 @@ export type OrderInput = {
   voucher_code?: string;
   payment_method: 'paypal' | 'rechnung';
   source?: string;
+  /** Gewähltes Kundenangebot (ID). */
+  offer?: number;
   entries: unknown[];
   /** Motiv aus dem Katalog (ID) bzw. hochgeladene Datei (Directus-Datei-ID). */
   motif?: number;
@@ -436,7 +460,9 @@ export type OrderResult = {
 };
 
 export async function createOrder(input: OrderInput): Promise<OrderResult> {
-  return request('/skrift-orders', { method: 'POST', body: input, auth: false });
+  // auth:true → eingeloggte Kunden senden ihren Token (Kundenangebote greifen);
+  // Gäste haben keine Session → kein Header, Verhalten wie zuvor.
+  return request('/skrift-orders', { method: 'POST', body: input, auth: true });
 }
 
 /** Vermerkt eine erfolgreiche PayPal-Zahlung am Auftrag. */
@@ -481,17 +507,21 @@ export const paypalClientId = (s: PublicSettings | null) =>
 
 /** Lädt eine Datei nach Directus und liefert deren ID. */
 export async function uploadFile(datei: File): Promise<string> {
-  const form = new FormData();
+  // Als Base64 (Data-URL) an den öffentlichen Upload-Proxy schicken – so können
-  form.append('file', datei);
+  // auch Gäste (Bestellung ohne Login) Motive/Quelldateien hochladen. Der direkte
-
+  // Directus-/files-Upload braucht einen Token, den Gäste nicht haben.
-  const session = await ensureFreshToken();
+  const data_base64 = await new Promise<string>((resolve, reject) => {
-  const res = await fetch(`${BASE}/files`, {
+    const r = new FileReader();
-    method: 'POST',
+    r.onload = () => resolve(String(r.result || ''));
-    headers: session ? { Authorization: `Bearer ${session.access_token}` } : undefined,
+    r.onerror = () => reject(new Error('Datei konnte nicht gelesen werden.'));
-    body: form,
+    r.readAsDataURL(datei);
   });
-  const data = await parse(res);
+  const data = await request('/skrift-orders/upload', {
-  return data?.data?.id;
+    method: 'POST',
+    auth: false,
+    body: { filename: datei.name, content_type: datei.type || 'application/octet-stream', data_base64 },
+  });
+  return data?.id;
 }
 
 /* ── Angebotsanfrage ──────────────────────────────────────────────────────── */

src/routes/Configurator.tsx

@@ -12,6 +12,7 @@ import {
   fetchPriceItems,
   fetchProducts,
   fetchQuote,
+  fetchMyOffers,
   fetchSettings,
   generatePreview,
   validateText,
@@ -26,6 +27,7 @@ import {
   type Product,
   type PublicSettings,
   type Quote,
+  type CustomerOffer,
 } from '../lib/api';
 import { ladePayPal, rendereButtons } from '../lib/paypal';
 import { ladeVorlageHerunter, leseEmpfaengerDatei } from '../lib/excel';
@@ -336,6 +338,9 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   const [quote, setQuote] = useState<Quote | null>(null);
   const [quoteFehler, setQuoteFehler] = useState<string | null>(null);
+  // Kundenangebote (customer_offers) für den eingeloggten Kunden + das Produkt.
+  const [offers, setOffers] = useState<CustomerOffer[]>([]);
+  const [offerId, setOfferId] = useState<number | null>(null);
 
   const [previewDocs, setPreviewDocs] = useState<PreviewDoc[]>([]);
   const [previewLaedt, setPreviewLaedt] = useState(false);
@@ -613,6 +618,14 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   // Produkt kommt aus dem Direktlink; Extern-Modus ist oben definiert.
   const angemeldet = !!loadSession();
+  // Kundenangebote laden, sobald Produkt gewählt + eingeloggt (sonst keine).
+  useEffect(() => {
+    setOfferId(null);
+    if (!product || !angemeldet) { setOffers([]); return; }
+    let ab = false;
+    fetchMyOffers(product).then((o) => { if (!ab) setOffers(o); }).catch(() => { if (!ab) setOffers([]); });
+    return () => { ab = true; };
+  }, [product, angemeldet]);
   // „Sie sind" entfällt, wenn die Einstufung schon feststeht (eingeloggt mit
   // person_type) oder im Extern-Modus.
   const zeigeSieSind = !externModus && !(angemeldet && !!personType);
@@ -705,6 +718,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
       voucher_code: voucher.trim() || undefined,
       // Bekannte E-Mail mitgeben, damit Kundenrabatte in den Live-Preis einfließen.
       email: istEmail(rechnung.email) ? rechnung.email.trim() : undefined,
+      offer: offerId ?? undefined,
     })
       .then((q) => !abgebrochen && setQuote(q))
       .catch((err) => {
@@ -715,7 +729,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
     return () => { abgebrochen = true; };
   }, [product, kontaktSelektiert, format, preisMenge, shippingType, needsEnvelope, labeling,
-      motifMode, istPostkarte, textservice, designservice, voucher, rechnung.email, personType]);
+      motifMode, istPostkarte, textservice, designservice, voucher, rechnung.email, personType, offerId]);
 
   /**
    * Einzelversand: Kuvert mit Empfängeradresse ist zwingend (wir adressieren
@@ -1049,6 +1063,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
           ...(designservice ? ['gestaltungsservice'] : []),
         ],
         voucher_code: voucher.trim() || undefined,
+        offer: offerId ?? undefined,
         payment_method: keinePreise ? 'rechnung' : zahlung,
         source: externModus ? 'extern' : (loadSession() ? 'portal' : 'configurator'),
         // Gezeigte Vorschau 1:1 übernehmen (nur wenn unverändert seit der Vorschau).
@@ -1234,6 +1249,31 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
           {/* ── Menge & Versand ─────────────────────────────────── */}
           {aktuell === 'Menge & Versand' && (
             <>
+              {offers.length > 0 && (
+                <section className="sk-card">
+                  <h2>Ihr Angebot</h2>
+                  <div className="sk-options" style={{ marginTop: 'var(--sk-space-4)' }}>
+                    <Option name="offer" selected={offerId === null} onSelect={() => setOfferId(null)} title="Standard" />
+                    {offers.map((o) => (
+                      <Option key={o.id} name="offer" selected={offerId === o.id} onSelect={() => setOfferId(o.id)}
+                        title={o.label + (o.name_suffix ? ` (${o.name_suffix})` : '')} />
+                    ))}
+                  </div>
+                  {(() => {
+                    const o = offerId !== null ? offers.find((x) => x.id === offerId) : null;
+                    if (!o) return null;
+                    const sur = o.surcharges ?? [];
+                    return (
+                      <div style={{ marginTop: 'var(--sk-space-3)', fontSize: 13, color: 'var(--sk-muted, #666)', lineHeight: 1.5 }}>
+                        {sur.length > 0 && (
+                          <div>Aufschläge pro Stück: {sur.map((s) => `${s.label} +${Number(s.amount).toFixed(2)} €`).join(' · ')}</div>
+                        )}
+                        {o.note && <div style={{ marginTop: 4 }}>{o.note}</div>}
+                      </div>
+                    );
+                  })()}
+                </section>
+              )}
               <section className="sk-card">
                 <h2>Wie viele?</h2>
                 <div className="sk-field" style={{ marginTop: 'var(--sk-space-4)', marginBottom: 0 }}>

src/routes/Textmenge.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
 import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
-import PreviewPanel from '../components/PreviewPanel';
 
 /** Schriftarten wie im Konfigurator/manuellen Druck. */
 const SCHRIFTEN = [
@@ -10,6 +9,54 @@ const SCHRIFTEN = [
   { key: 'ellie', name: 'Ellie' },
 ];
 
+/** Kugelschreiber-Optik (identisch zum PreviewPanel): blaue Tinte, dezenter Wobble. */
+let inkSeq = 0;
+const inkify = (svg: string): string => {
+  if (typeof svg !== 'string') return svg;
+  const id = `skink${inkSeq++}`;
+  return svg
+    .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"')
+    .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
+    .replace(/(<svg[^>]*>)/i, `$1<defs><filter id="${id}" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`)
+    .replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, `$1<g filter="url(#${id})">`)
+    .replace(/<\/svg>\s*$/i, '</g></svg>');
+};
+
+/** Musterbild als PNG herunterladen (SVG → Canvas), wie im PreviewPanel. */
+function bildSpeichern(svg: string) {
+  const m = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  const w = Math.round(m ? Number(m[1]) : 794);
+  const h = Math.round(m ? Number(m[2]) : 1123);
+  const inkSvg = inkify(svg);
+  const url = URL.createObjectURL(new Blob([inkSvg], { type: 'image/svg+xml;charset=utf-8' }));
+  const img = new Image();
+  img.onload = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob((png) => {
+        if (png) {
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(png);
+          a.download = 'skrift-textmenge.png';
+          a.click();
+          URL.revokeObjectURL(a.href);
+        }
+        URL.revokeObjectURL(url);
+      }, 'image/png');
+    } else {
+      URL.revokeObjectURL(url);
+    }
+  };
+  img.onerror = () => URL.revokeObjectURL(url);
+  img.src = url;
+}
+
 /** Stabile anonyme Kennung fürs Vorschau-Kontingent (wie im Konfigurator). */
 function clientId(): string {
   const KEY = 'skrift.client';
@@ -32,24 +79,24 @@ function overflowMeldung(overflow?: PreviewOverflow[]) {
 }
 
 /**
- * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe mit denselben
+ * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe (Tabulator,
- * Möglichkeiten wie sonst (Tabulator, gesperrte Zeichen, [[seitenumbruch]]). Über
+ * gesperrte Zeichen) und „Vorschau generieren" → rendert EIN Schriftstück
- * „Vorschau generieren" wird das Schriftstück gerendert (Kugelschreiber-Optik) –
+ * (Kugelschreiber-Optik). Passt der Text nicht auf eine Seite, kommt die Fehlermeldung.
- * so sieht man, ob der Text passt, sonst kommt eine Fehlermeldung.
+ * Bewusst einseitig: kein Seitenumbruch.
  */
 export default function Textmenge() {
   const [formate, setFormate] = useState<Format[]>([]);
   const [settings, setSettings] = useState<PublicSettings | null>(null);
   const [format, setFormat] = useState('a4');
   const [font, setFont] = useState('tilda');
+  const [realistic, setRealistic] = useState(true);
   const [text, setText] = useState('');
   const [hinweis, setHinweis] = useState('');
 
-  const [docs, setDocs] = useState<PreviewDoc[]>([]);
+  const [doc, setDoc] = useState<PreviewDoc | null>(null);
   const [laedt, setLaedt] = useState(false);
   const [fehler, setFehler] = useState<string | null>(null);
-  const [verbleibend, setVerbleibend] = useState(0);
+  const [gross, setGross] = useState(false);
-  const [maximal, setMaximal] = useState(0);
 
   useEffect(() => {
     fetchFormats()
@@ -61,6 +108,14 @@ export default function Textmenge() {
     fetchSettings().then(setSettings).catch(() => {});
   }, []);
 
+  // Escape schließt die Großansicht.
+  useEffect(() => {
+    if (!gross) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setGross(false); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [gross]);
+
   // Gesperrte Zeichen wie im Konfigurator (Zeilenumbruch/Tab bleiben erlaubt).
   const verbotenRe = useMemo(() => {
     const wl = settings?.char_whitelist;
@@ -82,14 +137,15 @@ export default function Textmenge() {
     return v.replace(verbotenRe, '');
   };
 
-  // Neuer Text/Format/Schrift → alte Vorschau verwerfen (nicht live neu laden).
+  // Änderung an Eingaben → alte Vorschau verwerfen.
   useEffect(() => {
-    setDocs([]);
+    setDoc(null);
     setFehler(null);
-  }, [text, font, format]);
+    setGross(false);
+  }, [text, font, format, realistic]);
 
   async function generieren() {
-    if (!text.trim()) return;
+    if (!text.trim() || laedt) return;
     setLaedt(true);
     setFehler(null);
     try {
@@ -98,18 +154,17 @@ export default function Textmenge() {
         text,
         font,
         format,
+        realistic,
         entries: [{}],
       });
-      setVerbleibend(ergebnis.remaining ?? 0);
-      setMaximal(ergebnis.limit ?? 0);
       if (ergebnis.has_overflow) {
-        setDocs([]);
+        setDoc(null);
         setFehler(overflowMeldung(ergebnis.overflow));
       } else {
-        setDocs(ergebnis.docs ?? []);
+        setDoc((ergebnis.docs ?? []).find((d) => d.art === 'brief') ?? ergebnis.docs?.[0] ?? null);
       }
     } catch (e) {
-      setDocs([]);
+      setDoc(null);
       setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.');
     } finally {
       setLaedt(false);
@@ -117,15 +172,17 @@ export default function Textmenge() {
   }
 
   return (
-    <div className="sk-page" style={{ maxWidth: 980, margin: '0 auto' }}>
+    <div className="sk-konf">
-      <h1 style={{ margin: '0 0 6px' }}>Textmenge prüfen</h1>
+      <div>
-      <p style={{ color: 'var(--sk-muted, #666)', margin: '0 0 20px' }}>
+        <h1 style={{ margin: '0 0 8px', fontSize: 28 }}>Textmenge prüfen</h1>
-        Text eingeben, Format und Schrift wählen und eine Vorschau erzeugen – so siehst du, ob der Text auf ein Schriftstück passt.
+        <p style={{ color: 'var(--sk-muted, #666)', margin: 0, lineHeight: 1.6 }}>
+          Text eingeben, Format und Schrift wählen, dann eine Vorschau erzeugen. So siehst du, ob der Text auf ein Schriftstück passt.
         </p>
+      </div>
 
       <div className="sk-card">
-        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
             <label className="sk-field" style={{ flex: '1 1 200px' }}>
               <span className="sk-label">Format</span>
               <select className="sk-input" value={format} onChange={(e) => setFormat(e.target.value)}>
@@ -145,6 +202,11 @@ export default function Textmenge() {
             </label>
           </div>
 
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 15 }}>
+            <input type="checkbox" checked={realistic} onChange={(e) => setRealistic(e.target.checked)} style={{ width: 18, height: 18 }} />
+            Realistische Handschrift (natürliche Variation)
+          </label>
+
           <label className="sk-field">
             <span className="sk-label">Text · {text.length} Zeichen</span>
             <textarea
@@ -152,10 +214,9 @@ export default function Textmenge() {
               rows={12}
               value={text}
               placeholder="Text eingeben oder einfügen …"
-              style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', resize: 'vertical' }}
+              style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', resize: 'vertical', lineHeight: 1.6 }}
               onChange={(e) => setText(saeubere(e.target.value))}
               onKeyDown={(e) => {
-                // Tab fügt einen echten Tabulator ein (z. B. Datum an den rechten Rand).
                 if (e.key !== 'Tab' || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
                 e.preventDefault();
                 const ta = e.currentTarget;
@@ -168,27 +229,90 @@ export default function Textmenge() {
               }}
             />
           </label>
+
+          <button
+            type="button"
+            className="sk-btn sk-btn--primary"
+            disabled={!text.trim() || laedt}
+            onClick={generieren}
+            style={{ alignSelf: 'flex-start', opacity: !text.trim() || laedt ? 0.6 : 1 }}
+          >
+            {laedt ? 'Vorschau wird erzeugt …' : 'Vorschau generieren'}
+          </button>
+
           <p style={{ color: 'var(--sk-muted, #666)', fontSize: 12, margin: 0, lineHeight: 1.5 }}>
-            Tabulator (↹) rückt Text ein · <code>[[seitenumbruch]]</code> erzwingt eine neue Seite · gesperrte Zeichen werden entfernt.
+            Tabulator (↹) rückt Text ein. Gesperrte Zeichen werden automatisch entfernt.
           </p>
           {hinweis && <p style={{ color: 'var(--sk-danger, #c62828)', fontSize: 13, margin: 0 }}>{hinweis}</p>}
         </div>
       </div>
 
-      <div style={{ marginTop: 16 }}>
+      {/* Vorschau / Ergebnis */}
-        <PreviewPanel
+      <div className="sk-card">
-          titel="Vorschau"
+        <div className="sk-card-body">
-          format={format}
+          {fehler ? (
-          docs={docs}
+            <div
-          gesamtDokumente={docs.length}
+              style={{
-          verbleibend={verbleibend}
+                display: 'flex', gap: 10, alignItems: 'flex-start', color: '#c62828',
-          maximal={maximal}
+                background: 'rgba(198,40,40,.08)', border: '1px solid rgba(198,40,40,.25)',
-          laedt={laedt}
+                borderRadius: 10, padding: '14px 16px', fontSize: 15,
-          fehler={fehler}
+              }}
-          onGenerate={generieren}
+            >
-          bereit={!!text.trim()}
+              <span style={{ fontSize: 18, lineHeight: 1 }}>⚠</span>
+              <span>{fehler}</span>
+            </div>
+          ) : doc ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
+              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', width: '100%' }}>
+                <span
+                  style={{
+                    fontSize: 13, fontWeight: 600, padding: '4px 12px', borderRadius: 999,
+                    background: 'rgba(46,125,50,.12)', color: '#2e7d32',
+                  }}
+                >
+                  ✓ Passt auf eine Seite
+                </span>
+                <span style={{ flex: 1 }} />
+                <button type="button" className="sk-btn" onClick={() => setGross(true)}>🔍 Vergrößern</button>
+                <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+              </div>
+              <div
+                className="sk-preview-doc-sheet"
+                onClick={() => setGross(true)}
+                style={{ width: '100%', maxWidth: 460, cursor: 'zoom-in' }}
+                dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
               />
             </div>
+          ) : (
+            <p style={{ color: 'var(--sk-muted, #666)', margin: 0, textAlign: 'center', padding: '40px 0' }}>
+              Noch keine Vorschau. Text eingeben und „Vorschau generieren" drücken.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Großansicht (Lightbox) */}
+      {gross && doc && (
+        <div
+          onClick={() => setGross(false)}
+          style={{
+            position: 'fixed', inset: 0, background: 'rgba(0,0,0,.72)', zIndex: 1000,
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+            gap: 16, padding: 24,
+          }}
+        >
+          <div style={{ display: 'flex', gap: 10 }} onClick={(e) => e.stopPropagation()}>
+            <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+            <button type="button" className="sk-btn" onClick={() => setGross(false)}>Schließen</button>
+          </div>
+          <div
+            className="sk-preview-doc-sheet"
+            onClick={(e) => e.stopPropagation()}
+            style={{ width: 'min(92vw, 62vh)', maxHeight: '86vh', overflow: 'auto' }}
+            dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
+          />
+        </div>
+      )}
     </div>
   );
 }