Stressfrei-Adressen: Zusatz-Weiterleitungen auch beim Anlegen
Der "Weitere Weiterleitungen"-Button war bisher nur im Bearbeiten- Modus sichtbar (provider-vorhanden + ID nötig). Jetzt erscheint er auch im Anlegen-Modus, sobald "Beim E-Mail-Provider anlegen" angehakt ist. - Sub-Modal generalisiert: value/onChange-controlled. Mit email-Prop → API-Persist pro Änderung (Edit-Modus). Ohne email-Prop → reiner lokaler State (Create-Modus). - Haupt-Modal trackt additionalForwards als eigenen State und ruft nach erfolgreicher createEmail einmalig updateAdditionalForwards mit der vollen Liste auf – ein zweiter Provider-Sync mit set: setzt die finale Liste. - Counter-Badge am Button zeigt die Anzahl bereits eingegebener Adressen.
This commit is contained in:
@@ -97,6 +97,16 @@ isolierte Instanz (keine Multi-Tenancy im Code), Provisioning + Abrechnung
|
||||
|
||||
## ✅ Erledigt
|
||||
|
||||
- [x] **🆕 Stressfrei-Adressen: Zusatz-Weiterleitungen auch beim Anlegen**
|
||||
- Im „Adresse hinzufügen"-Modal erscheint der „Weitere
|
||||
Weiterleitungen"-Button jetzt auch, sobald „Beim E-Mail-Provider
|
||||
anlegen" angehakt ist. Liste wird lokal gepflegt, Provider-Sync
|
||||
läuft direkt nach `createEmail` mit der vollen Liste.
|
||||
- Sub-Modal generalisiert: `value`/`onChange`-Pattern (controlled).
|
||||
Mit `email`-Prop → API-Persist pro Änderung (Edit). Ohne `email`
|
||||
→ lokaler State (Create). Counter-Badge am Button zeigt die
|
||||
Anzahl Adressen.
|
||||
|
||||
- [x] **🆕 Stressfrei-Wechseln-Adressen: zusätzliche Weiterleitungsziele**
|
||||
- Neues Feld `StressfreiEmail.additionalForwardingEmails` (Text/
|
||||
JSON-Array), Migration `20260608100000_stressfrei_email_additional_forwards`
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { pushHistory, popHistory } from '../../utils/navigation';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
@@ -3745,6 +3745,7 @@ function StressfreiEmailModal({
|
||||
const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
|
||||
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
||||
const [showForwardsModal, setShowForwardsModal] = useState(false);
|
||||
const [additionalForwards, setAdditionalForwards] = useState<string[]>([]);
|
||||
const queryClient = useQueryClient();
|
||||
const isEditing = !!email;
|
||||
|
||||
@@ -3883,6 +3884,15 @@ function StressfreiEmailModal({
|
||||
setNotes(email.notes || '');
|
||||
setProviderStatus('idle');
|
||||
setMailboxEnabled(email.hasMailbox || false);
|
||||
// Aktuelle Zusatz-Weiterleitungen aus dem JSON-Feld parsen.
|
||||
let parsed: string[] = [];
|
||||
if (email.additionalForwardingEmails) {
|
||||
try {
|
||||
const x = JSON.parse(email.additionalForwardingEmails);
|
||||
if (Array.isArray(x)) parsed = x.filter((s): s is string => typeof s === 'string');
|
||||
} catch {/* fällt auf [] zurück */}
|
||||
}
|
||||
setAdditionalForwards(parsed);
|
||||
// Status beim Provider prüfen wenn Provider vorhanden
|
||||
if (hasProvider) {
|
||||
checkProviderStatus(emailLocalPart);
|
||||
@@ -3896,6 +3906,7 @@ function StressfreiEmailModal({
|
||||
setCreateMailbox(false);
|
||||
setProviderStatus('idle');
|
||||
setMailboxEnabled(false);
|
||||
setAdditionalForwards([]);
|
||||
}
|
||||
setProvisionError(null);
|
||||
// Zugangsdaten zurücksetzen
|
||||
@@ -3907,12 +3918,25 @@ function StressfreiEmailModal({
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: { email: string; notes?: string; provision?: boolean; createMailbox?: boolean }) => {
|
||||
// Verwendet die neue API-Funktion, die Provisioning und Mailbox-Erstellung unterstützt
|
||||
return stressfreiEmailApi.create(customerId, {
|
||||
const result = await stressfreiEmailApi.create(customerId, {
|
||||
email: data.email,
|
||||
notes: data.notes,
|
||||
provisionAtProvider: data.provision,
|
||||
createMailbox: data.createMailbox,
|
||||
});
|
||||
// Wenn der User zusätzliche Weiterleitungen im Sub-Modal gepflegt
|
||||
// hat: nach der Erstellung gleich am Provider nachziehen. Das
|
||||
// sorgt für einen `set:`-Sync mit der vollen Liste, kein
|
||||
// Edit-Modus-Roundtrip nötig.
|
||||
if (data.provision && additionalForwards.length > 0 && result.data?.id) {
|
||||
try {
|
||||
await stressfreiEmailApi.updateAdditionalForwards(result.data.id, additionalForwards);
|
||||
} catch (e) {
|
||||
console.error('Zusatz-Weiterleitungen konnten nicht gesetzt werden:', e);
|
||||
// Adresse selbst wurde angelegt – nicht hart fehlschlagen.
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['customer', customerId] });
|
||||
@@ -3921,6 +3945,7 @@ function StressfreiEmailModal({
|
||||
setNotes('');
|
||||
setProvisionAtProvider(false);
|
||||
setCreateMailbox(false);
|
||||
setAdditionalForwards([]);
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -4178,7 +4203,8 @@ function StressfreiEmailModal({
|
||||
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<div>
|
||||
{isEditing && email && providerStatus === 'exists' && (
|
||||
{((isEditing && email && providerStatus === 'exists') ||
|
||||
(!isEditing && provisionAtProvider)) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@@ -4188,6 +4214,11 @@ function StressfreiEmailModal({
|
||||
>
|
||||
<Mail className="w-4 h-4 mr-1" />
|
||||
Weitere Weiterleitungen
|
||||
{additionalForwards.length > 0 && (
|
||||
<span className="ml-1 text-xs bg-blue-100 text-blue-700 rounded-full px-1.5">
|
||||
{additionalForwards.length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@@ -4202,60 +4233,59 @@ function StressfreiEmailModal({
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{isEditing && email && (
|
||||
<AdditionalForwardsModal
|
||||
isOpen={showForwardsModal}
|
||||
onClose={() => setShowForwardsModal(false)}
|
||||
email={email}
|
||||
email={email ?? undefined}
|
||||
customerEmail={customerEmail}
|
||||
value={additionalForwards}
|
||||
onChange={setAdditionalForwards}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Untermodal: zusätzliche Weiterleitungs-E-Mails verwalten
|
||||
// Untermodal: zusätzliche Weiterleitungs-E-Mails verwalten.
|
||||
// Edit-Modus: `email` prop gesetzt → jede Änderung wird sofort am
|
||||
// Provider gesynct.
|
||||
// Create-Modus: `email` undefined → reine lokale Verwaltung über
|
||||
// `value`/`onChange`. Wird beim createEmail-Submit mitgegeben.
|
||||
function AdditionalForwardsModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
email,
|
||||
customerEmail,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
email: StressfreiEmail;
|
||||
email?: StressfreiEmail;
|
||||
customerEmail?: string;
|
||||
/** Aktuelle Liste – im Create-Modus controlled, im Edit-Modus initialer Wert. */
|
||||
value: string[];
|
||||
onChange: (next: string[]) => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const initial = useMemo<string[]>(() => {
|
||||
if (!email.additionalForwardingEmails) return [];
|
||||
try {
|
||||
const parsed = JSON.parse(email.additionalForwardingEmails);
|
||||
return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}, [email.additionalForwardingEmails]);
|
||||
|
||||
const [forwards, setForwards] = useState<string[]>(initial);
|
||||
const [newEmail, setNewEmail] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setForwards(initial);
|
||||
setNewEmail('');
|
||||
setError(null);
|
||||
}, [initial, isOpen]);
|
||||
}, [isOpen]);
|
||||
|
||||
const EMAIL_REGEX = /^[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$/;
|
||||
|
||||
const persist = async (next: string[]) => {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
if (email) {
|
||||
// Edit-Modus: sofort am Provider syncen.
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await stressfreiEmailApi.updateAdditionalForwards(email.id, next);
|
||||
setForwards(next);
|
||||
onChange(next);
|
||||
queryClient.invalidateQueries({ queryKey: ['stressfrei-emails', email.customerId] });
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : 'Speichern fehlgeschlagen';
|
||||
@@ -4264,6 +4294,11 @@ function AdditionalForwardsModal({
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
} else {
|
||||
// Create-Modus: nur lokal updaten. Persistierung beim Submit
|
||||
// des Haupt-Modals.
|
||||
onChange(next);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = async (e: React.FormEvent) => {
|
||||
@@ -4278,12 +4313,12 @@ function AdditionalForwardsModal({
|
||||
setError('Die Stamm-E-Mail des Kunden ist bereits Weiterleitungsziel.');
|
||||
return;
|
||||
}
|
||||
if (forwards.some((f) => f.toLowerCase() === candidate)) {
|
||||
if (value.some((f) => f.toLowerCase() === candidate)) {
|
||||
setError('Diese Adresse ist schon in der Liste.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await persist([...forwards, candidate]);
|
||||
await persist([...value, candidate]);
|
||||
setNewEmail('');
|
||||
} catch {
|
||||
/* error wird oben gesetzt */
|
||||
@@ -4292,32 +4327,39 @@ function AdditionalForwardsModal({
|
||||
|
||||
const handleRemove = async (target: string) => {
|
||||
try {
|
||||
await persist(forwards.filter((f) => f !== target));
|
||||
await persist(value.filter((f) => f !== target));
|
||||
} catch {
|
||||
/* error wird oben gesetzt */
|
||||
}
|
||||
};
|
||||
|
||||
const title = email
|
||||
? `Weiterleitungen für ${email.email}`
|
||||
: 'Weitere Weiterleitungen';
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={`Weiterleitungen für ${email.email}`}>
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={title}>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
Posteingänge gehen immer an die Stamm-E-Mail des Kunden
|
||||
{customerEmail && (
|
||||
<> (<span className="font-mono">{customerEmail}</span>)</>
|
||||
)}
|
||||
. Hier kannst du zusätzliche Adressen hinterlegen, die ebenfalls eine Kopie bekommen. Änderungen werden sofort am E-Mail-Provider übernommen.
|
||||
. Hier kannst du zusätzliche Adressen hinterlegen, die ebenfalls eine Kopie bekommen.
|
||||
{email
|
||||
? ' Änderungen werden sofort am E-Mail-Provider übernommen.'
|
||||
: ' Sie werden zusammen mit der Adresse angelegt, sobald du speicherst.'}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Aktuelle zusätzliche Ziele
|
||||
</label>
|
||||
{forwards.length === 0 ? (
|
||||
{value.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 italic">Noch keine zusätzlichen Adressen.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{forwards.map((f) => (
|
||||
{value.map((f) => (
|
||||
<li
|
||||
key={f}
|
||||
className="flex items-center justify-between bg-gray-50 border border-gray-200 rounded px-3 py-2"
|
||||
|
||||
Reference in New Issue
Block a user