E-Mail-Compose: Vertragsdokumente anhängen + Kundendaten einfügen
Zwei neue Buttons im Compose-Modal (nur sichtbar bei Vertrag- Kontext): - Vertragsdokumente: listet alle am Vertrag gespeicherten ContractDocuments gruppiert nach documentType. Auswahl → Token-Download via fileUrl → base64 → Anhang. - Kundendaten einfügen: zeigt Sections nur wenn Daten vorhanden (Customer, Lieferadresse, ggf. Rechnungsadresse, Vertrag, Bank, Ausweis). Bei Bank/Ausweis zusätzlich Sub-Checkbox "als PDF anhängen" wenn documentPath vorhanden. Text-Blöcke ans Body- Ende, PDFs in attachments[]. 25-MB-Limit beidseitig geprüft. Helpers in composeAttachmentHelpers.ts: - serverFileToAttachment(path, filename) für Token-URL→Blob→base64 - totalAttachmentBytes mit ~33% base64-Overhead - sprechende Dateinamen via bankCardAttachmentName / identityDocAttachmentName Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,464 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import Modal from '../ui/Modal';
|
||||
import Button from '../ui/Button';
|
||||
import { contractApi, EmailAttachment } from '../../services/api';
|
||||
import { formatDate } from '../../utils/dateFormat';
|
||||
import {
|
||||
bankCardAttachmentName,
|
||||
identityDocAttachmentName,
|
||||
serverFileToAttachment,
|
||||
totalAttachmentBytes,
|
||||
} from './composeAttachmentHelpers';
|
||||
import type { Contract, Address, BankCard, IdentityDocument } from '../../types';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
contractId: number;
|
||||
currentBody: string;
|
||||
currentAttachments: EmailAttachment[];
|
||||
onResult: (newBody: string, addedAttachments: EmailAttachment[]) => void;
|
||||
}
|
||||
|
||||
const MAX_TOTAL_SIZE = 25 * 1024 * 1024;
|
||||
|
||||
type SectionKey =
|
||||
| 'customer'
|
||||
| 'deliveryAddress'
|
||||
| 'billingAddress'
|
||||
| 'contract'
|
||||
| 'iban'
|
||||
| 'identity';
|
||||
|
||||
export default function InsertCustomerDataModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
contractId,
|
||||
currentBody,
|
||||
currentAttachments,
|
||||
onResult,
|
||||
}: Props) {
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['contract', contractId, 'for-insert-data'],
|
||||
queryFn: () => contractApi.getById(contractId),
|
||||
enabled: isOpen,
|
||||
});
|
||||
|
||||
const contract = data?.data;
|
||||
const customer = contract?.customer;
|
||||
const deliveryAddress = contract?.address;
|
||||
// Rechnungsadresse nur eigenständig zeigen, wenn sie sich tatsächlich
|
||||
// von der Lieferadresse unterscheidet – sonst doppelt im Text.
|
||||
const billingAddress = useMemo(() => {
|
||||
if (!contract?.billingAddress) return undefined;
|
||||
if (!deliveryAddress) return contract.billingAddress;
|
||||
return contract.billingAddress.id !== deliveryAddress.id ? contract.billingAddress : undefined;
|
||||
}, [contract?.billingAddress, deliveryAddress]);
|
||||
|
||||
const bankCard = contract?.bankCard;
|
||||
const identityDocument = contract?.identityDocument;
|
||||
|
||||
// Sections die default-an sind: Anrede + Vertragsdaten. Anhang-Checkboxen
|
||||
// bleiben default-aus (User-Intent).
|
||||
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);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
// Bei jedem Öffnen sinnvoll vorbelegen (sonst bleiben "checked" stale
|
||||
// wenn das Modal mal mit anderen Daten wieder aufgeht).
|
||||
useEffect(() => {
|
||||
if (isOpen && contract) {
|
||||
setChecked({
|
||||
customer: !!customer,
|
||||
deliveryAddress: !!deliveryAddress,
|
||||
billingAddress: false, // nur wenn vorhanden, aber default aus
|
||||
contract: true,
|
||||
iban: false,
|
||||
identity: false,
|
||||
});
|
||||
setAttachBankCard(false);
|
||||
setAttachIdentity(false);
|
||||
}
|
||||
}, [isOpen, contract, customer, deliveryAddress]);
|
||||
|
||||
const toggle = (key: SectionKey) => {
|
||||
setChecked((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (busy) return;
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!contract) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const blocks: string[] = [];
|
||||
|
||||
if (checked.customer && customer) {
|
||||
blocks.push(formatCustomerBlock(customer, contract));
|
||||
}
|
||||
if (checked.deliveryAddress && deliveryAddress) {
|
||||
blocks.push(formatAddressBlock('Lieferadresse', deliveryAddress));
|
||||
}
|
||||
if (checked.billingAddress && billingAddress) {
|
||||
blocks.push(formatAddressBlock('Rechnungsadresse', billingAddress));
|
||||
}
|
||||
if (checked.contract) {
|
||||
blocks.push(formatContractBlock(contract));
|
||||
}
|
||||
if (checked.iban && bankCard) {
|
||||
blocks.push(formatBankBlock(bankCard));
|
||||
}
|
||||
if (checked.identity && identityDocument) {
|
||||
blocks.push(formatIdentityBlock(identityDocument));
|
||||
}
|
||||
|
||||
const textToInsert = blocks
|
||||
.filter((b) => b.trim().length > 0)
|
||||
.join('\n\n');
|
||||
|
||||
// Anhänge sammeln
|
||||
const newAttachments: EmailAttachment[] = [];
|
||||
let runningSize = totalAttachmentBytes(currentAttachments);
|
||||
|
||||
const tryAttach = async (
|
||||
documentPath: string | undefined,
|
||||
filename: string,
|
||||
): Promise<boolean> => {
|
||||
if (!documentPath) return false;
|
||||
try {
|
||||
const att = await serverFileToAttachment(documentPath, filename);
|
||||
const approxBytes = Math.ceil(att.content.length * 0.75);
|
||||
if (runningSize + approxBytes > MAX_TOTAL_SIZE) {
|
||||
toast.error(`"${filename}" gesprengt das 25-MB-Anhang-Limit.`);
|
||||
return false;
|
||||
}
|
||||
newAttachments.push(att);
|
||||
runningSize += approxBytes;
|
||||
return true;
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message || `Fehler beim Anhängen von "${filename}"`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (attachBankCard && bankCard?.documentPath) {
|
||||
await tryAttach(
|
||||
bankCard.documentPath,
|
||||
bankCardAttachmentName(bankCard.iban),
|
||||
);
|
||||
}
|
||||
if (attachIdentity && identityDocument?.documentPath) {
|
||||
await tryAttach(
|
||||
identityDocument.documentPath,
|
||||
identityDocAttachmentName(
|
||||
identityDocument.type,
|
||||
identityDocument.documentNumber,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const separator = currentBody && !currentBody.endsWith('\n') ? '\n\n' : '';
|
||||
const newBody = textToInsert
|
||||
? currentBody + separator + textToInsert
|
||||
: currentBody;
|
||||
|
||||
onResult(newBody, newAttachments);
|
||||
onClose();
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const nothingSelected =
|
||||
!checked.customer &&
|
||||
!checked.deliveryAddress &&
|
||||
!checked.billingAddress &&
|
||||
!checked.contract &&
|
||||
!checked.iban &&
|
||||
!checked.identity &&
|
||||
!attachBankCard &&
|
||||
!attachIdentity;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="Kundendaten einfügen"
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{isLoading || !contract ? (
|
||||
<div className="flex items-center justify-center py-8 text-gray-500">
|
||||
<Loader2 className="w-5 h-5 mr-2 animate-spin" />
|
||||
Daten werden geladen…
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{customer && (
|
||||
<SectionRow
|
||||
title="Anrede & Name"
|
||||
checked={checked.customer}
|
||||
onToggle={() => toggle('customer')}
|
||||
preview={previewCustomer(customer, contract)}
|
||||
/>
|
||||
)}
|
||||
{deliveryAddress && (
|
||||
<SectionRow
|
||||
title="Lieferadresse"
|
||||
checked={checked.deliveryAddress}
|
||||
onToggle={() => toggle('deliveryAddress')}
|
||||
preview={previewAddress(deliveryAddress)}
|
||||
/>
|
||||
)}
|
||||
{billingAddress && (
|
||||
<SectionRow
|
||||
title="Rechnungsadresse"
|
||||
checked={checked.billingAddress}
|
||||
onToggle={() => toggle('billingAddress')}
|
||||
preview={previewAddress(billingAddress)}
|
||||
/>
|
||||
)}
|
||||
<SectionRow
|
||||
title="Vertragsdaten"
|
||||
checked={checked.contract}
|
||||
onToggle={() => toggle('contract')}
|
||||
preview={previewContract(contract)}
|
||||
/>
|
||||
{bankCard && (
|
||||
<SectionRow
|
||||
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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{identityDocument && (
|
||||
<SectionRow
|
||||
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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Falls weder Customer noch Address etc. da sind */}
|
||||
{!customer && !deliveryAddress && !bankCard && !identityDocument && (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
Keine weiteren Daten am Kunden hinterlegt.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-center pt-4 border-t border-gray-200">
|
||||
<span className="text-xs text-gray-500">
|
||||
Text wird ans Ende der Nachricht angehängt.
|
||||
</span>
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" onClick={handleClose} disabled={busy}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleConfirm}
|
||||
disabled={busy || isLoading || nothingSelected}
|
||||
>
|
||||
{busy ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Einfügen…
|
||||
</>
|
||||
) : (
|
||||
'Einfügen'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ==================== UI-Helper ====================
|
||||
|
||||
interface SectionRowProps {
|
||||
title: string;
|
||||
checked: boolean;
|
||||
onToggle: () => void;
|
||||
preview: string;
|
||||
extra?: React.ReactNode;
|
||||
}
|
||||
|
||||
function SectionRow({ title, checked, onToggle, preview, extra }: SectionRowProps) {
|
||||
return (
|
||||
<div className="border border-gray-200 rounded-lg p-3">
|
||||
<label className="flex items-start gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={onToggle}
|
||||
className="mt-1 rounded"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-700">{title}</div>
|
||||
<pre className="text-xs text-gray-500 mt-1 whitespace-pre-wrap font-sans">
|
||||
{preview}
|
||||
</pre>
|
||||
</div>
|
||||
</label>
|
||||
{extra}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ==================== Text-Block-Formatierung ====================
|
||||
|
||||
function fullName(
|
||||
customer: { salutation?: string; firstName: string; lastName: string; companyName?: string },
|
||||
contractType: string,
|
||||
): string {
|
||||
if (contractType === 'BUSINESS' && customer.companyName) {
|
||||
return customer.companyName;
|
||||
}
|
||||
const parts: string[] = [];
|
||||
if (customer.salutation) parts.push(customer.salutation);
|
||||
parts.push(customer.firstName);
|
||||
parts.push(customer.lastName);
|
||||
return parts.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
function formatCustomerBlock(customer: NonNullable<Contract['customer']>, contract: Contract): string {
|
||||
const lines: string[] = ['Kundendaten:'];
|
||||
lines.push(fullName(customer, contract.type));
|
||||
if (customer.customerNumber) lines.push(`Kundennummer: ${customer.customerNumber}`);
|
||||
if (customer.birthDate) lines.push(`Geburtsdatum: ${formatDate(customer.birthDate)}`);
|
||||
if (customer.email) lines.push(`E-Mail: ${customer.email}`);
|
||||
if (customer.phone) lines.push(`Telefon: ${customer.phone}`);
|
||||
if (customer.mobile) lines.push(`Mobil: ${customer.mobile}`);
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
function previewCustomer(customer: NonNullable<Contract['customer']>, contract: Contract): string {
|
||||
return [
|
||||
fullName(customer, contract.type),
|
||||
customer.customerNumber ? `Kundennummer: ${customer.customerNumber}` : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' · ');
|
||||
}
|
||||
|
||||
function formatAddressBlock(label: string, addr: Address): string {
|
||||
const lines: string[] = [`${label}:`];
|
||||
lines.push(`${addr.street} ${addr.houseNumber}`);
|
||||
lines.push(`${addr.postalCode} ${addr.city}`);
|
||||
if (addr.country && addr.country.toLowerCase() !== 'deutschland' && addr.country !== 'DE') {
|
||||
lines.push(addr.country);
|
||||
}
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
function previewAddress(addr: Address): string {
|
||||
return `${addr.street} ${addr.houseNumber}, ${addr.postalCode} ${addr.city}`;
|
||||
}
|
||||
|
||||
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}`);
|
||||
if (c.contractNumberAtProvider) lines.push(`Vertragsnummer beim Anbieter: ${c.contractNumberAtProvider}`);
|
||||
if (c.orderNumberAtSalesPlatform) lines.push(`Auftragsnummer Vertriebsplattform: ${c.orderNumberAtSalesPlatform}`);
|
||||
if (c.customerNumberAtSalesPlatform) lines.push(`Kundennummer Vertriebsplattform: ${c.customerNumberAtSalesPlatform}`);
|
||||
if (c.contractNumberAtSalesPlatform) lines.push(`Vertragsnummer Vertriebsplattform: ${c.contractNumberAtSalesPlatform}`);
|
||||
if (c.startDate) lines.push(`Vertragsbeginn: ${formatDate(c.startDate)}`);
|
||||
if (c.endDate) lines.push(`Vertragsende: ${formatDate(c.endDate)}`);
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
function previewContract(c: Contract): string {
|
||||
const parts: string[] = [c.contractNumber];
|
||||
if (c.provider?.name) parts.push(c.provider.name);
|
||||
if (c.tariff?.name) parts.push(c.tariff.name);
|
||||
return parts.join(' · ');
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
function previewBank(b: BankCard): string {
|
||||
return `IBAN: ${b.iban}${b.bankName ? ` · ${b.bankName}` : ''}`;
|
||||
}
|
||||
|
||||
function identityTypeLabel(type: IdentityDocument['type']): string {
|
||||
switch (type) {
|
||||
case 'PASSPORT': return 'Reisepass';
|
||||
case 'DRIVERS_LICENSE': return 'Führerschein';
|
||||
case 'OTHER': return 'Ausweisdokument';
|
||||
case 'ID_CARD':
|
||||
default: return 'Personalausweis';
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
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(' · ');
|
||||
}
|
||||
Reference in New Issue
Block a user