Table Experience

Source: apps/frontend/app/[locale]/audience/page.tsx
Doc Status: Excellent | ✓ Clear summary | ✓ Easy to read | ✓ Matches code | ✓ Good structure | ✓ Professional look | ✓ Visual components

Why This Matters

Once a guest is seated, the evening shifts from anticipation to experience. They have a QR code at their table, and scanning it unlocks a mobile companion that puts everything at their fingertips — the menu, tonight’s photos, the lucky wheel, the review challenge. No flagging down servers, no leaving the table. The table becomes an entertainment hub.

How It Works

1

Scan the QR Code at Your Table

Guest opens their phone camera and scans the QR code positioned at their table. The code contains tableId and profileId parameters that route to /audience?tableId=X&profileId=Y. If they try to access the page without scanning first, they see an error asking them to scan at their table.
2

Confirm Your Table

After scanning, the page loads and the header immediately confirms which table they’re seated at — a gold “Table seated” badge appears. They know they’re in the right place.
3

See What's Coming Up

If there’s an upcoming show scheduled, a notification banner appears at the top showing the show title, date, and time. A “Book Now” button lets them reserve tickets for a future event without leaving the current experience.
4

Browse the Five Tabs

The main content area has five tabs. Guests tap to switch between them:
TabWhat You’ll Find
MenuFood and beverage menu (only if you have an open order)
GuestsWho’s here tonight — see other guests checked in
PhotosGuest photos from tonight’s experience
SpinLucky wheel with prizes (only if you have an open order)
ReviewGoogle review challenge and rewards
5

Play Minigames

If they have an active order, guests can spin the lucky wheel to win prizes like free drinks or discounts. Prizes get added directly to their bill. They can also upload photos to appear on the Photo Wall and see who else is at the venue tonight.
6

Leave a Review

The Review tab prompts guests to leave a 5-star Google review. They submit a screenshot as proof, and once approved by staff, a reward gets added to their bill.

Table Experience Flow


Tab Access Rules

Some tabs require an active order to use:
  • Menu — Requires active order (staff or guest submitted)
  • Guests — Always available
  • Photos — Always available
  • Spin — Requires active order (prizes go to your bill)
  • Review — Always available

Booking Without Leaving

The page includes a BookingModal that opens when guests tap “Book Now” on an upcoming show notification. They can reserve future shows without navigating away from the Table Experience.

Technical Details

Route

/audience?tableId=<id>&profileId=<id>

Query Parameters

ParameterTypeRequiredDescription
tableIdstringYesUnique table identifier
profileIdstringYesGuest profile identifier
tabstringNoActive tab (default: menu)

Tabs State

Uses nuqs for URL-based tab state:
const [activeTab, setActiveTab] = useQueryState("tab", {
  defaultValue: "menu",
  serialize: (v) => v,
  parse: (v) => v as Tab,
});

Components

ComponentFilePurpose
MenuGridcomponents/table/menu-grid.tsxFood/beverage menu display
GuestWallContentLoadercomponents/minigames/guest-wall.tsxTonight’s guests feed
PhotoWallContentcomponents/minigames/photo-wall.tsxGuest photos gallery
SpinWheelContentcomponents/minigames/spin-wheel.tsxLucky wheel minigame
GoogleReviewContentcomponents/minigames/google-review.tsxReview challenge UI
BookingModalcomponents/booking/booking-modal.tsxInline booking for future shows

Convex Queries

QueryPurpose
domains.payments.getOpenOrderByTableFetch active order for the table
domains.events.listUpcomingGet next upcoming show

Error States

If tableId is missing or invalid, a full-page error displays:
  • Warning icon
  • “Invalid QR Code” heading
  • Explanation to scan the QR code at their table

Tab Details

TabComponentPurpose
MenuMenuGridFull food and beverage menu (requires active order)
GuestsGuestWallContentLoaderLive feed of checked-in profiles
PhotosPhotoWallContentGuest-uploaded photos from tonight
SpinSpinWheelContentLucky wheel minigame (requires active order)
ReviewGoogleReviewContentGoogle review challenge and rewards

See Also

Photo Wall

Public guest photo gallery with auto-rotation

Lucky Spin

Spin wheel minigame details

Review Challenge

Google review reward system

Booking

How to reserve tickets