import { createContext, useContext, useEffect, useRef, useState, type ReactElement } from "react"; import { flushSync } from "react-dom"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { zodResolver } from "@hookform/resolvers/zod"; import { addDays, format, isValid, parseISO } from "date-fns"; import { ImagePlus, Info, Loader2, Pencil, Plus, Trash2, X } from "lucide-react"; import { useController, useForm, useFormContext, useWatch, type FieldErrors, type FieldPath, } from "react-hook-form"; import { toast } from "sonner"; import { z } from "zod"; import { DateField } from "@/components/app/DateField"; import { DepartureDatesManager } from "@/components/app/DepartureDatesManager"; import { CheckboxField as GenericCheckboxField, DropdownField as GenericDropdownField, MultiDropdownField as GenericMultiDropdownField, RequiredMark, TextAreaField as GenericTextAreaField, TextField as GenericTextField, } from "@/components/app/FormFields"; import { ItineraryManager } from "@/components/app/ItineraryManager"; import { Page } from "@/components/app/Page"; import { PageHeading } from "@/components/app/Primitives"; import { UnsavedChangesGuard } from "@/components/app/UnsavedChangesGuard"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import { useCompanySettings } from "@/features/company-settings/api"; import { useDestinations } from "@/features/destinations/api"; import { useCreateTour, useUpdateTour, type CreateTourPayload, type Tour, } from "@/features/tours/api"; import { useUploadImage } from "@/features/uploads/api"; import { ApiClientError } from "@/lib/api"; import { toWebP } from "@/lib/image"; export const Route = createFileRoute("/tours/new")({ head: () => ({ meta: [ { title: "Create tour | KareVoyage Operations" }, { name: "description", content: "Build a new tour product, section by section." }, ], }), component: NewTourPage, }); const toSlug = (name: string) => name .trim() .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, ""); const linesToArray = (text: string) => text .split("\n") .map((s) => s.trim()) .filter(Boolean); const todayIso = () => format(new Date(), "yyyy-MM-dd"); /** `allowPastStartDate`: when editing a tour whose Start Date has already passed, its unchanged * original value must still pass validation — only a newly *picked* past date should be rejected. * `undefined` (creating a new tour) always requires a future-or-today date. * `mode`: the "at least one departure date when Multiple Departures is on" rule below only makes * sense at create time — in edit mode `departureDates` is deliberately always `[]` here (they're * managed live via DepartureDatesManager instead), so applying that rule to an edit would reject * every save on a tour that already has multiple departures, for a field this form never touches. */ const makeTourFormSchema = (mode: "create" | "edit", allowPastStartDate?: string) => { /** Required for new tours; left optional in edit mode so tours that predate a field becoming * mandatory (null in the database) can still be saved without first being forced to backfill * every such field. */ const requiredOnCreate = () => mode === "create" ? z.string().trim().min(1, "Required") : z.string().trim(); /** Same create-only-required treatment, for a multi-select array rather than free text. */ const requiredDocumentsField = mode === "create" ? z.array(z.string()).min(1, "Select at least one document type") : z.array(z.string()); const shape = z.object({ title: z.string().trim().min(3, "Enter a tour name"), slug: z .string() .trim() .regex(/^[a-z0-9]+(-[a-z0-9]+)*$/, "Lowercase, hyphen-separated"), shortDescription: z.string().trim().min(1, "Required").max(160, "Max 160 characters"), description: z.string().trim().min(10, "Add at least 10 characters"), tourType: z.enum(["group_tour", "fit", "private_tour"]), category: z.string(), badgeLabel: z.string(), displayOrder: z.string(), country: z.string().trim().min(1, "Required"), stateRegion: z.string(), destination: z.string().trim().min(1, "Required"), /** Set by picking a real Destination — `destination` (name) is kept in sync automatically, * not typed by hand, both here and server-side. Required for new tours; optional in edit * mode so tours created before the Destinations module existed (destinationId: null) can * still be saved without being forced to backfill a destination first. */ destinationId: requiredOnCreate(), primaryImageUrl: z.string(), galleryImageUrls: z.array(z.string()), durationNights: z.string().trim().min(1, "Required"), durationDays: z.string().trim().min(1, "Required"), groupSizeMin: z.string().trim().min(1, "Required"), groupSizeMax: z .string() .trim() .min(1, "Required") .refine((v) => Number(v) <= 20, "Maximum group size cannot exceed 20"), bestTimeToVisit: z.string(), ageGroup: requiredOnCreate(), tourCode: z.string(), departureCity: z.string().trim().min(1, "Required"), operatedBy: z.string(), currency: z.string().trim().min(1, "Required"), price: z.string().trim().min(1, "Required"), childPrice: z.string(), singleSupplement: z.string(), discountType: z.string(), discountValue: z.string(), startDate: z .string() .trim() .min(1, "Required") .refine( (v) => v >= todayIso() || v === allowPastStartDate, "Start date cannot be in the past", ), endDate: z.string().trim().min(1, "Required"), hasMultipleDepartures: z.boolean(), departureDates: z.array(z.string()), /** Built inline here — submitted together with the tour, inserted in the same transaction. * Optional: a tour can be published with none and have days added later from its detail page. */ itineraryDays: z.array( z.object({ dayNumber: z.number().int().positive(), title: z.string().trim().min(1, "Required"), activitiesShort: z.string(), }), ), inclusionsText: z.string().trim().min(1, "Add at least one inclusion"), exclusionsText: z.string().trim().min(1, "Add at least one exclusion"), highlightsText: z.string().trim().min(1, "Add at least one highlight"), accommodationType: requiredOnCreate(), mealPlan: requiredOnCreate(), transportType: requiredOnCreate(), physicalRating: z.string(), recommendedFor: z.string(), tags: z.array(z.string()), allowBooking: z.boolean(), requiredDocuments: requiredDocumentsField, featured: z.boolean(), isActive: z.boolean(), publishingState: z.enum(["draft", "review", "published"]), }); if (mode !== "create") return shape; return shape.refine((v) => !v.hasMultipleDepartures || v.departureDates.length > 0, { message: "Add at least one departure date", path: ["departureDates"], }); }; type TourFormValues = z.infer>; // Shared generic field primitives (`@/components/app/FormFields`), specialized to this form's // values once via a TS instantiation expression — every existing ``-style // usage below is unchanged. const TextField = GenericTextField; const TextAreaField = GenericTextAreaField; const DropdownField = GenericDropdownField; const MultiDropdownField = GenericMultiDropdownField; const CheckboxField = GenericCheckboxField; const DEFAULT_VALUES: TourFormValues = { title: "", slug: "", shortDescription: "", description: "", tourType: "group_tour", category: "", badgeLabel: "", displayOrder: "0", country: "", stateRegion: "", destination: "", destinationId: "", primaryImageUrl: "", galleryImageUrls: [], durationNights: "", durationDays: "", groupSizeMin: "1", groupSizeMax: "20", bestTimeToVisit: "", ageGroup: "", tourCode: "", departureCity: "", operatedBy: "", currency: "INR", price: "", childPrice: "", singleSupplement: "", discountType: "", discountValue: "", startDate: "", endDate: "", hasMultipleDepartures: false, departureDates: [], itineraryDays: [], inclusionsText: "", exclusionsText: "", highlightsText: "", accommodationType: "", mealPlan: "", transportType: "", physicalRating: "", recommendedFor: "", tags: [], allowBooking: true, requiredDocuments: [], featured: false, isActive: true, publishingState: "draft", }; /** Maps the read shape (nulls, some numeric fields already stringified by Postgres) back into * the form's all-strings shape for pre-filling Edit. Departure dates and itinerary days are left * empty here on purpose — in edit mode they're managed via their own dedicated tabs on the tour's * detail page (Availability/Itinerary), not resubmitted through this form. */ function tourToFormValues(tour: Tour): TourFormValues { const str = (v: string | null | undefined) => v ?? ""; const num = (v: number | null | undefined) => (v === null || v === undefined ? "" : String(v)); return { title: tour.title, slug: tour.slug, shortDescription: tour.shortDescription, description: tour.description, tourType: tour.tourType, category: str(tour.category), badgeLabel: str(tour.badgeLabel), displayOrder: String(tour.displayOrder), country: tour.country, stateRegion: str(tour.stateRegion), destination: tour.destination, destinationId: str(tour.destinationId), primaryImageUrl: str(tour.primaryImageUrl), galleryImageUrls: tour.galleryImageUrls, durationNights: String(tour.durationNights), durationDays: String(tour.durationDays), groupSizeMin: String(tour.groupSizeMin), groupSizeMax: String(tour.groupSizeMax), bestTimeToVisit: str(tour.bestTimeToVisit), ageGroup: str(tour.ageGroup), tourCode: str(tour.tourCode), departureCity: tour.departureCity, operatedBy: str(tour.operatedBy), currency: tour.currency, price: tour.price, childPrice: str(tour.childPrice), singleSupplement: str(tour.singleSupplement), discountType: str(tour.discountType), discountValue: str(tour.discountValue), startDate: tour.startDate, endDate: tour.endDate, hasMultipleDepartures: tour.hasMultipleDepartures, departureDates: [], itineraryDays: [], inclusionsText: tour.inclusions.join("\n"), exclusionsText: tour.exclusions.join("\n"), highlightsText: tour.highlights.join("\n"), accommodationType: str(tour.accommodationType), mealPlan: str(tour.mealPlan), transportType: str(tour.transportType), physicalRating: num(tour.physicalRating), recommendedFor: str(tour.recommendedFor), tags: tour.tags, allowBooking: tour.allowBooking, requiredDocuments: tour.requiredDocuments, featured: tour.featured, isActive: tour.isActive, publishingState: tour.publishingState, }; } /** Lets deeply-nested tab components (Itinerary, Departure Dates) adapt without prop-drilling * `mode`/`tour` through every intermediate tab wrapper. Edit mode carries the full `Tour` — its * Itinerary/Dates tabs render the same live, API-backed managers the tour's own detail page uses * (not local form state), which need real tour data (title/duration/startDate), not just an id. */ const TourFormModeContext = createContext<{ mode: "create" } | { mode: "edit"; tour: Tour }>({ mode: "create", }); const TABS = [ { value: "basic", label: "Basic Info" }, { value: "destination", label: "Destination" }, { value: "details", label: "Tour Details" }, { value: "pricing", label: "Pricing" }, { value: "dates", label: "Dates" }, { value: "content", label: "Inclusions & Highlights" }, { value: "itinerary", label: "Itinerary" }, { value: "additional", label: "Additional Info" }, { value: "publishing", label: "Publishing" }, ] as const; type TabValue = (typeof TABS)[number]["value"]; /** Which fields live on each tab — drives per-tab validation and jump-to-error-tab on submit. */ const TAB_FIELDS: Record[]> = { basic: [ "title", "slug", "shortDescription", "description", "tourType", "category", "badgeLabel", "displayOrder", ], destination: [ "country", "stateRegion", "destination", "destinationId", "primaryImageUrl", "galleryImageUrls", ], details: [ "durationNights", "durationDays", "groupSizeMin", "groupSizeMax", "bestTimeToVisit", "ageGroup", "tourCode", "departureCity", "operatedBy", ], pricing: ["currency", "price", "childPrice", "singleSupplement", "discountType", "discountValue"], dates: ["startDate", "endDate", "hasMultipleDepartures", "departureDates"], content: ["inclusionsText", "exclusionsText", "highlightsText"], itinerary: [], additional: [ "accommodationType", "mealPlan", "transportType", "physicalRating", "recommendedFor", "tags", "allowBooking", "requiredDocuments", ], publishing: ["featured", "isActive", "publishingState"], }; // ── Shared field primitives ──────────────────────────────────────────────── function TagsField() { const { control } = useFormContext(); const { field } = useController({ control, name: "tags" }); const [draft, setDraft] = useState(""); const tags = field.value as string[]; const addTag = () => { const value = draft.trim(); if (!value || tags.includes(value)) { setDraft(""); return; } field.onChange([...tags, value]); setDraft(""); }; return (
{tags.map((tag) => ( {tag} ))} setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addTag(); } }} onBlur={addTag} placeholder="Enter tags and press Enter" className="min-w-[140px] flex-1 border-0 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground" />
); } // ── Tab sections ──────────────────────────────────────────────────────────── function BasicInfoTab() { const { control, setValue, getValues } = useFormContext(); return (
( Tour Name { field.onChange(e); if (!getValues("slug") || getValues("slug") === toSlug(field.value)) { setValue("slug", toSlug(e.target.value)); } }} /> )} />
( Tour Type {[ { value: "group_tour", label: "Group Tour" }, { value: "fit", label: "FIT (Custom)" }, { value: "private_tour", label: "Private Tour" }, ].map((opt) => ( ))} )} />
); } /** Visual upload dropzone matching the reference design — inert until ImageKit is wired in Pass 2. */ function PrimaryImageField() { const { control } = useFormContext(); const { field } = useController({ control, name: "primaryImageUrl" }); const uploadImage = useUploadImage(); const inputRef = useRef(null); const url = field.value as string; const handleFile = async (file: File | undefined) => { if (!file) return; const webpFile = await toWebP(file).catch(() => file); uploadImage.mutate(webpFile, { onSuccess: (result) => field.onChange(result.url), onError: (err) => toast.error(err instanceof ApiClientError ? err.message : "Couldn't upload the image."), }); }; return (
{ void handleFile(e.target.files?.[0]); e.target.value = ""; }} /> {url ? (
Primary
) : ( )}
); } function GalleryImagesField() { const { control, setValue, getValues } = useFormContext(); const { field } = useController({ control, name: "galleryImageUrls" }); const uploadImage = useUploadImage(); const inputRef = useRef(null); const urls = field.value as string[]; const handleFiles = (files: FileList | null) => { if (!files) return; Array.from(files).forEach((file) => { void toWebP(file) .catch(() => file) .then((webpFile) => { uploadImage.mutate(webpFile, { // Read the live value at resolve-time, not a closure snapshot — several uploads can // resolve in any order, and a stale array would silently drop earlier additions. onSuccess: (result) => setValue("galleryImageUrls", [...getValues("galleryImageUrls"), result.url]), onError: (err) => toast.error( err instanceof ApiClientError ? err.message : "Couldn't upload the image.", ), }); }); }); }; return (
{ handleFiles(e.target.files); e.target.value = ""; }} /> {urls.length > 0 ? (
{urls.map((imgUrl) => (
Gallery
))}
) : null}
); } /** Sources from the real Destinations module (not a Master Types group) — picking one sets * `destinationId`; `destination` (the display name) is kept in sync for immediate UI feedback, * and the server re-derives it from `destinationId` again regardless on save. */ function DestinationSelectField() { const { control, setValue } = useFormContext(); const { data, isLoading } = useDestinations({ limit: 100 }); const destinationsList = data?.rows ?? []; const ctx = useContext(TourFormModeContext); return ( ( City / Destination {ctx?.mode === "create" ? : null} )} /> ); } function DestinationTab() { return (
); } /** Read-only — the operating company name is system-controlled (Settings → Company), never * hand-typed on a tour. The backend re-derives and overwrites this on save regardless. */ function OperatedByField() { const { setValue } = useFormContext(); const { data } = useCompanySettings(); const companyName = data?.companyName ?? ""; useEffect(() => { if (companyName) setValue("operatedBy", companyName); }, [companyName, setValue]); return (

Set from Settings → Company profile, not editable per tour.

); } function TourDetailsTab() { return (
); } function PricingTab() { const { control } = useFormContext(); const discountType = useWatch({ control, name: "discountType" }); const discountHint = discountType === "percentage" ? "Interpreted as a % off the base price" : discountType === "fixed" ? "Interpreted as a flat currency amount off the base price" : "Choose a discount type above to see how this value is applied"; return (
); } /** * A departure's implied return date — informational only, same math as the auto-calculated * Tour End Date. * * `days - 1` because "days" counts calendar days INCLUDING the departure day: a 6-day tour * leaving on the 10th runs 10-11-12-13-14-15 and comes home on the 15th, not the 16th. For a * conventional 5N/6D pair this equals `start + nights`, which is what this used to compute — * but days is what the business quotes and what the operator types, and it stays correct even * when the nights/days pair isn't the usual N/N+1 (a day trip is 0N/1D, and returns the same day). */ function returnDateFor(departureIso: string, durationDays: number) { const parsed = parseISO(departureIso); if (!isValid(parsed) || durationDays < 1) return undefined; return addDays(parsed, durationDays - 1); } function DepartureDatesField() { const { control } = useFormContext(); const durationDays = Number(useWatch({ control, name: "durationDays" }) || 0); const startDate = useWatch({ control, name: "startDate" }); // Departures are the same tour running again on other calendar dates across a season — they // shouldn't predate the tour's own listed Start Date, but there's deliberately no upper bound // (Tour End Date is just Start + Duration, i.e. the *first* departure's own return leg). const minDepartureDate = startDate && isValid(parseISO(startDate)) ? parseISO(startDate) : new Date(); const { field } = useController({ control, name: "departureDates" }); const dates = [...(field.value as string[])].sort(); const [addOpen, setAddOpen] = useState(false); const [editingDate, setEditingDate] = useState(null); const addDate = (iso: string) => { if (dates.includes(iso)) return; field.onChange([...dates, iso].sort()); }; const replaceDate = (oldIso: string, newIso: string) => { if (oldIso === newIso) return; field.onChange([...dates.filter((d) => d !== oldIso), newIso].sort()); }; const removeDate = (iso: string) => field.onChange(dates.filter((d) => d !== iso)); return (

Add additional departure dates for this tour.

{ if (!date) return; addDate(format(date, "yyyy-MM-dd")); setAddOpen(false); }} autoFocus />
{dates.length === 0 ? (

No departure dates yet

Add the dates this tour departs on — each one gets its own card here.

) : (
{dates.map((d) => { const ret = returnDateFor(d, durationDays); return (

{format(parseISO(d), "dd-MM-yyyy")}

{ret ? (

Return: {format(ret, "dd-MM-yyyy")}

) : null}
setEditingDate(open ? d : null)} > { if (!date) return; replaceDate(d, format(date, "yyyy-MM-dd")); setEditingDate(null); }} autoFocus />
); })}
)}
); } function DatesTab() { const { control, setValue } = useFormContext(); const { field: multiField } = useController({ control, name: "hasMultipleDepartures" }); const startDate = useWatch({ control, name: "startDate" }); const durationDays = useWatch({ control, name: "durationDays" }); // Flips true the moment the user picks an End Date by hand — once that happens, the auto-calc // below stops overwriting it. Without this, the effect's own re-run on the next Start/Duration // change would immediately "correct" a manual pick back to the computed value. const endDateTouchedRef = useRef(false); // End Date auto-fills from Start Date + Duration (Nights) until the user overrides it by hand. useEffect(() => { if (endDateTouchedRef.current) return; const parsedStart = parseISO(startDate); if (!startDate || !isValid(parsedStart)) return; const days = Number(durationDays) || 0; // Nothing sensible to derive from a blank or zero duration, and days - 1 would run backwards. if (days < 1) return; setValue("endDate", format(addDays(parsedStart, days - 1), "yyyy-MM-dd")); }, [startDate, durationDays, setValue]); return (
( Tour Start Date )} /> ( Tour End Date { endDateTouchedRef.current = true; field.onChange(iso); }} placeholder="Auto-filled from start date + duration" {...(startDate ? { minDate: parseISO(startDate) } : {})} />

Auto-fills from start date + duration — pick a different date to override.

)} />
{multiField.value ? : null}
); } /** Create mode collects departure dates as local form state, submitted alongside the tour. Edit * mode instead renders the same live, API-backed manager the tour's detail page uses — writes * land immediately via their own endpoints, independent of this form's own Save button. */ function DepartureDatesSection() { const ctx = useContext(TourFormModeContext); if (ctx.mode === "create") return ; return (

Saved immediately — separate from the Save changes button below.

); } function ContentTab() { return (
); } type ItineraryDayValue = TourFormValues["itineraryDays"][number]; /** Itinerary days are only ever *collected* here for the initial create request — once a tour * exists, they're managed via the Itinerary tab on its own detail page (its own dedicated * endpoints), not resubmitted through this form. */ /** Create mode collects itinerary days as local form state, submitted alongside the tour. Edit * mode instead renders the same live, API-backed manager the tour's detail page uses — writes * land immediately via their own endpoints, independent of this form's own Save button. */ function ItineraryTab() { const ctx = useContext(TourFormModeContext); if (ctx.mode === "create") return ; return (

Saved immediately — separate from the Save changes button below.

); } function ItineraryBuilderField() { const { control } = useFormContext(); const { field } = useController({ control, name: "itineraryDays" }); const days = [...(field.value as ItineraryDayValue[])].sort((a, b) => a.dayNumber - b.dayNumber); const nextDayNumber = days.length ? Math.max(...days.map((d) => d.dayNumber)) + 1 : 1; const [formOpen, setFormOpen] = useState(false); const [editingIndex, setEditingIndex] = useState(null); const [draftDay, setDraftDay] = useState(1); const [draftTitle, setDraftTitle] = useState(""); const [draftActivities, setDraftActivities] = useState(""); const openAdd = () => { setEditingIndex(null); setDraftDay(nextDayNumber); setDraftTitle(""); setDraftActivities(""); setFormOpen(true); }; const openEdit = (day: ItineraryDayValue, index: number) => { setEditingIndex(index); setDraftDay(day.dayNumber); setDraftTitle(day.title); setDraftActivities(day.activitiesShort); setFormOpen(true); }; const save = () => { if (!draftTitle.trim()) return; const isDuplicate = days.some((d, i) => d.dayNumber === draftDay && i !== editingIndex); if (isDuplicate) { toast.error(`Day ${draftDay} is already used — pick a different day number.`); return; } const entry: ItineraryDayValue = { dayNumber: draftDay, title: draftTitle.trim(), activitiesShort: draftActivities.trim(), }; if (editingIndex !== null) { field.onChange(days.map((d, i) => (i === editingIndex ? entry : d))); } else { field.onChange([...days, entry]); } setFormOpen(false); }; const remove = (index: number) => field.onChange(days.filter((_, i) => i !== index)); return (

Day-wise Itinerary

Add one entry per day — optional here, and can also be added later from the tour's detail page.

{formOpen ? (
setDraftDay(Math.max(1, Number(e.target.value) || 1))} />
setDraftTitle(e.target.value)} placeholder="e.g. Arrival in Zurich" />