@voyantjs/legal-ui 0.77.13 → 0.78.0

package/dist/components/contract-dialog.js

@@ -0,0 +1,569 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { formatMessage } from "@voyantjs/i18n";
+import { fetchWithValidation, legalContractTemplateVersionRecordSchema, singleEnvelope, useLegalContractMutation, useLegalContractNumberSeries, useLegalContractTemplate, useLegalContractTemplateAuthoring, useLegalContractTemplates, useLegalContractTemplateVersions, useVoyantLegalContext, } from "@voyantjs/legal-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, } from "@voyantjs/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { DateTimePicker } from "@voyantjs/ui/components/date-time-picker";
+import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
+import { languages } from "@voyantjs/utils/languages";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useLegalUiMessagesOrDefault } from "../i18n/index.js";
+import { legalContractScopes } from "../i18n/messages.js";
+const contractFormSchema = z.object({
+    scope: z.enum(legalContractScopes),
+    title: z.string().min(1, "titleRequired"),
+    contractNumber: z.string().optional(),
+    language: z.string().min(2).max(10).optional(),
+    templateVersionId: z.string().optional(),
+    seriesId: z.string().optional(),
+    personId: z.string().optional(),
+    organizationId: z.string().optional(),
+    supplierId: z.string().optional(),
+    channelId: z.string().optional(),
+    expiresAt: z.string().optional(),
+    templateVariables: z.array(z.object({
+        key: z.string(),
+        label: z.string(),
+        type: z.string(),
+        description: z.string().optional(),
+        example: z.string().optional(),
+        required: z.boolean().default(false),
+        value: z.string().optional(),
+        booleanValue: z.boolean().default(false),
+        includeBooleanValue: z.boolean().default(false),
+    })),
+    additionalVariables: z.array(z.object({
+        key: z.string().optional(),
+        value: z.string().optional(),
+    })),
+    metadataEntries: z.array(z.object({
+        key: z.string().optional(),
+        value: z.string().optional(),
+    })),
+});
+const PREFERRED_LANGUAGE_ORDER = ["en", "ro", "fr", "de", "es", "it"];
+const languageOptions = Object.entries(languages)
+    .sort(([codeA, nameA], [codeB, nameB]) => {
+    const preferredA = PREFERRED_LANGUAGE_ORDER.indexOf(codeA);
+    const preferredB = PREFERRED_LANGUAGE_ORDER.indexOf(codeB);
+    if (preferredA !== -1 || preferredB !== -1) {
+        if (preferredA === -1)
+            return 1;
+        if (preferredB === -1)
+            return -1;
+        return preferredA - preferredB;
+    }
+    return nameA.localeCompare(nameB);
+})
+    .map(([code, name]) => ({
+    value: code,
+    label: `${name} (${code})`,
+    description: code,
+}));
+function mergeUniqueOptions(...groups) {
+    const map = new Map();
+    for (const group of groups) {
+        for (const option of group ?? []) {
+            map.set(option.value, option);
+        }
+    }
+    return Array.from(map.values());
+}
+function objectToEntries(record) {
+    return Object.entries(record ?? {}).map(([key, value]) => ({
+        key,
+        value: typeof value === "string"
+            ? value
+            : typeof value === "number" || typeof value === "boolean"
+                ? String(value)
+                : JSON.stringify(value),
+    }));
+}
+function parseLooseValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    if (trimmed === "true")
+        return true;
+    if (trimmed === "false")
+        return false;
+    if (/^-?\d+(\.\d+)?$/.test(trimmed))
+        return Number(trimmed);
+    if ((trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+        (trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return trimmed;
+        }
+    }
+    return trimmed;
+}
+export function buildRecordFromPairs(entries) {
+    const record = {};
+    for (const entry of entries) {
+        const key = entry.key?.trim();
+        if (!key)
+            continue;
+        const parsed = parseLooseValue(entry.value ?? "");
+        if (parsed === undefined)
+            continue;
+        record[key] = parsed;
+    }
+    return Object.keys(record).length ? record : undefined;
+}
+export function buildVariablesPayload(rows, additional) {
+    const variables = {};
+    for (const row of rows) {
+        if (row.type === "boolean") {
+            if (row.booleanValue || row.required || row.includeBooleanValue) {
+                variables[row.key] = row.booleanValue;
+            }
+            continue;
+        }
+        const parsed = parseLooseValue(row.value ?? "");
+        if (parsed !== undefined)
+            variables[row.key] = parsed;
+    }
+    for (const entry of additional) {
+        const key = entry.key?.trim();
+        if (!key)
+            continue;
+        const parsed = parseLooseValue(entry.value ?? "");
+        if (parsed !== undefined)
+            variables[key] = parsed;
+    }
+    return Object.keys(variables).length ? variables : undefined;
+}
+export function clearedOptionalValue(value, isEditing) {
+    const trimmed = value?.trim();
+    if (trimmed)
+        return trimmed;
+    return isEditing ? null : undefined;
+}
+function parseBooleanFormValue(value) {
+    const parsed = parseLooseValue(value ?? "");
+    return typeof parsed === "boolean" ? parsed : undefined;
+}
+function inferTemplateVariableKeys(body, requiredKeys) {
+    if (!body)
+        return new Set(requiredKeys);
+    const detected = new Set(requiredKeys);
+    const variablePattern = /\{\{\s*([a-zA-Z0-9_.[\]]+)\s*\}\}/g;
+    for (const match of body.matchAll(variablePattern)) {
+        if (match[1])
+            detected.add(match[1]);
+    }
+    return detected;
+}
+function SearchableSelect({ value, onChange, options, placeholder, searchPlaceholder, emptyLabel, loadingLabel, loading, disabled, onSearchChange, }) {
+    const optionMap = useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
+    const selected = value ? optionMap.get(value) : undefined;
+    const selectedLabel = selected?.label ?? "";
+    const [inputValue, setInputValue] = useState(selectedLabel);
+    useEffect(() => {
+        setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: options.map((option) => option.value), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (id) => optionMap.get(id)?.label ?? "", onInputValueChange: (next) => {
+            setInputValue(next);
+            onSearchChange?.(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const resolved = next ?? null;
+            onChange(resolved);
+            setInputValue(resolved ? (optionMap.get(resolved)?.label ?? "") : "");
+        }, children: [_jsx(ComboboxInput, { placeholder: searchPlaceholder ?? placeholder, showClear: !!value, disabled: disabled }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: loading ? loadingLabel : emptyLabel }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                const option = optionMap.get(id);
+                                if (!option)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: option.value, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: option.label }), option.description ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })) : null] }) }, option.value));
+                            } }) })] })] }));
+}
+function VariableValueField({ row, index, setValue, watch, messages, }) {
+    const valuePath = `templateVariables.${index}.value`;
+    const booleanPath = `templateVariables.${index}.booleanValue`;
+    const includeBooleanPath = `templateVariables.${index}.includeBooleanValue`;
+    if (row.type === "boolean") {
+        return (_jsx("div", { className: "flex min-h-10 items-center rounded-md border border-input px-3 text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { "aria-label": row.label, checked: watch(booleanPath), onCheckedChange: (checked) => {
+                            setValue(booleanPath, checked, {
+                                shouldDirty: true,
+                                shouldValidate: true,
+                            });
+                            setValue(includeBooleanPath, true, {
+                                shouldDirty: true,
+                                shouldValidate: true,
+                            });
+                        } }), _jsx("span", { children: watch(booleanPath) ? messages.booleanYes : messages.booleanNo })] }) }));
+    }
+    if (row.type === "datetime") {
+        return (_jsx(DateTimePicker, { value: watch(valuePath) || null, onChange: (next) => setValue(valuePath, next ?? "", {
+                shouldDirty: true,
+                shouldValidate: true,
+            }), placeholder: row.example || messages.datetimeFallbackPlaceholder, className: "w-full" }));
+    }
+    if (row.type === "date") {
+        return (_jsx(DatePicker, { value: watch(valuePath) || null, onChange: (next) => setValue(valuePath, next ?? "", {
+                shouldDirty: true,
+                shouldValidate: true,
+            }), placeholder: row.example || messages.dateFallbackPlaceholder, className: "w-full" }));
+    }
+    const inputType = row.type === "email"
+        ? "email"
+        : row.type === "url"
+            ? "url"
+            : row.type === "phone"
+                ? "tel"
+                : row.type === "number"
+                    ? "number"
+                    : "text";
+    return (_jsx(Input, { type: inputType, step: row.type === "number" ? "1" : undefined, value: watch(valuePath) || "", onChange: (event) => setValue(valuePath, event.target.value, {
+            shouldDirty: true,
+            shouldValidate: true,
+        }), placeholder: row.example || messages.valueFallbackPlaceholder }));
+}
+function LinkedRecordField({ label, value, scope, onChange, renderPicker, }) {
+    if (!renderPicker)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: label }), renderPicker({
+                value: value ?? undefined,
+                onChange,
+                scope,
+            })] }));
+}
+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/i18n/en.d.ts

@@ -105,6 +105,72 @@ export declare const legalUiEn: {
             send: string;
         };
     };
+    contractDialog: {
+        titleNew: string;
+        titleEdit: string;
+        createAction: string;
+        setupSectionTitle: string;
+        setupSectionDescription: string;
+        linkedSectionTitle: string;
+        linkedSectionDescription: string;
+        templateVariablesSectionTitle: string;
+        templateVariablesNoVersion: string;
+        templateVariablesNoneDetected: string;
+        additionalVariablesTitle: string;
+        additionalVariablesDescription: string;
+        addVariable: string;
+        additionalVariablesEmpty: string;
+        variableKeyPlaceholder: string;
+        variableValuePlaceholder: string;
+        metadataSectionTitle: string;
+        metadataSectionDescription: string;
+        addMetadata: string;
+        metadataEmpty: string;
+        metadataKeyPlaceholder: string;
+        metadataValuePlaceholder: string;
+        titleLabel: string;
+        titlePlaceholder: string;
+        contractNumberLabel: string;
+        contractNumberPlaceholder: string;
+        scopeLabel: string;
+        languageLabel: string;
+        languagePlaceholder: string;
+        languageSearchPlaceholder: string;
+        languageEmpty: string;
+        templateLabel: string;
+        templatePlaceholder: string;
+        templateSearchPlaceholder: string;
+        templateEmpty: string;
+        templateVersionLabel: string;
+        templateVersionPlaceholder: string;
+        templateVersionSearchPlaceholder: string;
+        templateVersionEmpty: string;
+        templateVersionPickTemplateFirst: string;
+        templateVersionMostRecentDraft: string;
+        templateVersionSelectedFallback: string;
+        templateVersionLabelFormat: string;
+        numberSeriesLabel: string;
+        numberSeriesPlaceholder: string;
+        numberSeriesSearchPlaceholder: string;
+        numberSeriesEmpty: string;
+        seriesActive: string;
+        seriesInactive: string;
+        expiresAtLabel: string;
+        expiresAtPlaceholder: string;
+        personLabel: string;
+        organizationLabel: string;
+        supplierLabel: string;
+        channelLabel: string;
+        loading: string;
+        booleanYes: string;
+        booleanNo: string;
+        dateFallbackPlaceholder: string;
+        datetimeFallbackPlaceholder: string;
+        valueFallbackPlaceholder: string;
+        validation: {
+            titleRequired: string;
+        };
+    };
     contractsPage: {
         title: string;
         description: string;

package/dist/i18n/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4dK,CAAA"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgiBK,CAAA"}