Guest Journey Implementation Plan

apps/frontend/
├── app/[locale]/
│   ├── page.tsx                     # MODIFY — wire carousel to Convex
│   ├── programme/
│   │   └── page.tsx                 # CREATE
│   └── shows/
│       └── page.tsx                 # CREATE — slug via nuqs, no [slug] route
├── components/home/
│   └── carousel.tsx                 # CREATE — auto-scroll 6s, arrows, dots, mobile swipe
├── components/shows/
│   ├── show-hero.tsx                # CREATE — video autoplay, gallery scroll
│   └── occurrence-list.tsx           # CREATE — date rows with availability badges
├── components/booking/
│   ├── booking-provider.tsx          # MODIFY — vertical flow state
│   ├── booking-layout.tsx           # MODIFY — vertical scroll layout
│   ├── sticky-cart.tsx              # MODIFY — surcharges display
│   ├── countdown-timer.tsx           # CREATE — 10-min countdown
│   ├── ticket-selector.tsx           # CREATE — ticket type + quantity
│   ├── seat-selector.tsx             # CREATE — 4x8 cinema grid
│   └── checkout-form.tsx             # CREATE — customer form + OnePay redirect
└── lib/
    └── booking-context.tsx           # MODIFY — add occurrenceId, timer, seatIds

cat apps/frontend/components/home/carousel.tsx 2>/dev/null || echo "File not found"
cat apps/frontend/app/[locale]/page.tsx

"use client";
import { useEffect, useState, useCallback, useRef } from "react";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { consola } from "consola";
 
export function Carousel() {
  const t = useTranslations("homepage.carousel");
  const upcoming = useQuery(api.shows.upcoming, { limit: 8 });
  const [current, setCurrent] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
  // Auto-advance every 6 seconds
  const startInterval = useCallback(() => {
    if (intervalRef.current) clearInterval(intervalRef.current);
    if (!upcoming?.length) return;
    intervalRef.current = setInterval(() => {
      setCurrent((c) => (c + 1) % upcoming.length);
    }, 6000);
  }, [upcoming?.length]);
 
  useEffect(() => {
    if (!isPaused && upcoming?.length) {
      startInterval();
    } else if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isPaused, upcoming?.length, startInterval]);
 
  // Pause on tab hidden
  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsPaused(document.hidden);
    };
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
  }, []);
 
  if (!upcoming?.length) {
    return <div className="h-96 bg-surface animate-pulse" />;
  }
 
  return (
    <div
      className="relative overflow-hidden"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      {/* Slides */}
      <div
        className="flex transition-transform duration-700 ease-out"
        style={{ transform: `translateX(-${current * 100}%)` }}
      >
        {upcoming.map(({ occurrence, show }) => (
          <div key={occurrence._id} className="w-full flex-shrink-0">
            <Link href={`/shows?slug=${show.slug}&occurrenceId=${occurrence._id}`}>
              <div className="relative h-96 md:h-[500px]">
                <img
                  src={show.gallery?.[0] ?? "/images/placeholder-show.jpg"}
                  alt={show.title}
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                <div className="absolute bottom-0 left-0 p-8">
                  <h2 className="font-serif text-3xl text-accent mb-2">{show.title}</h2>
                  <p className="text-white/80">
                    {occurrence.date} at {occurrence.time}
                  </p>
                  <p className="text-accent font-bold mt-2">
                    {t("fromPrice", { price: show.defaultDinnerPrice.toLocaleString() })} VND
                  </p>
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>
 
      {/* Arrow buttons */}
      <button
        onClick={() => setCurrent((c) => (c - 1 + upcoming.length) % upcoming.length)}
        className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/50 rounded-full text-white hover:bg-black/70"
        aria-label={t("previousSlide")}
      >
        <svg className="w-5 h-5 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button
        onClick={() => setCurrent((c) => (c + 1) % upcoming.length)}
        className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/50 rounded-full text-white hover:bg-black/70"
        aria-label={t("nextSlide")}
      >
        <svg className="w-5 h-5 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>
 
      {/* Dot indicators */}
      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        {upcoming.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrent(i)}
            className={`w-2 h-2 rounded-full transition-colors ${
              i === current ? "bg-accent" : "bg-white/40"
            }`}
            aria-label={t("goToSlide", { index: i + 1 })}
          />
        ))}
      </div>
    </div>
  );
}

git add apps/frontend/app/[locale]/page.tsx apps/frontend/components/home/carousel.tsx
git commit -m "feat(homepage): wire carousel to Convex upcoming query"

"use client";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import Link from "next/link";
import { useTranslations } from "next-intl";
 
export default function ProgrammePage() {
  const t = useTranslations("programme");
  const shows = useQuery(api.shows.listActive);
 
  if (!shows) return <div className="p-8 animate-pulse">{t("loading")}</div>;
 
  return (
    <div className="min-h-screen bg-background pt-24 px-4">
      <div className="max-w-6xl mx-auto">
        <h1 className="font-serif text-4xl text-accent mb-8">{t("title")}</h1>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {shows.map((show) => (
            <Link
              key={show._id}
              href={`/shows?slug=${show.slug}`}
              className="group bg-surface border border-border rounded-lg overflow-hidden hover:border-accent transition-colors"
            >
              <div className="aspect-video overflow-hidden">
                <img
                  src={show.gallery?.[0] ?? "/images/placeholder.jpg"}
                  alt={show.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              </div>
              <div className="p-4">
                <h2 className="font-serif text-xl text-white mb-1">{show.title}</h2>
                <p className="text-sm text-gray-400 mb-3">{show.tagline}</p>
                <span className="text-accent text-sm font-medium">{t("viewDates")} →</span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}

git add apps/frontend/app/[locale]/programme/
git commit -m "feat(programme): add show listing page"

"use client";
import { useQueryState } from "nuqs";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { ShowHero } from "~/components/shows/show-hero";
import { OccurrenceList } from "~/components/shows/occurrence-list";
import { notFound } from "next/navigation";
import { Suspense } from "react";
 
export default function ShowsPage() {
  const [slug] = useQueryState("slug", { defaultValue: "" });
 
  const show = useQuery(api.shows.getBySlug, slug ? { slug } : "skip");
 
  if (slug && !show) return notFound();
 
  if (!show) {
    // No slug selected — show programme grid
    return <ShowsGrid />;
  }
 
  return (
    <div className="min-h-screen bg-background pt-24">
      <ShowHero show={show} />
      <div className="max-w-4xl mx-auto px-4 py-8">
        <Suspense fallback={<div className="animate-pulse space-y-3">{Array(5).fill(<div className="h-12 bg-surface rounded" />)}</div>}>
          <OccurrenceList templateId={show._id} />
        </Suspense>
      </div>
    </div>
  );
}

"use client";
import { useState } from "react";
import { useQuery } from "convex/react";
import { api } from "~/convex/_generated/api";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useQueryState } from "nuqs";
import { Id } from "~/convex/_generated/dataModel";
 
export function OccurrenceList({ templateId }: { templateId: Id<"showTemplates"> }) {
  const t = useTranslations("shows.occurrenceList");
  const router = useRouter();
  const [, setStep] = useQueryState("step", { defaultValue: "tickets" });
  const [occurrenceId, setOccurrenceId] = useQueryState("occurrenceId", { defaultValue: "" });
  const [visibleCount, setVisibleCount] = useState(5);
  const occurrences = useQuery(api.occurrences.upcomingByTemplate, {
    templateId,
    limit: visibleCount,
  });
 
  if (!occurrences) {
    return (
      <div className="animate-pulse space-y-3">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="h-12 bg-surface rounded" />
        ))}
      </div>
    );
  }
 
  return (
    <div className="space-y-3">
      {occurrences.map((occ) => {
        const remaining = occ.actualCapacity - occ.bookedCount;
        const badge = remaining > 10 ? "green" : remaining > 0 ? "orange" : "gray";
        const badgeText =
          remaining > 10
            ? t("available")
            : remaining > 0
            ? t("seatsLeft", { count: remaining })
            : t("soldOut");
 
        return (
          <div
            key={occ._id}
            className="flex items-center justify-between p-4 bg-surface border border-border rounded-lg"
          >
            <div className="flex items-center gap-6">
              <span className="text-white font-medium w-16">{occ.dayOfWeek}</span>
              <span className="text-gray-400 w-24">{occ.date}</span>
              <span className="text-gray-300 w-20">{occ.time}</span>
              <span className={`text-${badge}-500 text-sm flex items-center gap-1`}>
                <span className={`w-2 h-2 rounded-full bg-${badge}-500`} />
                {badgeText}
              </span>
            </div>
            <button
              onClick={() => {
                setOccurrenceId(occ._id);
                setStep("tickets");
                router.push(`/booking?occurrenceId=${occ._id}&step=tickets`);
              }}
              disabled={remaining === 0}
              className="px-6 py-2 bg-accent text-black font-bold rounded-lg disabled:opacity-30"
            >
              {t("book")}
            </button>
          </div>
        );
      })}
 
      {occurrences.length >= visibleCount && (
        <button
          onClick={() => setVisibleCount((c) => c + 5)}
          className="w-full py-3 border border-border text-gray-400 hover:text-white hover:border-accent transition-colors"
        >
          {t("seeMoreDates")}
        </button>
      )}
    </div>
  );
}

git add apps/frontend/app/[locale]/shows/
git commit -m "feat(show-detail): add show page with occurrence list"

"use client";
import { createContext, useContext, useReducer, ReactNode } from "react";
import { Id } from "~/convex/_generated/dataModel";
 
export type BookingState = {
  occurrenceId: Id<"showOccurrences"> | null;
  ticketType: "DINNER_THEATRE" | "SHOW_ONLY" | null;
  quantity: number;
  seatIds: string[];
  addOns: Array<{ addOnId: Id<"addOns">; quantity: number }>;
  customerInfo: {
    firstName: string;
    lastName: string;
    email: string;
    phone?: string;
  } | null;
  reservationId: Id<"reservations"> | null;
  bookingExpiresAt: number | null;
  completedSteps: number[];
};
 
type BookingAction =
  | { type: "START_BOOKING"; payload: { occurrenceId: Id<"showOccurrences">; reservationId: Id<"reservations">; bookingExpiresAt: number } }
  | { type: "SELECT_TICKET"; payload: { ticketType: "DINNER_THEATRE" | "SHOW_ONLY"; quantity: number } }
  | { type: "SELECT_SEATS"; payload: { seatIds: string[] } }
  | { type: "SET_ADDONS"; payload: { addOns: BookingState["addOns"] } }
  | { type: "SET_CUSTOMER_INFO"; payload: BookingState["customerInfo"] }
  | { type: "COMPLETE_STEP"; payload: number }
  | { type: "RESET" };
 
const initialState: BookingState = {
  occurrenceId: null,
  ticketType: null,
  quantity: 1,
  seatIds: [],
  addOns: [],
  customerInfo: null,
  reservationId: null,
  bookingExpiresAt: null,
  completedSteps: [],
};
 
function bookingReducer(state: BookingState, action: BookingAction): BookingState {
  switch (action.type) {
    case "START_BOOKING":
      return { ...initialState, ...action.payload };
    case "SELECT_TICKET":
      return { ...state, ...action.payload, completedSteps: [...state.completedSteps, 1] };
    case "SELECT_SEATS":
      return { ...state, seatIds: action.payload.seatIds, completedSteps: [...state.completedSteps, 2] };
    case "SET_ADDONS":
      return { ...state, addOns: action.payload.addOns, completedSteps: [...state.completedSteps, 3] };
    case "SET_CUSTOMER_INFO":
      return { ...state, customerInfo: action.payload, completedSteps: [...state.completedSteps, 4] };
    case "COMPLETE_STEP":
      return { ...state, completedSteps: [...state.completedSteps, 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;
}

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

"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 update = () => {
      const remaining = Math.max(0, bookingExpiresAt - Date.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" });
      }
    };
    update();
    const interval = setInterval(update, 1000);
    return () => clearInterval(interval);
  }, [bookingExpiresAt, dispatch]);
 
  if (!bookingExpiresAt) return null;
 
  return (
    <>
      <div className="fixed top-0 left-0 right-0 z-50 bg-surface/95 border-b border-border px-4 py-2 flex items-center justify-between">
        <span className="text-sm text-gray-400">{t("seatsReserved")}</span>
        <span className="font-mono text-lg text-accent font-bold">{timeLeft}</span>
      </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>
      )}
    </>
  );
}

// apps/frontend/app/[locale]/booking/page.tsx
// Single booking page — nuqs ?step=&occurrenceId=
import { useQueryState } from "nuqs";
import { Suspense } from "react";
import { BookingProvider } from "~/lib/booking-context";
import { StickyCart } from "~/components/booking/sticky-cart";
import { CountdownTimer } from "~/components/booking/countdown-timer";
 
export default function BookingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <BookingProvider>
      <CountdownTimer />
      <div className="flex min-h-screen bg-background pt-12">
        <main className="flex-1 px-4 py-8">
          <Suspense fallback={<div className="animate-pulse">{children}</div>}>
            {children}
          </Suspense>
        </main>
        {/* Desktop sticky sidebar */}
        <aside className="hidden lg:block w-80">
          <StickyCart />
        </aside>
      </div>
    </BookingProvider>
  );
}

git add apps/frontend/app/[locale]/booking/page.tsx
git add apps/frontend/components/booking/countdown-timer.tsx apps/frontend/components/booking/sticky-cart.tsx
git commit -m "feat(booking): add countdown timer and sticky cart"

"use client";
import { useState } from "react";
import { useBooking } from "~/lib/booking-context";
import { useTranslations } from "next-intl";
 
const ROWS = ["A", "B", "C", "D"];
const SEATS_PER_ROW = 8;
 
export function SeatSelector() {
  const t = useTranslations("booking.seats");
  const [selected, setSelected] = useState<string[]>([]);
  // Fetch taken seats from Convex: api.seats.getTakenSeats({ occurrenceId })
 
  const toggle = (seatId: string) => {
    setSelected((prev) =>
      prev.includes(seatId)
        ? prev.filter((s) => s !== seatId)
        : [...prev, seatId]
    );
  };
 
  return (
    <div className="space-y-4">
      <div className="flex justify-center mb-4">
        <div className="w-16 h-2 bg-accent rounded-full" />
      </div>
      {ROWS.map((row) => (
        <div key={row} className="flex gap-2 justify-center">
          <span className="w-8 flex items-center justify-center text-accent font-bold">{t("rowLabel", { row })}</span>
          {Array.from({ length: SEATS_PER_ROW }, (_, i) => {
            const seatId = `${row}${i + 1}`;
            const isTaken = takenSeats.includes(seatId);
            const isSelected = selected.includes(seatId);
            return (
              <button
                key={seatId}
                onClick={() => !isTaken && toggle(seatId)}
                disabled={isTaken}
                className={`w-10 h-10 rounded-t-lg font-bold text-sm transition-colors ${
                  isTaken
                    ? "bg-gray-700 text-gray-500 cursor-not-allowed"
                    : isSelected
                    ? "bg-accent text-black"
                    : "bg-surface border border-accent text-accent hover:bg-accent/20"
                }`}
              >
                {i + 1}
              </button>
            );
          })}
        </div>
      ))}
      {/* Stage label */}
      <div className="flex justify-center mt-6">
        <span className="text-accent/60 text-sm font-serif">{t("stage")}</span>
      </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;
}

import { z } from "zod";
import { Id } from "~/convex/_generated/dataModel";
 
// 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),
});
 
// 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(
    z.object({
      addOnId: z.string(),
      quantity: z.number().int().min(0),
    }),
  ),
  customerInfo: z
    .object({
      firstName: z.string().min(1).max(50),
      lastName: z.string().min(1).max(50),
      email: z.string().email(),
      phone: z.string().optional(),
    })
    .nullable(),
  reservationId: z.string().nullable(),
  bookingExpiresAt: z.number().nullable(),
  completedSteps: z.array(z.number()),
});
 
// 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" }),
  }),
});
 
// Show slug param
const ShowSlugSchema = z.object({
  slug: z.string().min(1),
});

// 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",
 
  // Session errors
  SESSION_EXPIRED: "SESSION_EXPIRED",
} as const;
 
export type BookingErrorCode =
  (typeof BOOKING_ERROR_CODES)[keyof typeof BOOKING_ERROR_CODES];

// List view — live updates when any occurrence changes
const occurrences = useQuery(api.occurrences.upcomingByTemplate, {
  templateId,
  limit: visibleCount,
});
 
// Individual item — live updates when specific reservation changes
const reservation = useQuery(
  api.reservations.getById,
  reservationId ? { reservationId } : "skip",
);
 
// Availability — real-time seat count
const availability = useQuery(
  api.occurrences.getAvailability,
  occurrenceId ? { occurrenceId } : "skip",
);
 
// Upcoming shows for carousel — live updates when shows are added/modified
const upcoming = useQuery(api.shows.upcoming, { limit: 8 });
 
// Active shows for programme page
const shows = useQuery(api.shows.listActive);

{
  "homepage": {
    "carousel": {
      "fromPrice": "From {price} VND",
      "previousSlide": "Previous slide",
      "nextSlide": "Next slide",
      "goToSlide": "Go to slide {index}"
    }
  },
  "programme": {
    "title": "Our Shows",
    "viewDates": "View dates & book",
    "loading": "Loading..."
  },
  "shows": {
    "occurrenceList": {
      "available": "Available",
      "seatsLeft": "{count} seats left",
      "soldOut": "Sold out",
      "book": "Book",
      "seeMoreDates": "See more dates"
    }
  },
  "booking": {
    "countdown": {
      "seatsReserved": "Seats reserved for",
      "expiredTitle": "Reservation Expired",
      "expiredMessage": "Your seats have been released. Please start your booking again.",
      "returnHome": "Return to Homepage"
    },
    "cart": {
      "title": "Your Booking",
      "dinnerTheatre": "Dinner Theatre",
      "showOnly": "Show Only",
      "total": "Total",
      "surcharge": "Surcharge",
      "smallPartySurcharge": "Small party surcharge"
    },
    "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": "Please select {count} seat(s)",
      "selectedSeats": "Selected seats",
      "selectMore": "Select {count} more seat(s)",
      "back": "Back",
      "continue": "Continue to Add-ons",
      "stage": "STAGE",
      "rowLabel": "Row {row}",
      "loading": "Loading seat map...",
      "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..."
    },
    "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("GJ-E2E-1.1: Guest sees homepage carousel with upcoming shows");
test("GJ-E2E-1.2: Carousel auto-advances to next slide after 6 seconds");
test("GJ-E2E-1.3: Guest can pause carousel by hovering over slide");
test("GJ-E2E-1.4: Guest can navigate carousel using arrow buttons");
test("GJ-E2E-1.5: Guest can navigate carousel by clicking dot indicators");
test("GJ-E2E-2.1: Guest can view all active shows on programme page");
test("GJ-E2E-2.2: Show cards link to correct show detail page");
test("GJ-E2E-3.1: Guest can view show detail page with video and gallery");
test("GJ-E2E-3.2: Guest can see occurrence list with availability badges");
test("GJ-E2E-3.3: Book button navigates guest to booking flow");
test("GJ-E2E-4.1: Guest can select DINNER_THEATRE ticket type");
test("GJ-E2E-4.2: Guest can select SHOW_ONLY ticket type when enabled");
test("GJ-E2E-4.3: Quantity selector respects maximum availability");
test(
  "GJ-E2E-4.4: Guest sees 10-minute countdown timer after selecting tickets",
);
test("GJ-E2E-4.5: Countdown timer shows expired modal and redirects on expiry");
test("GJ-E2E-5.1: Guest can select seats on seat map");
test("GJ-E2E-5.2: Guest cannot select already-occupied seats");
test("GJ-E2E-5.3: Guest cannot select more seats than ticket quantity");
test("GJ-E2E-5.4: Selected seats display in summary");
test("GJ-E2E-6.1: Guest can skip add-ons and continue to checkout");
test("GJ-E2E-6.2: Guest can add add-ons with quantity");
test("GJ-E2E-7.1: Guest can fill checkout form and submit");
test("GJ-E2E-7.2: Guest sees sticky cart with correct surcharges");
test("GJ-E2E-7.3: Guest is redirected to OnePay on payment submission");
test("GJ-E2E-8.1: Guest sees confirmation page after successful payment");
test("GJ-E2E-8.2: Guest sees QR code and booking details on confirmation");

it("GJ-1.1: Homepage carousel renders without crashing when no shows exist");
it("GJ-1.2: Carousel displays loading skeleton before data loads");
it("GJ-1.3: Carousel shows correct number of slides based on data");
it("GJ-1.4: Arrow buttons change current slide index");
it("GJ-1.5: Dot indicators show correct active state");
it("GJ-2.1: Programme page shows loading skeleton before data loads");
it("GJ-2.2: Programme grid displays all active shows");
it("GJ-2.3: Show cards have correct hover effect");
it("GJ-3.1: Show detail page shows programme grid when no slug provided");
it("GJ-3.2: Occurrence list shows availability badges correctly");
it("GJ-3.3: Sold out occurrences have disabled book button");
it("GJ-4.1: Ticket selector renders both ticket types when SHOW_ONLY enabled");
it("GJ-4.2: Ticket selector hides SHOW_ONLY when disabled");
it("GJ-4.3: Quantity cannot exceed remaining availability");
it("GJ-4.4: Countdown timer displays correct time format MM:SS");
it("GJ-4.5: Countdown timer dispatches RESET action on expiry");
it("GJ-5.1: Seat grid renders all 32 seats");
it("GJ-5.2: Available seats are clickable");
it("GJ-5.3: Occupied seats show disabled styling");
it("GJ-5.4: Selected seats show selected styling");
it("GJ-6.1: Add-on cards display correct pricing");
it("GJ-6.2: Skip button allows guest to proceed without add-ons");
it("GJ-7.1: Checkout form validates required fields");
it("GJ-7.2: Checkout form validates email format");
it("GJ-7.3: Terms checkbox must be checked to submit");
it("GJ-8.1: Confirmation shows success state after payment");
it("GJ-8.2: Confirmation shows QR code when available");

it("GJ-ORD-1.1: Guest can create pending reservation with valid data");
it("GJ-ORD-1.2: Reservation creation fails for non-existent occurrence");
it("GJ-ORD-1.3: Reservation creation fails for invalid ticket type");
it("GJ-ORD-1.4: Reservation creation fails when quantity exceeds availability");
it("GJ-ORD-2.1: Guest can hold seats with valid reservation");
it("GJ-ORD-2.2: Seat hold fails for non-pending reservation");
it("GJ-ORD-2.3: Previously held seats are released when new seats are held");
it("GJ-ORD-3.1: Payment confirmation succeeds for valid pending reservation");
it("GJ-ORD-3.2: Payment confirmation fails for already-paid reservation");
it("GJ-ORD-4.1: Small party surcharge applies for groups under 15");
it("GJ-ORD-4.2: Small party surcharge does not apply for groups of 15 or more");
it("GJ-ORD-5.1: Day-of-week surcharge applies correctly for Saturday");
it("GJ-ORD-5.2: Day-of-week surcharge does not apply for Wednesday");