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();
-  form.append('file', datei);
-
-  const session = await ensureFreshToken();
-  const res = await fetch(`${BASE}/files`, {
-    method: 'POST',
-    headers: session ? { Authorization: `Bearer ${session.access_token}` } : undefined,
-    body: form,
+  // Als Base64 (Data-URL) an den öffentlichen Upload-Proxy schicken – so können
+  // auch Gäste (Bestellung ohne Login) Motive/Quelldateien hochladen. Der direkte
+  // Directus-/files-Upload braucht einen Token, den Gäste nicht haben.
+  const data_base64 = await new Promise<string>((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result || ''));
+    r.onerror = () => reject(new Error('Datei konnte nicht gelesen werden.'));
+    r.readAsDataURL(datei);
   });
-  const data = await parse(res);
-  return data?.data?.id;
+  const data = await request('/skrift-orders/upload', {
+    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 }}>