Booking Flow Implementation Plan

apps/frontend/
├── app/[locale]/booking/
│   └── page.tsx                   # Single page — nuqs ?step=&occurrenceId= (CREATE)
│   └── layout.tsx                 # Booking layout (MODIFY — add BookingProvider)
├── components/booking/
│   ├── booking-provider.tsx        # BookingContext provider (CREATE)
│   ├── sticky-cart.tsx           # Sticky cart component (CREATE)
│   ├── countdown-timer.tsx         # 10-min countdown (CREATE)
│   ├── week-show-list.tsx         # Step 1: Week-based show list (CREATE)
│   ├── ticket-selector.tsx        # Step 1: Ticket type + quantity (CREATE)
│   ├── step-addons.tsx           # Step 2: Add-ons tap UI (CREATE)
│   ├── checkout-form.tsx           # Step 3: Customer form (CREATE)
│   └── confirmation-display.tsx    # Step 4: Confirmation (CREATE)
├── lib/
│   └── booking-context.tsx         # BookingContext (CREATE — step derived from nuqs)
└── middleware.ts                   # May need to add locale check

import { Id } from "~/convex/_generated/dataModel";
 
export type TicketType = "DINNER_THEATRE" | "SHOW_ONLY";
 
export type AddOnSelection = {
  addOnId: Id<"addOns">;
  quantity: number;
};
 
export type BookingState = {
  // Step 1 data
  occurrenceId: Id<"showOccurrences"> | null;
  ticketType: TicketType | null;
  quantity: number;
 
  // Step 2 data
  seatIds: string[];
 
  // Step 3 data
  addOns: AddOnSelection[];
 
  // Step 4 data
  customerInfo: {
    firstName: string;
    lastName: string;
    email: string;
    phone?: string;
  } | null;
 
  // Reservation ID (created on step 1)
  reservationId: Id<"reservations"> | null;
 
  // Timer
  bookingExpiresAt: number | null;
};
// Step is managed by nuqs "step" param, NOT in this state

"use client";
import { createContext, useContext, useReducer, ReactNode } from "react";
import { Id } from "~/convex/_generated/dataModel";
 
export type BookingStep = "tickets" | "seats" | "addons" | "checkout" | "confirmation";
 
type BookingAction =
  | { type: "START_BOOKING"; payload: { occurrenceId: Id<"showOccurrences">; reservationId: Id<"reservations">; bookingExpiresAt: number } }
  | { type: "SELECT_TICKET"; payload: { ticketType: TicketType; quantity: number } }
  | { type: "SET_SEATS"; payload: { seatIds: string[] } }
  | { type: "SET_ADDONS"; payload: { addOns: AddOnSelection[] } }
  | { type: "SET_CUSTOMER_INFO"; payload: BookingState["customerInfo"] }
  | { type: "RESET" };
 
const initialState: BookingState = {
  occurrenceId: null,
  ticketType: null,
  quantity: 1,
  seatIds: [],
  addOns: [],
  customerInfo: null,
  reservationId: null,
  bookingExpiresAt: null,
};
 
function bookingReducer(state: BookingState, action: BookingAction): BookingState {
  switch (action.type) {
    case "START_BOOKING":
      return { ...state, ...action.payload };
    case "SELECT_TICKET":
      return { ...state, ...action.payload };
    case "SET_SEATS":
      return { ...state, seatIds: action.payload.seatIds };
    case "SET_ADDONS":
      return { ...state, addOns: action.payload.addOns };
    case "SET_CUSTOMER_INFO":
      return { ...state, customerInfo: action.payload };
    case "RESET":
      return initialState;
    default:
      return state;
  }
}
 
type BookingContextValue = {
  state: BookingState;
  dispatch: React.Dispatch<BookingAction>;
};
 
const BookingContext = createContext<BookingContextValue | null>(null);
 
export function BookingProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(bookingReducer, initialState);
  return <BookingContext.Provider value={{ state, dispatch }}>{children}</BookingContext.Provider>;
}
 
export function useBooking() {
  const ctx = useContext(BookingContext);
  if (!ctx) throw new Error("useBooking must be used within BookingProvider");
  return ctx;
}

# Start dev server and navigate to /booking — should not crash
npm run dev

git add apps/frontend/lib/booking-context.tsx
git commit -m "feat(booking): add BookingContext for state management"

"use client";
import { useBooking } from "~/lib/booking-context";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
 
export function StickyCart() {
  const t = useTranslations("booking.cart");
  const { state } = useBooking();
  const { ticketType, quantity, addOns, occurrenceId } = state;
 
  const occurrenceData = useQuery(
    api.occurrences.getAvailability,
    occurrenceId ? { occurrenceId } : "skip"
  );
 
  if (!ticketType || !occurrenceId) return null;
 
  // Calculate prices
  const ticketPrice = occurrenceData
    ? (ticketType === "DINNER_THEATRE"
        ? occurrenceData.dinnerPrice
        : occurrenceData.showOnlyPrice)
    : 0;
  const ticketSubtotal = ticketPrice * quantity;
 
  return (
    <div className="sticky-cart bg-surface border-l border-border p-4">
      <h3 className="text-accent font-serif mb-4">{t("title")}</h3>
      {/* Line items */}
      <div className="text-sm space-y-2">
        <div className="flex justify-between">
          <span>{ticketType === "DINNER_THEATRE" ? t("dinnerTheatre") : t("showOnly")} × {quantity}</span>
          <span>{ticketSubtotal.toLocaleString()} VND</span>
        </div>
        {/* Add-ons */}
      </div>
      <div className="border-t border-border mt-4 pt-4 font-bold text-accent text-lg">
        {t("total")}: {(ticketSubtotal).toLocaleString()} VND
      </div>
    </div>
  );
}

// apps/frontend/app/[locale]/booking/page.tsx
"use client";
import { useQueryState } from "nuqs";
import { BookingProvider } from "~/lib/booking-context";
import { StickyCart } from "~/components/booking/sticky-cart";
import { CountdownTimer } from "~/components/booking/countdown-timer";
import { StepTickets } from "~/components/booking/step-tickets";
import { StepSeats } from "~/components/booking/step-seats";
import { StepAddons } from "~/components/booking/step-addons";
import { CheckoutForm } from "~/components/booking/checkout-form";
import { ConfirmationDisplay } from "~/components/booking/confirmation-display";
import { useTranslations } from "next-intl";
import { Suspense } from "react";
 
const STEPS = ["tickets", "seats", "addons", "checkout", "confirmation"] as const;
 
export default function BookingPage() {
  const t = useTranslations("booking");
  const [step, setStep] = useQueryState("step", { defaultValue: "tickets" });
  const [occurrenceId] = useQueryState("occurrenceId", { defaultValue: "" });
 
  if (!occurrenceId && step !== "confirmation") {
    return <div className="text-center py-24 text-gray-400">{t("invalidLink")}</div>;
  }
 
  return (
    <BookingProvider>
      <div className="flex min-h-screen bg-background pt-20">
        <main className="flex-1 px-4 py-8 max-w-2xl mx-auto w-full">
          <CountdownTimer />
          <Suspense fallback={<div className="animate-pulse">{t("loading")}</div>}>
            {step === "tickets" && <StepTickets onNext={() => setStep("seats")} />}
            {step === "seats" && <StepSeats onNext={() => setStep("addons")} onBack={() => setStep("tickets")} />}
            {step === "addons" && <StepAddons onNext={() => setStep("checkout")} onBack={() => setStep("seats")} />}
            {step === "checkout" && <CheckoutForm />}
            {step === "confirmation" && <ConfirmationDisplay />}
          </Suspense>
        </main>
        {/* Desktop sidebar — hidden on confirmation */}
        {step !== "confirmation" && (
          <aside className="hidden lg:block w-80">
            <StickyCart />
          </aside>
        )}
      </div>
    </BookingProvider>
  );
}

git add apps/frontend/app/[locale]/booking/page.tsx apps/frontend/components/booking/sticky-cart.tsx
git commit -m "feat(booking): add single booking page with nuqs step routing"

// In convex/functions/reservations.ts
export const createPending = mutation({
  args: {
    occurrenceId: v.id("showOccurrences"),
    ticketType: v.union(v.literal("DINNER_THEATRE"), v.literal("SHOW_ONLY")),
    quantity: v.number().int().min(1).max(32),
  },
  handler: async (ctx, { occurrenceId, ticketType, quantity }) => {
    const occurrence = await ctx.db.get(occurrenceId);
    if (!occurrence) {
      throw new Error("Show date not found");
    }
 
    const remaining = occurrence.actualCapacity - occurrence.bookedCount;
    if (quantity > remaining) {
      throw new Error("Not enough seats available");
    }
 
    const now = Date.now();
    const bookingExpiresAt = now + 10 * 60 * 1000; // 10 minutes
 
    const reservationId = await ctx.db.insert("reservations", {
      occurrenceId,
      ticketType,
      quantity,
      seatIds: [],
      addOns: [],
      customerInfo: null,
      paymentStatus: "PENDING",
      bookingExpiresAt,
      createdAt: now,
      updatedAt: now,
    });
 
    // Increment booked count
    await ctx.db.patch(occurrenceId, {
      bookedCount: occurrence.bookedCount + quantity,
    });
 
    return reservationId;
  },
});

"use client";
import { useEffect, useState } from "react";
import { useBooking } from "~/lib/booking-context";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
 
export function CountdownTimer() {
  const t = useTranslations("booking.countdown");
  const { state, dispatch } = useBooking();
  const { bookingExpiresAt } = state;
  const [timeLeft, setTimeLeft] = useState<string>("");
  const [showExpiredModal, setShowExpiredModal] = useState(false);
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
 
  useEffect(() => {
    if (!bookingExpiresAt) return;
    const interval = setInterval(() => {
      const now = Date.now();
      const remaining = Math.max(0, bookingExpiresAt - now);
      const minutes = Math.floor(remaining / 60000);
      const seconds = Math.floor((remaining % 60000) / 1000);
      setTimeLeft(`${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`);
 
      if (remaining === 0) {
        setShowExpiredModal(true);
        dispatch({ type: "RESET" });
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [bookingExpiresAt, dispatch]);
 
  if (!bookingExpiresAt) return null;
 
  return (
    <>
      <div className="text-accent font-mono text-lg">
        {t("seatsReserved")} {timeLeft}
      </div>
      {showExpiredModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70">
          <div className="bg-surface border border-border rounded-lg p-8 max-w-md text-center">
            <h2 className="text-2xl font-serif text-accent mb-4">{t("expiredTitle")}</h2>
            <p className="text-gray-400 mb-6">{t("expiredMessage")}</p>
            <button
              onClick={() => {
                setShowExpiredModal(false);
                startTransition(() => {
                  router.push("/");
                });
              }}
              className="px-6 py-3 bg-accent text-black font-bold rounded-lg"
            >
              {t("returnHome")}
            </button>
          </div>
        </div>
      )}
    </>
  );
}

"use client";
import { useState } from "react";
import { useBooking } from "~/lib/booking-context";
import { useQuery, useMutation } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { consola } from "consola";
import { Id } from "~/convex/_generated/dataModel";
 
export function StepTickets({ onNext }: { onNext: () => void }) {
  const t = useTranslations("booking.tickets");
  const { dispatch, state } = useBooking();
  const [ticketType, setTicketType] = useState<"DINNER_THEATRE" | "SHOW_ONLY">("DINNER_THEATRE");
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();
 
  const occurrenceId = state.occurrenceId;
  const availability = useQuery(api.occurrences.getAvailability, occurrenceId ? { occurrenceId } : "skip");
  const createPending = useMutation(api.reservations.createPending);
 
  const handleContinue = async () => {
    if (!occurrenceId) return;
 
    try {
      const reservationId = await createPending({
        occurrenceId: occurrenceId as Id<"showOccurrences">,
        ticketType,
        quantity,
      });
      dispatch({
        type: "START_BOOKING",
        payload: {
          occurrenceId: occurrenceId as Id<"showOccurrences">,
          reservationId,
          bookingExpiresAt: Date.now() + 10 * 60 * 1000,
        },
      });
      dispatch({ type: "SELECT_TICKET", payload: { ticketType, quantity } });
      startTransition(() => {
        onNext();
      });
    } catch (error) {
      consola.error("Failed to create reservation", { error });
    }
  };
 
  if (!availability) return <div className="animate-pulse space-y-4">{t("loading")}</div>;
 
  return (
    <div className="space-y-6">
      {/* Show reminder */}
      <div className="bg-surface p-4 rounded-lg">
        <p className="text-accent font-serif">{availability.showTitle}</p>
        <p className="text-gray-400">{availability.date} at {availability.time}</p>
      </div>
 
      {/* Ticket type */}
      <div>
        <label className="block text-sm font-medium mb-2">{t("ticketType")}</label>
        <div className="space-y-2">
          <button
            onClick={() => setTicketType("DINNER_THEATRE")}
            className={`w-full p-4 border rounded-lg text-left ${ticketType === "DINNER_THEATRE" ? "border-accent" : "border-border"}`}
          >
            <div className="flex justify-between">
              <span className="font-medium">{t("dinnerTheatre")}</span>
              <span className="text-accent">{availability.dinnerPrice.toLocaleString()} VND</span>
            </div>
          </button>
          {availability.showOnlyEnabled && (
            <button
              onClick={() => setTicketType("SHOW_ONLY")}
              className={`w-full p-4 border rounded-lg text-left ${ticketType === "SHOW_ONLY" ? "border-accent" : "border-border"}`}
            >
              <div className="flex justify-between">
                <span className="font-medium">{t("showOnly")}</span>
                <span className="text-accent">{availability.showOnlyPrice.toLocaleString()} VND</span>
              </div>
            </button>
          )}
        </div>
      </div>
 
      {/* Quantity */}
      <div>
        <label className="block text-sm font-medium mb-2">{t("quantity")}</label>
        <div className="flex items-center gap-4">
          <button
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            className="w-10 h-10 rounded-lg border border-border flex items-center justify-center"
          >
            -
          </button>
          <span className="text-xl font-bold">{quantity}</span>
          <button
            onClick={() => setQuantity(Math.min(availability.remaining, quantity + 1))}
            className="w-10 h-10 rounded-lg border border-border flex items-center justify-center"
          >
            +
          </button>
          <span className="text-sm text-gray-400">{t("maxAvailable", { max: availability.remaining })}</span>
        </div>
      </div>
 
      <button
        onClick={handleContinue}
        disabled={isPending}
        className="w-full bg-accent text-black py-3 rounded-lg font-bold disabled:opacity-50"
      >
        {isPending ? t("processing") : t("continue")}
      </button>
    </div>
  );
}

git add apps/frontend/app/[locale]/booking/page.tsx
git commit -m "feat(booking): add step 1 tickets"

"use client";
import { useState } from "react";
import { useBooking } from "~/lib/booking-context";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { Id } from "~/convex/_generated/dataModel";
 
export function StepAddons({ onNext }: { onNext: () => void }) {
  const t = useTranslations("booking.addons");
  const { state, dispatch } = useBooking();
  const [selectedAddOns, setSelectedAddOns] = useState<
    Array<{ addOnId: string; quantity: number }>
  >([]);
  const [isPending, startTransition] = useTransition();
 
  const addOns = useQuery(api.addons.listEnabled);
 
  const toggleAddOn = (addOnId: string, quantity: number) => {
    setSelectedAddOns((prev) => {
      const existing = prev.find((a) => a.addOnId === addOnId);
      if (existing) {
        if (quantity === 0) return prev.filter((a) => a.addOnId !== addOnId);
        return prev.map((a) => (a.addOnId === addOnId ? { ...a, quantity } : a));
      }
      return [...prev, { addOnId, quantity }];
    });
  };
 
  const handleContinue = () => {
    const validAddOns = selectedAddOns
      .filter((a) => a.quantity > 0)
      .map((a) => ({ addOnId: a.addOnId as Id<"addOns">, quantity: a.quantity }));
    dispatch({ type: "SET_ADDONS", payload: { addOns: validAddOns } });
    startTransition(() => {
      onNext();
    });
  };
 
  const handleSkip = () => {
    dispatch({ type: "SET_ADDONS", payload: { addOns: [] } });
    startTransition(() => {
      onNext();
    });
  };
 
  if (!addOns) return <div className="animate-pulse">{t("loading")}</div>;
 
  return (
    <div className="space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-serif text-accent mb-2">{t("title")}</h2>
        <p className="text-gray-400">{t("subtitle")}</p>
      </div>
 
      <div className="grid gap-4">
        {addOns.map((addon) => (
          <div key={addon._id} className="bg-surface border border-border p-4 rounded-lg">
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-medium text-white">{addon.name}</h3>
                <p className="text-sm text-gray-400">{addon.description}</p>
                <p className="text-accent mt-1">+{addon.price.toLocaleString()} VND/{t("perPerson")}</p>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => toggleAddOn(addon._id, 0)}
                  className="w-8 h-8 rounded border border-border flex items-center justify-center"
                >
                  -
                </button>
                <span>
                  {selectedAddOns.find((a) => a.addOnId === addon._id)?.quantity ?? 0}
                </span>
                <button
                  onClick={() => toggleAddOn(addon._id, 1)}
                  className="w-8 h-8 rounded border border-border flex items-center justify-center"
                >
                  +
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
 
      <div className="flex gap-4">
        <button
          onClick={handleSkip}
          disabled={isPending}
          className="flex-1 py-3 border border-border rounded-lg disabled:opacity-50"
        >
          {t("skip")}
        </button>
        <button
          onClick={handleContinue}
          disabled={isPending}
          className="flex-1 bg-accent text-black py-3 rounded-lg font-bold disabled:opacity-50"
        >
          {t("continueWithSelection")}
        </button>
      </div>
    </div>
  );
}

export const listEnabled = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db
      .query("addOns")
      .withIndex("by_enabled", (q) => q.eq("enabled", true))
      .collect();
  },
});

git add apps/frontend/app/[locale]/booking/page.tsx apps/frontend/components/booking/addon-cards.tsx
git commit -m "feat(booking): add step 2 add-ons"

"use client";
import { useState } from "react";
import { useBooking } from "~/lib/booking-context";
import { useRouter } from "next/navigation";
import { useQueryState } from "nuqs";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import { useTransition } from "react";
import { api } from "~/convex/_generated/api";
import { z } from "zod";
import { consola } from "consola";
import { Id } from "~/convex/_generated/dataModel";
 
const CheckoutFormSchema = z.object({
  firstName: z.string().min(1, "First name is required"),
  lastName: z.string().min(1, "Last name is required"),
  email: z.string().email("Invalid email address"),
  phone: z.string().optional(),
  termsAccepted: z.literal(true, {
    errorMap: () => ({ message: "You must accept the Terms & Conditions" }),
  }),
});
 
export function CheckoutForm() {
  const t = useTranslations("booking.checkout");
  const { state, dispatch } = useBooking();
  const router = useRouter();
  const [, setStep] = useQueryState("step", { defaultValue: "confirmation" });
  const [reservationId, setReservationId] = useQueryState("reservationId", { defaultValue: "" });
  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    termsAccepted: false,
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isPending, startTransition] = useTransition();
 
  const updateReservation = useMutation(api.reservations.update);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});
 
    const parsed = CheckoutFormSchema.safeParse(form);
    if (!parsed.success) {
      const fieldErrors: Record<string, string> = {};
      parsed.error.errors.forEach((err) => {
        const field = String(err.path[0]);
        fieldErrors[field] = err.message;
      });
      setErrors(fieldErrors);
      return;
    }
 
    if (!state.reservationId) {
      return;
    }
 
    try {
      await updateReservation({
        reservationId: state.reservationId as Id<"reservations">,
        firstName: form.firstName,
        lastName: form.lastName,
        email: form.email,
        phone: form.phone || undefined,
      });
 
      dispatch({ type: "SET_CUSTOMER_INFO", payload: form });
 
      // Create OnePay VA order — redirect to confirmation page
      const createOnePayOrder = useMutation(api.reservations.createOnePayOrder);
      const result = await createOnePayOrder({ reservationId: state.reservationId });
 
      startTransition(() => {
        setReservationId(result.reservationId ?? state.reservationId!);
        setStep("confirmation");
      });
    } catch (error) {
      consola.error("Checkout failed", { error });
    }
  };
 
  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="block text-sm font-medium mb-1">{t("firstName")}</label>
          <input
            required
            type="text"
            value={form.firstName}
            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
            className={`w-full bg-surface border rounded-lg p-3 ${errors.firstName ? "border-red-500" : "border-border"}`}
          />
          {errors.firstName && <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>}
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">{t("lastName")}</label>
          <input
            required
            type="text"
            value={form.lastName}
            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
            className={`w-full bg-surface border rounded-lg p-3 ${errors.lastName ? "border-red-500" : "border-border"}`}
          />
          {errors.lastName && <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>}
        </div>
      </div>
 
      <div>
        <label className="block text-sm font-medium mb-1">{t("email")}</label>
        <input
          required
          type="email"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          className={`w-full bg-surface border rounded-lg p-3 ${errors.email ? "border-red-500" : "border-border"}`}
        />
        {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
      </div>
 
      <div>
        <label className="block text-sm font-medium mb-1">{t("phoneOptional")}</label>
        <input
          type="tel"
          value={form.phone}
          onChange={(e) => setForm({ ...form, phone: e.target.value })}
          className="w-full bg-surface border border-border rounded-lg p-3"
        />
      </div>
 
      <div className="flex items-start gap-2">
        <input
          type="checkbox"
          id="terms"
          checked={form.termsAccepted}
          onChange={(e) => setForm({ ...form, termsAccepted: e.target.checked })}
          className="mt-1"
        />
        <label htmlFor="terms" className="text-sm text-gray-400">
          {t("acceptTerms")}
        </label>
      </div>
      {errors.termsAccepted && (
        <p className="text-red-500 text-sm">{errors.termsAccepted}</p>
      )}
 
      {/* Trust signals */}
      <div className="flex items-center gap-4 py-4 border-y border-border">
        <span className="text-sm text-gray-400">{t("securePayment")}</span>
        <div className="flex gap-2">
          {/* Payment logos */}
        </div>
      </div>
 
      <button
        type="submit"
        disabled={isPending}
        className="w-full bg-accent text-black py-4 rounded-lg font-bold text-lg disabled:opacity-50"
      >
        {isPending ? t("processing") : t("payAmount")}
      </button>
    </form>
  );
}

// apps/frontend/app/api/onepay/create-order/route.ts
import { NextRequest, NextResponse } from "next/server";
import { api } from "~/convex/_generated/api";
import { fetchAction } from "convex/next";
import { z } from "zod";
 
const CreateOrderRequestSchema = z.object({
  reservationId: z.string().min(1),
});
 
export async function POST(request: NextRequest) {
  const bodyParse = CreateOrderRequestSchema.safeParse(await request.json());
  if (!bodyParse.success) {
    return NextResponse.json(
      { error: "Invalid request body" },
      { status: 400 },
    );
  }
 
  const { reservationId } = bodyParse.data;
 
  try {
    const result = await fetchAction(
      api.reservations.createOnePayOrderForReservation,
      {
        reservationId,
      },
    );
 
    return NextResponse.json(result);
  } catch (error) {
    const message =
      error instanceof Error ? error.message : "Failed to create OnePay order";
    return NextResponse.json({ error: message }, { status: 500 });
  }
}

git add apps/frontend/app/[locale]/booking/page.tsx apps/frontend/components/booking/checkout-form.tsx
git commit -m "feat(booking): add step 3 checkout with OnePay redirect"

"use client";
import { useEffect, useState } from "react";
import { useQueryState } from "nuqs";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useTranslations } from "next-intl";
import { Id } from "~/convex/_generated/dataModel";
 
export function ConfirmationDisplay() {
  const t = useTranslations("booking.confirmation");
  const [reservationId] = useQueryState("reservationId", { defaultValue: "" });
  const [timeLeft, setTimeLeft] = useState<number>(0);
 
  const reservation = useQuery(
    api.reservations.getById,
    reservationId ? { reservationId: reservationId as Id<"reservations"> } : "skip"
  );
 
  // Countdown timer for VA expiry
  useEffect(() => {
    if (!reservation?.paymentExpiresAt) return;
 
    const updateTimer = () => {
      const remaining = reservation.paymentExpiresAt! - Date.now();
      setTimeLeft(Math.max(0, remaining));
    };
 
    updateTimer();
    const interval = setInterval(updateTimer, 1000);
    return () => clearInterval(interval);
  }, [reservation?.paymentExpiresAt]);
 
  // Show payment pending state with VA
  if (reservation?.vaNumber && reservation.paymentStatus === "PENDING") {
    const minutes = Math.floor(timeLeft / 60000);
    const seconds = Math.floor((timeLeft % 60000) / 1000);
    const timeLeftFormatted = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
 
    return (
      <div className="max-w-lg mx-auto p-6">
        <h1 className="text-2xl font-serif text-accent mb-6">{t("completePayment")}</h1>
 
        {/* QR Code */}
        <div className="flex justify-center mb-6">
          {reservation.qrCodeUrl ? (
            <img
              src={reservation.qrCodeUrl}
              alt={t("qrCodeAlt")}
              className="w-64 h-64"
            />
          ) : reservation.qrCode ? (
            <img
              src={`data:image/png;base64,${reservation.qrCode}`}
              alt={t("qrCodeAlt")}
              className="w-64 h-64"
            />
          ) : null}
        </div>
 
        {/* Virtual Account Number */}
        <div className="bg-surface border border-border rounded-lg p-4 mb-6">
          <p className="text-sm text-gray-400 mb-1">{t("virtualAccountNumber")}</p>
          <p className="text-xl font-mono text-accent">{reservation.vaNumber}</p>
        </div>
 
        {/* Amount */}
        <div className="bg-surface border border-border rounded-lg p-4 mb-6">
          <p className="text-sm text-gray-400 mb-1">{t("amountToTransfer")}</p>
          <p className="text-2xl font-bold text-accent">
            {reservation.totalAmount.toLocaleString()} VND
          </p>
          <p className="text-xs text-gray-500 mt-1">
            {t("exactAmountNote")}
          </p>
        </div>
 
        {/* Countdown Timer */}
        <div className="text-center mb-6">
          <p className="text-sm text-gray-400 mb-1">{t("timeRemaining")}</p>
          <p className="text-3xl font-mono text-accent">
            {timeLeftFormatted}
          </p>
          <p className="text-xs text-gray-500 mt-1">
            {t("seatsHeldNote")}
          </p>
        </div>
 
        {/* Instructions */}
        <div className="text-sm text-gray-400 space-y-2">
          <p>{t("instruction1")}</p>
          <p>{t("instruction2")}</p>
          <p>{t("instruction3")}</p>
        </div>
      </div>
    );
  }
 
  // Payment successful — show confirmation
  if (reservation?.paymentStatus === "PAID") {
    return (
      <div className="max-w-lg mx-auto p-6 text-center">
        <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h1 className="text-3xl font-serif text-accent mb-4">{t("bookingConfirmed")}</h1>
 
        {reservation.qrCode && (
          <div className="flex justify-center mb-6">
            <img
              src={`data:image/png;base64,${reservation.qrCode}`}
              alt={t("bookingQrCode")}
              className="w-48 h-48"
            />
          </div>
        )}
 
        <p className="text-gray-400 mb-2">
          {t("bookingId")}: {reservation._id}
        </p>
        <p className="text-gray-400 mb-6">
          {reservation.quantity} × {reservation.ticketType}
        </p>
 
        <div className="bg-surface border border-border rounded-lg p-4 text-left">
          <h3 className="font-serif text-accent mb-2">{t("whatsNext")}</h3>
          <ul className="text-sm text-gray-400 space-y-1">
            <li>{t("nextStep1")}</li>
            <li>{t("nextStep2")}</li>
            <li>{t("nextStep3")}</li>
          </ul>
        </div>
      </div>
    );
  }
 
  // Loading / Error states
  return (
    <div className="max-w-lg mx-auto p-6 text-center">
      <div className="animate-pulse">
        <p className="text-gray-400">{t("loading")}</p>
      </div>
    </div>
  );
}

export const DAY_OF_WEEK_SURCHARGES: Record<number, number> = {
  0: 0, // Sunday
  1: 0, // Monday
  2: 0, // Tuesday
  3: 0, // Wednesday
  4: 50_000, // Thursday
  5: 100_000, // Friday
  6: 150_000, // Saturday
};
 
export const SMALL_PARTY_THRESHOLD = 15;
export const SMALL_PARTY_SURCHARGE_PER_PERSON = 100_000;
 
export function calculateDayOfWeekSurcharge(
  dateStr: string,
  quantity: number,
): number {
  const day = new Date(dateStr).getDay();
  return (DAY_OF_WEEK_SURCHARGES[day] ?? 0) * quantity;
}
 
export function calculateSmallPartySurcharge(quantity: number): number {
  return quantity < SMALL_PARTY_THRESHOLD
    ? SMALL_PARTY_SURCHARGE_PER_PERSON * quantity
    : 0;
}

Dinner Theatre × 2          1,800,000 VND
Sat surcharge × 2            300,000 VND
Small party surcharge × 2     200,000 VND
-----------------------------
Total:                     2,300,000 VND

import { z } from "zod";
 
// Ticket selection
const TicketSelectionSchema = z.object({
  occurrenceId: z.string().min(1),
  ticketType: z.enum(["DINNER_THEATRE", "SHOW_ONLY"]),
  quantity: z.number().int().min(1).max(32),
});
 
// Add-on selection
const AddOnSelectionSchema = z.object({
  addOnId: z.string(),
  quantity: z.number().int().min(0).max(10),
});
 
// Checkout form
const CheckoutFormSchema = z.object({
  firstName: z.string().min(1, "First name is required").max(50),
  lastName: z.string().min(1, "Last name is required").max(50),
  email: z.string().email("Invalid email address"),
  phone: z.string().optional(),
  termsAccepted: z.literal(true, {
    errorMap: () => ({ message: "You must accept the Terms & Conditions" }),
  }),
});
 
// Booking state
const BookingStateSchema = z.object({
  occurrenceId: z.string().nullable(),
  ticketType: z.enum(["DINNER_THEATRE", "SHOW_ONLY"]).nullable(),
  quantity: z.number().int().min(1),
  seatIds: z.array(z.string()),
  addOns: z.array(AddOnSelectionSchema),
  customerInfo: CheckoutFormSchema.omit({ termsAccepted: true }).nullable(),
  reservationId: z.string().nullable(),
  bookingExpiresAt: z.number().nullable(),
});
 
// Booking step param
const BookingStepSchema = z.object({
  step: z.enum(["tickets", "seats", "addons", "checkout", "confirmation"]),
  occurrenceId: z.string().optional(),
  reservationId: z.string().optional(),
});

// Error codes namespace
export const BOOKING_ERROR_CODES = {
  // Ticket selection errors
  OCCURRENCE_NOT_FOUND: "OCCURRENCE_NOT_FOUND",
  INVALID_TICKET_TYPE: "INVALID_TICKET_TYPE",
  QUANTITY_EXCEEDS_AVAILABILITY: "QUANTITY_EXCEEDS_AVAILABILITY",
 
  // Seat errors
  RESERVATION_NOT_FOUND: "RESERVATION_NOT_FOUND",
  RESERVATION_NOT_PENDING: "RESERVATION_NOT_PENDING",
  SEATS_UNAVAILABLE: "SEATS_UNAVAILABLE",
 
  // Payment errors
  ALREADY_PAID: "ALREADY_PAID",
  AMOUNT_MISMATCH: "AMOUNT_MISMATCH",
  NOT_PENDING: "NOT_PENDING",
  ONEPAY_API_ERROR: "ONEPAY_API_ERROR",
 
  // Session errors
  SESSION_EXPIRED: "SESSION_EXPIRED",
} as const;
 
export type BookingErrorCode =
  (typeof BOOKING_ERROR_CODES)[keyof typeof BOOKING_ERROR_CODES];

// Real-time availability during ticket selection
const availability = useQuery(
  api.occurrences.getAvailability,
  occurrenceId ? { occurrenceId } : "skip",
);
 
// Real-time seat availability during seat selection
const seatData = useQuery(
  api.seats.getSeatsForOccurrence,
  occurrenceId ? { occurrenceId } : "skip",
);
 
// Real-time reservation status during confirmation
// Convex subscription auto-updates reservation — no manual polling needed
const reservation = useQuery(
  api.reservations.getById,
  reservationId ? { reservationId } : "skip",
);
 
// Add-ons list
const addOns = useQuery(api.addons.listEnabled);

{
  "booking": {
    "invalidLink": "Invalid booking link",
    "loading": "Loading...",
    "countdown": {
      "seatsReserved": "Seats reserved for",
      "expiredTitle": "Reservation Expired",
      "expiredMessage": "Your seats have been released. Please start your booking again.",
      "returnHome": "Return to Homepage"
    },
    "tickets": {
      "ticketType": "Ticket Type",
      "dinnerTheatre": "Dinner Theatre",
      "showOnly": "Show Only",
      "quantity": "Quantity",
      "maxAvailable": "Max: {max} available",
      "continue": "Continue",
      "processing": "Processing...",
      "loading": "Loading..."
    },
    "seats": {
      "title": "Select Your Seats",
      "selectSeats": "Select {count} seat(s)",
      "continue": "Continue to Add-ons",
      "selectMore": "Select {count} more seat(s)",
      "legend": {
        "available": "Available",
        "selected": "Selected",
        "held": "Being held",
        "occupied": "Occupied"
      }
    },
    "addons": {
      "title": "Make your evening even more memorable",
      "subtitle": "Enhance your experience with our optional add-ons",
      "perPerson": "person",
      "skip": "Skip & Continue",
      "continueWithSelection": "Continue with Selection",
      "loading": "Loading add-ons..."
    },
    "checkout": {
      "firstName": "First Name",
      "lastName": "Last Name",
      "email": "Email",
      "phoneOptional": "Phone (Optional)",
      "acceptTerms": "I accept the Terms & Conditions",
      "securePayment": "Secure payment",
      "payAmount": "Pay Now",
      "processing": "Processing..."
    },
    "cart": {
      "title": "Your Booking",
      "dinnerTheatre": "Dinner Theatre",
      "showOnly": "Show Only",
      "total": "Total"
    },
    "confirmation": {
      "completePayment": "Complete Your Payment",
      "qrCodeAlt": "Payment QR Code",
      "virtualAccountNumber": "Virtual Account Number",
      "amountToTransfer": "Amount to Transfer",
      "exactAmountNote": "Transfer the exact amount to the account above",
      "timeRemaining": "Time remaining",
      "seatsHeldNote": "Seats are held for 10 minutes",
      "instruction1": "1. Open your mobile banking app",
      "instruction2": "2. Transfer the exact amount to the VA number above",
      "instruction3": "3. Wait for confirmation (this page will update automatically)",
      "bookingConfirmed": "Booking Confirmed!",
      "bookingQrCode": "Booking QR Code",
      "bookingId": "Booking ID",
      "whatsNext": "What's Next?",
      "nextStep1": "Show this QR code at the venue entrance",
      "nextStep2": "Arrive 15 minutes before the show",
      "nextStep3": "Present your booking confirmation",
      "loading": "Loading..."
    }
  }
}

test("BF-E2E-1.1: Guest can select DINNER_THEATRE ticket type");
test("BF-E2E-1.2: Guest can select SHOW_ONLY ticket type when enabled");
test("BF-E2E-1.3: Guest cannot select quantity exceeding availability");
test("BF-E2E-1.4: Guest sees countdown timer after selecting tickets");
test("BF-E2E-1.5: nuqs navigation between steps preserves URL state");
test("BF-E2E-2.1: Guest can select available seats on seat map");
test("BF-E2E-2.2: Guest cannot select occupied seats");
test("BF-E2E-2.3: Guest cannot select more seats than ticket quantity");
test("BF-E2E-2.4: Continue button disabled until all seats selected");
test("BF-E2E-3.1: Guest can skip add-ons and continue to checkout");
test("BF-E2E-3.2: Guest can add add-ons with quantity");
test("BF-E2E-4.1: Guest can fill checkout form with valid data");
test("BF-E2E-4.2: Checkout form validates required fields");
test("BF-E2E-4.3: Terms checkbox must be checked to submit");
test("BF-E2E-4.4: Guest sees sticky cart with correct surcharges");
test("BF-E2E-4.5: Guest is redirected to OnePay on payment submission");
test("BF-E2E-5.1: Guest sees confirmation page after successful payment");
test("BF-E2E-5.2: Guest sees QR code and booking details on confirmation");
test("BF-E2E-5.3: Confirmation updates automatically via Convex subscription");
test("BF-E2E-6.1: Countdown timer shows expired modal on expiry");
test("BF-E2E-6.2: Countdown timer pauses when tab is hidden");
test("BF-E2E-7.1: Guest can navigate back to previous steps");
test("BF-E2E-7.2: Locale selector hidden during booking flow");