trihub-ernaehrung-backseatDevs/docs/contact-integration.md

3.9 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, 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

[
    {
        "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):

<button type="button" data-berater-id="relindis-agethen">
    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.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.