Kundendaten-Modal: nur Anbieter-Nummern, keine internen CRM-Nummern

Modal ist für Mails AN den Anbieter gedacht – interne CRM-Nummern interessieren dort niemanden. - formatCustomerBlock: customer.customerNumber (intern) raus, stattdessen contract.customerNumberAtProvider rein. - formatContractBlock: interne contractNumber raus, restliche Anbieter-/Vertriebsplattform-Nummern bleiben. - Previews ziehen ebenfalls auf customerNumberAtProvider / contractNumberAtProvider um, mit Hinweis-Text wenn keine Anbieter-Nummer hinterlegt ist. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Kundendaten-Modal: Bank + Ausweis getrennte Text/PDF-Wahl
2026-06-21 16:10:20 +02:00 · 2026-06-21 16:08:35 +02:00 · 2026-06-21 16:04:54 +02:00
2 changed files with 229 additions and 79 deletions
@@ -420,6 +420,7 @@ export default function ComposeEmailModal({
          isOpen={showInsertDataModal}
          onClose={() => setShowInsertDataModal(false)}
          contractId={contractId}
+          senderEmail={account.email}
          currentBody={body}
          currentAttachments={attachments}
          onResult={(newBody, addedAtt) => {
@@ -18,25 +18,34 @@ interface Props {
  isOpen: boolean;
  onClose: () => void;
  contractId: number;
+  /**
+   * E-Mail-Adresse des Postfachs, von dem die Mail abgeschickt wird.
+   * Wird in der "Anrede & Name"-Section als Alternative zur Stammdaten-
+   * E-Mail angeboten – User-Wunsch 2026-06-21: bei Kundendaten wählen,
+   * ob die Customer-Email oder die Stressfrei-Wechseln-Absender-Adresse
+   * eingefügt wird.
+   */
+  senderEmail: string;
  currentBody: string;
  currentAttachments: EmailAttachment[];
  onResult: (newBody: string, addedAttachments: EmailAttachment[]) => void;
 }

+type EmailChoice = 'master' | 'sender' | 'none';
+
 const MAX_TOTAL_SIZE = 25 * 1024 * 1024;

 type SectionKey =
  | 'customer'
  | 'deliveryAddress'
  | 'billingAddress'
-  | 'contract'
-  | 'iban'
-  | 'identity';
+  | 'contract';

 export default function InsertCustomerDataModal({
  isOpen,
  onClose,
  contractId,
+  senderEmail,
  currentBody,
  currentAttachments,
  onResult,
@@ -61,18 +70,28 @@ export default function InsertCustomerDataModal({
  const bankCard = contract?.bankCard;
  const identityDocument = contract?.identityDocument;

-  // Sections die default-an sind: Anrede + Vertragsdaten. Anhang-Checkboxen
-  // bleiben default-aus (User-Intent).
+  // Sections die default-an sind: Anrede + Vertragsdaten. Anhang-/Text-
+  // Schalter für Bank + Ausweis bleiben default-aus (User-Intent: bewusst
+  // entscheiden, was vertraulich verschickt wird).
  const [checked, setChecked] = useState<Record<SectionKey, boolean>>({
    customer: true,
    deliveryAddress: true,
    billingAddress: false,
    contract: true,
-    iban: false,
-    identity: false,
  });
-  const [attachBankCard, setAttachBankCard] = useState(false);
-  const [attachIdentity, setAttachIdentity] = useState(false);
+  // Bank: zwei unabhängige Schalter. Text fügt nur die letzten 4 IBAN-
+  // Stellen ein (kein vollständiger IBAN-Versand per Mail = Default-Hygiene).
+  const [insertBankText, setInsertBankText] = useState(false);
+  const [attachBankPdf, setAttachBankPdf] = useState(false);
+  // Ausweis: Text-Schalter fügt nur die Ausweisnummer ein, kein Geburtsdatum
+  // / keine Ausstellungsdaten – falls der Empfänger nur die Nummer braucht.
+  const [insertIdentityText, setInsertIdentityText] = useState(false);
+  const [attachIdentityPdf, setAttachIdentityPdf] = useState(false);
+  // Welche E-Mail-Adresse in der Customer-Section steht:
+  // - 'master' = Stammdaten-E-Mail (customer.email)
+  // - 'sender' = Postfach-Adresse, von der die Mail abgeht (Stressfrei)
+  // - 'none'   = E-Mail-Zeile weglassen
+  const [emailChoice, setEmailChoice] = useState<EmailChoice>('master');
  const [busy, setBusy] = useState(false);

  // Bei jedem Öffnen sinnvoll vorbelegen (sonst bleiben "checked" stale
@@ -84,11 +103,13 @@ export default function InsertCustomerDataModal({
        deliveryAddress: !!deliveryAddress,
        billingAddress: false, // nur wenn vorhanden, aber default aus
        contract: true,
-        iban: false,
-        identity: false,
      });
-      setAttachBankCard(false);
-      setAttachIdentity(false);
+      setInsertBankText(false);
+      setAttachBankPdf(false);
+      setInsertIdentityText(false);
+      setAttachIdentityPdf(false);
+      // Default: Stammdaten-E-Mail wenn vorhanden, sonst Absender-Adresse.
+      setEmailChoice(customer?.email ? 'master' : 'sender');
    }
  }, [isOpen, contract, customer, deliveryAddress]);

@@ -108,7 +129,13 @@ export default function InsertCustomerDataModal({
      const blocks: string[] = [];

      if (checked.customer && customer) {
-        blocks.push(formatCustomerBlock(customer, contract));
+        const chosenEmail =
+          emailChoice === 'master'
+            ? customer.email || ''
+            : emailChoice === 'sender'
+              ? senderEmail
+              : '';
+        blocks.push(formatCustomerBlock(customer, contract, chosenEmail));
      }
      if (checked.deliveryAddress && deliveryAddress) {
        blocks.push(formatAddressBlock('Lieferadresse', deliveryAddress));
@@ -119,10 +146,10 @@ export default function InsertCustomerDataModal({
      if (checked.contract) {
        blocks.push(formatContractBlock(contract));
      }
-      if (checked.iban && bankCard) {
+      if (insertBankText && bankCard) {
        blocks.push(formatBankBlock(bankCard));
      }
-      if (checked.identity && identityDocument) {
+      if (insertIdentityText && identityDocument) {
        blocks.push(formatIdentityBlock(identityDocument));
      }

@@ -155,13 +182,13 @@ export default function InsertCustomerDataModal({
        }
      };

-      if (attachBankCard && bankCard?.documentPath) {
+      if (attachBankPdf && bankCard?.documentPath) {
        await tryAttach(
          bankCard.documentPath,
          bankCardAttachmentName(bankCard.iban),
        );
      }
-      if (attachIdentity && identityDocument?.documentPath) {
+      if (attachIdentityPdf && identityDocument?.documentPath) {
        await tryAttach(
          identityDocument.documentPath,
          identityDocAttachmentName(
@@ -188,10 +215,10 @@ export default function InsertCustomerDataModal({
    !checked.deliveryAddress &&
    !checked.billingAddress &&
    !checked.contract &&
-    !checked.iban &&
-    !checked.identity &&
-    !attachBankCard &&
-    !attachIdentity;
+    !insertBankText &&
+    !attachBankPdf &&
+    !insertIdentityText &&
+    !attachIdentityPdf;

  return (
    <Modal
@@ -214,6 +241,56 @@ export default function InsertCustomerDataModal({
                checked={checked.customer}
                onToggle={() => toggle('customer')}
                preview={previewCustomer(customer, contract)}
+                extra={
+                  checked.customer && (
+                    <div className="mt-2 ml-6 space-y-1">
+                      <div className="text-xs font-medium text-gray-600">
+                        E-Mail im Text:
+                      </div>
+                      <label className="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="emailChoice"
+                          checked={emailChoice === 'master'}
+                          onChange={() => setEmailChoice('master')}
+                          disabled={!customer.email}
+                          className="text-blue-600"
+                        />
+                        <span>
+                          Stammdaten-E-Mail
+                          {customer.email ? (
+                            <span className="text-gray-400"> ({customer.email})</span>
+                          ) : (
+                            <span className="text-gray-400"> (nicht hinterlegt)</span>
+                          )}
+                        </span>
+                      </label>
+                      <label className="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="emailChoice"
+                          checked={emailChoice === 'sender'}
+                          onChange={() => setEmailChoice('sender')}
+                          className="text-blue-600"
+                        />
+                        <span>
+                          Absender-Adresse
+                          <span className="text-gray-400"> ({senderEmail})</span>
+                        </span>
+                      </label>
+                      <label className="flex items-center gap-2 text-xs text-gray-700 cursor-pointer">
+                        <input
+                          type="radio"
+                          name="emailChoice"
+                          checked={emailChoice === 'none'}
+                          onChange={() => setEmailChoice('none')}
+                          className="text-blue-600"
+                        />
+                        <span>Keine E-Mail einfügen</span>
+                      </label>
+                    </div>
+                  )
+                }
              />
            )}
            {deliveryAddress && (
@@ -239,47 +316,31 @@ export default function InsertCustomerDataModal({
              preview={previewContract(contract)}
            />
            {bankCard && (
-              <SectionRow
+              <DualChoiceRow
                title="Bankverbindung"
-                checked={checked.iban}
-                onToggle={() => toggle('iban')}
                preview={previewBank(bankCard)}
-                extra={
-                  bankCard.documentPath && (
-                    <label className="flex items-center gap-2 text-xs text-gray-600 mt-1 ml-6 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={attachBankCard}
-                        onChange={(e) => setAttachBankCard(e.target.checked)}
-                        className="rounded"
-                      />
-                      <span>Bankkarte als PDF anhängen</span>
-                    </label>
-                  )
-                }
+                textChecked={insertBankText}
+                onToggleText={() => setInsertBankText((v) => !v)}
+                textLabel="Letzte 4 IBAN-Stellen einfügen"
+                textDisabled={!lastFourIban(bankCard.iban)}
+                pdfChecked={attachBankPdf}
+                onTogglePdf={() => setAttachBankPdf((v) => !v)}
+                pdfLabel="Bankkarte als PDF anhängen"
+                pdfDisabled={!bankCard.documentPath}
              />
            )}
            {identityDocument && (
-              <SectionRow
+              <DualChoiceRow
                title={identityTypeLabel(identityDocument.type)}
-                checked={checked.identity}
-                onToggle={() => toggle('identity')}
                preview={previewIdentity(identityDocument)}
-                extra={
-                  identityDocument.documentPath && (
-                    <label className="flex items-center gap-2 text-xs text-gray-600 mt-1 ml-6 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={attachIdentity}
-                        onChange={(e) => setAttachIdentity(e.target.checked)}
-                        className="rounded"
-                      />
-                      <span>
-                        {identityTypeLabel(identityDocument.type)} als PDF anhängen
-                      </span>
-                    </label>
-                  )
-                }
+                textChecked={insertIdentityText}
+                onToggleText={() => setInsertIdentityText((v) => !v)}
+                textLabel={`${identityTypeLabel(identityDocument.type)}-Nummer einfügen`}
+                textDisabled={!identityDocument.documentNumber}
+                pdfChecked={attachIdentityPdf}
+                onTogglePdf={() => setAttachIdentityPdf((v) => !v)}
+                pdfLabel={`${identityTypeLabel(identityDocument.type)} als PDF anhängen`}
+                pdfDisabled={!identityDocument.documentPath}
              />
            )}

@@ -330,6 +391,69 @@ interface SectionRowProps {
  extra?: React.ReactNode;
 }

+interface DualChoiceRowProps {
+  title: string;
+  preview: string;
+  textChecked: boolean;
+  onToggleText: () => void;
+  textLabel: string;
+  textDisabled?: boolean;
+  pdfChecked: boolean;
+  onTogglePdf: () => void;
+  pdfLabel: string;
+  pdfDisabled?: boolean;
+}
+
+/**
+ * Sections, die unabhängig Text und PDF anbieten (Bank, Ausweis).
+ * Keine primäre Checkbox – beide Schalter wirken einzeln, deshalb
+ * kein "alle-ein/alle-aus" auf Section-Ebene nötig.
+ */
+function DualChoiceRow({
+  title,
+  preview,
+  textChecked,
+  onToggleText,
+  textLabel,
+  textDisabled,
+  pdfChecked,
+  onTogglePdf,
+  pdfLabel,
+  pdfDisabled,
+}: DualChoiceRowProps) {
+  return (
+    <div className="border border-gray-200 rounded-lg p-3">
+      <div className="text-sm font-medium text-gray-700">{title}</div>
+      <div className="text-xs text-gray-500 mt-1">{preview}</div>
+      <div className="mt-2 space-y-1">
+        <label className={`flex items-center gap-2 text-xs cursor-pointer ${textDisabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700'}`}>
+          <input
+            type="checkbox"
+            checked={textChecked}
+            onChange={onToggleText}
+            disabled={textDisabled}
+            className="rounded"
+          />
+          <span>{textLabel}</span>
+        </label>
+        <label className={`flex items-center gap-2 text-xs cursor-pointer ${pdfDisabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700'}`}>
+          <input
+            type="checkbox"
+            checked={pdfChecked}
+            onChange={onTogglePdf}
+            disabled={pdfDisabled}
+            className="rounded"
+          />
+          <span>
+            {pdfLabel}
+            {pdfDisabled && <span className="ml-1">(keine PDF hinterlegt)</span>}
+          </span>
+        </label>
+      </div>
+    </div>
+  );
+}
+
 function SectionRow({ title, checked, onToggle, preview, extra }: SectionRowProps) {
  return (
    <div className="border border-gray-200 rounded-lg p-3">
@@ -368,12 +492,23 @@ function fullName(
  return parts.filter(Boolean).join(' ');
 }

-function formatCustomerBlock(customer: NonNullable<Contract['customer']>, contract: Contract): string {
+// User-Wunsch 2026-06-21: das Modal ist für Mails AN den Anbieter gedacht.
+// Die interne CRM-Kundennummer / -Vertragsnummer interessiert dort
+// niemanden – relevant ist nur, was der Anbieter selbst vergeben hat
+// (`customerNumberAtProvider`, `contractNumberAtProvider`). Wir blenden
+// die internen Nummern komplett aus.
+function formatCustomerBlock(
+  customer: NonNullable<Contract['customer']>,
+  contract: Contract,
+  email: string,
+): string {
  const lines: string[] = ['Kundendaten:'];
  lines.push(fullName(customer, contract.type));
-  if (customer.customerNumber) lines.push(`Kundennummer: ${customer.customerNumber}`);
+  if (contract.customerNumberAtProvider) {
+    lines.push(`Kundennummer beim Anbieter: ${contract.customerNumberAtProvider}`);
+  }
  if (customer.birthDate) lines.push(`Geburtsdatum: ${formatDate(customer.birthDate)}`);
-  if (customer.email) lines.push(`E-Mail: ${customer.email}`);
+  if (email) lines.push(`E-Mail: ${email}`);
  if (customer.phone) lines.push(`Telefon: ${customer.phone}`);
  if (customer.mobile) lines.push(`Mobil: ${customer.mobile}`);
  return lines.join('\n');
@@ -382,7 +517,9 @@ function formatCustomerBlock(customer: NonNullable<Contract['customer']>, contra
 function previewCustomer(customer: NonNullable<Contract['customer']>, contract: Contract): string {
  return [
    fullName(customer, contract.type),
-    customer.customerNumber ? `Kundennummer: ${customer.customerNumber}` : '',
+    contract.customerNumberAtProvider
+      ? `Anbieter-Kdnr.: ${contract.customerNumberAtProvider}`
+      : '',
  ]
    .filter(Boolean)
    .join(' · ');
@@ -402,9 +539,12 @@ function previewAddress(addr: Address): string {
  return `${addr.street} ${addr.houseNumber}, ${addr.postalCode} ${addr.city}`;
 }

+// Interne `contractNumber` raus (User-Wunsch 2026-06-21): für eine Mail
+// an den Provider zählt nur die Vertragsnummer, die der Provider selbst
+// vergeben hat. Vertriebsplattform-Nummern bleiben drin – die nutzt der
+// CRM-Mitarbeiter teilweise auch für die Plattform-Korrespondenz.
 function formatContractBlock(c: Contract): string {
  const lines: string[] = ['Vertragsdaten:'];
-  lines.push(`Vertragsnummer: ${c.contractNumber}`);
  if (c.provider?.name) lines.push(`Anbieter: ${c.provider.name}`);
  if (c.tariff?.name) lines.push(`Tarif: ${c.tariff.name}`);
  if (c.customerNumberAtProvider) lines.push(`Kundennummer beim Anbieter: ${c.customerNumberAtProvider}`);
@@ -418,23 +558,36 @@ function formatContractBlock(c: Contract): string {
 }

 function previewContract(c: Contract): string {
-  const parts: string[] = [c.contractNumber];
+  const parts: string[] = [];
+  if (c.contractNumberAtProvider) {
+    parts.push(`Anbieter-Vtr.: ${c.contractNumberAtProvider}`);
+  } else if (c.provider?.name) {
+    parts.push('(keine Anbieter-Vertragsnummer hinterlegt)');
+  }
  if (c.provider?.name) parts.push(c.provider.name);
  if (c.tariff?.name) parts.push(c.tariff.name);
  return parts.join(' · ');
 }

+// User-Wunsch 2026-06-21: nur die letzten 4 IBAN-Stellen einfügen, nicht
+// die komplette IBAN/BIC/Bank-Liste. Vollständige Kontonummern per Mail
+// versenden ist sowieso heikel – der Empfänger kann sich mit den letzten
+// 4 Stellen für Identifikationszwecke ausweisen, ohne dass die ganze
+// IBAN im Mail-Verlauf hängenbleibt.
+function lastFourIban(iban: string | undefined | null): string {
+  if (!iban) return '';
+  return iban.replace(/\s+/g, '').slice(-4);
+}
+
 function formatBankBlock(b: BankCard): string {
-  const lines: string[] = ['Bankverbindung:'];
-  if (b.accountHolder) lines.push(`Kontoinhaber: ${b.accountHolder}`);
-  lines.push(`IBAN: ${b.iban}`);
-  if (b.bic) lines.push(`BIC: ${b.bic}`);
-  if (b.bankName) lines.push(`Bank: ${b.bankName}`);
-  return lines.join('\n');
+  const last4 = lastFourIban(b.iban);
+  if (!last4) return '';
+  return `Bankverbindung:\nIBAN endet auf: ${last4}`;
 }

 function previewBank(b: BankCard): string {
-  return `IBAN: ${b.iban}${b.bankName ? ` · ${b.bankName}` : ''}`;
+  const last4 = lastFourIban(b.iban);
+  return last4 ? `IBAN …${last4}` : 'IBAN nicht hinterlegt';
 }

 function identityTypeLabel(type: IdentityDocument['type']): string {
@@ -447,18 +600,14 @@ function identityTypeLabel(type: IdentityDocument['type']): string {
  }
 }

+// User-Wunsch 2026-06-21: nur die Ausweisnummer einfügen, keine
+// Behörde / Daten – wenn der Empfänger mehr Details braucht, soll er
+// die beigefügte PDF benutzen.
 function formatIdentityBlock(d: IdentityDocument): string {
-  const lines: string[] = [`${identityTypeLabel(d.type)}:`];
-  if (d.documentNumber) lines.push(`Nummer: ${d.documentNumber}`);
-  if (d.issuingAuthority) lines.push(`Ausstellende Behörde: ${d.issuingAuthority}`);
-  if (d.issueDate) lines.push(`Ausstellungsdatum: ${formatDate(d.issueDate)}`);
-  if (d.expiryDate) lines.push(`Gültig bis: ${formatDate(d.expiryDate)}`);
-  return lines.join('\n');
+  if (!d.documentNumber) return '';
+  return `${identityTypeLabel(d.type)}-Nummer: ${d.documentNumber}`;
 }

 function previewIdentity(d: IdentityDocument): string {
-  const parts: string[] = [];
-  if (d.documentNumber) parts.push(`Nr. ${d.documentNumber}`);
-  if (d.expiryDate) parts.push(`gültig bis ${formatDate(d.expiryDate)}`);
-  return parts.join(' · ');
+  return d.documentNumber ? `Nr. ${d.documentNumber}` : 'Keine Nummer hinterlegt';
 }