3.5 KiB
Ü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,nameundemail. Die aktuellen Einträge sind Demo-Daten. Eigene öffentliche Profilfelder dürfen ergänzt werden.src/shared/berater.js:findAdvisor(advisorId)liefert den passenden Eintrag.src/features/contact/contact-dialog.js: exportiertopenContactDialog({ advisorId }).src/features/contact/contact.css: wird automatisch vom Popup-Modul importiert; die Schriftdateien liegen unterpublic/fonts/.src/features/contact/contact-entry.jsundcontact-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ürPOST /api/contact.
Datenvertrag
[
{
"id": "anna-mueller",
"name": "Anna Müller",
"email": "anna.mueller@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):
<button type="button" data-berater-id="anna-mueller">
Berater kontaktieren
</button>
Im JavaScript-Modul der Profilseite, einmalig registrieren:
// 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:
button.dataset.beraterId = profile.id;
Alternativ direkt am einzelnen Button binden (nicht zusätzlich zur Delegation):
button.addEventListener("click", () => {
openContactDialog({ advisorId: profile.id });
});
Falls die Profilseite selbst Daten aus der gemeinsamen Datei benötigt:
// 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.name und profile.email stehen bei bekannter ID zur Verfügung.
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=anna-mueller.
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.