104 lines
3.8 KiB
Markdown
104 lines
3.8 KiB
Markdown
# Übergabe an die KI der Beraterprofilseite
|
|
|
|
Binde das vorhandene Kontakt-Popup in die Kontaktbuttons der Beraterprofile
|
|
ein. Übergib ausschließlich die Berater-ID als `advisorId`. Implementiere
|
|
kein eigenes Kontaktformular und keine separate E-Mail-Prüfung.
|
|
|
|
## Relevante Dateien
|
|
|
|
- `src/shared/berater-daten.json`: gemeinsame Datenquelle für Profile und Kontakt;
|
|
Array mit eindeutigen String-IDs, `vorname`, `nachname`, optionalem `spitzname` und `email`. Eigene öffentliche Profilfelder dürfen ergänzt werden.
|
|
- `src/shared/berater.js`: `findAdvisor(advisorId)` liefert den passenden Eintrag.
|
|
- `src/features/contact/contact-dialog.js`: exportiert `openContactDialog({ advisorId })`.
|
|
- `src/features/contact/contact.css`: wird automatisch vom Popup-Modul importiert;
|
|
die Schriftdateien liegen unter `public/fonts/`.
|
|
- `src/features/contact/contact-entry.js` und `contact-test.html`: Beispielintegration.
|
|
- `src/server/services/contact-service.js`: prüft Kunden-E-Mail und Berater-ID,
|
|
lädt die Empfängeradresse serverseitig aus der JSON.
|
|
- `src/server/swagger.json`: API-Vertrag für `POST /api/contact`.
|
|
|
|
## Datenvertrag
|
|
|
|
```json
|
|
[
|
|
{
|
|
"id": "relindis-agethen",
|
|
"vorname": "Relindis",
|
|
"nachname": "Agethen",
|
|
"spitzname": "Lilli",
|
|
"email": "relindis.agethen@tri-hub.de"
|
|
}
|
|
]
|
|
```
|
|
|
|
Die Profilseite und das Popup müssen dieselben IDs verwenden. E-Mail-Adressen
|
|
werden explizit gepflegt und nicht aus Namen erzeugt. Sie müssen auf `@tri-hub.de`
|
|
enden. Keine vertraulichen Informationen in die JSON schreiben: Sie ist Teil
|
|
des Frontends. Nach Änderungen API neu starten und Frontend neu bauen.
|
|
|
|
## Einzubindender Code
|
|
|
|
Beispielbutton (ID aus dem jeweiligen Profil):
|
|
|
|
```html
|
|
<button type="button" data-berater-id="relindis-agethen">
|
|
Berater kontaktieren
|
|
</button>
|
|
```
|
|
|
|
Im JavaScript-Modul der Profilseite, einmalig registrieren:
|
|
|
|
```js
|
|
// Importpfad relativ zu dieser Datei anpassen.
|
|
import { openContactDialog } from "./src/features/contact/contact-dialog.js";
|
|
|
|
document.addEventListener("click", (event) => {
|
|
const button = event.target.closest("button[data-berater-id]");
|
|
if (!button) return;
|
|
openContactDialog({ advisorId: button.dataset.beraterId });
|
|
});
|
|
```
|
|
|
|
Bei dynamischer Erzeugung des Buttons die ID aus dem Profil setzen:
|
|
|
|
```js
|
|
button.dataset.beraterId = profile.id;
|
|
```
|
|
|
|
Alternativ direkt am einzelnen Button binden (nicht zusätzlich zur Delegation):
|
|
|
|
```js
|
|
button.addEventListener("click", () => {
|
|
openContactDialog({ advisorId: profile.id });
|
|
});
|
|
```
|
|
|
|
Falls die Profilseite selbst Daten aus der gemeinsamen Datei benötigt:
|
|
|
|
```js
|
|
// Beispiel für ein Modul direkt unter src/; Pfad ggf. anpassen.
|
|
import berater from "./shared/berater-daten.json" with { type: "json" };
|
|
|
|
const profile = berater.find((entry) => entry.id === advisorId);
|
|
// profile.vorname, profile.nachname, profile.spitzname und profile.email sind verfügbar.
|
|
```
|
|
|
|
Das Popup zeigt den getrimmten `spitzname`, falls nicht leer, sonst den
|
|
getrimmten `vorname`. `nachname` und das bisherige Feld `name` werden für die
|
|
Überschrift nicht verwendet. Es wird kein „kontaktieren“ angehängt.
|
|
|
|
Das Popup ermittelt den Anzeigenamen selbst und sendet beim Absenden
|
|
`{ email, advisorId, reason, simulationAccepted }` an `/api/contact`. Die
|
|
Profilseite muss weder Name noch E-Mail an das Popup schicken. Kundenprüfung,
|
|
Simulation, Mailpit-Versand und Microsoft-Bookings-Weiterleitung sind bereits
|
|
implementiert. Unbekannte IDs sperren das Absenden.
|
|
|
|
## Testen
|
|
|
|
Mit laufendem Frontend, API und Mailpit:
|
|
`http://localhost:5173/contact-test.html?berater-id=relindis-agethen`.
|
|
Für die Kundenadresse eine vorhandene Testbuchung verwenden. Die Prüfung
|
|
findet ausschließlich beim Absenden statt. Der Branch ist
|
|
`feature/terminbuchung-kontaktfeld`; die Kontaktdateien müssen im Arbeitsstand
|
|
der Profilseite vorhanden sein.
|