@voyant-travel/legal-react 0.119.2

package/dist/components/contract-dialog.js

@@ -0,0 +1,345 @@
+// agent-quality: file-size exception -- owner: legal-react; #1730 extracted dialog schema/field helpers, while the remaining dialog shell still coordinates template, series, and variable form state.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { DateTimePicker } from "@voyant-travel/ui/components/date-time-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { legalContractScopes } from "../i18n/messages.js";
+import { fetchWithValidation, legalContractTemplateVersionRecordSchema, singleEnvelope, useLegalContractMutation, useLegalContractNumberSeries, useLegalContractTemplate, useLegalContractTemplateAuthoring, useLegalContractTemplates, useLegalContractTemplateVersions, useVoyantLegalContext, } from "../index.js";
+import { buildRecordFromPairs, buildVariablesPayload, clearedOptionalValue, contractFormSchema, inferTemplateVariableKeys, LinkedRecordField, languageOptions, mergeUniqueOptions, objectToEntries, parseBooleanFormValue, SearchableSelect, VariableValueField, } from "./contract-dialog-fields.js";
+export { buildRecordFromPairs, buildVariablesPayload, clearedOptionalValue, } from "./contract-dialog-fields.js";
+export function ContractDialog({ open, onOpenChange, contract, onSuccess, renderPersonPicker, renderOrganizationPicker, renderSupplierPicker, renderChannelPicker, }) {
+    const isEditing = !!contract;
+    const messages = useLegalUiMessagesOrDefault();
+    const t = messages.contractDialog;
+    const { baseUrl, fetcher } = useVoyantLegalContext();
+    const { create, update } = useLegalContractMutation();
+    const { variableCatalog } = useLegalContractTemplateAuthoring();
+    const hasLinkedRecordPicker = Boolean(renderPersonPicker || renderOrganizationPicker || renderSupplierPicker || renderChannelPicker);
+    const validationByCode = {
+        titleRequired: t.validation.titleRequired,
+    };
+    const resolveValidation = (code) => (code && validationByCode[code]) || code || "";
+    const [templateSearch, setTemplateSearch] = useState("");
+    const [templateId, setTemplateId] = useState(null);
+    const syncedTemplateVariablesSignatureRef = useRef("");
+    const form = useForm({
+        resolver: zodResolver(contractFormSchema),
+        defaultValues: {
+            scope: "customer",
+            title: "",
+            contractNumber: "",
+            language: "en",
+            templateVersionId: "",
+            seriesId: "",
+            personId: "",
+            organizationId: "",
+            supplierId: "",
+            channelId: "",
+            expiresAt: "",
+            templateVariables: [],
+            additionalVariables: [],
+            metadataEntries: [],
+        },
+    });
+    const templateVariablesFieldArray = useFieldArray({
+        control: form.control,
+        name: "templateVariables",
+    });
+    const additionalVariablesFieldArray = useFieldArray({
+        control: form.control,
+        name: "additionalVariables",
+    });
+    const metadataEntriesFieldArray = useFieldArray({
+        control: form.control,
+        name: "metadataEntries",
+    });
+    const selectedScope = form.watch("scope");
+    const selectedLanguage = form.watch("language") || "en";
+    const selectedTemplateVersionId = form.watch("templateVersionId") || null;
+    const selectedSeriesId = form.watch("seriesId") || null;
+    const selectedPersonId = form.watch("personId") || null;
+    const selectedOrganizationId = form.watch("organizationId") || null;
+    const selectedSupplierId = form.watch("supplierId") || null;
+    const selectedChannelId = form.watch("channelId") || null;
+    const templateListQuery = useLegalContractTemplates({
+        search: templateSearch || undefined,
+        scope: selectedScope,
+        limit: 25,
+        offset: 0,
+        enabled: open,
+    });
+    const selectedTemplateQuery = useLegalContractTemplate(templateId ?? "", {
+        enabled: open && !!templateId,
+    });
+    const templateVersionsQuery = useLegalContractTemplateVersions({
+        templateId: templateId ?? "",
+        enabled: open && !!templateId,
+    });
+    const selectedTemplateVersionQuery = useQuery({
+        queryKey: ["legal", "template-version", selectedTemplateVersionId],
+        enabled: open && !!selectedTemplateVersionId,
+        queryFn: async () => {
+            const { data } = await fetchWithValidation(`/v1/admin/legal/contracts/template-versions/${selectedTemplateVersionId}`, singleEnvelope(legalContractTemplateVersionRecordSchema), { baseUrl, fetcher });
+            return data;
+        },
+    });
+    const numberSeriesQuery = useLegalContractNumberSeries({ enabled: open });
+    useEffect(() => {
+        if (!open) {
+            setTemplateSearch("");
+            setTemplateId(null);
+            syncedTemplateVariablesSignatureRef.current = "";
+            return;
+        }
+        if (contract) {
+            form.reset({
+                scope: contract.scope,
+                title: contract.title,
+                contractNumber: contract.contractNumber ?? "",
+                language: contract.language ?? "en",
+                templateVersionId: contract.templateVersionId ?? "",
+                seriesId: contract.seriesId ?? "",
+                personId: contract.personId ?? "",
+                organizationId: contract.organizationId ?? "",
+                supplierId: contract.supplierId ?? "",
+                channelId: contract.channelId ?? "",
+                expiresAt: contract.expiresAt ?? "",
+                templateVariables: [],
+                additionalVariables: objectToEntries(contract.variables),
+                metadataEntries: objectToEntries(contract.metadata),
+            });
+        }
+        else {
+            form.reset({
+                scope: "customer",
+                title: "",
+                contractNumber: "",
+                language: "en",
+                templateVersionId: "",
+                seriesId: "",
+                personId: "",
+                organizationId: "",
+                supplierId: "",
+                channelId: "",
+                expiresAt: "",
+                templateVariables: [],
+                additionalVariables: [],
+                metadataEntries: [],
+            });
+        }
+    }, [open, contract, form]);
+    useEffect(() => {
+        if (!open)
+            return;
+        if (selectedTemplateVersionQuery.data?.templateId) {
+            setTemplateId((current) => current ?? selectedTemplateVersionQuery.data?.templateId ?? null);
+        }
+    }, [open, selectedTemplateVersionQuery.data]);
+    const templateOptions = useMemo(() => {
+        const listOptions = templateListQuery.data?.data.map((template) => ({
+            value: template.id,
+            label: template.name,
+            description: `${template.slug} - ${template.language} - ${template.scope}`,
+        })) ?? [];
+        const selectedOption = selectedTemplateQuery.data
+            ? [
+                {
+                    value: selectedTemplateQuery.data.id,
+                    label: selectedTemplateQuery.data.name,
+                    description: `${selectedTemplateQuery.data.slug} - ${selectedTemplateQuery.data.language} - ${selectedTemplateQuery.data.scope}`,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listOptions, selectedOption);
+    }, [templateListQuery.data?.data, selectedTemplateQuery.data]);
+    const templateVersionOptions = useMemo(() => {
+        const listedOptions = templateVersionsQuery.data?.map((version) => ({
+            value: version.id,
+            label: formatMessage(t.templateVersionLabelFormat, { version: version.version }),
+            description: version.changelog || t.templateVersionMostRecentDraft,
+        })) ?? [];
+        const selectedOption = selectedTemplateVersionQuery.data
+            ? [
+                {
+                    value: selectedTemplateVersionQuery.data.id,
+                    label: formatMessage(t.templateVersionLabelFormat, {
+                        version: selectedTemplateVersionQuery.data.version,
+                    }),
+                    description: selectedTemplateVersionQuery.data.changelog || t.templateVersionSelectedFallback,
+                },
+            ]
+            : [];
+        return mergeUniqueOptions(listedOptions, selectedOption);
+    }, [
+        selectedTemplateVersionQuery.data,
+        t.templateVersionLabelFormat,
+        t.templateVersionMostRecentDraft,
+        t.templateVersionSelectedFallback,
+        templateVersionsQuery.data,
+    ]);
+    const seriesOptions = useMemo(() => {
+        return (numberSeriesQuery.data?.data
+            .filter((series) => series.scope === selectedScope)
+            .map((series) => ({
+            value: series.id,
+            label: `${series.name} - ${series.prefix}${series.separator || ""}${String((series.currentSequence ?? 0) + 1).padStart(series.padLength, "0")}`,
+            description: `${series.scope} - ${series.active ? t.seriesActive : t.seriesInactive}`,
+        })) ?? []);
+    }, [numberSeriesQuery.data, selectedScope, t.seriesActive, t.seriesInactive]);
+    const flattenedVariableCatalog = useMemo(() => {
+        return variableCatalog.flatMap((group) => group.variables.map((variable) => ({
+            ...variable,
+            groupLabel: group.label,
+        })));
+    }, [variableCatalog]);
+    const selectedTemplateVersion = selectedTemplateVersionQuery.data;
+    const inferredTemplateVariableRows = useMemo(() => {
+        if (!selectedTemplateVersion)
+            return [];
+        const requiredKeys = Array.isArray(selectedTemplateVersion.variableSchema?.required)
+            ? selectedTemplateVersion.variableSchema.required
+            : [];
+        const detectedKeys = inferTemplateVariableKeys(selectedTemplateVersion.body, requiredKeys);
+        return flattenedVariableCatalog
+            .filter((variable) => detectedKeys.has(variable.key))
+            .map((variable) => ({
+            key: variable.key,
+            label: variable.label,
+            type: variable.type,
+            description: variable.description || variable.groupLabel,
+            example: String(variable.example),
+            required: requiredKeys.includes(variable.key),
+            value: "",
+            booleanValue: false,
+            includeBooleanValue: false,
+        }));
+    }, [flattenedVariableCatalog, selectedTemplateVersion]);
+    const templateVariablesSignature = useMemo(() => `${selectedTemplateVersionId ?? "none"}:${inferredTemplateVariableRows.map((row) => row.key).join("|")}`, [inferredTemplateVariableRows, selectedTemplateVersionId]);
+    useEffect(() => {
+        if (!open)
+            return;
+        if (syncedTemplateVariablesSignatureRef.current === templateVariablesSignature)
+            return;
+        const existingTemplateRows = form.getValues("templateVariables");
+        const existingAdditionalRows = form.getValues("additionalVariables");
+        const currentValues = new Map();
+        for (const row of existingTemplateRows) {
+            currentValues.set(row.key, {
+                value: row.value,
+                booleanValue: row.booleanValue,
+                includeBooleanValue: row.includeBooleanValue,
+            });
+        }
+        for (const row of existingAdditionalRows) {
+            const key = row.key?.trim();
+            if (!key)
+                continue;
+            const booleanValue = parseBooleanFormValue(row.value);
+            currentValues.set(key, {
+                value: row.value,
+                booleanValue,
+                includeBooleanValue: booleanValue !== undefined,
+            });
+        }
+        const knownKeys = new Set(inferredTemplateVariableRows.map((row) => row.key));
+        const nextTemplateRows = inferredTemplateVariableRows.map((row) => {
+            const existing = currentValues.get(row.key);
+            return {
+                ...row,
+                value: typeof existing?.value === "string" ? existing.value : "",
+                booleanValue: typeof existing?.booleanValue === "boolean" ? existing.booleanValue : false,
+                includeBooleanValue: row.required || existing?.includeBooleanValue === true,
+            };
+        });
+        const nextAdditionalRows = [
+            ...existingAdditionalRows.filter((row) => {
+                const key = row.key?.trim();
+                return key && !knownKeys.has(key);
+            }),
+            ...existingTemplateRows
+                .filter((row) => !knownKeys.has(row.key))
+                .map((row) => ({
+                key: row.key,
+                value: row.type === "boolean" ? String(row.booleanValue) : row.value,
+            })),
+        ];
+        templateVariablesFieldArray.replace(nextTemplateRows);
+        additionalVariablesFieldArray.replace(nextAdditionalRows.filter((row, index, rows) => rows.findIndex((candidate) => candidate.key === row.key && candidate.value === row.value) === index));
+        syncedTemplateVariablesSignatureRef.current = templateVariablesSignature;
+    }, [
+        additionalVariablesFieldArray,
+        form,
+        inferredTemplateVariableRows,
+        open,
+        templateVariablesSignature,
+        templateVariablesFieldArray,
+    ]);
+    const setLinkedRecordField = (field, value) => form.setValue(field, value ?? "", {
+        shouldDirty: true,
+        shouldValidate: true,
+    });
+    const onSubmit = async (values) => {
+        const variables = buildVariablesPayload(values.templateVariables, values.additionalVariables);
+        const metadata = buildRecordFromPairs(values.metadataEntries);
+        const payload = {
+            scope: values.scope,
+            title: values.title,
+            contractNumber: values.contractNumber?.trim() || null,
+            language: values.language || "en",
+            templateVersionId: clearedOptionalValue(values.templateVersionId, isEditing),
+            seriesId: clearedOptionalValue(values.seriesId, isEditing),
+            personId: clearedOptionalValue(values.personId, isEditing),
+            organizationId: clearedOptionalValue(values.organizationId, isEditing),
+            supplierId: clearedOptionalValue(values.supplierId, isEditing),
+            channelId: clearedOptionalValue(values.channelId, isEditing),
+            expiresAt: clearedOptionalValue(values.expiresAt, isEditing),
+            variables: variables ?? (isEditing ? null : undefined),
+            metadata: metadata ?? (isEditing ? null : undefined),
+        };
+        if (isEditing && contract) {
+            await update.mutateAsync({ id: contract.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    const isSubmitting = form.formState.isSubmitting || create.isPending || update.isPending;
+    const submitError = create.error ?? update.error ?? null;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "xl", className: "h-[calc(100vh-2rem)] max-h-[calc(100vh-2rem)]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? t.titleEdit : t.titleNew }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.setupSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.setupSectionDescription })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.scopeLabel }), _jsxs(Select, { items: legalContractScopes.map((value) => ({
+                                                                value,
+                                                                label: messages.common.contractScopeLabels[value],
+                                                            })), value: selectedScope, onValueChange: (value) => form.setValue("scope", value, {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: legalContractScopes.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.contractScopeLabels[value] }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.languageLabel }), _jsx(SearchableSelect, { value: selectedLanguage, onChange: (value) => form.setValue("language", value ?? "en", {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), options: languageOptions, placeholder: t.languagePlaceholder, searchPlaceholder: t.languageSearchPlaceholder, emptyLabel: t.languageEmpty, loadingLabel: t.loading })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.titleLabel }), _jsx(Input, { ...form.register("title"), placeholder: t.titlePlaceholder }), form.formState.errors.title ? (_jsx("p", { className: "text-xs text-destructive", children: resolveValidation(form.formState.errors.title.message) })) : null] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.contractNumberLabel }), _jsx(Input, { ...form.register("contractNumber"), placeholder: t.contractNumberPlaceholder, maxLength: 100 })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.expiresAtLabel }), _jsx(DateTimePicker, { value: form.watch("expiresAt") || null, onChange: (next) => form.setValue("expiresAt", next ?? "", {
+                                                                shouldValidate: true,
+                                                                shouldDirty: true,
+                                                            }), placeholder: t.expiresAtPlaceholder, className: "w-full" })] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.templateLabel }), _jsx(SearchableSelect, { value: templateId, onChange: (value) => {
+                                                                setTemplateId(value);
+                                                                form.setValue("templateVersionId", "", {
+                                                                    shouldDirty: true,
+                                                                    shouldValidate: true,
+                                                                });
+                                                                syncedTemplateVariablesSignatureRef.current = "";
+                                                            }, options: templateOptions, placeholder: t.templatePlaceholder, searchPlaceholder: t.templateSearchPlaceholder, emptyLabel: t.templateEmpty, loading: templateListQuery.isPending || selectedTemplateQuery.isPending, onSearchChange: setTemplateSearch, loadingLabel: t.loading })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.templateVersionLabel }), _jsx(SearchableSelect, { value: selectedTemplateVersionId, onChange: (value) => {
+                                                                form.setValue("templateVersionId", value ?? "", {
+                                                                    shouldDirty: true,
+                                                                    shouldValidate: true,
+                                                                });
+                                                                syncedTemplateVariablesSignatureRef.current = "";
+                                                            }, options: templateVersionOptions, placeholder: t.templateVersionPlaceholder, searchPlaceholder: t.templateVersionSearchPlaceholder, emptyLabel: templateId ? t.templateVersionEmpty : t.templateVersionPickTemplateFirst, loading: templateVersionsQuery.isPending || selectedTemplateVersionQuery.isPending, disabled: !templateId, loadingLabel: t.loading })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: t.numberSeriesLabel }), _jsx(SearchableSelect, { value: selectedSeriesId, onChange: (value) => form.setValue("seriesId", value ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), options: seriesOptions, placeholder: t.numberSeriesPlaceholder, searchPlaceholder: t.numberSeriesSearchPlaceholder, emptyLabel: t.numberSeriesEmpty, loading: numberSeriesQuery.isPending, loadingLabel: t.loading })] })] }), hasLinkedRecordPicker ? (_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.linkedSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.linkedSectionDescription })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsx(LinkedRecordField, { label: t.personLabel, value: selectedPersonId, scope: selectedScope, onChange: (value) => setLinkedRecordField("personId", value), renderPicker: renderPersonPicker }), _jsx(LinkedRecordField, { label: t.organizationLabel, value: selectedOrganizationId, scope: selectedScope, onChange: (value) => setLinkedRecordField("organizationId", value), renderPicker: renderOrganizationPicker }), _jsx(LinkedRecordField, { label: t.supplierLabel, value: selectedSupplierId, scope: selectedScope, onChange: (value) => setLinkedRecordField("supplierId", value), renderPicker: renderSupplierPicker }), _jsx(LinkedRecordField, { label: t.channelLabel, value: selectedChannelId, scope: selectedScope, onChange: (value) => setLinkedRecordField("channelId", value), renderPicker: renderChannelPicker })] })] })) : null, _jsxs("div", { className: "grid gap-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: t.templateVariablesSectionTitle }), !selectedTemplateVersionId ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: t.templateVariablesNoVersion })) : templateVariablesFieldArray.fields.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: t.templateVariablesNoneDetected })) : (_jsx("div", { className: "grid gap-4", children: templateVariablesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid gap-2 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-sm font-medium", children: [field.label, field.required ? (_jsx("span", { className: "ml-1 text-destructive", children: "*" })) : null] }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: field.key })] }), field.description ? (_jsx("div", { className: "max-w-sm text-right text-xs text-muted-foreground", children: field.description })) : null] }), _jsx(VariableValueField, { row: field, index: index, setValue: form.setValue, watch: form.watch, messages: t })] }, field.id))) })), _jsxs("div", { className: "grid gap-3 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium", children: t.additionalVariablesTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.additionalVariablesDescription })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => additionalVariablesFieldArray.append({ key: "", value: "" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addVariable] })] }), additionalVariablesFieldArray.fields.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: t.additionalVariablesEmpty })) : (_jsx("div", { className: "grid gap-3", children: additionalVariablesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid gap-3 md:grid-cols-[1fr_1fr_auto]", children: [_jsx(Input, { ...form.register(`additionalVariables.${index}.key`), placeholder: t.variableKeyPlaceholder }), _jsx(Input, { ...form.register(`additionalVariables.${index}.value`), placeholder: t.variableValuePlaceholder }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => additionalVariablesFieldArray.remove(index), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, field.id))) }))] })] }), _jsxs("div", { className: "grid gap-3 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: t.metadataSectionTitle }), _jsx("p", { className: "text-sm text-muted-foreground", children: t.metadataSectionDescription })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => metadataEntriesFieldArray.append({ key: "", value: "" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addMetadata] })] }), metadataEntriesFieldArray.fields.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: t.metadataEmpty })) : (_jsx("div", { className: "grid gap-3", children: metadataEntriesFieldArray.fields.map((field, index) => (_jsxs("div", { className: "grid gap-3 md:grid-cols-[1fr_1fr_auto]", children: [_jsx(Input, { ...form.register(`metadataEntries.${index}.key`), placeholder: t.metadataKeyPlaceholder }), _jsx(Input, { ...form.register(`metadataEntries.${index}.value`), placeholder: t.metadataValuePlaceholder }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => metadataEntriesFieldArray.remove(index), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, field.id))) }))] }), submitError ? _jsx("p", { className: "text-xs text-destructive", children: submitError.message }) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? messages.common.saveChanges : t.createAction] })] })] })] }) }));
+}

package/dist/components/contract-send-dialog.d.ts

@@ -0,0 +1,37 @@
+import { type LegalContractRecord } from "../index.js";
+export interface ContractSendDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    contract: LegalContractRecord;
+    /**
+     * Recipient email — typically the linked person's primary email, resolved
+     * by the caller (the operator starter knows how to look it up via CRM).
+     * The dialog uses this as the read-only "To" line; if absent the dialog
+     * shows a warning and disables Send.
+     */
+    defaultRecipientEmail?: string | null;
+    /** Optional override for the prefilled subject. */
+    defaultSubject?: string;
+    /** Optional override for the prefilled message body. */
+    defaultMessage?: string;
+    /**
+     * Optional list of attachment names that will accompany the email. The
+     * dialog renders them as a paperclip-prefixed list so the operator sees
+     * what's bundled (the contract PDF + any extras).
+     */
+    attachments?: ReadonlyArray<{
+        id: string;
+        name: string;
+    }>;
+    onSent?: () => void;
+}
+/**
+ * Send-contract preview dialog. Renders an editable subject + message
+ * over a read-only recipient line, so the operator can tweak the
+ * customer-facing copy before flipping the contract to `sent`. The
+ * actual `POST /:id/send` accepts the subject + message + recipient
+ * overrides and forwards them on the lifecycle event for whichever
+ * notification subscriber wires up email delivery downstream.
+ */
+export declare function ContractSendDialog({ open, onOpenChange, contract, defaultRecipientEmail, defaultSubject, defaultMessage, attachments, onSent, }: ContractSendDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contract-send-dialog.d.ts.map

package/dist/components/contract-send-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract-send-dialog.d.ts","sourceRoot":"","sources":["../../src/components/contract-send-dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,mBAAmB,EAA4B,MAAM,aAAa,CAAA;AAEhF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,mBAAmB,CAAA;IAC7B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACzD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,cAAc,EACd,cAAc,EACd,WAAW,EACX,MAAM,GACP,EAAE,uBAAuB,2CAwIzB"}

package/dist/components/contract-send-dialog.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Textarea, } from "@voyant-travel/ui/components";
+import { Loader2, Mail, Paperclip } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { useLegalContractMutation } from "../index.js";
+/**
+ * Send-contract preview dialog. Renders an editable subject + message
+ * over a read-only recipient line, so the operator can tweak the
+ * customer-facing copy before flipping the contract to `sent`. The
+ * actual `POST /:id/send` accepts the subject + message + recipient
+ * overrides and forwards them on the lifecycle event for whichever
+ * notification subscriber wires up email delivery downstream.
+ */
+export function ContractSendDialog({ open, onOpenChange, contract, defaultRecipientEmail, defaultSubject, defaultMessage, attachments, onSent, }) {
+    const { send } = useLegalContractMutation();
+    const messages = useLegalUiMessagesOrDefault().contractSendDialog;
+    const fallbackSubject = defaultSubject ??
+        messages.fallbackSubject.replace("{number}", contract.contractNumber ?? messages.title);
+    const fallbackMessage = defaultMessage ??
+        [
+            "Hi,",
+            "",
+            `Please find attached the contract${contract.contractNumber ? ` ${contract.contractNumber}` : ""} for your booking.`,
+            "",
+            "Reply to this email if you have any questions before signing.",
+            "",
+            "Thanks,",
+        ].join("\n");
+    const [subject, setSubject] = useState(fallbackSubject);
+    const [message, setMessage] = useState(fallbackMessage);
+    // Reset the form when the dialog re-opens or the underlying contract /
+    // defaults change — guarantees the operator never sees stale copy from
+    // a previous Send attempt on a different contract.
+    useEffect(() => {
+        if (open) {
+            setSubject(fallbackSubject);
+            setMessage(fallbackMessage);
+        }
+    }, [open, fallbackSubject, fallbackMessage]);
+    const canSend = Boolean(defaultRecipientEmail) && !send.isPending;
+    const isAlreadySent = contract.status === "sent" || contract.status === "signed";
+    const handleSend = async () => {
+        await send.mutateAsync({
+            id: contract.id,
+            input: {
+                recipientEmail: defaultRecipientEmail ?? null,
+                subject: subject.trim() || null,
+                message: message.trim() || null,
+            },
+        });
+        onOpenChange(false);
+        onSent?.();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.title }) }), _jsxs(DialogBody, { className: "grid gap-4", children: [!defaultRecipientEmail ? (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: messages.missingRecipient })) : null, isAlreadySent ? (_jsx("div", { role: "status", className: "rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300", children: messages.alreadySentWarning })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.to }), _jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "font-mono", children: defaultRecipientEmail ?? messages.recipientPlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "contract-send-subject", children: messages.fields.subject }), _jsx(Input, { id: "contract-send-subject", value: subject, onChange: (event) => setSubject(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "contract-send-message", children: messages.fields.message }), _jsx(Textarea, { id: "contract-send-message", rows: 8, value: message, onChange: (event) => setMessage(event.target.value) }), _jsx("p", { className: "text-xs text-muted-foreground", children: messages.messageHint })] }), attachments && attachments.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.attachments }), _jsx("ul", { className: "flex flex-col gap-1 rounded-md border bg-muted/40 px-3 py-2 text-xs", children: attachments.map((attachment) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Paperclip, { className: "h-3 w-3 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: attachment.name })] }, attachment.id))) })] })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), disabled: send.isPending, children: messages.actions.cancel }), _jsxs(Button, { type: "button", size: "sm", onClick: handleSend, disabled: !canSend, children: [send.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, messages.actions.send] })] })] }) }));
+}

package/dist/components/contracts-page.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+export interface ContractDialogRenderProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess: () => void;
+}
+export interface ContractPersonSummary {
+    id: string;
+    firstName?: string | null;
+    lastName?: string | null;
+    email?: string | null;
+    phone?: string | null;
+}
+export interface ContractPersonFilterRenderProps {
+    personId: string | null;
+    selectedPerson: ContractPersonSummary | null;
+    onPersonChange: (personId: string | null, person?: ContractPersonSummary | null) => void;
+}
+export interface ContractsPageProps {
+    className?: string;
+    defaultPersonId?: string | null;
+    personId?: string | null;
+    onPersonIdChange?: (personId: string | null) => void;
+    onOpenContract?: (contractId: string) => void;
+    renderContractDialog?: (props: ContractDialogRenderProps) => ReactNode;
+    renderPersonCell?: (personId: string | null, person: ContractPersonSummary | null) => ReactNode;
+    renderPersonFilter?: (props: ContractPersonFilterRenderProps) => ReactNode;
+}
+export declare function ContractsPage({ className, defaultPersonId, personId, onPersonIdChange, onOpenContract, renderContractDialog, renderPersonCell, renderPersonFilter, }?: ContractsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=contracts-page.d.ts.map

package/dist/components/contracts-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contracts-page.d.ts","sourceRoot":"","sources":["../../src/components/contracts-page.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAoBtC,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,cAAc,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC5C,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,qBAAqB,GAAG,IAAI,KAAK,IAAI,CAAA;CACzF;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAA;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,qBAAqB,GAAG,IAAI,KAAK,SAAS,CAAA;IAC/F,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAA;CAC3E;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,GACnB,GAAE,kBAAuB,2CAgSzB"}