@voyant-travel/bookings-react 0.119.3

package/dist/components/traveler-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"traveler-dialog.d.ts","sourceRoot":"","sources":["../../src/components/traveler-dialog.tsx"],"names":[],"mappings":"AAoCA,OAAO,EACL,KAAK,qBAAqB,EAG3B,MAAM,aAAa,CAAA;AAoCpB,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,2CA0brB"}

package/dist/components/traveler-dialog.js

@@ -0,0 +1,256 @@
+// agent-quality: file-size exception -- owner: bookings-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePersonDocumentMutation, usePersonDocuments, usePersonMutation, usePersonTravelSnapshot, } from "@voyant-travel/relationships-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { CountryCombobox } from "@voyant-travel/ui/components/country-combobox";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { PhoneInput } from "@voyant-travel/ui/components/phone-input";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2, Sparkles, Upload } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useRevealTraveler, useTravelerWithTravelDetailsMutation, } from "../index.js";
+const identityDocumentTypes = ["passport", "id_card", "driver_license", "visa", "other"];
+function createTravelerFormSchema(messages) {
+    return z.object({
+        firstName: z.string().min(1, messages.travelerDialog.validation.firstNameRequired),
+        lastName: z.string().min(1, messages.travelerDialog.validation.lastNameRequired),
+        email: z.string().email().optional().or(z.literal("")).nullable(),
+        phone: z.string().optional().nullable(),
+        specialRequests: z.string().optional().nullable(),
+        documentType: z.enum(identityDocumentTypes).default("passport"),
+        documentNumber: z.string().optional().nullable(),
+        documentExpiry: z.string().optional().nullable(),
+        documentIssuingCountry: z.string().optional().nullable(),
+        documentIssuingAuthority: z.string().optional().nullable(),
+        dateOfBirth: z.string().optional().nullable(),
+        dietaryRequirements: z.string().optional().nullable(),
+        accessibilityNeeds: z.string().optional().nullable(),
+    });
+}
+const EMPTY_PII_FORM = {
+    documentType: "passport",
+    documentNumber: "",
+    documentExpiry: "",
+    documentIssuingCountry: "",
+    documentIssuingAuthority: "",
+    dateOfBirth: "",
+    dietaryRequirements: "",
+    accessibilityNeeds: "",
+};
+export function TravelerDialog({ open, onOpenChange, bookingId, traveler, onSuccess, }) {
+    const isEditing = Boolean(traveler);
+    const personId = traveler?.personId ?? null;
+    const messages = useBookingsUiMessagesOrDefault();
+    const travelerFormSchema = createTravelerFormSchema(messages);
+    const travelerMutation = useTravelerWithTravelDetailsMutation(bookingId);
+    const personMutation = usePersonMutation();
+    const documentMutation = usePersonDocumentMutation(personId ?? undefined);
+    const reveal = useRevealTraveler(bookingId, traveler?.id ?? null, {
+        enabled: Boolean(open && isEditing && traveler?.id),
+    });
+    const snapshotQuery = usePersonTravelSnapshot(personId ?? undefined, {
+        enabled: open && Boolean(personId),
+    });
+    const documentsQuery = usePersonDocuments(personId ?? undefined, {
+        enabled: open && Boolean(personId),
+    });
+    const snapshot = snapshotQuery.data?.data ?? null;
+    const revealedTravelDetails = reveal.data?.data.travelDetails ?? null;
+    const form = useForm({
+        resolver: zodResolver(travelerFormSchema),
+        defaultValues: {
+            firstName: "",
+            lastName: "",
+            email: "",
+            phone: "",
+            specialRequests: "",
+            ...EMPTY_PII_FORM,
+        },
+    });
+    const [savedToProfileMessage, setSavedToProfileMessage] = useState(false);
+    const [prefilledNotice, setPrefilledNotice] = useState(false);
+    useEffect(() => {
+        setSavedToProfileMessage(false);
+        setPrefilledNotice(false);
+        if (!open)
+            return;
+        if (traveler) {
+            form.reset({
+                firstName: traveler.firstName,
+                lastName: traveler.lastName,
+                email: traveler.email ?? "",
+                phone: traveler.phone ?? "",
+                specialRequests: traveler.specialRequests ?? "",
+                documentType: revealedTravelDetails?.documentType ?? "passport",
+                documentNumber: revealedTravelDetails?.documentNumber ?? "",
+                documentExpiry: revealedTravelDetails?.documentExpiry ?? "",
+                documentIssuingCountry: revealedTravelDetails?.documentIssuingCountry ?? "",
+                documentIssuingAuthority: revealedTravelDetails?.documentIssuingAuthority ?? "",
+                dateOfBirth: revealedTravelDetails?.dateOfBirth ?? "",
+                dietaryRequirements: revealedTravelDetails?.dietaryRequirements ?? "",
+                accessibilityNeeds: revealedTravelDetails?.accessibilityNeeds ?? "",
+            });
+        }
+        else {
+            form.reset({
+                firstName: "",
+                lastName: "",
+                email: "",
+                phone: "",
+                specialRequests: "",
+                ...EMPTY_PII_FORM,
+            });
+        }
+    }, [form, open, traveler, revealedTravelDetails]);
+    const prefillFromProfile = () => {
+        if (!snapshot)
+            return;
+        form.setValue("documentType", snapshot.documentType ?? "passport");
+        form.setValue("documentNumber", snapshot.documentNumber ?? "");
+        form.setValue("documentExpiry", snapshot.documentExpiry ?? "");
+        form.setValue("documentIssuingCountry", snapshot.documentIssuingCountry ?? "");
+        form.setValue("documentIssuingAuthority", snapshot.documentIssuingAuthority ?? "");
+        form.setValue("dateOfBirth", snapshot.dateOfBirth ?? "");
+        form.setValue("dietaryRequirements", snapshot.dietaryRequirements ?? "");
+        form.setValue("accessibilityNeeds", snapshot.accessibilityNeeds ?? "");
+        setPrefilledNotice(true);
+        setSavedToProfileMessage(false);
+    };
+    const onSubmit = async (values) => {
+        const trimOrNull = (value) => {
+            if (value === null || value === undefined)
+                return null;
+            const trimmed = value.trim();
+            return trimmed === "" ? null : trimmed;
+        };
+        const payload = {
+            firstName: values.firstName,
+            lastName: values.lastName,
+            email: values.email || null,
+            phone: values.phone || null,
+            specialRequests: values.specialRequests || null,
+            isPrimary: traveler?.isPrimary ?? false,
+            participantType: "traveler",
+            documentType: values.documentType,
+            documentNumber: trimOrNull(values.documentNumber),
+            documentExpiry: trimOrNull(values.documentExpiry),
+            documentIssuingCountry: trimOrNull(values.documentIssuingCountry),
+            documentIssuingAuthority: trimOrNull(values.documentIssuingAuthority),
+            dateOfBirth: trimOrNull(values.dateOfBirth),
+            dietaryRequirements: trimOrNull(values.dietaryRequirements),
+            accessibilityNeeds: trimOrNull(values.accessibilityNeeds),
+        };
+        if (isEditing) {
+            await travelerMutation.update.mutateAsync({ travelerId: traveler.id, input: payload });
+        }
+        else {
+            await travelerMutation.create.mutateAsync(payload);
+        }
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    /**
+     * Pushes diverging dietary / accessibility / document values from
+     * the form back to the linked person record. Dietary + accessibility
+     * land on `crm.people` via the profile-pii endpoint. Document
+     * diffs update the existing primary document of the selected type if
+     * there is one, otherwise create a new primary document.
+     */
+    const saveBackToProfile = async () => {
+        if (!personId)
+            return;
+        const values = form.getValues();
+        const trim = (value) => {
+            if (value === null || value === undefined)
+                return null;
+            const trimmed = value.trim();
+            return trimmed === "" ? null : trimmed;
+        };
+        const formDietary = trim(values.dietaryRequirements);
+        const formAccessibility = trim(values.accessibilityNeeds);
+        const formDocumentType = values.documentType ?? "passport";
+        const formDocumentNumber = trim(values.documentNumber);
+        const formDocumentExpiry = trim(values.documentExpiry);
+        const formDocumentCountry = trim(values.documentIssuingCountry);
+        const formDocumentAuthority = trim(values.documentIssuingAuthority);
+        const piiUpdate = {};
+        if (formDietary !== (snapshot?.dietaryRequirements ?? null)) {
+            piiUpdate.dietary = formDietary;
+        }
+        if (formAccessibility !== (snapshot?.accessibilityNeeds ?? null)) {
+            piiUpdate.accessibility = formAccessibility;
+        }
+        if (Object.keys(piiUpdate).length > 0) {
+            await personMutation.updateProfilePii.mutateAsync({ personId, input: piiUpdate });
+        }
+        const documentDiverged = formDocumentType !== (snapshot?.documentType ?? "passport") ||
+            formDocumentNumber !== (snapshot?.documentNumber ?? null) ||
+            formDocumentExpiry !== (snapshot?.documentExpiry ?? null) ||
+            formDocumentCountry !== (snapshot?.documentIssuingCountry ?? null) ||
+            formDocumentAuthority !== (snapshot?.documentIssuingAuthority ?? null);
+        if (documentDiverged) {
+            const documentPayload = {
+                type: formDocumentType,
+                number: formDocumentNumber,
+                issuingCountry: formDocumentCountry,
+                issuingAuthority: formDocumentAuthority,
+                expiryDate: formDocumentExpiry,
+                isPrimary: true,
+            };
+            const primaryDocument = documentsQuery.data?.data.find((row) => row.type === formDocumentType && row.isPrimary) ??
+                null;
+            if (primaryDocument) {
+                await documentMutation.updateFromPlaintext.mutateAsync({
+                    id: primaryDocument.id,
+                    input: documentPayload,
+                });
+            }
+            else {
+                await documentMutation.createFromPlaintext.mutateAsync(documentPayload);
+            }
+        }
+        setSavedToProfileMessage(true);
+        setPrefilledNotice(false);
+    };
+    const isSubmitting = travelerMutation.create.isPending || travelerMutation.update.isPending;
+    const isSavingProfile = personMutation.updateProfilePii.isPending ||
+        documentMutation.updateFromPlaintext.isPending ||
+        documentMutation.createFromPlaintext.isPending;
+    const watched = form.watch();
+    const hasDivergence = Boolean(personId) &&
+        snapshot &&
+        [
+            ["dietaryRequirements", "dietaryRequirements"],
+            ["accessibilityNeeds", "accessibilityNeeds"],
+            ["documentType", "documentType"],
+            ["documentNumber", "documentNumber"],
+            ["documentExpiry", "documentExpiry"],
+            ["documentIssuingCountry", "documentIssuingCountry"],
+            ["documentIssuingAuthority", "documentIssuingAuthority"],
+        ].some(([formKey, snapKey]) => {
+            const formValue = watched[formKey] ?? "";
+            const snapValue = snapshot[snapKey] ?? "";
+            return String(formValue ?? "").trim() !== String(snapValue ?? "").trim();
+        });
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
+                            ? messages.travelerDialog.titles.edit
+                            : messages.travelerDialog.titles.create }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.firstName }), _jsx(Input, { ...form.register("firstName"), placeholder: messages.travelerDialog.placeholders.firstName }), form.formState.errors.firstName && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.firstName.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.lastName }), _jsx(Input, { ...form.register("lastName"), placeholder: messages.travelerDialog.placeholders.lastName }), form.formState.errors.lastName && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.lastName.message }))] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.email }), _jsx(Input, { ...form.register("email"), type: "email", placeholder: messages.travelerDialog.placeholders.email })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.phone }), _jsx(PhoneInput, { value: form.watch("phone") ?? "", onChange: (next) => form.setValue("phone", next, { shouldDirty: true }) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.specialRequests }), _jsx(Textarea, { ...form.register("specialRequests"), placeholder: messages.travelerDialog.placeholders.specialRequests })] }), _jsxs("div", { className: "flex flex-col gap-3 border-t pt-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: messages.travelerDialog.fields.travelDetailsHeading }), personId ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: !snapshot || snapshotQuery.isLoading, onClick: prefillFromProfile, children: [_jsx(Sparkles, { className: "mr-2 h-3.5 w-3.5" }), messages.travelerDialog.actions.prefillFromProfile] })) : null] }), prefilledNotice ? (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.travelerDialog.hints.prefilledFromProfile })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.documentType }), _jsxs(Select, { value: form.watch("documentType") ?? "passport", onValueChange: (nextValue) => form.setValue("documentType", nextValue, {
+                                                                shouldDirty: true,
+                                                                shouldValidate: true,
+                                                            }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: identityDocumentTypes.map((type) => (_jsx(SelectItem, { value: type, children: messages.travelerDialog.documentTypeLabels[type] }, type))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.documentNumber }), _jsx(Input, { ...form.register("documentNumber"), placeholder: messages.travelerDialog.placeholders.documentNumber })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.documentExpiry }), _jsx(DatePicker, { value: form.watch("documentExpiry") || null, onChange: (nextValue) => form.setValue("documentExpiry", nextValue ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: messages.travelerDialog.placeholders.documentExpiry })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.documentIssuingCountry }), _jsx(CountryCombobox, { value: form.watch("documentIssuingCountry") || null, onChange: (next) => form.setValue("documentIssuingCountry", next ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.documentIssuingAuthority }), _jsx(Input, { ...form.register("documentIssuingAuthority"), placeholder: messages.travelerDialog.placeholders.documentIssuingAuthority })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.dateOfBirth }), _jsx(DatePicker, { value: form.watch("dateOfBirth") || null, onChange: (nextValue) => form.setValue("dateOfBirth", nextValue ?? "", {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: messages.travelerDialog.placeholders.dateOfBirth })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.dietaryRequirements }), _jsx(Textarea, { ...form.register("dietaryRequirements"), placeholder: messages.travelerDialog.placeholders.dietaryRequirements })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.travelerDialog.fields.accessibilityNeeds }), _jsx(Textarea, { ...form.register("accessibilityNeeds"), placeholder: messages.travelerDialog.placeholders.accessibilityNeeds })] })] }), personId && hasDivergence ? (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: savedToProfileMessage ? messages.travelerDialog.hints.savedToProfile : null }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: isSavingProfile, onClick: saveBackToProfile, children: [isSavingProfile ? (_jsx(Loader2, { className: "mr-2 h-3.5 w-3.5 animate-spin" })) : (_jsx(Upload, { className: "mr-2 h-3.5 w-3.5" })), messages.travelerDialog.actions.saveToProfile] })] })) : null] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing
+                                            ? messages.common.saveChanges
+                                            : messages.travelerDialog.actions.addTraveler] })] })] })] }) }));
+}

package/dist/components/traveler-list.d.ts

@@ -0,0 +1,6 @@
+export interface TravelerListProps {
+    bookingId: string;
+    autoReveal?: boolean;
+}
+export declare function TravelerList({ bookingId, autoReveal }: TravelerListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=traveler-list.d.ts.map

package/dist/components/traveler-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"traveler-list.d.ts","sourceRoot":"","sources":["../../src/components/traveler-list.tsx"],"names":[],"mappings":"AAuCA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,EAAE,iBAAiB,2CA2RhF"}

package/dist/components/traveler-list.js

@@ -0,0 +1,295 @@
+// agent-quality: file-size exception -- owner: bookings-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePerson } from "@voyant-travel/relationships-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyant-travel/ui/components";
+import { DataTable } from "@voyant-travel/ui/components/data-table";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@voyant-travel/ui/components/sheet";
+import { Eye, EyeOff, Loader2, Pencil, Plus, Trash2, Users } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingTravelerDocuments, useRevealTraveler, useTravelerMutation, useTravelers, } from "../index.js";
+import { IconActionButton } from "./icon-action-button.js";
+import { TravelerDialog } from "./traveler-dialog.js";
+export function TravelerList({ bookingId, autoReveal = false }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const [viewingId, setViewingId] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const [revealedIds, setRevealedIds] = React.useState(new Set());
+    const { data } = useTravelers(bookingId);
+    const documentsQuery = useBookingTravelerDocuments(bookingId);
+    const { remove } = useTravelerMutation(bookingId);
+    const messages = useBookingsUiMessagesOrDefault();
+    const travelers = data?.data ?? [];
+    const documentsByTraveler = React.useMemo(() => {
+        const grouped = new Map();
+        for (const document of documentsQuery.data?.data ?? []) {
+            if (!document.travelerId)
+                continue;
+            const bucket = grouped.get(document.travelerId) ?? [];
+            bucket.push(document);
+            grouped.set(document.travelerId, bucket);
+        }
+        return grouped;
+    }, [documentsQuery.data?.data]);
+    // Detect whether the list endpoint already returned unmasked data
+    // (caller has bookings-pii:* scope or similar). If so, don't show
+    // the reveal button — there's nothing to unmask.
+    const allAlreadyRevealed = React.useMemo(() => {
+        if (travelers.length === 0)
+            return true;
+        return travelers.every((t) => !looksRedacted(t));
+    }, [travelers]);
+    const toggleReveal = React.useCallback((travelerId) => {
+        setRevealedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(travelerId))
+                next.delete(travelerId);
+            else
+                next.add(travelerId);
+            return next;
+        });
+    }, []);
+    const isRevealed = React.useCallback((travelerId) => autoReveal || revealedIds.has(travelerId), [autoReveal, revealedIds]);
+    const deleteMessages = messages.travelerList.actions.deleteConfirm;
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    const columns = React.useMemo(() => [
+        {
+            accessorKey: "firstName",
+            header: messages.travelerList.columns.name,
+            cell: ({ row }) => (_jsx(TravelerNameCell, { bookingId: bookingId, traveler: row.original, revealed: isRevealed(row.original.id) })),
+        },
+        {
+            accessorKey: "email",
+            header: messages.travelerList.columns.email,
+            cell: ({ row }) => (_jsx(TravelerContactCell, { bookingId: bookingId, traveler: row.original, revealed: isRevealed(row.original.id), field: "email" })),
+        },
+        {
+            accessorKey: "phone",
+            header: messages.travelerList.columns.phone,
+            cell: ({ row }) => (_jsx(TravelerContactCell, { bookingId: bookingId, traveler: row.original, revealed: isRevealed(row.original.id), field: "phone" })),
+        },
+        {
+            id: "role",
+            header: messages.travelerList.columns.role,
+            cell: ({ row }) => _jsx(RolePills, { traveler: row.original }),
+        },
+        {
+            id: "dobAge",
+            header: messages.travelerList.columns.dobAge,
+            cell: ({ row }) => (_jsx(TravelerDobCell, { bookingId: bookingId, traveler: row.original, revealed: isRevealed(row.original.id) })),
+        },
+        {
+            id: "documents",
+            header: messages.travelerList.columns.documents,
+            cell: ({ row }) => {
+                const documents = documentsByTraveler.get(row.original.id) ?? [];
+                if (documents.length === 0) {
+                    return (_jsx("span", { className: "text-muted-foreground text-xs", children: messages.travelerList.values.documentsUnavailable }));
+                }
+                return (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [documents.slice(0, 2).map((document) => (_jsx(MiniPill, { children: document.type.replaceAll("_", " ") }, document.id))), documents.length > 2 ? _jsxs(MiniPill, { children: ["+", documents.length - 2] }) : null] }));
+            },
+        },
+        {
+            id: "actions",
+            header: "",
+            cell: ({ row }) => {
+                const traveler = row.original;
+                const revealed = isRevealed(traveler.id);
+                const showRevealToggle = !autoReveal && !allAlreadyRevealed;
+                return (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [showRevealToggle ? (_jsx(IconActionButton, { label: revealed
+                                ? messages.travelerList.actions.hideContactDetails
+                                : messages.travelerList.actions.revealContactDetails, icon: revealed ? _jsx(EyeOff, { className: "h-3.5 w-3.5" }) : _jsx(Eye, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                toggleReveal(traveler.id);
+                            } })) : null, _jsx(IconActionButton, { label: messages.travelerList.actions.viewTraveler, icon: _jsx(Eye, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                setViewingId(traveler.id);
+                            } }), _jsx(IconActionButton, { label: messages.travelerList.actions.editTraveler, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                                e.stopPropagation();
+                                setEditing(traveler);
+                                setDialogOpen(true);
+                            } }), _jsx(IconActionButton, { label: messages.travelerList.actions.deleteTraveler, icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: (e) => {
+                                e.stopPropagation();
+                                setDeleteTarget(traveler);
+                            } })] }));
+            },
+        },
+    ], [
+        allAlreadyRevealed,
+        autoReveal,
+        bookingId,
+        documentsByTraveler,
+        isRevealed,
+        messages,
+        toggleReveal,
+    ]);
+    const viewingTraveler = viewingId ? (travelers.find((t) => t.id === viewingId) ?? null) : null;
+    return (_jsxs("div", { "data-slot": "traveler-list", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(Users, { className: "h-4 w-4" }), messages.travelerList.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.travelerList.addTraveler] })] }), _jsx(DataTable, { columns: columns, data: travelers, emptyMessage: messages.travelerList.empty, showPagination: false }), _jsx(TravelerDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                    setDialogOpen(nextOpen);
+                    if (!nextOpen)
+                        setEditing(undefined);
+                }, bookingId: bookingId, traveler: editing, onSuccess: () => setEditing(undefined) }), _jsx(Sheet, { open: Boolean(viewingTraveler), onOpenChange: (next) => {
+                    if (!next)
+                        setViewingId(null);
+                }, children: _jsxs(SheetContent, { side: "right", className: "sm:max-w-2xl", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: messages.travelerList.snapshot.title }), _jsx(SheetDescription, { children: messages.travelerList.snapshot.subtitle })] }), viewingTraveler ? (_jsx(TravelerSnapshotBody, { bookingId: bookingId, traveler: viewingTraveler, documents: documentsByTraveler.get(viewingTraveler.id) ?? [] })) : null] }) }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: deleteMessages.title }), _jsx(AlertDialogDescription, { children: deleteMessages.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: deleteMessages.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: () => void handleConfirmDelete(), children: deleteMessages.confirm })] })] }) })] }));
+}
+function useRevealed(bookingId, traveler, revealed) {
+    const reveal = useRevealTraveler(bookingId, traveler.id, { enabled: revealed });
+    const revealedTraveler = reveal.data?.data;
+    const display = revealed && revealedTraveler ? revealedTraveler : traveler;
+    const travelDetails = revealed && revealedTraveler ? revealedTraveler.travelDetails : null;
+    return {
+        display,
+        travelDetails,
+        loading: revealed && reveal.isLoading,
+        error: revealed ? reveal.error : null,
+    };
+}
+function TravelerNameCell({ bookingId, traveler, revealed, }) {
+    const { display, loading } = useRevealed(bookingId, traveler, revealed);
+    if (loading)
+        return _jsx(RowLoading, {});
+    return _jsx("span", { children: `${display.firstName ?? ""} ${display.lastName ?? ""}`.trim() || "—" });
+}
+function TravelerContactCell({ bookingId, traveler, revealed, field, }) {
+    const { display, loading } = useRevealed(bookingId, traveler, revealed);
+    const person = usePerson(traveler.personId ?? undefined, {
+        enabled: Boolean(traveler.personId),
+    }).data;
+    const messages = useBookingsUiMessagesOrDefault();
+    if (loading)
+        return _jsx(RowLoading, {});
+    const value = display[field] ?? person?.[field] ?? null;
+    if (!value) {
+        return (_jsx("span", { className: "text-muted-foreground", children: field === "email"
+                ? messages.travelerList.values.emailUnavailable
+                : messages.travelerList.values.phoneUnavailable }));
+    }
+    return _jsx(_Fragment, { children: value });
+}
+function TravelerDobCell({ bookingId, traveler, revealed, }) {
+    const { travelDetails, loading } = useRevealed(bookingId, traveler, revealed);
+    const person = usePerson(traveler.personId ?? undefined, {
+        enabled: Boolean(traveler.personId),
+    }).data;
+    const messages = useBookingsUiMessagesOrDefault();
+    if (loading)
+        return _jsx(RowLoading, {});
+    const dob = travelDetails?.dateOfBirth ?? person?.dateOfBirth ?? null;
+    return _jsx(_Fragment, { children: formatDobAge(dob, messages.travelerList.values.fieldUnavailable) });
+}
+function RolePills({ traveler }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const pills = [];
+    if (traveler.isPrimary)
+        pills.push(messages.travelerList.roles.primary);
+    if (traveler.travelerCategory)
+        pills.push(traveler.travelerCategory);
+    if (pills.length === 0)
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" });
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: pills.map((label) => (_jsx(MiniPill, { children: label }, label))) }));
+}
+function TravelerSnapshotBody({ bookingId, traveler, documents, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const labels = messages.travelerList.snapshot;
+    const empty = labels.empty;
+    const { display, travelDetails, loading } = useRevealed(bookingId, traveler, true);
+    const person = usePerson(traveler.personId ?? undefined, {
+        enabled: Boolean(traveler.personId),
+    }).data;
+    const fullName = `${display.firstName ?? ""} ${display.lastName ?? ""}`.trim() || empty;
+    const email = display.email ?? person?.email ?? empty;
+    const phone = display.phone ?? person?.phone ?? empty;
+    const dob = travelDetails?.dateOfBirth ?? person?.dateOfBirth ?? null;
+    const documentTypeLabels = messages.travelerDialog.documentTypeLabels;
+    const documentValue = travelDetails?.documentNumber && travelDetails?.documentType
+        ? `${documentTypeLabels[travelDetails.documentType]} · ${travelDetails.documentNumber}`
+        : empty;
+    const roles = [];
+    if (display.isPrimary)
+        roles.push(messages.travelerList.roles.primary);
+    if (travelDetails?.isLeadTraveler)
+        roles.push(messages.travelerList.roles.lead);
+    if (display.travelerCategory)
+        roles.push(display.travelerCategory);
+    return (_jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: [loading ? (_jsx("div", { className: "py-4", children: _jsx(RowLoading, {}) })) : null, _jsxs(SnapshotSection, { title: labels.sectionContact, children: [_jsx(SnapshotRow, { label: labels.nameLabel, value: fullName }), _jsx(SnapshotRow, { label: labels.emailLabel, value: email }), _jsx(SnapshotRow, { label: labels.phoneLabel, value: phone }), _jsx(SnapshotRow, { label: labels.languageLabel, value: display.preferredLanguage || empty }), _jsx(SnapshotRow, { label: labels.roleLabel, value: roles.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: roles.map((label) => (_jsx(MiniPill, { children: label }, label))) })) : (empty) })] }), _jsxs(SnapshotSection, { title: labels.sectionTravel, children: [_jsx(SnapshotRow, { label: labels.dobLabel, value: formatDobAge(dob, empty) }), _jsx(SnapshotRow, { label: labels.nationalityLabel, value: travelDetails?.nationality || empty }), _jsx(SnapshotRow, { label: labels.documentLabel, value: documentValue }), _jsx(SnapshotRow, { label: labels.documentExpiryLabel, value: formatDateValue(travelDetails?.documentExpiry) ?? empty }), _jsx(SnapshotRow, { label: labels.dietaryLabel, value: travelDetails?.dietaryRequirements || empty, multiline: true }), _jsx(SnapshotRow, { label: labels.accessibilityLabel, value: travelDetails?.accessibilityNeeds || empty, multiline: true }), _jsx(SnapshotRow, { label: labels.specialRequestsLabel, value: display.specialRequests || empty, multiline: true }), _jsx(SnapshotRow, { label: labels.notesLabel, value: display.notes || empty, multiline: true })] }), _jsx(SnapshotSection, { title: labels.sectionDocuments, children: documents.length === 0 ? (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: labels.noDocuments })) : (documents.map((document) => (_jsx(SnapshotRow, { label: formatMessage(messages.travelerList.context.documentLabel, {
+                        type: document.type.replaceAll("_", " "),
+                    }), value: document.fileName }, document.id)))) }), _jsxs(SnapshotSection, { title: labels.sectionMeta, children: [_jsx(SnapshotRow, { label: labels.createdAtLabel, value: formatTimestamp(traveler.createdAt) ?? empty }), _jsx(SnapshotRow, { label: labels.updatedAtLabel, value: formatTimestamp(traveler.updatedAt) ?? empty })] })] }));
+}
+function SnapshotSection({ title, children }) {
+    return (_jsxs("section", { className: "mb-6", children: [_jsx("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: title }), _jsx("dl", { className: "divide-y divide-border rounded-md border", children: children })] }));
+}
+function SnapshotRow({ label, value, multiline, }) {
+    return (_jsxs("div", { className: "grid grid-cols-[10rem_1fr] items-baseline gap-3 px-3 py-2 text-sm", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: label }), _jsx("dd", { className: multiline ? "whitespace-pre-wrap text-sm" : "truncate text-sm", children: value })] }));
+}
+function RowLoading() {
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), _jsx("span", { className: "text-xs", children: messages.travelerList.loading.decrypting })] }));
+}
+function MiniPill({ children }) {
+    return (_jsx("span", { className: "inline-flex h-5 items-center rounded-full border px-2 text-[11px] capitalize text-muted-foreground", children: children }));
+}
+function formatTimestamp(iso) {
+    if (!iso)
+        return null;
+    const d = new Date(iso);
+    if (!Number.isFinite(d.getTime()))
+        return null;
+    try {
+        return d.toLocaleString(undefined, {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    }
+    catch {
+        return d.toISOString();
+    }
+}
+function formatDobAge(value, unavailable) {
+    if (!value)
+        return unavailable;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    const today = new Date();
+    let age = today.getFullYear() - date.getFullYear();
+    const birthdayPassed = today.getMonth() > date.getMonth() ||
+        (today.getMonth() === date.getMonth() && today.getDate() >= date.getDate());
+    if (!birthdayPassed)
+        age -= 1;
+    return `${formatDateValue(value)} · ${age}`;
+}
+function formatDateValue(value) {
+    if (!value)
+        return null;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+}
+/**
+ * Heuristic check for redaction markers used by `redactTravelerIdentity`
+ * on the API. We can't import the redactor from `@voyant-travel/bookings`
+ * at the UI layer (would pull in a server dep), so probe for the
+ * canonical patterns the redactor produces (`***`, `*@`, `***1234`).
+ */
+function looksRedacted(traveler) {
+    const fields = [traveler.firstName, traveler.lastName, traveler.email, traveler.phone];
+    return fields.some((v) => typeof v === "string" && (v === "***" || /\*\*\*/.test(v) || /\*+@/.test(v)));
+}

package/dist/components/travelers-section-controls.d.ts

@@ -0,0 +1,52 @@
+import { type PersonRecord, type PersonRelationshipRecord } from "@voyant-travel/relationships-react";
+import type { RoomGroup, TravelerEntry, TravelerPricingCategoryOption, TravelerRole, TravelersSectionProps } from "./travelers-section.js";
+export declare function TravelerPersonPicker({ personId, labels, pinnedPeople, onSelect, onClear, }: {
+    personId: string | null;
+    labels: NonNullable<TravelersSectionProps["labels"]>;
+    pinnedPeople?: PersonRecord[];
+    onSelect: (person: PersonRecord) => void;
+    onClear: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function createTravelerFromPerson(person: PersonRecord, role: TravelerRole): TravelerEntry;
+/**
+ * Dynamic category-button group. Reads the product's actual
+ * person-typed option_units (Adult/Child/Senior, Adult/Child/Infant,
+ * Adult/Senior, etc) from `roomGroups` and renders one button per
+ * unit in the traveler's currently-assigned option.
+ *
+ * Falls back to the old static Adult/Child/Infant buttons when the
+ * parent hasn't wired `roomGroups` (during the brief window before a
+ * product is selected, or in legacy callers that don't pass the prop).
+ */
+export declare function TravelerCategoryButtons({ traveler, roomGroups, fallbackLabels, onPickUnit, }: {
+    traveler: TravelerEntry;
+    roomGroups?: RoomGroup[];
+    fallbackLabels: {
+        category: string;
+        adult: string;
+        child: string;
+        infant: string;
+    };
+    /**
+     * Called when the operator clicks a category button. `source`
+     * signals whether the click selected a real unit (`"manual"` —
+     * dynamic per-product button) or merely chose a role with no
+     * actual unit pick (`"auto"` — static fallback before units load).
+     * The wrapping handler uses `source` to decide whether to freeze
+     * the current `pricingUnitId` as a manual choice.
+     */
+    onPickUnit: (unitId: string | null, nextRole: TravelerRole, source: "manual" | "auto") => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function TravelerPricingCategorySelect({ traveler, categories, label, onPickCategory, }: {
+    traveler: TravelerEntry;
+    categories: TravelerPricingCategoryOption[];
+    label: string;
+    onPickCategory: (category: TravelerPricingCategoryOption) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function RelatedPersonChip({ personId, kind, addLabel, onAdd, }: {
+    personId: string;
+    kind: PersonRelationshipRecord["kind"];
+    addLabel: string;
+    onAdd: (person: PersonRecord) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=travelers-section-controls.d.ts.map

package/dist/components/travelers-section-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"travelers-section-controls.d.ts","sourceRoot":"","sources":["../../src/components/travelers-section-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAG9B,MAAM,oCAAoC,CAAA;AAkC3C,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,6BAA6B,EAC7B,YAAY,EACZ,qBAAqB,EACtB,MAAM,wBAAwB,CAAA;AAW/B,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,YAAiB,EACjB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,MAAM,EAAE,WAAW,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpD,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;IAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,2CAuIA;AAED,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,GAAG,aAAa,CAwBhG;AAaD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,UAAU,EACV,cAAc,EACd,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,cAAc,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAClF;;;;;;;OAOG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAA;CAC/F,kDAsGA;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,EACR,UAAU,EACV,KAAK,EACL,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,aAAa,CAAA;IACvB,UAAU,EAAE,6BAA6B,EAAE,CAAA;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,CAAC,QAAQ,EAAE,6BAA6B,KAAK,IAAI,CAAA;CAClE,kDA+CA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACtC,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CACtC,kDAwBA"}