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

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, name und email. 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: 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": "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.