// Story-Mode: 6 Story-Fragen statt 13 Sections.
// Mappt Story-Antworten zurück auf das bestehende Schema (state.data, state.users etc.),
// damit der Skill-Export 1:1 weiterläuft.
const StoryMode = (function() {
const { useState, useMemo, useEffect } = React;
// ============================================================
// 1) Story-Schema: 6 Fragen
// ============================================================
const STORY_QUESTIONS = [
{
id: "intro",
topic: "Vorab",
title: "Wir möchten Ihre Telefonie genau richtig einrichten.",
sub: "Sie müssen nichts wissen, was Sie nicht aus Ihrem Alltag kennen. Alles Technische leiten wir aus Ihren Antworten ab. Bevor's losgeht: zwei kurze Angaben zu Ihnen.",
kind: "intro"
},
{
id: "team",
topic: "Team",
title: "Wer soll telefonieren können?",
sub: "Tragen Sie alle Personen ein, die mit der neuen Anlage telefonieren werden, wie ein Team-Verzeichnis. Durchwahlen und Apps regeln wir später.",
kind: "team-list"
},
{
id: "incoming",
topic: "Anrufer an der Hauptnummer",
title: "Stellen Sie sich vor: jemand ruft Ihre Hauptnummer an. Was soll als erstes passieren?",
sub: "Wählen Sie die Variante, die Ihrem Alltag am nächsten kommt. Das Technische bauen wir dahinter zusammen.",
kind: "choice",
options: [
{
id: "reception",
icon: "phone",
tag: "üblich",
head: "Eine Person nimmt ab, unser „Empfang“",
detail: "Es klingelt direkt bei einer Person oder einem kleinen Team, das alle Anrufe annimmt und durchstellt, wie der Tresen vorne.",
followUp: { kind: "person-pick", q: "Wer sitzt typischerweise auf dem Empfang?" }
},
{
id: "ivr",
icon: "grid-3x3",
head: "Der Anrufer wählt selbst aus, wohin er möchte",
detail: "Eine Stimme begrüßt: „Drücken Sie 1 für Vertrieb, 2 für Service …“ und verbindet automatisch.",
followUp: { kind: "ivr-options", q: "Welche Tasten-Optionen wären typisch? (später anpassbar)" }
},
{
id: "team",
icon: "users",
head: "Es klingelt bei mehreren gleichzeitig",
detail: "Anrufe gehen an ein ganzes Team auf einmal, wer Zeit hat, nimmt ab. Üblich in Agenturen, Beratung, kleineren Büros ohne festen Empfang.",
followUp: { kind: "team-pick", q: "Wer gehört zu diesem Team?" }
},
{
id: "directdial",
icon: "corner-down-right",
head: "Hauptnummer ist nur Sammelpunkt, die meisten kennen ihre Durchwahl",
detail: "Externe wählen direkt die Person. An die Hauptnummer kommen nur Erstkontakte; die laufen z.B. ans Sekretariat.",
followUp: { kind: "person-pick", q: "Wer kümmert sich um die Hauptnummer / Erstkontakte?" }
}
]
},
{
id: "hours",
topic: "Erreichbarkeit",
title: "Wann wird bei Ihnen telefoniert?",
sub: "Innerhalb dieser Zeiten landen Anrufe wie eben gewählt. Außerhalb regeln wir's gleich in der nächsten Frage.",
kind: "hours"
},
{
id: "afterhours",
topic: "Außerhalb der Sprechzeiten",
title: "Was passiert, wenn niemand abnimmt, oder es nach Feierabend ist?",
sub: "Sie können das später anders einstellen für Mittagspause, Urlaub usw., fürs Erste reicht eine Standardeinstellung.",
kind: "choice",
options: [
{
id: "voicemail",
icon: "voicemail",
tag: "üblich",
head: "Anrufbeantworter, Nachricht kommt per E-Mail",
detail: "Anrufer können eine Nachricht hinterlassen. Die Aufnahme bekommen Sie sofort als E-Mail-Anhang.",
followUp: { kind: "vm-mail", q: "An welche E-Mail-Adresse sollen die Nachrichten gehen?" }
},
{
id: "announce",
icon: "megaphone",
head: "Nur eine kurze Ansage, keine Aufnahme",
detail: "„Sie erreichen uns Mo bis Fr von 8 bis 17 Uhr …“, danach legt das System auf. Kein Anrufbeantworter.",
followUp: null
},
{
id: "forward",
icon: "phone-forwarded",
head: "An eine andere Nummer weiterleiten",
detail: "Z.B. an einen Notdienst, ein Mobiltelefon oder einen Bereitschaftsdienst.",
followUp: { kind: "external-number", q: "An welche Nummer soll weitergeleitet werden?" }
},
{
id: "ringlonger",
icon: "hourglass",
head: "Einfach länger klingeln lassen",
detail: "Wenn niemand drangeht, klingelt es so lange weiter, bis der Anrufer auflegt. Wir empfehlen das nicht, aber manche Branchen wollen das so.",
followUp: null
}
]
},
{
id: "outgoing",
topic: "Wenn Sie raustelefonieren",
title: "Welche Nummer sieht der Angerufene, wenn Sie raustelefonieren?",
sub: "Das ist die Nummer, die im Display des Angerufenen erscheint. Sie können das pro Person oder Abteilung später feiner einstellen.",
kind: "choice",
options: [
{
id: "main",
icon: "building-2",
tag: "üblich",
head: "Immer die Hauptnummer der Firma",
detail: "Egal wer telefoniert, beim Angerufenen erscheint die zentrale Firmen-Nummer. So rufen Rückrufe wieder im Empfang an.",
followUp: null
},
{
id: "department",
icon: "network",
head: "Abteilungs-Nummer (z.B. Vertrieb, Service)",
detail: "Verschiedene Abteilungen treten mit unterschiedlichen Rufnummern auf. Geeignet, wenn Sie z.B. eine Service-Hotline haben.",
followUp: null
},
{
id: "individual",
icon: "user",
head: "Jede Person mit ihrer eigenen Durchwahl",
detail: "Jeder Mitarbeitende telefoniert mit der individuellen Direktwahl. Rückrufe gehen direkt zur richtigen Person.",
followUp: null
},
{
id: "anonymous",
icon: "eye-off",
head: "Nummer unterdrückt anzeigen",
detail: "Der Angerufene sieht „unbekannt“ oder „anonym“. Manche schalten dann gar nicht erst ans Telefon, wir empfehlen das nur in Sonderfällen.",
followUp: null
}
]
},
{
id: "devices",
topic: "Telefone und Apps",
title: "Womit sollen Ihre Mitarbeitenden telefonieren?",
sub: "Wir richten alles für die nächsten 5 Jahre zukunftssicher ein, Tischtelefone, Smartphone-App, Headset am Computer. Sie können das später pro Person ändern.",
kind: "choice",
options: [
{
id: "app-only",
icon: "smartphone",
tag: "modern",
head: "Nur die 3CX-App auf Smartphone und Computer",
detail: "Keine Tischtelefone. Anrufe laufen über die App, am PC mit Headset, unterwegs aufs Handy. Spart Hardware-Kosten und ist überall verfügbar.",
followUp: null
},
{
id: "mixed",
icon: "monitor-smartphone",
tag: "üblich",
head: "Tischtelefone für manche, App für alle",
detail: "Wer viel telefoniert (z.B. Empfang, Service) bekommt ein richtiges Tischtelefon. Alle anderen nutzen nur die App.",
followUp: { kind: "device-mix", q: "Wer bekommt ein Tischtelefon?" }
},
{
id: "phones-all",
icon: "phone",
head: "Tischtelefone für alle",
detail: "Klassisch, jeder Arbeitsplatz mit Festtelefon. Die App gibt's zusätzlich fürs Handy unterwegs.",
followUp: null
},
{
id: "decide",
icon: "circle-help",
head: "Entscheidet ihr, wir kennen den Markt nicht",
detail: "Wir empfehlen je nach Team-Struktur die passende Mischung und besprechen das beim Vor-Ort-Termin.",
followUp: null
}
]
}
];
// ============================================================
// 2) Mapping: Story → Schema
// ============================================================
function mapStoryToSchema(story, baseState) {
const next = JSON.parse(JSON.stringify(baseState));
next.data = next.data || {};
next.users = next.users || [];
next.hours = next.hours || {};
next.unsure = next.unsure || {};
// Optionstexte exakt wie in schema.js (SUPPORTED_PHONES)
const APP_ONLY = "Nein, nur App / kein Tischtelefon";
const DESK_PHONE = "Tischtelefon, Modell empfiehlt X-sec";
// Stand der letzten Übernahme (takeStory in app.jsx): seitdem unveränderte Antworten nicht erneut anwenden,
// damit spätere Änderungen im Profi-Bogen erhalten bleiben
const prev = story.taken || {};
const changed = (k) => JSON.stringify(story[k] || null) !== JSON.stringify(prev[k] || null);
// Skipped Story-Fragen → unsure-Marker (X-sec entscheidet)
if (story.skipped && changed("skipped")) {
const skipToFields = {
incoming: ["erst_annahme", "ivr_aktiv"],
afterhours: ["verhalten_ausser", "vm_wer", "vm_email"],
outgoing: ["clip_standard"],
devices: ["phone_provisioning"],
hours: ["geschaeftszeiten"]
};
Object.keys(story.skipped).forEach(qid => {
(skipToFields[qid] || []).forEach(f => { next.unsure[f] = true; });
});
}
// Frage 0: Intro mit Firma / Ansprechpartner / Kontakt
if (story.intro) {
["firma", "ansprechpartner", "kontakt_email"].forEach(k => {
if (story.intro[k] && story.intro[k] !== (prev.intro || {})[k]) next.data[k] = story.intro[k];
});
}
// Frage 1: Team, mit vorhandenen Nutzern zusammenführen (gleicher Name = gleiche Person), nichts ersetzen
if (story.team && Array.isArray(story.team)) {
const named = story.team.filter(u => u.name && u.name.trim()).filter(u => {
const before = (prev.team || []).find(x => x.name === u.name);
return !before || (before.email || "") !== (u.email || "") || (before.durchwahl || "") !== (u.durchwahl || "");
});
if (named.length) {
const users = next.users.filter(u => (u.name || "").trim() || (u.email || "").trim());
named.forEach(u => {
const known = users.find(x => (x.name || "").trim() === u.name.trim());
if (known) {
if (u.email) known.email = u.email;
if (u.durchwahl) known.durchwahl = u.durchwahl;
return;
}
users.push({
name: u.name,
email: u.email || "",
durchwahl: u.durchwahl || "",
phone: u.device === "phone" ? DESK_PHONE : (u.device === "app" ? APP_ONLY : ""),
apps: u.apps || "Beide",
abteilungen: u.abteilungen || [],
sonderrufe: ""
});
});
next.users = users;
}
}
// Frage 2: Eingehend
if (story.incoming && changed("incoming")) {
const c = story.incoming.choice;
const person = story.incoming.followUp?.person;
if (c === "reception") {
next.data.erst_annahme = person ? "user:" + person : "free:Empfang (Person wird noch festgelegt)";
next.data.ivr_aktiv = "Nein";
} else if (c === "ivr") {
next.data.erst_annahme = "ivr:main";
next.data.ivr_aktiv = "Ja";
next.data.ivr_begruessung = "Willkommen bei " + (next.data.firma || "uns") + ". Drücken Sie …";
if (Array.isArray(story.incoming.followUp?.options)) {
next.ivr = story.incoming.followUp.options.map((opt, i) => ({
key: String(i + 1),
label: opt,
target: ""
}));
}
} else if (c === "team") {
const members = story.incoming.followUp?.members || [];
next.data.erst_annahme = "free:Team, alle klingeln gleichzeitig" + (members.length ? ": " + members.join(", ") : "");
next.data.ws_strategie = "Alle gleichzeitig";
} else if (c === "directdial") {
next.data.erst_annahme = person ? "user:" + person : "free:Sekretariat";
}
}
// Frage 3: Geschäftszeiten: nur in der Story geänderte Tage übernehmen, vorhandene Zeiten bleiben sonst erhalten
if (story.hours) {
const ref = prev.hours || defaultHours();
Object.keys(story.hours).forEach(k => {
if (!sameDay(story.hours[k], ref[k])) next.hours[k] = story.hours[k];
});
}
// Frage 4: Außerhalb / niemand abnimmt
if (story.afterhours && changed("afterhours")) {
const c = story.afterhours.choice;
if (c === "voicemail") {
next.data.verhalten_ausser = "Ansage + Voicemail";
next.data.vm_wer = "Alle Nutzer";
next.data.vm_email = "Ja, an persönliche E-Mail";
const mail = story.afterhours.followUp?.email;
// Kein eigenes Schema-Feld für die Adresse: sie landet in der Sammel-Voicemail (Klartext und Payload)
if (mail && !(next.data.vm_sammel || "").includes(mail)) {
const entry = "Hauptnummer: Voicemails per E-Mail an " + mail;
next.data.vm_sammel = next.data.vm_sammel ? next.data.vm_sammel + "\n" + entry : entry;
}
} else if (c === "announce") {
next.data.verhalten_ausser = "Ansage + Auflegen";
} else if (c === "forward") {
next.data.verhalten_ausser = "Notfallweiterleitung an Mobilnummer";
if (story.afterhours.followUp?.number) {
next.data.verhalten_ausser_nummer = story.afterhours.followUp.number;
}
} else if (c === "ringlonger") {
// verhalten_ausser hat dafür keine Option: als Ziel "Wenn niemand rangeht" erfassen
next.data.nicht_erreicht_ziel = "free:Weiterklingeln lassen, bis der Anrufer auflegt";
}
}
// Frage 5: Ausgehende CLIP (clip_anzeigen betrifft eingehende Anrufe und wird hier nicht gesetzt)
if (story.outgoing && changed("outgoing")) {
const c = story.outgoing.choice;
if (c === "main") next.data.clip_standard = "Hauptnummer der Firma";
else if (c === "department") next.data.clip_standard = "Abhängig von Abteilung";
else if (c === "individual") next.data.clip_standard = "Persönliche Durchwahl des Mitarbeitenden";
else if (c === "anonymous") next.data.clir = "Ja, generell";
}
// Frage 6: Endgeräte
if (story.devices && (changed("devices") || changed("team"))) {
const c = story.devices.choice;
// Pauschal in alle users propagieren, wo phone leer ist
const phoneFor = (u) => u.phone || "";
next.users = next.users.map(u => {
if (u.phone) return u;
if (c === "app-only") return { ...u, phone: APP_ONLY, apps: u.apps || "Beide" };
if (c === "phones-all") return { ...u, phone: DESK_PHONE, apps: u.apps || "Beide" };
if (c === "mixed") {
const wantsPhone = (story.devices.followUp?.phoneUsers || []).includes(u.name);
return { ...u, phone: wantsPhone ? DESK_PHONE : APP_ONLY, apps: u.apps || "Beide" };
}
return u;
});
}
// Smart-Defaults für alles, was die Story nicht abdeckt
if (window.EASY_MODE) {
const r = window.EASY_MODE.applySmartDefaults(next);
return r.state;
}
return next;
}
function sameDay(a, b) {
return ["open", "from", "to", "pause", "pause_from", "pause_to"].every(f => ((a || {})[f] || "") === ((b || {})[f] || ""));
}
// Wurde in der Story tatsächlich etwas beantwortet? Eine unberührte Default-Story darf den Profi-Bogen nicht verändern.
function isStoryAnswered(story, baseState) {
if (!story) return false;
const d = (baseState && baseState.data) || {};
const intro = story.intro || {};
const def = defaultHours();
return ["incoming", "afterhours", "outgoing", "devices"].some(k => story[k] && story[k].choice)
|| Object.keys(story.skipped || {}).length > 0
|| (story.team || []).some(u => u.name && u.name.trim())
|| ["firma", "ansprechpartner", "kontakt_email"].some(k => intro[k] && intro[k] !== d[k])
|| Object.keys(story.hours || {}).some(k => !sameDay(story.hours[k], def[k]));
}
// ============================================================
// 3) UI-Komponenten
// ============================================================
function ProgressBar({ done, total }) {
const pct = (done / total) * 100;
return (
);
}
function StoryHeader({ idx, total, onJumpProfi, onSave, onHome }) {
// Einzige Fortschrittsangabe: "Vorab" ohne Nummer, danach Frage 1 bis 6 mit dem Thema der Frage
const step = idx >= total ? "Zusammenfassung"
: idx === 0 ? STORY_QUESTIONS[0].topic
: `Frage ${idx} von ${total - 1} · ${STORY_QUESTIONS[idx].topic}`;
return (
Tipp: tragen Sie das Team in Frage 1 strukturiert ein, dann sind die Namen direkt anklickbar.
);
}
return (
{personOptions.map(n => (
))}
);
}
return null;
}
// Frage 0: Intro mit Firma / Ansprechpartner / Kontakt
function IntroQuestion({ value, onChange }) {
const v = value || {};
const set = (k, val) => onChange({ ...v, [k]: val });
return (
set("firma", e.target.value)} autoFocus />
set("ansprechpartner", e.target.value)} />
Damit wir wissen, wen wir bei Rückfragen ansprechen dürfen.
set("kontakt_email", e.target.value)} />
Optional, hier melden wir uns mit dem Ergebnis.
Speichert automatisch im Browser
Sie können jederzeit pausieren und später weitermachen
Sie müssen weder E-Mail noch Durchwahl angeben, wir vergeben sinnvolle Werte (Durchwahlen ab 100, Welcome-Mail über die hinterlegte Adresse).
);
}
// Frage 3: Geschäftszeiten, wir verwenden die bestehende WeekHours-Komponente
function HoursQuestion({ value, onChange }) {
return ;
}
// ============================================================
// 4) Zusammenfassung vor dem Senden
// ============================================================
const summaryLine = (story, users) => {
const lines = [];
if (story.incoming?.choice === "reception") {
const p = story.incoming.followUp?.person;
lines.push(["Ankommende Anrufe", p ? `Empfang (${p})` : "Empfang, Person wird noch festgelegt"]);
} else if (story.incoming?.choice === "ivr") {
const opts = story.incoming.followUp?.options || [];
lines.push(["Ankommende Anrufe", opts.length ? `Sprachmenü mit ${opts.length} Optionen` : "Sprachmenü (Optionen folgen)"]);
} else if (story.incoming?.choice === "team") {
const m = story.incoming.followUp?.members || [];
lines.push(["Ankommende Anrufe", m.length ? `Team gleichzeitig (${m.length} Personen)` : "Team gleichzeitig"]);
} else if (story.incoming?.choice === "directdial") {
lines.push(["Ankommende Anrufe", `Direkt-Durchwahl, Hauptnummer: ${story.incoming.followUp?.person || "Sekretariat"}`]);
}
const hrs = story.hours || {};
const openDays = WEEKDAYS.filter(({k}) => hrs[k]?.open).map(({l}) => l);
if (openDays.length > 0) {
const first = WEEKDAYS.find(({k}) => hrs[k]?.open);
const f = hrs[first.k];
lines.push(["Erreichbar", `${openDays.join(", ")} · ca. ${f.from} bis ${f.to}`]);
}
if (story.afterhours?.choice === "voicemail") {
const m = story.afterhours.followUp?.email;
lines.push(["Pause / Feierabend", `Anrufbeantworter${m ? " → " + m : ""}`]);
} else if (story.afterhours?.choice === "announce") lines.push(["Pause / Feierabend", "Nur Ansage, dann auflegen"]);
else if (story.afterhours?.choice === "forward") lines.push(["Pause / Feierabend", `Weiterleitung an ${story.afterhours.followUp?.number || ""}`]);
else if (story.afterhours?.choice === "ringlonger") lines.push(["Pause / Feierabend", "Klingelt einfach weiter"]);
const out = story.outgoing?.choice;
if (out === "main") lines.push(["Ausgehende Anzeige", "Hauptnummer der Firma"]);
else if (out === "department") lines.push(["Ausgehende Anzeige", "Abteilungs-Nummer"]);
else if (out === "individual") lines.push(["Ausgehende Anzeige", "Persönliche Durchwahl"]);
else if (out === "anonymous") lines.push(["Ausgehende Anzeige", "Anonym"]);
const dev = story.devices?.choice;
if (dev === "app-only") lines.push(["Telefone", "Nur 3CX-App auf Smartphone + PC"]);
else if (dev === "mixed") {
const ph = (story.devices.followUp?.phoneUsers || []).length;
lines.push(["Telefone", `${ph} mit Tischtelefon · App für alle anderen`]);
} else if (dev === "phones-all") lines.push(["Telefone", "Tischtelefone für alle, plus App"]);
else if (dev === "decide") lines.push(["Telefone", "Wir empfehlen beim Vor-Ort-Termin"]);
const team = users.filter(u => u.name).length;
if (team > 0) lines.push(["Mitarbeitende", `${team} Personen`]);
return lines;
};
function SummaryScreen({ story, users, onBack, onSubmit, onPdf, onCall, derivedCount }) {
const lines = summaryLine(story, users);
const firma = story.intro?.firma || "";
const skipped = Object.keys(story.skipped || {});
return (
Geschafft{firma ? ", "+ firma : ""}. Wir haben alles, was wir brauchen.
Aus Ihren Antworten haben wir {derivedCount} technische Einstellungen abgeleitet, Rufnummernführung, Anrufbeantworter, Wartemusik, App-Konfiguration, Notrufadresse. Sie müssen davon nichts wissen.
{skipped.length > 0 && (
Bei {skipped.length === 1 ? "einem Punkt" : skipped.length +" Punkten"} entscheiden wir für Sie nach unseren Standardempfehlungen.
)}
Das hat X-sec aus Ihren Antworten gemacht
{lines.map(([k, v], i) => (
{k}
{v}
))}
Wie geht's weiter?
An X-sec schicken
Wir richten Ihre Anlage in 1 bis 2 Werktagen ein und melden uns per E-Mail.
PDF herunterladen
Ausdruck für die Akte oder die Geschäftsleitung.
Mit jemandem sprechen
Unsicher bei einer Antwort? Wir gehen den Bogen mit Ihnen durch.