Customize Storefront for Ticket Booking

In this tutorial, you'll customize the Next.js Starter Storefront based on the Ticket Booking system you implemented in the backend.

Summary#

In this tutorial, you'll customize the Next.js Starter Storefront to support ticket booking:

1. Product Page: Allow customers to choose a show date, select seats from a seating layout, and add tickets to the cart.
2. Cart Page: Display selected tickets with their seat numbers and show dates, and remove quantity controls for ticket items.
3. Checkout Page: Remove the shipping steps and complete the cart using the custom complete cart API route you created earlier.
4. Order Confirmation Page: Display ticket details for ticket items.

Terminal
❯cd ../medusa-ticketing-storefront # change based on your project name

Step 1: Ticket Product Utilities#

Before you customize the storefront, you'll create some types and utility functions that you'll use in your customizations.

Create the file src/lib/util/ticket-product.ts with the following content:

src/lib/util/ticket-product.ts
1import { HttpTypes } from "@medusajs/types"2
3export interface TicketProductAvailability {4  date: string5  row_types: {6    row_type: string7    total_seats: number8    available_seats: number9    sold_out: boolean10  }[]11  sold_out: boolean12}13
14export interface TicketProduct {15  id: string16  product_id: string17  venue: {18    id: string19    name: string20    address: string21    rows: Array<{22      id: string23      row_number: string24      row_type: string25      seat_count: number26    }>27  }28  dates: string[]29}30
31export interface TicketProductAvailabilityData {32  ticket_product: TicketProduct33  availability: TicketProductAvailability[]34}35
36export interface TicketProductSeatsData {37  venue: {38    id: string39    name: string40    address: string41    rows: Array<{42      id: string43      row_number: string44      row_type: string45      seat_count: number46    }>47  }48  date: string49  seat_map: {50    row_number: string51    row_type: string52    seats: {53      number: string54      is_purchased: boolean55      variant_id: string | null56    }[]57  }[]58}59
60/**61 * Check if a product is a ticket product by looking for the ticket_product property62 */63export function isTicketProduct(product: HttpTypes.StoreProduct): boolean {64  return !!(product as any).ticket_product65}

You define types for the ticket product availability and seating layout API responses, as well as a utility function to check if a product is a ticket product.

Step 2: Support Adding Items to Cart with Metadata#

Next, you'll add support for adding items to the cart with metadata. This is necessary because when adding tickets to the cart, you need to include metadata such as the seat number and show date.

This functionality is supported by the Medusa APIs, but you need to update the addToCart function in the storefront to accept and send metadata.

In src/lib/data/cart.ts, find the addToCart function and update its object parameter to include an optional metadata property:

src/lib/data/cart.ts
1export async function addToCart({2  // ...3  metadata,4}: {5  // ...6  metadata?: Record<string, any>7}) {8  // ...9}

Then, find the sdk.store.cart.createLineItem method usage and pass the metadata property to it:

src/lib/data/cart.ts
1await sdk.store.cart2  .createLineItem(3    cart.id,4    {5      // ...6      metadata,7    }8    // ...9  )

Now, the addToCart function accepts an optional metadata property and sends it to the Medusa backend when creating a line item.

Step 3: Customize Product Page#

Next, you'll customize the product page. This includes:

• Creating a component that displays a calendar to choose a show date, with available dates determined by the availability API route you created earlier.
• Creating a component that displays a seat chart in a modal to select seats, with purchased seats determined by the seating layout API route you created earlier.
• Customizing the product page to use the above components.

Date Selector Component#

The date selector component will fetch the available dates for a ticket product using the API route you created in the backend part of the tutorial. Before creating the component, you'll add a server function to fetch the available dates.

Create the file src/lib/data/ticket-products.ts with the following content:

src/lib/data/ticket-products.ts
1"use server"2
3import { sdk } from "@lib/config"4import { getAuthHeaders, getCacheOptions } from "./cookies"5import { TicketProductAvailabilityData } from "@lib/util/ticket-product"6
7export const getTicketProductAvailability = async (8  productId: string9): Promise<TicketProductAvailabilityData> => {10  const headers = {11    ...(await getAuthHeaders()),12  }13
14  const next = {15    ...(await getCacheOptions("ticket-products")),16  }17
18  return sdk.client19    .fetch<TicketProductAvailabilityData>(20      `/store/ticket-products/${productId}/availability`,21      {22        method: "GET",23        headers,24        next,25        cache: "no-store", // Always fetch fresh data for availability26      }27    )28    .then((data) => data)29}

You create a server function getTicketProductAvailability that fetches the available dates for a ticket product using the /store/ticket-products/{id}/availability API route.

Next, you'll create the date selector component. It will show an input to select the number of tickets and a calendar to select a date.

Create the file src/modules/products/components/ticket-product-layout/date-quantity-selection.tsx with the following content:

src/modules/products/components/ticket-product-layout/date-quantity-selection.tsx
Show Imports
8import { useState, useEffect } from "react"9
10type TicketDateSelectionProps = {11  product: HttpTypes.StoreProduct12  onDateSelect: (date: string, nbOfTickets: number) => void13  disabled?: boolean14}15
16export default function TicketDateSelection({17  product,18  onDateSelect,19  disabled = false,20}: TicketDateSelectionProps) {21  const [nbOfTickets, setNbOfTickets] = useState(1)22  const [selectedDate, setSelectedDate] = useState<Date | null>(null)23  const [availability, setAvailability] = useState<TicketProductAvailability[]>([])24  const [isLoading, setIsLoading] = useState(false)25
26  // Load availability data on mount27  useEffect(() => {28    const loadAvailability = async () => {29      setIsLoading(true)30      try {31        const data = await getTicketProductAvailability(product.id)32        setAvailability(data.availability)33      } catch (error) {34        toast.error("Failed to load ticket availability: " + error)35      } finally {36        setIsLoading(false)37      }38    }39
40    loadAvailability()41  }, [product.id])42
43  const getTotalAvailableSeats = (dateAvailability: TicketProductAvailability) => {44    return dateAvailability.row_types.reduce(45      (sum, rowType) => sum + rowType.available_seats, 046    )47  }48
49  const getFilteredAvailability = (quantity: number) => {50    return availability.filter((avail) => getTotalAvailableSeats(avail) >= quantity)51  }52
53  const filteredAvailability = getFilteredAvailability(nbOfTickets)54
55  const dateAsStr = (date: Date) => {56    return `${57      date.getFullYear()58    }-${59      String(date.getMonth() + 1).padStart(2, "0")60    }-${String(date.getDate()).padStart(2, "0")}`61  }62
63  const isDateUnavailable = (date: Date) => {64    const dateString = dateAsStr(date)65    return !filteredAvailability.some((avail) => avail.date === dateString)66  }67
68  const handleDateChange = (date: Date | null) => {69    setSelectedDate(date)70  }71
72  const handlePickSeats = () => {73    if (!selectedDate) {74      toast.error("Please select a date")75      return76    }77    78    const dateString = dateAsStr(selectedDate)79    onDateSelect(dateString, nbOfTickets)80  }81
82  // TODO render date selector83}

The TicketDateSelection component accepts the following props:

• product: The Medusa product to select a date for.
• onDateSelect: A callback function that is called when the date and number of tickets are selected.
• disabled: A boolean to disable the component.

In the component, you define state variables to manage the number of tickets, the selected date, the availability data, and the loading state. You also load the availability data when the component mounts.

In addition, you define the following functions:

• getTotalAvailableSeats: Calculates the total available seats for a given date availability.
• getFilteredAvailability: Filters the availability data based on the number of tickets requested.
• dateAsStr: Converts a Date object to a string in the format YYYY-MM-DD.
• isDateUnavailable: Checks if a date is unavailable based on the filtered availability.
• handleDateChange: Updates the selected date when the user selects a date from the calendar.
• handlePickSeats: Calls the onDateSelect callback with the selected date and number of tickets, or shows an error if no date is selected.

Next, you'll render the date selector form. Replace the TODO with the following:

src/modules/products/components/ticket-product-layout/date-quantity-selection.tsx
1return (2  <div className="bg-ui-bg-base">3    <h3 className="txt-large text-center mb-4">Select Show Date</h3>4    {isLoading && (5      <div className="flex flex-col gap-y-4">6        <div className="h-6 bg-ui-bg-subtle rounded animate-pulse w-32 mx-auto" />7        <div className="h-10 bg-ui-bg-subtle rounded animate-pulse w-48 mx-auto" />8        <div className="h-6 bg-ui-bg-subtle rounded animate-pulse w-40 mx-auto" />9      </div>10    )}11    {!isLoading && (12      <div className="flex flex-col gap-y-4">13        {/* Number of tickets selection */}14        <div className="flex justify-center">15          <div className="flex flex-col gap-y-2">16            <Label htmlFor="nbOfTickets" className="text-ui-fg-subtle txt-compact-small">Number of Tickets</Label>17            <div className="flex items-center justify-between rounded-md">18              <IconButton19                onClick={() => setNbOfTickets(Math.max(1, nbOfTickets - 1))}20                disabled={disabled || nbOfTickets <= 1}21                variant="transparent"22              >23                <Minus />24              </IconButton>25              {nbOfTickets}26              <IconButton27                onClick={() => setNbOfTickets(Math.min(10, nbOfTickets + 1))}28                disabled={disabled || nbOfTickets >= 10}29                variant="transparent"30              >31                <Plus />32              </IconButton>33            </div>34          </div>35        </div>36
37        {/* Calendar */}38        <div className="flex justify-center">39          <Calendar40            onChange={handleDateChange}41            minValue={filteredAvailability.length > 0 ? 42              new Date(filteredAvailability[0].date) : undefined43            }44            maxValue={filteredAvailability.length > 0 ? 45              new Date(filteredAvailability[filteredAvailability.length - 1].date) : undefined46            }47            isDateUnavailable={isDateUnavailable}48          />49        </div>50
51        {/* Available dates info */}52        {filteredAvailability.length > 0 && (53          <p className="txt-small text-ui-fg-subtle text-center txt-compact-small">54            {filteredAvailability.length} show{filteredAvailability.length !== 1 ? "s" : ""} available for {nbOfTickets} ticket{nbOfTickets !== 1 ? "s" : ""}55          </p>56        )}57
58        {/* Pick Seats Button */}59        <Button60          onClick={handlePickSeats}61          disabled={disabled || !selectedDate || filteredAvailability.length === 0}62          variant="primary"63          className="w-full"64        >65          Pick Seats66        </Button>67      </div>68    )}69  </div>70)

You display a quantity selector to choose the number of tickets, which affects the available dates shown in the calendar based on whether they have enough available seats.

You also display a calendar to select a show date, and a button to pick seats that calls the onDateSelect callback with the selected date and number of tickets.

Seat Selector Component#

The seat selector component will fetch the seating layout for a venue and date using the API route you created in the backend part of the tutorial. Before creating the component, you'll add a server function to fetch the seating layout.

In src/lib/data/ticket-products.ts, add the following import at the top of the file:

src/lib/data/ticket-products.ts
import { TicketProductSeatsData } from "@lib/util/ticket-product"

Then, add the following function to the file:

src/lib/data/ticket-products.ts
1export const getTicketProductSeats = async (2  productId: string,3  date: string4): Promise<TicketProductSeatsData> => {5  const headers = {6    ...(await getAuthHeaders()),7  }8
9  const next = {10    ...(await getCacheOptions("ticket-products")),11  }12
13  return sdk.client14    .fetch<TicketProductSeatsData>(15      `/store/ticket-products/${productId}/seats`,16      {17        method: "GET",18        query: {19          date,20        },21        headers,22        next,23        cache: "no-store", // Always fetch fresh data for seats24      }25    )26    .then((data) => data)27}

You create a server function getTicketProductSeats that fetches the seating layout for a ticket product and date using the /store/ticket-products/{id}/seats API route.

Next, you'll create the seat selector component. It will show a modal with a seat chart to select seats, and a button to add the seats to the cart and proceed to checkout.

You'll first create the seat chart component that displays the seating layout and allows selecting seats. Create the file src/modules/products/components/ticket-product-layout/seat-selection.tsx with the following content:

src/modules/products/components/ticket-product-layout/seat-selection.tsx
Show Imports
6import { convertToLocale } from "../../../../lib/util/money"7
8export type SelectedSeat = {9  seatNumber: string10  rowNumber: string11  rowType: string12  variantId: string13  date: string14  venueRowId: string15}16
17type SeatSelectionProps = {18  seatData: TicketProductSeatsData19  selectedSeats: SelectedSeat[]20  onSeatSelect: (seat: SelectedSeat) => void21  disabled?: boolean22  product: HttpTypes.StoreProduct23  maxSeats: number24}25
26export default function SeatSelection({27  seatData,28  selectedSeats,29  onSeatSelect,30  disabled = false,31  product,32  maxSeats,33}: SeatSelectionProps) {34  const getSeatStatus = (rowNumber: string, seatNumber: string) => {35    const seat = seatData.seat_map36      .find((row) => row.row_number === rowNumber)37      ?.seats.find((s) => s.number === seatNumber)38
39    if (!seat) {return "unavailable"}40
41    if (seat.is_purchased) {return "purchased"}42    43    const isSelected = selectedSeats.some((s) => 44      s.seatNumber === seatNumber && s.rowNumber === rowNumber && s.date === seatData.date45    )46    47    if (isSelected) {return "selected"}48    49    return "available"50  }51
52  const getSeatColor = (status: string) => {53    switch (status) {54      case "purchased":55        return "bg-ui-tag-neutral-bg text-ui-tag-neutral-text cursor-not-allowed"56      case "selected":57        return "bg-ui-tag-blue-bg text-ui-tag-blue-text"58      case "available":59        return "bg-ui-tag-green-bg text-ui-tag-green-text cursor-pointer hover:bg-ui-tag-green-bg-hover"60      default:61        return "bg-ui-tag-neutral-bg text-ui-tag-neutral-text cursor-not-allowed"62    }63  }64
65  const formatRowType = (rowType: string) => {66    switch (rowType.toLowerCase()) {67      case "vip":68        return "VIP"69      default:70        return rowType.charAt(0).toUpperCase() + rowType.slice(1).toLowerCase()71    }72  }73
74  // TODO handle seat selection75}

The SeatSelection component accepts the following props:

• seatData: The seating layout data for the venue and date retrieved from the API.
• selectedSeats: An array of currently selected seats.
• onSeatSelect: A callback function that is called when a seat is selected.
• disabled: A boolean to disable seat selection.
• product: The Medusa product to select seats for.
• maxSeats: The maximum number of seats that can be selected.

In the component, you define the following functions:

• getSeatStatus: Determines the status of a seat (purchased, selected, available, or unavailable) based on the seating data and selected seats.
• getSeatColor: Returns the appropriate CSS classes for a seat based on its status.
• formatRowType: Formats the row type string for display.

Next, you'll add a function to handle seat selection. Replace the TODO with the following:

src/modules/products/components/ticket-product-layout/seat-selection.tsx
1const handleSeatClick = (rowNumber: string, seatNumber: string, rowType: string) => {2  if (disabled) {return}3
4  const seat = seatData.seat_map5    .find((row) => row.row_number === rowNumber)6    ?.seats.find((s) => s.number === seatNumber)7
8  if (!seat || seat.is_purchased || !seat.variant_id) {return}9
10  // Check if seat is already selected11  const isAlreadySelected = selectedSeats.some(12    (selectedSeat) => selectedSeat.seatNumber === seatNumber && selectedSeat.rowNumber === rowNumber13  )14
15  if (isAlreadySelected) {16    // Unselect the seat17    onSeatSelect({18      seatNumber,19      rowNumber,20      rowType,21      variantId: seat.variant_id,22      date: seatData.date,23      venueRowId: seatData.venue.rows.find((row) => row.row_number === rowNumber)?.id as string,24    })25    return26  }27
28  // Check if we've reached the maximum number of seats29  if (selectedSeats.length >= maxSeats) {30    return31  }32
33  // Select the seat34  onSeatSelect({35    seatNumber,36    rowNumber,37    rowType,38    variantId: seat.variant_id,39    date: seatData.date,40    venueRowId: seatData.venue.rows.find((row) => row.row_number === rowNumber)?.id as string,41  })42}43
44// TODO render seat chart

You define the handleSeatClick function that handles the logic for toggling seat selection. It checks if the seat is purchasable, if it's already selected, and if the maximum number of seats has been reached before calling the onSeatSelect callback.

Finally, you'll render the seat chart. Replace the TODO with the following:

src/modules/products/components/ticket-product-layout/seat-selection.tsx
1return (2  <TooltipProvider>3    <div className="flex flex-col gap-y-4">4      {/* Theater Layout */}5      <div className="bg-gradient-to-b from-ui-bg-subtle to-ui-bg-subtle rounded-lg p-4 shadow-elevation-card-rest overflow-y-auto max-h-[500px]">6        {/* Stage Area */}7        <div className="text-center mb-6">8          <div className="bg-gradient-to-b from-ui-fg-base to-ui-fg-base text-white px-8 py-4 rounded-lg shadow-xl relative">9            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent rounded-lg"></div>10            <div className="relative">11              <div className="txt-large-plus mb-1">STAGE</div>12              <div className="txt-small text-ui-alpha-250">Performance Area</div>13            </div>14          </div>15        </div>16
17        {/* Seating Area */}18        <div>19          <div className="space-y-4">20            {seatData.seat_map.map((row, index) => (21              <div key={row.row_number} className="flex items-baseline justify-center gap-x-3">22                {/* Row label */}23                <div className="txt-small text-ui-fg-subtle">24                  {row.row_number}25                </div>26
27                {/* Seats */}28                <div className="flex gap-x-1 gap-y-1 flex-wrap justify-center">29                  {row.seats.map((seat) => {30                    const status = getSeatStatus(row.row_number, seat.number)31                    const variant = product.variants?.find((v) => v.id === seat.variant_id)32                    const seatPrice = variant?.calculated_price?.calculated_amount || 033                    const currencyCode = variant?.calculated_price?.currency_code || "USD"34                    35                    const tooltipContent = status === "purchased" 36                      ? "Sold" 37                      : status === "selected"38                      ? "Selected"39                      : seatPrice > 040                      ? `Seat ${seat.number} - ${formatRowType(row.row_type)} - ${convertToLocale({41                          amount: seatPrice,42                          currency_code: currencyCode,43                          minimumFractionDigits: 0,44                        })}`45                      : `Seat ${seat.number} - ${formatRowType(row.row_type)}`46
47                    return (48                      <Tooltip key={seat.number} content={tooltipContent} className="z-[76]">49                        <button50                          onClick={() => handleSeatClick(row.row_number, seat.number, row.row_type)}51                          disabled={disabled || status === "purchased" || status === "unavailable" || (status === "available" && selectedSeats.length >= maxSeats)}52                          className={`53                            w-8 h-8 rounded-sm txt-xsmall transition-all duration-200 flex items-center justify-center54                            ${getSeatColor(status)}55                            ${status === "purchased" ? "cursor-not-allowed" : "cursor-pointer"}56                            ${(status === "available" && selectedSeats.length >= maxSeats) || status === "purchased" ? "opacity-50 cursor-not-allowed" : ""}57                            ${status === "available" ? "shadow-sm" : ""}58                            ${status === "selected" ? "border border-ui-border-interactive" : ""}59                          `}60                        >61                          {seat.number}62                        </button>63                      </Tooltip>64                    )65                  })}66                </div>67              </div>68            ))}69          </div>70        </div>71      </div>72
73      {/* Legend */}74      <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 txt-small">75        <div className="flex items-center gap-x-2">76          <div className="w-5 h-5 bg-ui-tag-green-bg rounded"></div>77          <span className="txt-small-plus">Available</span>78        </div>79        <div className="flex items-center gap-x-2">80          <div className="w-5 h-5 bg-ui-tag-blue-bg rounded"></div>81          <span className="txt-small-plus">Selected</span>82        </div>83        <div className="flex items-center gap-x-2">84          <div className="w-5 h-5 bg-ui-tag-neutral-bg rounded"></div>85          <span className="txt-small-plus">Sold</span>86        </div>87      </div>88    </div>89  </TooltipProvider>90)

You display the seating layout with rows and seats. Each seat is a button that shows its status (available, selected, purchased) with different colors and tooltips. You also include a legend to explain the seat colors.

Next, you'll create the seat selector modal component that renders the SeatSelection component inside a modal. Create the file src/modules/products/components/ticket-product-layout/seat-selection-modal.tsx with the following content:

src/modules/products/components/ticket-product-layout/seat-selection-modal.tsx
Show Imports
12import Modal from "../../../common/components/modal"13
14type SeatSelectionModalProps = {15  product: HttpTypes.StoreProduct16  selectedDate: string17  selectedQuantity: number18  isOpen: boolean19  onClose: () => void20  disabled?: boolean21}22
23export default function SeatSelectionModal({24  product,25  selectedDate,26  selectedQuantity,27  isOpen,28  onClose,29  disabled = false,30}: SeatSelectionModalProps) {31  const [selectedSeats, setSelectedSeats] = useState<SelectedSeat[]>([])32  const [seatData, setSeatData] = useState<TicketProductSeatsData | null>(null)33  const [isAddingToCart, setIsAddingToCart] = useState(false)34  35  const countryCode = useParams().countryCode as string36  const router = useRouter()37
38  const formatDate = (dateString: string) => {39    const date = new Date(dateString)40    return date.toLocaleDateString("en-US", {41      weekday: "long",42      year: "numeric",43      month: "long",44      day: "numeric",45    })46  }47
48  const totalPrice = useMemo(() => {49    return selectedSeats.reduce((total, seat) => {50      const variant = product.variants?.find((v) => v.id === seat.variantId)51      return total + (variant?.calculated_price?.calculated_amount || 0)52    }, 0)53  }, [selectedSeats, product.variants])54
55  // Load seat data when modal opens56  useEffect(() => {57    if (!isOpen || !selectedDate) {58      return59    }60    setSelectedSeats([])61    setSeatData(null)62
63    const loadSeatData = async () => {64      try {65        const data = await getTicketProductSeats(product.id, selectedDate)66        setSeatData(data)67      } catch (error) {68        toast.error("Failed to load seat data: " + error)69      }70    }71
72    loadSeatData()73  }, [isOpen, selectedDate, product.id])74
75  // TODO handle seat selection and cart addition76}

The SeatSelectionModal component accepts the following props:

• product: The Medusa product to select seats for.
• selectedDate: The selected show date.
• selectedQuantity: The number of tickets to select.
• isOpen: A boolean to control the visibility of the modal.
• onClose: A callback function that is called when the modal is closed.
• disabled: A boolean to disable seat selection.

In the component, you define state and memo variables to manage the selected seats, the seating data, the loading state for the cart addition action, and the total price for the seat selection. You also load the seating data when the modal opens.

Next, you'll add functions to handle seat selection and adding seats to the cart. Replace the TODO with the following:

src/modules/products/components/ticket-product-layout/seat-selection-modal.tsx
1const handleSeatSelect = (seat: SelectedSeat) => {2  setSelectedSeats((prev) => {3    const existingIndex = prev.findIndex(4      (s) => s.seatNumber === seat.seatNumber && s.rowNumber === seat.rowNumber5    )6    7    if (existingIndex >= 0) {8      // Remove seat if already selected9      return prev.filter((_, index) => index !== existingIndex)10    } else {11      // Add seat if not selected and under limit12      if (prev.length < selectedQuantity) {13        return [...prev, seat]14      }15      return prev16    }17  })18}19
20const handleAddToCart = async () => {21  if (selectedSeats.length === 0) {22    toast.error("Please select at least one seat")23    return24  }25
26  if (selectedSeats.length !== selectedQuantity) {27    toast.error(`Please select exactly ${selectedQuantity} seat${selectedQuantity !== 1 ? "s" : ""}`)28    return29  }30
31  setIsAddingToCart(true)32  try {33    // Add each seat as a separate cart item34    for (const seat of selectedSeats) {35      await addToCart({36        variantId: seat.variantId,37        quantity: 1,38        countryCode,39        metadata: {40          seat_number: seat.seatNumber,41          row_number: seat.rowNumber,42          show_date: seat.date,43          venue_row_id: seat.venueRowId,44        },45      })46    }47
48    toast.success(`Added ${selectedSeats.length} ticket${selectedSeats.length !== 1 ? "s" : ""} to cart`)49    50    // Redirect to checkout51    router.push(`/${countryCode}/checkout?step=address`)52  } catch (error) {53    toast.error("Failed to add tickets to cart: " + error)54  } finally {55    setIsAddingToCart(false)56  }57}58
59// TODO render modal with seat selection