# Skrift Konfigurator - WordPress Plugin

Interaktiver Konfigurator für handgeschriebene Briefe, Postkarten und Einladungen.

## Features

- ✅ Multi-Step Konfigurator mit 6 Schritten
- ✅ B2B und B2C Workflows
- ✅ Dynamische Preisberechnung
- ✅ Gutschein-System
- ✅ Backend-Integration für SVG-Generierung
- ✅ Preview-System (in Entwicklung)
- ✅ Responsive Design
- ✅ Vollständig anpassbare Preise und Produkte

## Installation

1. Plugin-Ordner nach `wp-content/plugins/skrift-konfigurator/` kopieren
2. In WordPress: **Plugins → Installierte Plugins**
3. "Skrift Konfigurator" aktivieren
4. Zu **Einstellungen → Skrift Konfigurator** gehen
5. Einstellungen konfigurieren

## Konfiguration

### 1. Produkte

Verwalte Namen, Beschreibungen und Basispreise für alle 5 Produkte:
- Businessbriefe
- Business Postkarten
- Follow-ups
- Einladungen
- Private Briefe

### 2. Preise

Konfiguriere Aufpreise für:
- Formate (A4 Upgrade)
- Versand (Direkt vs. Bulk)
- Umschläge (mit Adresse vs. Custom Text)
- Zusatzleistungen (Motiv-Upload, Design-Service, etc.)
- Schriftarten (Tilda, Alva, Ellie)

### 3. Dynamische Preisformeln

Erstelle Mengenrabatt-Formeln für Business und Privatkunden:

**Beispiel Business:**
```
if (q < 50) return 2.50;
if (q < 100) return 2.30;
if (q < 200) return 2.10;
return 1.90;
```

**Beispiel Privat:**
```
if (q < 10) return 3.00;
if (q < 25) return 2.80;
return 2.50;
```

### 4. Backend-Verbindung

**WICHTIG:** Für die SVG-Generierung!

- **API URL:** `https://backend.deine-domain.de`
- **Order Webhook URL:** `https://n8n.deine-domain.de/webhook/order` (optional)
- **Redirect URLs:** Wohin nach Bestellung weitergeleitet wird

Siehe [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) für Details.

### 5. Gutscheine

Erstelle Gutschein-Codes für Rabatte oder Testbestellungen.

**Arten:**
- **Prozentual:** 10%, 20%, 50%
- **Festbetrag:** 5€, 10€, 20€
- **Gratis:** 100% Rabatt

**Einstellungen:**
- Einmalverwendung oder Mehrfachnutzung
- Aktiv/Inaktiv Toggle

## Verwendung

### Shortcode einfügen

```
[skrift_konfigurator]
```

Füge diesen Shortcode auf jeder Seite oder jedem Beitrag ein.

### Mit URL-Parametern

Direktlink zu einem Produkt:

```
https://deine-domain.de/konfigurator/?businessbriefe
https://deine-domain.de/konfigurator/?private-briefe
https://deine-domain.de/konfigurator/?einladungen
```

## Datei-Struktur

```
skrift-konfigurator/
├── assets/
│   ├── css/
│   │   └── configurator.css          # Styling
│   └── js/
│       ├── configurator-app.js        # Main App
│       ├── configurator-state.js      # State Management
│       ├── configurator-ui.js         # UI Rendering
│       ├── configurator-pricing.js    # Price Calculation
│       ├── configurator-api.js        # Backend API Client
│       └── configurator-backend-integration.js  # Backend Integration
├── includes/
│   ├── admin-settings.php             # Admin Settings Page
│   └── admin-vouchers.php             # Voucher Management
├── skrift-konfigurator.php            # Main Plugin File
├── BACKEND_INTEGRATION.md             # Backend Integration Guide
└── README.md                          # This file
```

## API Integration

Das Plugin kommuniziert mit dem Node.js Backend über REST API.

### Endpoints

| Endpoint | Method | Beschreibung |
|----------|--------|--------------|
| `/health` | GET | Health-Check |
| `/api/preview/batch` | POST | Preview generieren |
| `/api/order/generate` | POST | Order erstellen |
| `/api/order/finalize` | POST | Order aus Preview finalisieren |

Siehe [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) für vollständige API-Dokumentation.

## Workflow

### Business-Kunde

```
1. Produkt auswählen (Businessbriefe, Business Postkarten, Follow-ups)
2. Menge eingeben
3. Format wählen
4. Versand & Umschlag konfigurieren
5. Inhalt eingeben (Text)
6. Kundendaten eingeben
7. Prüfen & Bestellen
   → Backend generiert SVG-Dateien
   → Webhook wird aufgerufen
   → Weiterleitung zu Danke-Seite
```

### Privat-Kunde

```
1. Produkt auswählen (Private Briefe, Einladungen)
2. Menge eingeben
3. Format wählen
4. Versand & Umschlag konfigurieren
5. Inhalt eingeben (Text + optional Motiv)
6. Kundendaten eingeben
7. Prüfen & Bestellen
   → PayPal-Checkout (später)
   → Backend generiert SVG-Dateien
   → Webhook wird aufgerufen
   → Weiterleitung zu Danke-Seite
```

## Entwicklung

### Requirements

- PHP 7.4+
- WordPress 5.8+
- Modern Browser mit ES6+ Support

### JavaScript

Das Plugin nutzt ES6 Modules und läuft ohne Build-Step.

**State Management:**
- Reducer-Pattern (ähnlich Redux)
- Immutable State Updates
- Uni-directional Data Flow

**UI Rendering:**
- Virtual DOM mit `h()` Helper
- Deklaratives Rendering
- Event-Delegation

### Debugging

Browser-Console öffnen (F12):

```javascript
// State prüfen
console.log(window.currentState);

// Backend API testen
const api = window.SkriftBackendAPI;
await api.healthCheck();

// Test-Order erstellen
await api.generateOrder(
  api.generateOrderNumber(),
  [{ text: 'Test', font: 'tilda', format: 'A4', placeholders: {} }],
  [],
  { customer: { type: 'business', firstName: 'Test' } }
);
```

## Deployment

### 1. Plugin auf Server hochladen

Via FTP, SSH oder WordPress Dashboard:
```
wp-content/plugins/skrift-konfigurator/
```

### 2. Backend deployen

Siehe `Docker Backend/DEPLOYMENT.md`

### 3. WordPress konfigurieren

- Einstellungen → Skrift Konfigurator
- Backend-URL setzen
- Preise anpassen
- Gutscheine erstellen (optional)

### 4. Seite erstellen

- Neue Seite: "Konfigurator"
- Shortcode einfügen: `[skrift_konfigurator]`
- Veröffentlichen

### 5. Testen

- Produkt durchklicken
- Test-Bestellung aufgeben
- Prüfen ob Backend-Order erstellt wurde
- Prüfen ob Dateien in `/var/skrift-output/` erstellt wurden

## Troubleshooting

### Konfigurator wird nicht angezeigt

**Lösung:**
- Shortcode korrekt? `[skrift_konfigurator]`
- JavaScript-Fehler in Console? (F12)
- Plugin aktiviert?

### Backend-Verbindung fehlgeschlagen

**Lösung:**
- Backend URL korrekt in Einstellungen?
- Backend erreichbar? `curl https://backend.domain.de/health`
- CORS konfiguriert? (Nginx Proxy Manager)

### Preise werden falsch berechnet

**Lösung:**
- Preise in Einstellungen prüfen
- Dynamische Formeln prüfen (Syntax)
- Console-Logs prüfen: `window.currentState.quote`

### Gutschein funktioniert nicht

**Lösung:**
- Gutschein ist aktiv?
- Gutschein noch nicht verwendet? (bei Einmalverwendung)
- Code korrekt geschrieben? (Case-sensitive!)

## Changelog

### Version 0.3.0
- ✅ Backend-Integration implementiert
- ✅ API Client für Preview & Order
- ✅ Webhook-Support
- ✅ Redirect-URLs konfigurierbar

### Version 0.2.0
- ✅ Gutschein-System
- ✅ Dynamische Preisformeln
- ✅ Admin-Einstellungen erweitert

### Version 0.1.0
- ✅ Basis-Konfigurator
- ✅ 6 Schritte
- ✅ B2B und B2C Workflows

## TODO

- [ ] Preview-System vollständig integrieren
- [ ] PayPal-Integration für Privatkunden
- [ ] Email-Benachrichtigungen
- [ ] PDF-Export der Bestellung
- [ ] Admin-Dashboard für Bestellungen

## Support

Bei Fragen oder Problemen:
1. [BACKEND_INTEGRATION.md](./BACKEND_INTEGRATION.md) lesen
2. Browser-Console prüfen (F12)
3. Backend-Logs prüfen: `docker compose logs -f`
4. WordPress Debug-Log: `wp-content/debug.log`

## Lizenz

Proprietär - Alle Rechte vorbehalten