Seat Chart Preview

VIP

Premium

Balcony

Standard

{/* Header row */}

Row

Type

Seats

Count

{/* Data rows */} {sortedRows.map((row) => (

{row.row_number}

{getRowTypeLabel(row.row_type)}

{Array.from({ length: row.seat_count }, (_, i) => (

))}

{row.seat_count}

))}

Total capacity: {rows.reduce((sum, row) => sum + row.seat_count, 0)} seats

) } ``` This component accepts a list of venue rows and visualizes them in a seat chart. Then, to create the component for the modal, create the file `src/admin/components/create-venue-modal.tsx` with the following content: ```tsx title="src/admin/components/create-venue-modal.tsx" collapsibleLines="1-14" expandButtonLabel="Show Imports" import { useState } from "react" import { FocusModal, Heading, Input, Select, Textarea, Label, Button, toast, } from "@medusajs/ui" import { CreateVenueRequest, RowType, VenueRow } from "../types" import { SeatChart } from "./seat-chart" interface NewVenueRow extends Pick {} interface CreateVenueModalProps { open: boolean onOpenChange: (open: boolean) => void onSubmit: (data: CreateVenueRequest) => Promise } export const CreateVenueModal = ({ open, onOpenChange, onSubmit, }: CreateVenueModalProps) => { const [name, setName] = useState("") const [address, setAddress] = useState("") const [rows, setRows] = useState([]) const [newRow, setNewRow] = useState({ row_number: "", row_type: RowType.VIP, seat_count: 10, }) const [isLoading, setIsLoading] = useState(false) // TODO add functions to manage venue rows } ``` You create a `CreateVenueModal` component that accepts three props: - `open`: A boolean indicating whether the modal is open or closed. - `onOpenChange`: A function called when the modal's open state changes. - `onSubmit`: A function called when the user submits the form to create a venue. In the component, you define state variables to hold the venue's name, address, rows, a new row being added, and a loading state. In the form, admin users should be able to add multiple rows to the venue. So, you'll add methods to manage rows, such as adding and removing rows. Replace the `TODO` in the `CreateVenueModal` component with the following: ```tsx title="src/admin/components/create-venue-modal.tsx" const addRow = () => { if (!newRow.row_number.trim()) { toast.error("Row number is required") return } if (rows.some((row) => row.row_number === newRow.row_number)) { toast.error("Row number already exists") return } if (newRow.seat_count <= 0) { toast.error("Seat count must be greater than 0") return } setRows([...rows, { row_number: newRow.row_number, row_type: newRow.row_type, seat_count: newRow.seat_count, }]) setNewRow({ row_number: "", row_type: RowType.VIP, seat_count: 10, }) } const removeRow = (rowNumber: string) => { setRows(rows.filter((row) => row.row_number !== rowNumber)) } const formatRowType = (rowType: RowType) => { switch (rowType) { case RowType.VIP: return "VIP" default: return rowType.charAt(0).toUpperCase() + rowType.slice(1).toLowerCase() } } // TODO handle form submission and modal close ``` You add the `addRow` function to add a new row to the venue, and the `removeRow` function to remove a row by its row number. You also add the `formatRowType` function to format the row type for display. Next, you'll implement the logic to submit the form to create a venue and to close the modal and reset the form when the user closes it. Replace the `TODO` in the `CreateVenueModal` component with the following: ```tsx title="src/admin/components/create-venue-modal.tsx" const handleClose = () => { setName("") setAddress("") setRows([]) setNewRow({ row_number: "", row_type: RowType.VIP, seat_count: 10, }) onOpenChange(false) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!name.trim()) { toast.error("Venue name is required") return } if (rows.length === 0) { toast.error("At least one row is required") return } setIsLoading(true) try { await onSubmit({ name: name.trim(), address: address.trim() || undefined, rows: rows.map((row) => ({ row_number: row.row_number, row_type: row.row_type, seat_count: row.seat_count, })), }) handleClose() } catch (error: any) { toast.error(error.message) } finally { setIsLoading(false) } } // TODO render modal ``` You add the `handleClose` function to reset the form and call the `onOpenChange` prop to close the modal. You'll trigger this function when users close the modal or after successfully creating a venue. You also add the `handleSubmit` function to validate the form data, call the `onSubmit` prop with the venue data, and handle loading and error states. Finally, you'll render the modal with the form. Replace the `TODO` in the `CreateVenueModal` component with the following: ```tsx title="src/admin/components/create-venue-modal.tsx" return (

Create New Venue

Venue Name setName(e.target.value)} placeholder="Enter venue name" />

Address (Optional)

setAddress(e.target.value)}
                  placeholder="Enter venue address"
                  rows={3}
                />
              </div>

<div className="border-t pt-4">
                <Heading level="h3" className="mb-2">Add Rows</Heading>
                
                <div className="space-y-3">
                  <div className="grid grid-cols-3 gap-3">
                    <div>
                      <Label htmlFor="row_number">Row Number</Label>
                      <Input
                        id="row_number"
                        value={newRow.row_number}
                        onChange={(e) => setNewRow({ ...newRow, row_number: e.target.value })}
                        placeholder="A, B, 1, 2..."
                      />
                    </div>
                    
                    <div>
                      <Label htmlFor="row_type">Row Type</Label>
                      <Select
                        value={newRow.row_type}
                        onValueChange={(value) => setNewRow({ ...newRow, row_type: value as RowType })}
                      >
                        <Select.Trigger>
                          <Select.Value />
                        </Select.Trigger>
                        <Select.Content>
                          <Select.Item value={RowType.VIP}>VIP</Select.Item>
                          <Select.Item value={RowType.PREMIUM}>Premium</Select.Item>
                          <Select.Item value={RowType.BALCONY}>Balcony</Select.Item>
                          <Select.Item value={RowType.STANDARD}>Standard</Select.Item>
                        </Select.Content>
                      </Select>
                    </div>
                    
                    <div>
                      <Label htmlFor="seat_count">Seat Count</Label>
                      <Input
                        id="seat_count"
                        type="number"
                        min="1"
                        value={newRow.seat_count}
                        onChange={(e) => setNewRow({ ...newRow, seat_count: parseInt(e.target.value) || 0 })}
                      />
                    </div>
                  </div>
                  
                  <Button
                    type="button"
                    variant="secondary"
                    onClick={addRow}
                    disabled={!newRow.row_number.trim()}
                  >
                    Add Row
                  </Button>
                </div>

{rows.length > 0 && (
                  <div className="mt-4">
                    <h4 className="txt-small-plus mb-2">Added Rows</h4>
                    <div className="space-y-2">
                      {rows.map((row) => (
                        <div key={row.row_number} className="flex items-center justify-between p-2 bg-ui-bg-subtle rounded">
                          <span className="txt-small">
                            Row {row.row_number} - {formatRowType(row.row_type)} ({row.seat_count} seats)
                          </span>
                          <Button
                            type="button"
                            variant="danger"
                            size="small"
                            onClick={() => removeRow(row.row_number)}
                          >
                            Remove
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

<Button
            type="submit"
            variant="primary"
            isLoading={isLoading}
            disabled={!name.trim() || rows.length === 0}
          >
            Create Venue
          </Button>
        </FocusModal.Footer>
      </form>
    </FocusModal.Content>
  </FocusModal>
)
```

You use Medusa UI's `FocusModal` component to render the modal. Inside the modal, you render a form with input fields for the venue's name and address, and fields to add rows.

You also render the `SeatChart` component to visualize the added rows.

Now that the `CreateVenueModal` component is ready, you'll use it in the `VenuesPage` component.

In `src/admin/routes/venues/page.tsx`, add the following imports at the top of the file:

```tsx title="src/admin/routes/venues/page.tsx"
import { 
  Button,
} from "@medusajs/ui"
import { CreateVenueModal } from "../../components/create-venue-modal"
```

Then, in the `VenuesPage` component, add the following state variable to manage the modal's open state:

```tsx title="src/admin/routes/venues/page.tsx"
const VenuesPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  // ...
}
```

Next, add the following functions before the `return` statement to handle opening and closing the modal, and to handle creating a venue:

```tsx title="src/admin/routes/venues/page.tsx"
const VenuesPage = () => {
  // ...
  const handleCloseModal = () => {
    setIsModalOpen(false)
  }

const handleCreateVenue = async (data: CreateVenueRequest) => {
    try {
      await sdk.client.fetch("/admin/venues", {
        method: "POST",
        body: data,
      })
      queryClient.invalidateQueries({ queryKey: ["venues"] })
      handleCloseModal()
    } catch (error: any) {
      throw new Error(`Failed to create venue: ${error.message}`)
    }
  }
  // ...
}
```

You add the `handleCloseModal` function to close the modal by setting the `isModalOpen` state to `false`.

You also add the `handleCreateVenue` function to send a `POST` request to the `/admin/venues` API route you created earlier.

Then, to trigger opening the modal, add the following button as the last child of `<DataTable.Toolbar>` in the `return` statement:

```tsx title="src/admin/routes/venues/page.tsx"
return (
  <Container className="divide-y p-0">
    {/* ... */}
      <Button
        variant="secondary"
        onClick={() => setIsModalOpen(true)}
      >
        Create Venue
      </Button>
    {/* ... */}
  </Container>
)
```

Finally, render the `CreateVenueModal` component as the last child of the `<Container>` component in the `return` statement:

```tsx title="src/admin/routes/venues/page.tsx"
return (
  <Container className="divide-y p-0">
    {/* ... */}
    <CreateVenueModal
      open={isModalOpen}
      onOpenChange={handleCloseModal}
      onSubmit={handleCreateVenue}
    />
  </Container>
)
```

You render the `CreateVenueModal` component, passing it the `isModalOpen` state, and the `handleCloseModal` and `handleCreateVenue` functions as props.

### Test the Venues Page

You can now test the venues page in the Medusa Admin.

Run the following command to start the Medusa server:

```bash npm2yarn
npm run dev
```

Then, open `http://localhost:9000/app` in your browser to access the Medusa Admin. Log in with the admin user you created earlier.

You should see a new "Venues" item in the sidebar. Click on it to navigate to the venues page. You'll see an empty table with a "Create Venue" button.

![Venues Page in the Medusa Admin with an empty table](https://res.cloudinary.com/dza7lstvk/image/upload/v1757430925/Medusa%20Resources/CleanShot_2025-09-09_at_18.15.02_2x_o0pf16.png)

To create a venue:

1. Click the "Create Venue" button to open the modal.
2. In the modal, enter a name for the venue, and optionally an address.
3. Add rows and visualize them in the seat chart.
4. Once you're done, click the "Create Venue" button to create the venue.

![Create Venue Modal in the Medusa Admin](https://res.cloudinary.com/dza7lstvk/image/upload/v1757431196/Medusa%20Resources/CleanShot_2025-09-09_at_18.19.45_2x_qyov67.png)

After creating the venue, you can see it listed in the table.

---

## Step 7: Create Ticket Product

In this step, you'll add functionality to create a ticket product for a show. You'll create a workflow and an API route to handle ticket product creation.

### a. Create Create Ticket Product Workflow

The workflow that creates a ticket product will also create the Medusa product and its variants. It will create a variant for each show date and row type. For example, if a show has two dates and three row types, the workflow will create six variants for the Medusa product.

The workflow will also create inventory items for each variant, ensuring that customers can't purchase more tickets than the venue's capacity.

{/* TODO add diagram */}

The workflow will have the following steps:

You only need to implement the `validateVenueAvailabilityStep`, `createTicketProductsStep`, and `createTicketProductVariantsStep` steps. The other steps are provided by Medusa.

#### validateVenueAvailabilityStep

The `validateVenueAvailabilityStep` validates that the selected venue is available for the show's date and time.

To create the step, create the file `src/workflows/steps/validate-venue-availability.ts` with the following content:

```ts title="src/workflows/steps/validate-venue-availability.ts"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"
import { MedusaError } from "@medusajs/framework/utils"

export type ValidateVenueAvailabilityStepInput = {
  venue_id: string
  dates: string[]
}

export const validateVenueAvailabilityStep = createStep(
  "validate-venue-availability",
  async (input: ValidateVenueAvailabilityStepInput, { container }) => {
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

// Get all existing ticket products for this venue
    const existingTicketProducts = await ticketBookingModuleService
      .listTicketProducts({
        venue_id: input.venue_id,
      })

const hasConflict = existingTicketProducts.some((ticketProduct) => 
      ticketProduct.dates.some((date) => input.dates.includes(date))
    )

if (hasConflict) {
      throw new MedusaError(
        MedusaError.Types.INVALID_DATA, 
        `Venue has conflicting shows on dates: ${input.dates.join(", ")}`
      )
    }

return new StepResponse({ valid: true })
  }
)
```

In the step, you retrieve all existing ticket products for the selected venue and throw an error if any of the existing ticket products has a date that conflicts with the new show's dates.

#### createTicketProductsStep

The `createTicketProductsStep` creates ticket products.

To create the step, create the file `src/workflows/steps/create-ticket-products.ts` with the following content:

```ts title="src/workflows/steps/create-ticket-products.ts"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"

export type CreateTicketProductsStepInput = {
  ticket_products: {
    product_id: string
    venue_id: string
    dates: string[]
  }[]
}

export const createTicketProductsStep = createStep(
  "create-ticket-products",
  async (input: CreateTicketProductsStepInput, { container }) => {
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

// Create the main ticket product
    const ticketProducts = await ticketBookingModuleService
      .createTicketProducts(
        input.ticket_products
      )

return new StepResponse(
      { 
        ticket_products: ticketProducts,
      },
      { 
        ticket_products: ticketProducts,
      }
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData?.ticket_products) {return}

const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)
    
    // Delete the ticket product
    await ticketBookingModuleService.deleteTicketProducts(
      compensationData.ticket_products.map((tp) => tp.id)
    )
  }
)
```

This step receives an array of ticket products to create. It creates the ticket products and returns them.

In the compensation function, you delete the created ticket products if an error occurs in the workflow.

#### createTicketProductVariantsStep

The `createTicketProductVariantsStep` creates ticket product variants.

To create the step, create the file `src/workflows/steps/create-ticket-product-variants.ts` with the following content:

```ts title="src/workflows/steps/create-ticket-product-variants.ts"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"
import { RowType } from "../../modules/ticket-booking/models/venue-row"

export type CreateTicketProductVariantsStepInput = {
  variants: {
    ticket_product_id: string
    product_variant_id: string
    row_type: RowType
  }[]
}

export const createTicketProductVariantsStep = createStep(
  "create-ticket-product-variants",
  async (input: CreateTicketProductVariantsStepInput, { container }) => {
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

// Create ticket product variants for each Medusa variant
    const ticketVariants = await ticketBookingModuleService
      .createTicketProductVariants(
        input.variants
      )

return new StepResponse(
      {
        ticket_product_variants: ticketVariants,
      },
      {
        ticket_product_variants: ticketVariants,
      }
    )
  },
  async (compensationData, { container }) => {
    if (!compensationData?.ticket_product_variants) {return}

const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)
    
    await ticketBookingModuleService.deleteTicketProductVariants(
      compensationData.ticket_product_variants.map((v) => v.id)
    )
  }
)
```

This step receives an array of ticket product variants to create. It creates the ticket product variants and returns them.

In the compensation function, you delete the created ticket product variants if an error occurs in the workflow.

#### Create Ticket Product Workflow

You can now create the workflow that creates a ticket product.

To create the workflow, create the file `src/workflows/create-ticket-product.ts` with the following content:

```ts title="src/workflows/create-ticket-product.ts" collapsibleLines="1-10" expandButtonLabel="Show Imports"
import { createWorkflow, transform, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { validateVenueAvailabilityStep } from "./steps/validate-venue-availability"
import { createTicketProductsStep } from "./steps/create-ticket-products"
import { useQueryGraphStep, createProductsWorkflow, createRemoteLinkStep, createInventoryItemsWorkflow } from "@medusajs/medusa/core-flows"
import { CreateProductWorkflowInputDTO, CreateMoneyAmountDTO } from "@medusajs/framework/types"
import { Modules } from "@medusajs/framework/utils"
import { TICKET_BOOKING_MODULE } from "../modules/ticket-booking"
import { RowType } from "../modules/ticket-booking/models/venue-row"
import { createTicketProductVariantsStep } from "./steps/create-ticket-product-variants"

export type CreateTicketProductWorkflowInput = {
  name: string
  venue_id: string
  dates: string[]
  variants: Array<{
    row_type: RowType
    seat_count: number
    prices: CreateMoneyAmountDTO[]
  }>
}

export const createTicketProductWorkflow = createWorkflow(
  "create-ticket-product",
  (input: CreateTicketProductWorkflowInput) => {
    validateVenueAvailabilityStep({
      venue_id: input.venue_id,
      dates: input.dates,
    })

const { data: stores } = useQueryGraphStep({
      entity: "store",
      fields: ["id", "default_location_id", "default_sales_channel_id"],
    })

// TODO create inventory items for each variant
  }
)
```

You create the `createTicketProductWorkflow` workflow that accepts the details of the ticket product and its variants.

In the workflow, you validate the venue's availability using the `validateVenueAvailabilityStep`.

Then, you retrieve the default store configuration using the `useQueryGraphStep`. These configurations are useful when creating the Medusa inventory items and product.

<Note>

Make sure you have [default location and sales channel set up in your Medusa store](!user-guide!/settings/store).

</Note>

Next, you'll create inventory items for each variant before creating the Medusa product. Replace the `TODO` with the following:

```ts title="src/workflows/create-ticket-product.ts"
const inventoryItemsData = transform({
  input,
  stores,
}, (data) => {
  const inventoryItems: any[] = []
  
  for (const date of data.input.dates) {
    for (const variant of data.input.variants) {
      inventoryItems.push({
        sku: `${data.input.name}-${date}-${variant.row_type}`,
        title: `${data.input.name} - ${date} - ${variant.row_type}`,
        description: `Ticket for ${data.input.name} on ${date} in ${variant.row_type} seating`,
        location_levels: [{
          location_id: data.stores[0].default_location_id,
          stocked_quantity: variant.seat_count,
        }],
        requires_shipping: false,
      })
    }
  }
  
  return inventoryItems
})

const inventoryItems = createInventoryItemsWorkflow.runAsStep({
  input: {
    items: inventoryItemsData,
  },
})

// TODO create the Medusa product
```

You prepare the inventory items to be created using the `transform` function. You create an inventory item for each combination of show date and variant.

Notice that for each inventory item, you set the `stocked_quantity` to the `seat_count` of the variant, ensuring that the inventory reflects the venue's seating capacity. You also set `requires_shipping` to `false`, allowing you to skip the shipping step during checkout.

Then, you create the inventory items using the `createInventoryItemsWorkflow`.

Next, you'll create the Medusa product and variants. Replace the `TODO` with the following:

```ts title="src/workflows/create-ticket-product.ts"
const productData = transform({
  input,
  inventoryItems,
  stores,
}, (data) => {
  const rowTypes = [...new Set(
    data.input.variants.map((variant: any) => variant.row_type)
  )]
  
  const product: CreateProductWorkflowInputDTO = {
    title: data.input.name,
    status: "published",
    options: [
      {
        title: "Date",
        values: data.input.dates,
      },
      {
        title: "Row Type", 
        values: rowTypes,
      },
    ],
    variants: [] as any[],
  }

if (data.stores[0].default_sales_channel_id) {
    product.sales_channels = [
      {
        id: data.stores[0].default_sales_channel_id,
      },
    ]
  }

// Create variants for each date and row type combination
  let inventoryIndex = 0
  for (const date of data.input.dates) {
    for (const variant of data.input.variants) {
      product.variants!.push({
        title: `${data.input.name} - ${date} - ${variant.row_type}`,
        options: {
          Date: date,
          "Row Type": variant.row_type,
        },
        manage_inventory: true,
        inventory_items: [{
          inventory_item_id: data.inventoryItems[inventoryIndex].id,
        }],
        prices: variant.prices,
      })
      inventoryIndex++
    }
  }

return [product]
})

const medusaProduct = createProductsWorkflow.runAsStep({
  input: {
    products: productData,
  },
})

// TODO create the ticket product and variants
```

You prepare the Medusa product data using the `transform` function. You create options for "Date" and "Row Type" and create a variant for each combination of show date and row type.

You associate each variant with the corresponding inventory item created earlier, ensuring that the inventory is correctly linked to the product variants.

Then, you create the Medusa product using the `createProductsWorkflow`.

Next, you'll create the ticket product and its variants. Replace the `TODO` with the following:

```ts title="src/workflows/create-ticket-product.ts"
const ticketProductData = transform({
  medusaProduct,
  input,
}, (data) => {
  return {
    ticket_products: data.medusaProduct.map((product: any) => ({
      product_id: product.id,
      venue_id: data.input.venue_id,
      dates: data.input.dates,
    })),
  }
})

const { ticket_products } = createTicketProductsStep(
  ticketProductData
)

const ticketVariantsData = transform({
  medusaProduct,
  ticket_products,
  input,
}, (data) => {
  return {
    variants: data.medusaProduct[0].variants.map((variant: any) => {
      const rowType = variant.options.find(
        (opt: any) => opt.option?.title === "Row Type"
      )?.value
      return {
        ticket_product_id: data.ticket_products[0].id,
        product_variant_id: variant.id,
        row_type: rowType,
      }
    }),
  }
})

const { ticket_product_variants } = createTicketProductVariantsStep(
  ticketVariantsData
)

// TODO create links and retrieve the created ticket product
```

You prepare the ticket product data using the `transform` function, then create the ticket product using the `createTicketProductsStep`.

You also prepare the ticket product variants data, then create the ticket product variants using the `createTicketProductVariantsStep`.

Finally, you'll create links between the ticket product and variants and the Medusa product and variants, and retrieve the created ticket product with its relations. Replace the `TODO` with the following:

```ts title="src/workflows/create-ticket-product.ts"
const linksData = transform({
  medusaProduct,
  ticket_products,
  ticket_product_variants,
}, (data) => {
  // Create links between ticket product and Medusa product
  const productLinks = [{
    [TICKET_BOOKING_MODULE]: {
      ticket_product_id: data.ticket_products[0].id,
    },
    [Modules.PRODUCT]: {
      product_id: data.medusaProduct[0].id,
    },
  }]

// Create links between ticket variants and Medusa variants
  const variantLinks = data.ticket_product_variants.map((variant) => ({
    [TICKET_BOOKING_MODULE]: {
      ticket_product_variant_id: variant.id,
    },
    [Modules.PRODUCT]: {
      product_variant_id: variant.product_variant_id,
    },
  }))

return [...productLinks, ...variantLinks]
})

createRemoteLinkStep(linksData)

const { data: finalTicketProduct } = useQueryGraphStep({
  entity: "ticket_product",
  fields: [
    "id",
    "product_id",
    "venue_id",
    "dates",
    "venue.*",
    "product.*",
    "variants.*",
  ],
  filters: {
    id: ticket_products[0].id,
  },
}).config({ name: "retrieve-ticket-product" })

return new WorkflowResponse({
  ticket_product: finalTicketProduct[0],
})
```

You create links between the ticket product and the Medusa product, and between the ticket product variants and the Medusa product variants using the `createRemoteLinkStep`.

Then, you retrieve the created ticket product with its relations using the `useQueryGraphStep`.

Finally, you return the created ticket product in the workflow response.

### b. Create Ticket Product API Route

Next, you'll create an API route that allows admin users to create a ticket product.

To create the API route, create the file `src/api/admin/ticket-products/route.ts` with the following content:

```ts title="src/api/admin/ticket-products/route.ts" collapsibleLines="1-7" expandButtonLabel="Show Imports"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import {
  createTicketProductWorkflow,
} from "../../../workflows/create-ticket-product"
import { RowType } from "../../../modules/ticket-booking/models/venue-row"
import { z } from "zod"

export const CreateTicketProductSchema = z.object({
  name: z.string().min(1, "Name is required"),
  venue_id: z.string().min(1, "Venue ID is required"),
  dates: z.array(z.string()).min(1, "At least one date is required"),
  variants: z.array(z.object({
    row_type: z.nativeEnum(RowType),
    seat_count: z.number().min(1, "Seat count must be at least 1"),
    prices: z.array(z.object({
      currency_code: z.string().min(1, "Currency code is required"),
      amount: z.number().min(0, "Amount must be non-negative"),
      min_quantity: z.number().optional(),
      max_quantity: z.number().optional(),
    })).min(1, "At least one price is required"),
  })).min(1, "At least one variant is required"),
})

type CreateTicketProductSchema = z.infer<typeof CreateTicketProductSchema>

export async function POST(
  req: MedusaRequest<CreateTicketProductSchema>,
  res: MedusaResponse
) {
  const { result } = await createTicketProductWorkflow(req.scope).run({
    input: req.validatedBody,
  })

res.json(result)
}
```

You define the validation schema `CreateTicketProductSchema` that will be used to validate the request body.

Then, you export a `POST` route handler function, which will expose a `POST` API route at `/admin/ticket-products`.

In the route handler, you execute the `createTicketProductWorkflow` and return the created ticket product in the response.

You'll test the API route when you customize the Medusa Admin later.

### c. Create Ticket Product Validation Middleware

To validate the request body against the schema you defined for creating ticket products, you'll apply a validation middleware to the API route.

In `src/api/middlewares.ts`, add the following import at the top of the file:

```ts title="src/api/middlewares.ts"
import { CreateTicketProductSchema } from "./admin/ticket-products/route"
```

Then, add a new object to the `routes` array passed to the `defineMiddlewares` function:

```ts title="src/api/middlewares.ts"
export default defineMiddlewares({
  routes: [
    // ...
    {
      matcher: "/admin/ticket-products",
      methods: ["POST"],
      middlewares: [
        validateAndTransformBody(CreateTicketProductSchema),
      ],
    },
  ],
})
```

You apply the `validateAndTransformBody` middleware to the `POST /admin/ticket-products` route, passing it the `CreateTicketProductSchema` for validation.

---

## Step 8: List Ticket Products API Route

In this step, you'll add an API route to list ticket products. This will be useful when you customize the Medusa Admin to display ticket products.

To create the API route, add the following to the `src/api/admin/ticket-products/route.ts` file:

```ts title="src/api/admin/ticket-products/route.ts"
export async function GET(
  req: MedusaRequest,
  res: MedusaResponse
) {
  const query = req.scope.resolve("query")

const {
    data: ticketProducts,
    metadata,
  } = await query.graph({
    entity: "ticket_product",
    ...req.queryConfig,
  })

res.json({
    ticket_products: ticketProducts,
    count: metadata?.count,
    limit: metadata?.take,
    offset: metadata?.skip,
  })
}
```

You export a `GET` route handler function, which will expose a `GET` API route at `/admin/ticket-products`.

In the route handler, you use Query to retrieve ticket products. You pass the `req.queryConfig` object to support pagination and field selection based on query configurations and parameters.

Finally, you return the ticket products along with pagination metadata in the response.

You'll test the API route when you customize the Medusa Admin later.

### Add Validation Middleware for List Ticket Products API Route

To validate the query parameters of requests sent to the API route, and to allow clients to configure pagination and returned fields, you need to apply a query validation middleware.

To apply a middleware to the route, in `src/api/middlewares.ts`, add the following object to the `routes` array passed to the `defineMiddlewares` function:

```ts title="src/api/middlewares.ts"
export default defineMiddlewares({
  routes: [
    // ...
    {
      matcher: "/admin/ticket-products",
      methods: ["GET"],
      middlewares: [
        validateAndTransformQuery(createFindParams(), {
          isList: true,
          defaults: [
            "id", 
            "product_id", 
            "venue_id", 
            "dates", 
            "venue.*", 
            "variants.*", 
            "product.*",
          ],
        }),
      ],
    },
  ],
})
```

You apply the `validateAndTransformQuery` middleware to `GET` requests sent to the `/admin/ticket-products` route. You pass it the `createFindParams` function to allow passing pagination and field selection parameters.

You also define the default fields of a ticket product to be returned in the response.

---

## Step 9: Manage Ticket Products in Medusa Admin

In this step, you'll customize the Medusa Admin to add a new page that shows a list of ticket products and allows creating new ticket products.

### a. Define Ticket Product Type

Before you customize the Medusa Admin, you'll define a type for the ticket product to use in your customizations.

In `src/admin/types.ts`, add the following interface at the end of the file:

```ts title="src/admin/types.ts"
export interface TicketProduct {
  id: string
  product_id: string
  venue_id: string
  dates: string[]
  venue: {
    id: string
    name: string
    address?: string
  }
  product: {
    id: string
    title: string
  }
  variants: Array<{
    id: string
    row_type: string
  }>
  created_at: string
  updated_at: string
}
```

You define the `TicketProduct` interface that describes the shape of a ticket product object.

### b. Create Ticket Products Page

Next, you'll create the UI route for the ticket products page.

Create the file `src/admin/routes/ticket-products/page.tsx` with the following content:

```tsx title="src/admin/routes/ticket-products/page.tsx" collapsibleLines="1-20" expandButtonLabel="Show Imports"
import { defineRouteConfig } from "@medusajs/admin-sdk"
import { ReceiptPercent } from "@medusajs/icons"
import {
  createDataTableColumnHelper,
  Container,
  DataTable,
  useDataTable,
  Heading,
  DataTablePaginationState,
  Badge,
  toast,
} from "@medusajs/ui"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { Link } from "react-router-dom"
import React, { useState, useMemo } from "react"
import { sdk } from "../../lib/sdk"
import { TicketProduct } from "../../types"

const columnHelper = createDataTableColumnHelper<TicketProduct>()

const columns = [
  columnHelper.accessor("product.title", {
    header: "Name",
  }),
  columnHelper.accessor("venue.name", {
    header: "Venue",
  }),
  columnHelper.accessor("dates", {
    header: "Dates",
    cell: ({ row }) => {
      const dates = row.original.dates || []
      // Show first and last dates
      const displayDates = [dates[0], dates[dates.length - 1]]
      return (
        <div className="flex flex-wrap gap-1 items-center">
          {displayDates.map((date, index) => (
            <React.Fragment key={date}>
              <Badge color="grey" size="small">
                {new Date(date).toLocaleDateString()}
              </Badge>
              {index < displayDates.length - 1 && (
                <span className="text-gray-500 txt-small">
                  -
                </span>
              )}
            </React.Fragment>
          ))}
        </div>
      )
    },
  }),
  columnHelper.accessor("product_id", {
    header: "Product",
    cell: ({ row }) => {
      return (
        <Link to={`/products/${row.original.product_id}`}>
          View Product Details
        </Link>
      )
    },
  }),
]

const TicketProductsPage = () => {
  // TODO show table
}

export const config = defineRouteConfig({
  label: "Shows",
  icon: ReceiptPercent,
})

export default TicketProductsPage
```

First, you define the columns for the data table that will display ticket products. You create columns for the ticket product's name, venue, dates, and a link to view the associated Medusa product.

Then, you create the `TicketProductsPage` component and export a configuration object that defines the route's sidebar label and icon.

Next, you'll implement the `TicketProductsPage` component to show the table of ticket products. Replace the `TicketProductsPage` component with the following:

```tsx title="src/admin/routes/ticket-products/page.tsx"
const TicketProductsPage = () => {
  const limit = 15
  const [pagination, setPagination] = useState<DataTablePaginationState>({
    pageSize: limit,
    pageIndex: 0,
  })

const queryClient = useQueryClient()

const offset = useMemo(() => {
    return pagination.pageIndex * limit
  }, [pagination])

const { data, isLoading } = useQuery<{
    ticket_products: TicketProduct[]
    count: number
    limit: number
    offset: number
  }>({
    queryKey: ["ticket-products", offset, limit],
    queryFn: () => sdk.client.fetch("/admin/ticket-products", {
      query: {
        offset: pagination.pageIndex * pagination.pageSize,
        limit: pagination.pageSize,
        order: "-created_at",
      },
    }),
  })

const table = useDataTable({
    columns,
    data: data?.ticket_products || [],
    rowCount: data?.count || 0,
    isLoading,
    pagination: {
      state: pagination,
      onPaginationChange: setPagination,
    },
    getRowId: (row) => row.id,
  })

return (
    <Container className="divide-y p-0">
      <DataTable instance={table}>
        <DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
          <Heading>
            Shows
          </Heading>
        </DataTable.Toolbar>
        <DataTable.Table />
        <DataTable.Pagination />
      </DataTable>
    </Container>
  )
}
```

In the component, you define variables to manage pagination in the data table. You also use Tanstack Query and the JS SDK to retrieve the ticket products from the `GET /admin/ticket-products` API route you created earlier.

Then, you use Medusa UI's `DataTable` component to render the table of ticket products.

### c. Create Ticket Product Modal

Next, you'll create a modal component that allows creating a new ticket product. You'll show the modal when a button is clicked on the ticket products page.

The modal form is made up of two steps: one to select the venue and show dates, and another to set the prices of each row type. So, you'll create the components for each step first.

#### Create Product Details Step

To create the first step component, create the file `src/admin/components/product-details-step.tsx` with the following content:

```tsx title="src/admin/components/product-details-step.tsx" collapsibleLines="1-13" expandButtonLabel="Show Imports"
import { useState } from "react"
import {
  Input,
  Label,
  Select,
  DatePicker,
  Button,
  Text,
  Heading,
  Badge,
} from "@medusajs/ui"
import { XMark } from "@medusajs/icons"
import { Venue } from "../types"

interface ProductDetailsStepProps {
  name: string
  setName: (name: string) => void
  selectedVenueId: string
  setSelectedVenueId: (venueId: string) => void
  selectedDates: string[]
  setSelectedDates: (dates: string[]) => void
  venues: Venue[]
}

export const ProductDetailsStep = ({
  name,
  setName,
  selectedVenueId,
  setSelectedVenueId,
  selectedDates,
  setSelectedDates,
  venues,
}: ProductDetailsStepProps) => {
  const selectedVenue = venues.find((v) => v.id === selectedVenueId)
  
  // Local state for start and end dates
  const [startDate, setStartDate] = useState<Date | undefined>(
    selectedDates.length > 0 ? new Date(selectedDates[0] + "T00:00:00") : undefined
  )
  const [endDate, setEndDate] = useState<Date | undefined>(
    selectedDates.length > 1 ? new Date(selectedDates[selectedDates.length - 1] + "T00:00:00") : undefined
  )

// TODO handle date selection
}
```

You define the `ProductDetailsStep` component that accepts props for managing the form state, including the ticket product name, selected venue, and selected dates.

In the component, you also define local state for the start and end dates used in the date picker.

Next, you'll add functions that handle selecting dates. Admins can select a start and end date, which will select the range of dates in between. Admins can also delete any date from the range.

Replace the `TODO` with the following:

```tsx title="src/admin/components/product-details-step.tsx"
const generateDateRange = (start: Date, end?: Date) => {
  const dates: string[] = []
  const currentDate = new Date(start)
  
  do {
    // Use local date formatting to avoid timezone issues
    const year = currentDate.getFullYear()
    const month = String(currentDate.getMonth() + 1).padStart(2, "0")
    const day = String(currentDate.getDate()).padStart(2, "0")
    dates.push(`${year}-${month}-${day}`)
    currentDate.setDate(currentDate.getDate() + 1)
  } while (end && currentDate <= end)
  
  return dates
}

const handleStartDateChange = (date: Date | null) => {
  const dateValue = date || undefined
  setStartDate(dateValue)
  setSelectedDates(
    dateValue ? generateDateRange(dateValue, endDate) : []
  )
}

const handleEndDateChange = (date: Date | null) => {
  const dateValue = date || undefined
  setEndDate(dateValue)
  if (startDate && dateValue) {
    setSelectedDates(generateDateRange(startDate, dateValue))
  } else if (dateValue) {
    setSelectedDates(generateDateRange(dateValue))
  } else {
    setSelectedDates([])
  }
}

const removeDate = (dateToRemove: string) => {
  setSelectedDates(selectedDates.filter((d) => d !== dateToRemove))
}

// TODO render form
```

You define the following functions:

- `generateDateRange`: Generates an array of date strings between a start and optional end date.
- `handleStartDateChange`: Handles changes to the start date, updating the selected dates accordingly.
- `handleEndDateChange`: Handles changes to the end date, updating the selected dates accordingly.
- `removeDate`: Removes a specific date from the selected dates.

Finally, you'll render the form for the product details step. Replace the `TODO` with the following:

```tsx title="src/admin/components/product-details-step.tsx"
return (
  <div className="space-y-6">
    <Heading level="h2">Show Details</Heading>
    <div>
      <Label htmlFor="name">Name</Label>
      <Input
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
    </div>

<div>
      <Label htmlFor="venue">Venue</Label>
      <Select
        value={selectedVenueId}
        onValueChange={setSelectedVenueId}
      >
        <Select.Trigger>
          <Select.Value placeholder="Select a venue" />
        </Select.Trigger>
        <Select.Content>
          {venues.map((venue) => (
            <Select.Item key={venue.id} value={venue.id}>
              {venue.name}
            </Select.Item>
          ))}
        </Select.Content>
      </Select>
    </div>

{selectedVenue && (
      <div className="p-4 bg-gray-50 rounded-lg">
        <Text className="txt-small-plus mb-2">Selected Venue: {selectedVenue.name}</Text>
        {selectedVenue.address && (
          <Text className="txt-small text-ui-fg-subtle mb-2">{selectedVenue.address}</Text>
        )}
        <Text className="txt-small text-ui-fg-subtle">
          Rows: {[...new Set(selectedVenue.rows.map((row) => row.row_type))].join(", ")}<br/>
          Total Seats: {selectedVenue.rows.reduce((acc, row) => acc + row.seat_count, 0)}
        </Text>
      </div>
    )}

<div>
      <Heading level="h2">Dates</Heading>
      <div className="mt-2 space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="start-date">Start Date</Label>
            <DatePicker
              value={startDate}
              onChange={handleStartDateChange}
              maxValue={endDate}
            />
          </div>
          <div>
            <Label htmlFor="end-date">End Date</Label>
            <DatePicker
              value={endDate}
              onChange={handleEndDateChange}
              minValue={startDate}
            />
          </div>
        </div>
        
        {selectedDates.length > 0 && (
          <div className="space-y-2">
            <Text className="txt-small-plus">
              Selected Dates ({selectedDates.length} day{selectedDates.length !== 1 ? "s" : ""}):
            </Text>
            <div className="flex flex-wrap gap-2">
              {selectedDates.map((date) => (
                <Badge
                  key={date}
                  color="blue"
                >
                  <span>{new Date(date).toLocaleDateString()}</span>
                  <Button
                    variant="transparent"
                    size="small"
                    onClick={() => removeDate(date)}
                    className="p-1 hover:bg-transparent"
                  >
                    <XMark />
                  </Button>
                </Badge>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  </div>
)
```

You render the form for the product details step, including inputs for the ticket product name, venue selection, and date selection.

#### Pricing Step

Next, you'll create the second step component for setting prices for each row type.

To create the step component, create the file `src/admin/components/pricing-step.tsx` with the following content:

```tsx title="src/admin/components/pricing-step.tsx" collapsibleLines="1-10" expandButtonLabel="Show Imports"
import {
  Input,
  Label,
  Text,
  Heading,
  Container,
  Badge,
} from "@medusajs/ui"
import { RowType, Venue } from "../types"

export interface CurrencyRegionCombination {
  currency: string
  region_id?: string
  region_name?: string
  is_store_currency: boolean
}

interface PricingStepProps {
  selectedVenue: Venue | undefined
  currencyRegionCombinations: CurrencyRegionCombination[]
  prices: Record<string, Record<string, number>>
  setPrices: (prices: Record<string, Record<string, number>>) => void
}

export const PricingStep = ({
  selectedVenue,
  currencyRegionCombinations,
  prices,
  setPrices,
}: PricingStepProps) => {
  if (!selectedVenue) {
    return (
      <div className="text-center py-8">
        <Text>Please select a venue in the previous step</Text>
      </div>
    )
  }

// TODO add price and row type functions
}
```

You define the `PricingStep` component that accepts props for the selected venue, currency-region combinations, and prices.

In Medusa, you can set the price of a product variant in multiple currencies and regions. This allows you to sell products in different markets with localized pricing. Learn more in the [Pricing documentation](../../../commerce-modules/pricing/concepts/page.mdx).

</Note>

In the component, if no venue is selected, you display a message prompting the user to select a venue in the previous step.

Next, you'll add functions for formatting and to handle price changes. Replace the `TODO` with the following:

```tsx title="src/admin/components/pricing-step.tsx"
const updatePrice = (
  rowType: string, 
  currency: string, 
  regionId: string | undefined, 
  amount: number
) => {
  const key = regionId ? `${currency}_${regionId}` : `${currency}_store`
  setPrices({
    ...prices,
    [rowType]: {
      ...prices[rowType],
      [key]: amount,
    },
  })
}

const getRowTypeColor = (
  type: RowType
): "purple" | "orange" | "blue" | "grey" => {
  switch (type) {
    case RowType.VIP:
      return "purple"
    case RowType.PREMIUM:
      return "orange"
    case RowType.BALCONY:
      return "blue"
    default:
      return "grey"
  }
}

const getRowTypeLabel = (type: RowType) => {
  switch (type) {
    case RowType.VIP:
      return "VIP"
    default:
      return type.charAt(0).toUpperCase() + type.slice(1)
  }
}

// Get unique row types from venue
const rowTypes = [...new Set(selectedVenue.rows.map((row) => row.row_type))]

// TODO render form
```

You define the following functions:

- `updatePrice`: Updates the price for a specific row type and currency-region combination.
- `getRowTypeColor`: Returns a color based on the row type for styling purposes.
- `getRowTypeLabel`: Returns a formatted label for the row type.

You also extract the unique row types from the selected venue to use in the form.

Finally, you'll render the form for the pricing step. Replace the `TODO` with the following:

```tsx title="src/admin/components/pricing-step.tsx"
return (
  <div className="space-y-6">
    <div>
      <Heading level="h3">Set Prices for Each Row Type</Heading>
      <Text className="text-ui-fg-subtle">
        Enter prices for each row type by region and currency. All prices are optional.
      </Text>
    </div>

<div className="space-y-4">
      {rowTypes.map((rowType) => {
        const totalSeats = selectedVenue.rows
          .filter((row) => row.row_type === rowType)
          .reduce((sum, row) => sum + row.seat_count, 0)

return (
          <Container key={rowType} className="p-4">
            <div className="flex items-center gap-3 mb-4">
              <Badge color={getRowTypeColor(rowType as RowType)} size="small">
                {getRowTypeLabel(rowType)}
              </Badge>
              <Text className="txt-small text-ui-fg-subtle">
                {totalSeats} seats total
              </Text>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {currencyRegionCombinations.map((combo) => {
                const key = combo.region_id ? `${combo.currency}_${combo.region_id}` : `${combo.currency}_store`
                return (
                  <div key={key}>
                    <Label htmlFor={`${rowType}-${key}`}>
                      {combo.currency.toUpperCase()} - {combo.region_name || "Store"}
                    </Label>
                    <Input
                      id={`${rowType}-${key}`}
                      type="number"
                      min="0"
                      step="0.01"
                      value={prices[rowType]?.[key] || ""}
                      onChange={(e) => {
                        const amount = parseFloat(e.target.value) || 0
                        updatePrice(rowType, combo.currency, combo.region_id, amount)
                      }}
                      placeholder="0.00"
                    />
                  </div>
                )
              })}
            </div>
          </Container>
        )
      })}
    </div>
  </div>
)
```

You render the form for the pricing step, including sections for each row type with inputs for setting prices in different currencies and regions.

#### Create Ticket Product Modal

You can now create the modal component that shows a multi-step form to create a ticket product.

Create the file `src/admin/components/create-ticket-product-modal.tsx` with the following content:

```tsx title="src/admin/components/create-ticket-product-modal.tsx" collapsibleLines="1-13" expandButtonLabel="Show Imports"
import React, { useState } from "react"
import {
  Button,
  FocusModal,
  ProgressTabs,
  toast,
} from "@medusajs/ui"
import { useQuery } from "@tanstack/react-query"
import { sdk } from "../lib/sdk"
import { RowType, Venue } from "../types"
import { ProductDetailsStep } from "./product-details-step"
import { CurrencyRegionCombination, PricingStep } from "./pricing-step"

interface CreateTicketProductModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (data: any) => Promise<void>
}

export const CreateTicketProductModal = ({
  open,
  onOpenChange,
  onSubmit,
}: CreateTicketProductModalProps) => {
  const [currentStep, setCurrentStep] = useState("0")
  const [isLoading, setIsLoading] = useState(false)

// Step 1 data
  const [name, setName] = useState("")
  const [selectedVenueId, setSelectedVenueId] = useState("")
  const [selectedDates, setSelectedDates] = useState<string[]>([])

// Step 2 data - prices[rowType][currency_region] = amount
  const [prices, setPrices] = useState<Record<string, Record<string, number>>>({})

// TODO fetch venues and currency-region combinations
}
```

You define the `CreateTicketProductModal` component that accepts props for managing the modal's open state and handling form submission.

In the component, you define state variables to manage the current step, loading state, and form data for both steps.

Next, you'll fetch the list of venues, regions, and store currencies from the Medusa backend. Replace the `TODO` with the following:

```tsx title="src/admin/components/create-ticket-product-modal.tsx"
// Fetch venues
const { data: venuesData } = useQuery<{
  venues: Venue[]
  count: number
}>({
  queryKey: ["venues"],
  queryFn: () => sdk.client.fetch("/admin/venues"),
})

// Fetch regions
const { data: regionsData } = useQuery({
  queryKey: ["regions"],
  queryFn: () => sdk.admin.region.list(),
})

// Fetch stores
const { data: storesData } = useQuery({
  queryKey: ["stores"],
  queryFn: () => sdk.admin.store.list(),
})

const venues = venuesData?.venues || []
const regions = regionsData?.regions || []
const stores = storesData?.stores || []
const selectedVenue = venues?.find((v) => v.id === selectedVenueId)

// TODO prepare currency-region combinations
```

You use Tanstack Query and the JS SDK to fetch the list of venues from the `GET /admin/venues` API route, and the list of regions and stores from admin API routes.

Next, you'll prepare the currency-region combinations based on the store and region data fetched. Replace the `TODO` with the following:

```tsx title="src/admin/components/create-ticket-product-modal.tsx"
const currencyRegionCombinations = React.useMemo(() => {
  const combinations: Array<CurrencyRegionCombination> = []
  
  // Add combinations from regions
  regions.forEach((region: any) => {
    combinations.push({
      currency: region.currency_code,
      region_id: region.id,
      region_name: region.name,
      is_store_currency: false,
    })
  })
  
  // Add combinations from stores (all supported currencies)
  stores.forEach((store) => {      
    // Add all supported currencies
    store.supported_currencies.forEach((currency) => {
      combinations.push({
        currency: currency.currency_code,
        region_id: undefined, // No region for store currencies
        is_store_currency: true,
      })
    })
  })
  
  return combinations
}, [regions, stores])

// TODO handle form actions
```

You create a memoized array of currency-region combinations by iterating over the fetched regions and stores. You add combinations for each region's currency and each store's supported currencies.

Next, you'll add functions to handle form actions like resetting the form or moving between steps. Replace the `TODO` with the following:

```tsx title="src/admin/components/create-ticket-product-modal.tsx"
const resetForm = () => {
  setName("")
  setSelectedVenueId("")
  setSelectedDates([])
  setPrices({})
  setCurrentStep("0")
}

const handleCloseModal = (open: boolean) => {
  if (!open) {
    resetForm()
  }
  onOpenChange(open)
}

const handleStep1Next = () => {
  if (!name.trim()) {
    toast.error("Name is required")
    return
  }
  if (!selectedVenueId) {
    toast.error("Please select a venue")
    return
  }
  if (selectedDates.length === 0) {
    toast.error("Please select at least one date")
    return
  }
  setCurrentStep("1")
}

const handleStep2Submit = async () => {
  if (!selectedVenue) {
    toast.error("Venue not found")
    return
  }

// Prepare variants data
  // combine rows with the same row_type
  const combinedRows: Record<RowType, { seat_count: number }> = {
    premium: { seat_count: 0 },
    balcony: { seat_count: 0 },
    standard: { seat_count: 0 },
    vip: { seat_count: 0 },
  }
  selectedVenue.rows.forEach((row) => {
    if (!combinedRows[row.row_type]) {
      combinedRows[row.row_type] = { seat_count: 0 }
    }
    combinedRows[row.row_type].seat_count += row.seat_count
  })
  const variants = Object.keys(combinedRows).map((rowType) => ({
    row_type: rowType as RowType,
    seat_count: combinedRows[rowType as RowType].seat_count,
    prices: currencyRegionCombinations.map((combo) => {
      const key = combo.region_id ? `${combo.currency}_${combo.region_id}` : `${combo.currency}_store`
      const amount = prices[rowType as RowType]?.[key] || 0
      
      const price: any = {
        currency_code: combo.currency,
        amount: amount,
      }
      
      // Only add rules for region-based currencies
      if (combo.region_id && !combo.is_store_currency) {
        price.rules = {
          region_id: combo.region_id,
        }
      }
      
      return price
    }).filter((price) => price.amount > 0), // Only include prices > 0
  })).filter((variant) => variant.seat_count > 0) // Only create variants for row types with seats

setIsLoading(true)
  try {
    await onSubmit({
      name,
      venue_id: selectedVenueId,
      dates: selectedDates,
      variants,
    })
    toast.success("Show created successfully")
    handleCloseModal(false)
  } catch (error: any) {
    toast.error(error.message || "Failed to create show")
  } finally {
    setIsLoading(false)
  }
}

// TODO define steps
```

You define the following functions:

- `resetForm`: Resets the form state to its initial values.
- `handleCloseModal`: Handles closing the modal and resets the form if it's being closed.
- `handleStep1Next`: Validates the inputs in the first step before moving to the next step.
- `handleStep2Submit`: Prepares the data from both steps and calls the `onSubmit` prop to create the ticket product.

Before submitting the form, you combine rows with the same `row_type` to create variants and prepare the prices for each variant based on the selected currency-region combinations.

Next, you'll define step variables useful to render the multi-step form. Replace the `TODO` with the following:

```tsx title="src/admin/components/create-ticket-product-modal.tsx"
// Check if step 1 (Product Details) is completed
const isStep1Completed = name.trim() && selectedVenueId && selectedDates.length > 0

// Check if step 2 (Pricing) is completed
const hasAnyPrices = Object.values(prices).some((rowPrices) => 
  Object.values(rowPrices).some((amount) => amount > 0)
)
const isStep2Completed = isStep1Completed && hasAnyPrices

const steps = [
  {
    label: "Product Details",
    value: "0",
    status: isStep1Completed ? "completed" as const : undefined,
    content: (
      <ProductDetailsStep
        name={name}
        setName={setName}
        selectedVenueId={selectedVenueId}
        setSelectedVenueId={setSelectedVenueId}
        selectedDates={selectedDates}
        setSelectedDates={setSelectedDates}
        venues={venues}
      />
    ),
  },
  {
    label: "Pricing",
    value: "1",
    status: isStep2Completed ? "completed" as const : undefined,
    content: (
      <PricingStep
        selectedVenue={selectedVenue}
        currencyRegionCombinations={currencyRegionCombinations}
        prices={prices}
        setPrices={setPrices}
      />
    ),
  },
]

// TODO render modal
```

You define variables to check if each step is completed based on the form inputs. You also define an array of step objects, each containing a label, value, status, and content component.

Finally, you'll render the modal with the multi-step form. Replace the `TODO` with the following:

```tsx title="src/admin/components/create-ticket-product-modal.tsx"
return (
  <FocusModal open={open} onOpenChange={handleCloseModal}>
    <FocusModal.Content>
      <FocusModal.Header className="justify-start py-0">
        <div className="flex flex-col gap-4 w-full">
          <ProgressTabs
            value={currentStep}
            onValueChange={setCurrentStep}
            className="w-full"
          >
            <ProgressTabs.List className="w-full">
              {steps.map((step) => (
                <ProgressTabs.Trigger 
                  key={step.value} 
                  value={step.value}
                  status={step.status}
                >
                  {step.label}
                </ProgressTabs.Trigger>
              ))}
            </ProgressTabs.List>
          </ProgressTabs>
        </div>
      </FocusModal.Header>
      <FocusModal.Body className="flex flex-1 flex-col p-6">
        <ProgressTabs
          value={currentStep}
          onValueChange={setCurrentStep}
          className="flex-1 w-full mx-auto"
        >
          {steps.map((step) => (
            <ProgressTabs.Content key={step.value} value={step.value} className="flex-1">
              <div className="max-w-[720px] mx-auto">
                {step.content}
              </div>
            </ProgressTabs.Content>
          ))}
        </ProgressTabs>
      </FocusModal.Body>
      <FocusModal.Footer>
        <Button
          variant="secondary"
          onClick={() => setCurrentStep(currentStep === "1" ? "0" : "0")}
          disabled={currentStep === "0"}
        >
          Previous
        </Button>
        
        {currentStep === "0" ? (
          <Button
            variant="primary"
            onClick={handleStep1Next}
          >
            Next
          </Button>
        ) : (
          <Button
            variant="primary"
            onClick={handleStep2Submit}
            isLoading={isLoading}
          >
            Create Show
          </Button>
        )}
      </FocusModal.Footer>
    </FocusModal.Content>
  </FocusModal>
)
```

You render the `FocusModal` component with a header containing progress tabs for navigation between steps, a body displaying the content of the current step, and a footer with buttons to navigate between steps or submit the form.

### d. Add Modal to Ticket Products Page

You can now render the `CreateTicketProductModal` component in the `TicketProductsPage` component.

In `src/admin/routes/ticket-products/page.tsx`, add the following imports at the top of the file:

```tsx title="src/admin/routes/ticket-products/page.tsx"
import {
  Button,
} from "@medusajs/ui"
import { CreateTicketProductModal } from "../../components/create-ticket-product-modal"
```

Then, in the `TicketProductsPage` component, add the following state variable to manage the modal's open state:

```tsx title="src/admin/routes/ticket-products/page.tsx"
const TicketProductsPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  // ...
}
```

Next, before the return statement, add the following functions to handle closing the modal and submitting the form:

```tsx title="src/admin/routes/ticket-products/page.tsx"
const TicketProductsPage = () => {
  // ...
  const handleCloseModal = () => {
    setIsModalOpen(false)
  }

const handleCreateTicketProduct = async (data: any) => {
    try {
      await sdk.client.fetch("/admin/ticket-products", {
        method: "POST",
        body: data,
      })
      queryClient.invalidateQueries({ queryKey: ["ticket-products"] })
      handleCloseModal()
    } catch (error: any) {
      toast.error(`Failed to create show: ${error.message}`)
    }
  }
  // ...
}
```

You define the `handleCloseModal` function to close the modal, and the `handleCreateTicketProduct` function to submit the form data to the `POST /admin/ticket-products` API route you created earlier.

Finally, in the return statement, add a button to open the modal as the last child of `DataTable.Toolbar`:

```tsx title="src/admin/routes/ticket-products/page.tsx"
return (
  <Container className="divide-y p-0">
    {/* ... */}
      <Button
        variant="secondary"
        onClick={() => setIsModalOpen(true)}
      >
        Create Show
      </Button>
    {/* ... */}
  </Container>
)
```

And add the `CreateTicketProductModal` component as the last child of the `Container` component:

```tsx title="src/admin/routes/ticket-products/page.tsx"
return (
  <Container className="divide-y p-0">
    {/* ... */}
    <CreateTicketProductModal
      open={isModalOpen}
      onOpenChange={handleCloseModal}
      onSubmit={handleCreateTicketProduct}
    />
  </Container>
)
```

### Test the Ticket Products Page

You can now test the ticket products page in the Medusa Admin.

Start the Medusa server if it isn't already running. If you open the Medusa Admin and log in, you should see a new "Shows" item in the sidebar. If you click on it, you can see a table of ticket products with a button to create a new show.

![Shows page with the table of ticket products and a button to create a new show](https://res.cloudinary.com/dza7lstvk/image/upload/v1757490157/Medusa%20Resources/CleanShot_2025-09-10_at_10.42.00_2x_jsaq7v.png)

To create a new show (or ticket product):

1. Click the "Create Show" button to open the modal.
2. In the "Product Details" step, enter a name for the show, select a venue, and select one or more dates using the date pickers.
3. Click "Next" to go to the "Pricing" step.

![Create Show modal with the Product Details step](https://res.cloudinary.com/dza7lstvk/image/upload/v1757490395/Medusa%20Resources/CleanShot_2025-09-10_at_10.46.23_2x_v2pbuo.png)

4. In the "Pricing" step, set prices for each row type. You can set prices in different currencies and regions. All prices are optional.
5. Once you're done, click "Create Show" to submit the form.

![Create Show modal with the Pricing step](https://res.cloudinary.com/dza7lstvk/image/upload/v1757490725/Medusa%20Resources/CleanShot_2025-09-10_at_10.51.55_2x_bijkab.png)

This will create a new ticket product with a Medusa product. You can view the ticket product in the table, and you can click the link to view the associated Medusa product.

You can edit the associated Medusa product to add images, descriptions, and other details for the show.

---

## Step 10: Validate Ticket on Add to Cart

In this step, you'll add custom validation to the core add-to-cart operation that ensures a seat isn't purchased more than once for the same date.

Medusa implements cart operations in workflows. Specifically, you'll focus on the `addToCartWorkflow`. Medusa allows you to inject custom logic into workflows using [hooks](!docs!/learn/fundamentals/workflows/workflow-hooks).

A workflow hook is a point in a workflow where you can inject custom functionality as a step function.

To consume the `validate` hook of the `addToCartWorkflow` that holds the add-to-cart logic, create the file `src/workflows/hooks/add-to-cart-validation.ts` with the following content:

```ts title="src/workflows/hooks/add-to-cart-validation.ts"
import { addToCartWorkflow } from "@medusajs/medusa/core-flows"
import { MedusaError } from "@medusajs/framework/utils"

// Hook for addToCartWorkflow to validate seat availability
addToCartWorkflow.hooks.validate(
  async ({ input }, { container }) => {
    const items = input.items
    const query = container.resolve("query")

// Get the product variant to check if it's a ticket product variant
    const { data: productVariants } = await query.graph({
      entity: "product_variant",
      fields: ["id", "product_id", "ticket_product_variant.purchases.*"],
      filters: {
        id: items.map((item) => item.variant_id).filter(Boolean) as string[],
      },
    })

// Get existing cart items to check for conflicts
    const { data: [cart] } = await query.graph({
      entity: "cart",
      fields: ["items.*"],
      filters: {
        id: input.cart_id,
      },
    }, {
      throwIfKeyNotFound: true,
    })

// Check each item being added to cart
    for (const item of items) {
      if (item.quantity !== 1) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA, 
          "You can only purchase one ticket for a seat."
        )
      }
      const productVariant = productVariants.find(
        (variant) => variant.id === item.variant_id
      )

if (!productVariant || !item.metadata?.seat_number) {continue}

if (!item.metadata?.show_date) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA,
          `Show date is required for seat ${item.metadata?.seat_number} in product ${productVariant.product_id}`
        )
      }

// Check if seat has already been purchased
      const existingPurchase = productVariant.ticket_product_variant?.purchases.find(
        (purchase) => purchase?.seat_number === item.metadata?.seat_number 
          && purchase?.show_date === item.metadata?.show_date
      )

if (existingPurchase) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA,
          `Seat ${item.metadata?.seat_number} has already been purchased for show date ${item.metadata?.show_date}`
        )
      }

// Check if seat is already in the cart
      const existingCartItem = cart.items.find(
        (cartItem) => cartItem?.metadata?.seat_number === item.metadata?.seat_number 
          && cartItem?.metadata?.show_date === item.metadata?.show_date
      )

if (existingCartItem) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA,
          `Seat ${item.metadata?.seat_number} is already in your cart for show date ${item.metadata?.show_date}`
        )
      }
    }
  }
)
```

You consume the hook by calling `addToCartWorkflow.hooks.validate`, passing it a step function.

In the step function, you:

- Retrieve the product variants being added to the cart with their associated ticket product variant purchases.
- Retrieve the existing cart items to check for conflicts.
- Throw an error if:
    - The quantity of any item being added is more than 1 (you can only purchase one ticket for a seat).
    - The show date is missing in the item metadata.
    - The seat has already been purchased for the same show date.
    - The seat is already in the cart for the same show date.

If the hook throws an error, the add-to-cart operation will be aborted and the error message will be returned to the client.

You can test out the hook when you [customize the storefront](./storefront/page.mdx).

---

## Step 11: Custom Complete Cart

In this step, you'll create a custom complete cart workflow that wraps the default `completeCartWorkflow` to add logic that creates ticket purchases for each ticket product variant in the cart. Then, you'll execute that workflow in a custom API route.

### a. Custom Complete Cart Workflow

The custom workflow that completes the cart has the following steps:

You only need to implement the `createTicketPurchasesStep` and `validateTicketOrderStep` steps, as the other steps and workflows are provided by Medusa.

#### createTicketPurchasesStep

The `createTicketPurchasesStep` creates ticket purchases for each ticket product variant in a cart.

To create the step, create the file `src/workflows/steps/create-ticket-purchases.ts` with the following content:

```ts title="src/workflows/steps/create-ticket-purchases.ts" collapsibleLines="1-10" expandButtonLabel="Show Imports"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { 
  CartDTO, 
  CartLineItemDTO, 
  ProductVariantDTO,
  InferTypeOf,
} from "@medusajs/framework/types"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"
import TicketProductVariant from "../../modules/ticket-booking/models/ticket-product-variant"

export type CreateTicketPurchasesStepInput = {
  order_id: string
  cart: CartDTO & {
    items: CartLineItemDTO & {
      variant?: ProductVariantDTO & {
        ticket_product_variant?: InferTypeOf<typeof TicketProductVariant>
      }
    }[]
  }
}

export const createTicketPurchasesStep = createStep(
  "create-ticket-purchases",
  async (input: CreateTicketPurchasesStepInput, { container }) => {
    const { order_id, cart } = input
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

const ticketPurchasesToCreate: {
      order_id: string
      ticket_product_id: string
      ticket_variant_id: string
      venue_row_id: string
      seat_number: string
      show_date: Date
    }[] = []

// Process each item in the cart
    for (const item of cart.items) {
      if (
        !item?.variant?.ticket_product_variant || 
        !item?.metadata?.venue_row_id || 
        !item?.metadata?.seat_number
      ) {continue}

ticketPurchasesToCreate.push({
        order_id,
        ticket_product_id: item.variant.ticket_product_variant.ticket_product_id,
        ticket_variant_id: item.variant.ticket_product_variant.id,
        venue_row_id: item?.metadata.venue_row_id as string,
        seat_number: item?.metadata.seat_number as string,
        show_date: new Date(
          item?.variant.options.find(
            (option: any) => option.option.title === "Date"
          )?.value as string
        ),
      })
    }

const ticketPurchases = await ticketBookingModuleService.createTicketPurchases(
      ticketPurchasesToCreate
    )
    
    return new StepResponse(
      ticketPurchases,
      ticketPurchases
    )
  },
  async (ticketPurchases, { container }) => {
    if (!ticketPurchases) {return}

const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

// Delete the created ticket purchases
    await ticketBookingModuleService.deleteTicketPurchases(
      ticketPurchases.map((ticketPurchase) => ticketPurchase.id)
    )
  }
)
```

The `createTicketPurchasesStep` accepts the cart and order ID as input.

In the step function, you prepare the ticket purchases to be created, create the ticket purchases, and return them.

In the compensation function, you delete the created ticket purchases if an error occurs in the workflow.

#### validateTicketOrderStep

The `validateTicketOrderStep` validates that the tickets can be purchased based on their availability.

To create the step, create the file `src/workflows/steps/validate-ticket-order.ts` with the following content:

```ts title="src/workflows/steps/validate-ticket-order.ts"
import { MedusaError } from "@medusajs/framework/utils"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { cancelOrderWorkflow } from "@medusajs/medusa/core-flows"

export type ValidateTicketOrderStepInput = {
  items: {
    id: string
    variant_id: string
    metadata: Record<string, unknown>
    quantity: number
    variant?: {
      id: string
      product_id: string
      ticket_product_variant?: {
        purchases?: {
          seat_number: string
          show_date: Date
        }[]
      }
    }
  }[]
  order_id: string
}

export const validateTicketOrderStep = createStep(
  "validate-ticket-order",
  async ({ items, order_id }: ValidateTicketOrderStepInput, { container }) => {
    // Check for duplicate seats within the cart
    const seatDateCombinations = new Set<string>()
    
    for (const item of items) {
      if (item.quantity !== 1) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA, 
          "You can only purchase one ticket for a seat."
        )
      }

if (!item.variant || !item.metadata?.seat_number) {continue}

if (!item.metadata?.show_date) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA, 
          `Show date is required for seat ${item.metadata?.seat_number} in product ${item.variant.product_id}`
        )
      }

// Create a unique key for seat and date combination
      const seatDateKey = `${item.metadata?.seat_number}-${item.metadata?.show_date}`
      
      // Check if this seat-date combination already exists in the cart
      if (seatDateCombinations.has(seatDateKey)) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA, 
          `Duplicate seat ${item.metadata?.seat_number} found for show date ${item.metadata?.show_date} in cart`
        )
      }
      
      // Add to the set to track this combination
      seatDateCombinations.add(seatDateKey)

// Check if seat has already been purchased
      const existingPurchase = item.variant.ticket_product_variant?.purchases?.find(
        (purchase) => purchase?.seat_number === item.metadata?.seat_number 
          && purchase?.show_date === item.metadata?.show_date
      )

if (existingPurchase) {
        throw new MedusaError(
          MedusaError.Types.INVALID_DATA, 
          `Seat ${item.metadata?.seat_number} has already been purchased for show date ${item.metadata?.show_date}`
        )
      }
    }

return new StepResponse({ validated: true }, order_id)
  },
  async (order_id, { container, context }) => {
    if (!order_id) {return}

cancelOrderWorkflow(container).run({
      input: {
        order_id,
      },
      context,
      container,
    })
  }
)
```

The `validateTicketOrderStep` accepts the cart items and order ID as input.

In the step function, you validate that:

1. No seat is purchased more than once for the same date within the cart.
2. No seat has already been purchased for the same date.

If any validation fails, you throw an error to abort the workflow.

The step also has a compensation function that cancels the order if an error occurs later in the workflow. This is important to ensure that if ticket purchase creation fails, the order is not left in a completed state.

#### Custom Complete Cart Workflow

You can now create the custom workflow that completes the cart and creates ticket purchases.

Create the file `src/workflows/complete-cart-with-tickets.ts` with the following content:

```ts title="src/workflows/complete-cart-with-tickets.ts" collapsibleLines="1-14" expandButtonLabel="Show Imports"
import { createWorkflow, transform, when, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { 
  completeCartWorkflow, 
  createRemoteLinkStep, 
  acquireLockStep, 
  releaseLockStep, 
  useQueryGraphStep,
} from "@medusajs/medusa/core-flows"
import { createTicketPurchasesStep, CreateTicketPurchasesStepInput } from "./steps/create-ticket-purchases"
import { TICKET_BOOKING_MODULE } from "../modules/ticket-booking"
import { Modules } from "@medusajs/framework/utils"
import ticketPurchaseOrderLink from "../links/ticket-purchase-order"
import { validateTicketOrderStep, ValidateTicketOrderStepInput } from "./steps/validate-ticket-order"

export type CompleteCartWithTicketsWorkflowInput = {
  cart_id: string
}

export const completeCartWithTicketsWorkflow = createWorkflow(
  "complete-cart-with-tickets",
  (input: CompleteCartWithTicketsWorkflowInput) => {
    acquireLockStep({
      key: input.cart_id,
      timeout: 2,
      ttl: 10,
    })
    const order = completeCartWorkflow.runAsStep({
      input: {
        id: input.cart_id,
      },
    })

const { data: carts } = useQueryGraphStep({
      entity: "cart",
      fields: [
        "id", 
        "items.variant.*",
        "items.variant.options.*",
        "items.variant.options.option.*",
        "items.variant.ticket_product_variant.*",
        "items.variant.ticket_product_variant.ticket_product.*",
        "items.variant.ticket_product_variant.purchases.*",
        "items.metadata",
        "items.quantity",
      ],
      filters: {
        id: input.cart_id,
      },
      options: {
        throwIfKeyNotFound: true,
      },
    })

const { data: existingLinks } = useQueryGraphStep({
      entity: ticketPurchaseOrderLink.entryPoint,
      fields: ["ticket_purchase.id"],
      filters: { order_id: order.id },
    }).config({ name: "retrieve-existing-links" })

when({ existingLinks }, (data) => data.existingLinks.length === 0)
    .then(() => {
      validateTicketOrderStep({
        items: carts[0].items,
        order_id: order.id,
      } as unknown as ValidateTicketOrderStepInput)
      const ticketPurchases = createTicketPurchasesStep({
        order_id: order.id,
        cart: carts[0],
      } as unknown as CreateTicketPurchasesStepInput)
  
      const linkData = transform({
        order,
        ticketPurchases,
      }, (data) => {
        return data.ticketPurchases.map((purchase) => ({
          [TICKET_BOOKING_MODULE]: {
            ticket_purchase_id: purchase.id,
          },
          [Modules.ORDER]: {
            order_id: data.order.id,
          },
        }))
      })
  
      createRemoteLinkStep(linkData)
    })

const { data: refetchedOrder } = useQueryGraphStep({
      entity: "order",
      fields: [
        "id",
        "currency_code",
        "email",
        "customer.*",
        "billing_address.*",
        "payment_collections.*",
        "items.*",
        "total",
        "subtotal",
        "tax_total",
        "shipping_total",
        "discount_total",
        "created_at",
        "updated_at",
      ],
      filters: {
        id: order.id,
      },
    }).config({ name: "refetch-order" })

releaseLockStep({
      key: input.cart_id,
    })

return new WorkflowResponse({
      order: refetchedOrder[0],
    })
  }
)
```

The `completeCartWithTicketsWorkflow` accepts the cart ID as input.

In the workflow function, you:

1. Acquire a lock on the cart to prevent concurrent modifications using the `acquireLockStep`.
2. Complete the cart using Medusa's `completeCartWorkflow`.
3. Retrieve the cart details using the `useQueryGraphStep`.
4. Retrieve existing ticket purchases linked to the order to ensure idempotency using the `useQueryGraphStep`.
    - This is important because if the workflow is retried, you don't want to create duplicate ticket purchases.
5. Use `when` to check that there are no existing links between the order and ticket purchases. If so, you:
    1. Validate that the ticket order can be processed using the `validateTicketOrderStep`.
    2. Create ticket purchases for each ticket product variant in the cart using the `createTicketPurchasesStep`.
    3. Create links between the order and the created ticket purchases using the `createRemoteLinkStep`.
6. Retrieve the order details using the `useQueryGraphStep`.
7. Release the lock on the cart using the `releaseLockStep`.

Finally, you return the order details.

### b. Custom Complete Cart API Route

Next, you'll create a custom API route that executes the `completeCartWithTicketsWorkflow` to complete the cart and create ticket purchases.

Create the file `src/api/store/carts/[id]/complete-tickets/route.ts` with the following content:

```ts title="src/api/store/carts/[id]/complete-tickets/route.ts"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { completeCartWithTicketsWorkflow } from "../../../../../workflows/complete-cart-with-tickets"

export async function POST(
  req: MedusaRequest,
  res: MedusaResponse
) {
  const { result } = await completeCartWithTicketsWorkflow(req.scope).run({
    input: {
      cart_id: req.params.id,
    },
  })

res.json({
    type: "order",
    order: result.order,
  })
}
```

Since you export a `POST` route handler function, you expose a `POST` API route at `/store/carts/{id}/complete-tickets`.

In the route handler, you execute the `completeCartWithTicketsWorkflow` and return the created order in the response.

You'll test out this API route when you [customize the storefront](./storefront/page.mdx#update-cart-functions).

---

## Step 12: Storefront API Routes

To [customize the storefront](./storefront/page.mdx) in the next part, you need two API routes that the storefront will consume:

1. An API route to fetch the available dates for a ticket product.
2. An API route to fetch the seating layout for a venue, including details on which seats are already booked for a specific date.

You'll test these API routes when you customize the storefront.

### a. Available Dates API Route

The first API route you'll create fetches the available dates for a ticket product.

Create the file `src/api/store/ticket-products/[id]/availability/route.ts` with the following content:

```ts title="src/api/store/ticket-products/[id]/availability/route.ts"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { MedusaError } from "@medusajs/framework/utils"

export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
  const { id } = req.params
  const query = req.scope.resolve("query")

const { data: [ticketProduct] } = await query.graph({
    entity: "ticket_product",
    fields: [
      "id",
      "product_id",
      "dates",
      "venue.*",
      "venue.rows.*",
      "variants.*",
      "variants.product_variant.*",
      "variants.product_variant.options.*",
      "variants.product_variant.options.option.*",
      "variants.product_variant.ticket_product_variant.*",
      "variants.product_variant.ticket_product_variant.purchases.*",
    ],
    filters: {
      product_id: id,
    },
  })

if (!ticketProduct) {
    throw new MedusaError(MedusaError.Types.NOT_FOUND, "Ticket product not found")
  }

// Calculate availability for each date and row type
  const availability = ticketProduct.dates.map((date: string) => {
    // Group rows by row_type to get total seats per row type
    const rowTypeGroups = ticketProduct.venue.rows.reduce((groups: any, row: any) => {
      if (!groups[row.row_type]) {
        groups[row.row_type] = {
          row_type: row.row_type,
          total_seats: 0,
          rows: [],
        }
      }
      groups[row.row_type].total_seats += row.seat_count
      groups[row.row_type].rows.push(row)
      return groups
    }, {})

const dateAvailability = {
      date,
      row_types: Object.values(rowTypeGroups).map((group: any) => {
        // Find the variant for this date and row type
        const variant = ticketProduct.variants.find((v: any) => {
          const variantDate = v.product_variant.options.find((opt: any) => 
            opt.option?.title === "Date"
          )?.value
          const variantRowType = v.product_variant.options.find((opt: any) => 
            opt.option?.title === "Row Type"
          )?.value
          
          return variantDate === date && variantRowType === group.row_type
        })

if (!variant) {
          return {
            row_type: group.row_type,
            total_seats: group.totalSeats,
            available_seats: 0,
            soldOut: true,
          }
        }

// Count purchased seats for this variant
        const purchasedSeats = variant.product_variant?.ticket_product_variant?.purchases?.length || 0
        const availableSeats = Math.max(0, group.total_seats - purchasedSeats)
        const soldOut = availableSeats === 0

return {
          row_type: group.row_type,
          total_seats: group.total_seats,
          available_seats: availableSeats,
          sold_out: soldOut,
        }
      }),
    }

// Check if the entire date is sold out
    const totalAvailableSeats = dateAvailability.row_types.reduce(
      (sum, rowType) => sum + rowType.available_seats, 0
    )
    const dateSoldOut = totalAvailableSeats === 0

return {
      ...dateAvailability,
      sold_out: dateSoldOut,
    }
  })

return res.json({
    ticket_product: ticketProduct,
    availability,
  })
}
```

You expose a `GET` API route at `/store/ticket-products/{id}/availability`.

In the route handler, you:

1. Retrieve the ticket product by its associated Medusa product ID, including its dates, venue, variants, and purchases.
2. For each show date, you group the venue rows by `row_type` to calculate the total seats per row type.
3. For each row type, you find the corresponding variant for the date and row type, count the purchased seats, and calculate the available seats.
4. You also determine if a row type or an entire date is sold out.
5. Finally, you return the ticket product and its availability in the response.

### b. Seating Layout API Route

The second API route you'll create fetches the seating layout for a venue, including details on which seats are already booked for a specific date.

Create the file `src/api/store/ticket-products/[id]/seats/route.ts` with the following content:

```ts title="src/api/store/ticket-products/[id]/seats/route.ts"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { MedusaError } from "@medusajs/framework/utils"
import { z } from "zod"

export const GetTicketProductSeatsSchema = z.object({
  date: z.string(),
})

export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
  const { id } = req.params
  const { date } = req.validatedQuery
  const query = req.scope.resolve("query")

const { data: [ticketProduct] } = await query.graph({
    entity: "ticket_product",
    fields: [
      "id",
      "product_id",
      "venue.*",
      "venue.rows.*",
      "variants.*",
      "variants.product_variant.*",
      "variants.product_variant.options.*",
      "variants.product_variant.options.option.*",
      "variants.product_variant.ticket_product_variant.*",
      "variants.product_variant.ticket_product_variant.purchases.*",
    ],
    filters: {
      product_id: id,
    },
  })

if (!ticketProduct) {
    throw new MedusaError(MedusaError.Types.NOT_FOUND, "Ticket product not found")
  }

// Build seat map for the specified date
  const seatMap = ticketProduct.venue.rows.map((row: any) => {
    // Find the variant for this date and row type
    const variant = ticketProduct.variants.find((v: any) => {
      const variantDate = v.product_variant.options.find((opt: any) => 
        opt.option?.title === "Date"
      )?.value
      const variantRowType = v.product_variant.options.find((opt: any) => 
        opt.option?.title === "Row Type"
      )?.value
      
      return variantDate === date && variantRowType === row.row_type
    })

// Get purchased seats for this variant
    const purchasedSeats = variant?.product_variant?.ticket_product_variant?.purchases?.map(
      (purchase) => purchase?.seat_number
    ).filter(Boolean) || []

// Generate seat numbers for this row
    const seats = Array.from({ length: row.seat_count }, (_, index) => {
      const seatNumber = (index + 1).toString()
      const isPurchased = purchasedSeats.includes(seatNumber)
      
      return {
        number: seatNumber,
        is_purchased: isPurchased,
        variant_id: variant?.product_variant?.id || null,
      }
    })

return {
      row_number: row.row_number,
      row_type: row.row_type,
      seats,
    }
  })

return res.json({
    venue: ticketProduct.venue,
    date,
    seat_map: seatMap,
  })
}
```

You expose a `GET` API route at `/store/ticket-products/{id}/seats`. You also define a Zod schema to validate the `date` query parameter.

In the route handler, you:

1. Retrieve the ticket product by its associated Medusa product ID, including its venue, rows, variants, and purchases.
2. For each venue row, you find the corresponding variant for the specified date and row type.
3. You get the purchased seats for that variant and generate a list of seats for the row, marking which seats are already purchased.
4. Finally, you return the venue details, the specified date, and the seat map in the response.

You also need to apply a middleware to validate the query parameters using the Zod schema you defined. So, in `src/api/middlewares.ts`, add the following import at the top of the file:

```ts title="src/api/middlewares.ts"
import { GetTicketProductSeatsSchema } from "./store/ticket-products/[id]/seats/route"
```

Then, pass a new object to the `routes` array passed to the `defineMiddlewares` function:

```ts title="src/api/middlewares.ts"
export default defineMiddlewares({
  routes: [
    // ...
    {
      matcher: "/store/ticket-products/:id/seats",
      methods: ["GET"],
      middlewares: [validateAndTransformQuery(GetTicketProductSeatsSchema, {})],
    },
  ],
})
```

You apply the `validateAndTransformQuery` middleware to the `/store/ticket-products/:id/seats` route for `GET` requests. You pass the `GetTicketProductSeatsSchema` to validate the query parameters.

---

## Step 13: Send Order Confirmation Email with Tickets

The last step is to send order confirmation emails to customers with their tickets as QR codes.

To send an email in Medusa when an order is placed, you'll need:

- A [Notification Module Provider](../../../infrastructure-modules/notification/page.mdx) to handle sending emails. For example, [SendGrid](../../../infrastructure-modules/notification/sendgrid/page.mdx) or [Resend](../../../integrations/guides/resend/page.mdx).
    - You also need to define an email template for the order confirmation email in the provider.
- A method in the Ticket Booking Module's service that generates the ticket QR codes.
- A [Subscriber](!docs!/learn/fundamentals/events-and-subscribers) that listens to the `order.placed` event and sends an email with the order details.
- A workflow and API route to handle verifying scanned QR codes at the event entrance.

### a. Set Up Notification Module

First, set up a Notification Module Provider in your Medusa application.

For example, to set up the SendGrid Notification Module Provider, add it to `medusa-config.ts`:

```ts title="medusa-config.ts"
module.exports = defineConfig({
  // ...
  modules: [
    // ...
    {
      resolve: "@medusajs/medusa/notification",
      options: {
        providers: [
          {
            resolve: "@medusajs/medusa/notification-sendgrid",
            id: "sendgrid",
            options: {
              channels: ["email"],
              api_key: process.env.SENDGRID_API_KEY,
              from: process.env.SENDGRID_FROM,
            },
          },
        ],
      },
    },
  ],
})
```

Make sure to set the `SENDGRID_API_KEY` and `SENDGRID_FROM` environment variables in your `.env` file, as explained in the [SendGrid Notification Module Provider guide](../../../infrastructure-modules/notification/sendgrid/page.mdx).

You also need to define an email template for the order confirmation email in SendGrid. The following is a dynamic template you can use:

```html
<!doctype html>
<html lang="en" style="margin:0;padding:0;">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Order Confirmation – {{brand_name}}</title>
  <style>
    /* Dark mode friendly neutrals, safe for most clients */
    :root { color-scheme: light dark; supported-color-schemes: light dark; }
    body { margin:0; padding:0; background:#f6f7f9; -webkit-text-size-adjust:100%; }
    .wrapper { width:100%; table-layout:fixed; background:#f6f7f9; padding:24px 0; }
    .container { margin:0 auto; width:100%; max-width:640px; background:#ffffff; border-radius:12px; overflow:hidden; }
    .header { padding:24px; text-align:left; background:#0e1116; color:#ffffff; }
    .brand { font: 600 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; }
    .content { padding:24px; color:#0e1116; font: 400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; }
    .muted { color:#6b7280; font-size:14px; }
    .section-title { font-weight:600; margin:24px 0 8px; }
    .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
    .divider { height:1px; background:#e5e7eb; margin:24px 0; }
    .btn {
      display:inline-block; text-decoration:none; background:#0e1116; color:#ffffff !important;
      padding:12px 18px; border-radius:10px; font-weight:600;
    }
    /* QR grid */
    .qr-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
    @media (max-width:480px) { .qr-grid { grid-template-columns: 1fr; } }
    .qr-item { border:1px solid #e5e7eb; border-radius:10px; padding:14px; text-align:center; }
    .qr-item img { display:block; margin:0 auto 10px; width:220px; height:220px; object-fit:contain; }
    .qr-label { font-weight:600; margin-bottom:2px; }
    .qr-meta { font-size:13px; color:#6b7280; }
    .ticket-note { font-size:13px; color:#374151; margin-top:8px; }
    /* Small print */
    .footer { padding:18px 24px 28px; text-align:center; color:#6b7280; font-size:12px; }
    .nowrap { white-space:nowrap; }
    a { color:#0e63ff; }
  </style>
</head>
<body>
  <table role="presentation" class="wrapper" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center">
        <table role="presentation" class="container" cellpadding="0" cellspacing="0" width="100%">
          
          <tr>
            <td class="header">
              <div class="brand">Medusa</div>
            </td>
          </tr>

<tr>
            <td class="content">
              <p>Hi {{customer.first_name}},</p>
              <p>Thanks for your order! Your tickets for <strong>{{show.name}}</strong> are confirmed.</p>

<div class="card">
                <div><strong>Order #:</strong> {{order.display_id}}</div>
                <div><strong>Date:</strong> {{order.created_at}}</div>
                {{#if order.email}}
                  <div><strong>Sent to:</strong> {{order.email}}</div>
                {{/if}}
                {{#if show.date}}
                  <div><strong>Event:</strong> {{show.date}}</div>
                {{/if}}
                {{#if show.venue}}
                  <div><strong>Venue:</strong> {{show.venue}}</div>
                {{/if}}
              </div>

<h3 class="section-title">Your Tickets (QR Codes)</h3>
              <p class="muted" style="margin-top:0;">Show each QR code at the entrance. Each QR admits one person unless noted otherwise.</p>

<div class="qr-grid">
                {{#each tickets}}
                  <div class="qr-item">
                    
                    <img src="{{this.qr}}" alt="QR code for {{this.label}}" width="220" height="220" />
                    <div class="qr-label">{{this.label}}</div>
                    {{#if this.seat}}
                      <div class="qr-meta">Seat: {{this.seat}}</div>
                    {{/if}}
                    {{#if this.row}}
                      <div class="qr-meta">Row: {{this.row}}</div>
                    {{/if}}
                  </div>
                {{/each}}
              </div>

<p class="muted" style="margin-top:18px;">Please arrive at least 15 minutes before showtime and have your tickets ready.</p>

<h3 class="section-title">Billing</h3>
                <div class="card">
                  {{#if billing_address}}
                    <div><strong>Billing address</strong><br/>
                      {{billing_address.first_name}} {{billing_address.last_name}}<br/>
                      {{billing_address.address_1}}{{#if billing_address.address_2}}, {{billing_address.address_2}}{{/if}}<br/>
                      {{billing_address.city}}, {{billing_address.province}} {{billing_address.postal_code}}<br/>
                      {{billing_address.country_code}}
                    </div>
                  {{/if}}
                </div>

<p style="margin-top:24px;">Enjoy the show!</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
```

You can customize the template to fit your brand and requirements. If you change any variable names or add new variables, make sure to update the code in the next sections accordingly.

### b. Generate Ticket QR Codes

Next, you'll add a method in the Ticket Booking Module's service that generates the ticket QR codes.

Start by installing the `qrcode` package in your Medusa application with the following command:

```bash npm2yarn
npm install qrcode
npm install --save-dev @types/qrcode
```

Then, in `src/modules/ticket-booking/service.ts`, add the following imports at the top of the file:

```ts title="src/modules/ticket-booking/service.ts"
import { promiseAll } from "@medusajs/framework/utils"
import QRCode from "qrcode"
```

And add the following method to `TicketBookingModuleService`:

```ts title="src/modules/ticket-booking/service.ts"
export class TicketBookingModuleService extends MedusaService({
  Venue,
  VenueRow,
  TicketProduct,
  TicketProductVariant,
  TicketPurchase,
}) {
  async generateTicketQRCodes(
    ticketPurchaseIds: string[]
  ): Promise<Record<string, string>> {
    const ticketPurchases = await this.listTicketPurchases({
      id: ticketPurchaseIds,
    })
    const qrCodeData: Record<string, string> = {}

await promiseAll(
      ticketPurchases.map(async (ticketPurchase) => {
        qrCodeData[ticketPurchase.id] = await QRCode.toDataURL(
          ticketPurchase.id
        )
      })
    )

return qrCodeData
  }
}
```

The `generateTicketQRCodes` method takes an array of ticket purchase IDs. It retrieves the ticket purchases and generates a QR code for each ticket purchase using the `qrcode` package.

The QR code encodes the ticket purchase ID, which can be used later for verification at the event entrance.

### c. Create Order Placed Subscriber

Next, you'll create a subscriber that listens to the `order.placed` event and sends an order confirmation email with the tickets.

A subscriber is an asynchronous function that is executed when its associated event is emitted.

To create a subscriber that sends a notification to the customer when an order is placed, create the file `src/subscribers/order-placed.ts` with the following content:

```ts title="src/subscribers/order-placed.ts"
import { SubscriberArgs, type SubscriberConfig } from "@medusajs/medusa"
import { TICKET_BOOKING_MODULE } from "../modules/ticket-booking"

export default async function handleOrderPlaced({
  event: { data },
  container,
}: SubscriberArgs<{ id: string }>) {
  const query = container.resolve("query")
  const notificationModuleService = container.resolve("notification")
  const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

const { data: [order] } = await query.graph({
    entity: "order",
    fields: [
      "id", 
      "email", 
      "created_at",
      "items.*",
      "ticket_purchases.*",
      "ticket_purchases.ticket_product.*",
      "ticket_purchases.ticket_product.product.*",
      "ticket_purchases.ticket_product.venue.*",
      "ticket_purchases.venue_row.*",
      "customer.*",
      "billing_address.*",
    ],
    filters: {
      id: data.id,
    },
  })

const ticketPurchaseIds: string[] = order.ticket_purchases?.
    map((purchase) => purchase?.id).filter(Boolean) as string[] || []

const qrCodes = await ticketBookingModuleService.generateTicketQRCodes(
    ticketPurchaseIds
  )
  const firstTicketPurchase = order.ticket_purchases?.[0]

await notificationModuleService.createNotifications({
    to: order.email || "",
    channel: "feed",
    // TODO replace with a proper template
    template: "order.placed",
    data: {
      customer: {
        first_name: order.customer?.first_name || 
          order.billing_address?.first_name,
        last_name: order.customer?.last_name || 
          order.billing_address?.last_name,
      },
      order: {
        display_id: order.id,
        created_at: order.created_at,
        email: order.email,
      },
      show: {
        name: firstTicketPurchase?.ticket_product?.product?.title || 
          "Your Event",
        date: firstTicketPurchase?.show_date.toLocaleString(),
        venue: firstTicketPurchase?.ticket_product?.venue?.name || 
          "Venue Name",
      },
      tickets: order.ticket_purchases?.map((purchase) => ({
        label: purchase?.venue_row.row_type.toUpperCase(),
        seat: purchase?.seat_number,
        row: purchase?.venue_row.row_number,
        qr: qrCodes[purchase?.id || ""] || "",
      })),
      billing_address: order.billing_address,
    },
  })
}

export const config: SubscriberConfig = {
  event: "order.placed",
}
```

A subscriber file must export:

- An asynchronous function that is executed when its associated event is emitted.
- An object that indicates the event that the subscriber is listening to.

The subscriber receives among its parameters the data payload of the emitted event, which includes the order ID.

In the subscriber, you:

- Retrieve the order details, including ticket purchases, customer information, and billing address.
- Extract the ticket purchase IDs from the order.
- Generate QR codes for the ticket purchases.
- Use the Notification Module's service to send an email to the customer with the order details and tickets.
    - The `data` object contains the variables used in the email template you defined earlier.
    - Make sure to change the `template` property to match the template ID you created in your Notification Module Provider. For example, the ID of the dynamic template in SendGrid.

### Test Order Confirmation Email

To test the order confirmation email, [customize the storefront](./storefront/page.mdx) first. Then, start the Medusa application and the Next.js Starter Storefront.

Place an order with at least one ticket product. After placing the order, you'll see the following message in your Medusa application's terminal:

```bash
info:    Processing order.placed which has 1 subscribers
```

If no errors occur, you should receive an order confirmation email at the email address you used when placing the order. The email should contain the order details and the tickets with QR codes.

### d. Verify Ticket QR Code Workflow

In this section, you'll implement functionality to verify QR codes, which is useful for checking tickets at event entrances.

To implement this functionality, you'll create a workflow and then execute it in an API route.

The workflow that verifies a ticket QR code has the following steps:

You need to implement both steps.

#### verifyTicketPurchaseStep

The `verifyTicketPurchaseStep` verifies that a ticket purchase is valid and has not been used yet.

To create the step, create the file `src/workflows/steps/verify-ticket-purchase-step.ts` with the following content:

```ts title="src/workflows/steps/verify-ticket-purchase-step.ts"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"
import { MedusaError } from "@medusajs/framework/utils"

export type VerifyTicketPurchaseStepInput = {
  ticket_purchase_id: string
}

export const verifyTicketPurchaseStep = createStep(
  "verify-ticket-purchase",
  async (input: VerifyTicketPurchaseStepInput, { container }) => {
    const ticketBookingService = container.resolve(TICKET_BOOKING_MODULE)
    
    const ticketPurchase = await ticketBookingService.retrieveTicketPurchase(
      input.ticket_purchase_id
    )

if (ticketPurchase.status !== "pending") {
      throw new MedusaError(
        MedusaError.Types.NOT_ALLOWED,
        "Ticket has already been scanned"
      )
    }

if (ticketPurchase.show_date < new Date()) {
      throw new MedusaError(
        MedusaError.Types.NOT_ALLOWED,
        "Ticket is expired or show date has passed"
      )
    }

return new StepResponse(true)
  }
)
```

The step takes the ticket purchase ID as input. In the step, you throw an error if the ticket has already been scanned or if the show date has passed.

#### updateTicketPurchaseStatusStep

The `updateTicketPurchaseStatusStep` updates the status of a ticket purchase.

To create the step, create the file `src/workflows/steps/update-ticket-purchase-status-step.ts` with the following content:

```ts title="src/workflows/steps/update-ticket-purchase-status-step.ts"
import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"

export type UpdateTicketPurchaseStatusStepInput = {
  ticket_purchase_id: string
  status: "pending" | "scanned"
}

export const updateTicketPurchaseStatusStep = createStep(
  "update-ticket-purchase-status",
  async (input: UpdateTicketPurchaseStatusStepInput, { container }) => {
    const ticketBookingService = container.resolve(TICKET_BOOKING_MODULE)
    
    const currentTicket = await ticketBookingService.retrieveTicketPurchase(
      input.ticket_purchase_id
    )
    
    const updatedTicket = await ticketBookingService.updateTicketPurchases({
      id: input.ticket_purchase_id,
      status: input.status,
    })

return new StepResponse(updatedTicket, {
      id: input.ticket_purchase_id,
      previousStatus: currentTicket.status,
    })
  },
  async (compensationData, { container }) => {
    if (!compensationData) {return}
    
    const ticketBookingService = container.resolve(TICKET_BOOKING_MODULE)
    await ticketBookingService.updateTicketPurchases({
      id: compensationData.id,
      status: compensationData.previousStatus,
    })
  }
)
```

The step receives the ticket purchase ID and the new status as input.

In the step, you update the ticket purchase status. In the compensation function, you undo the update if an error occurs in the workflow.

#### Verify Ticket QR Code Workflow

You can now create the workflow that verifies a ticket QR code.

Create the file `src/workflows/verify-ticket-purchase.ts` with the following content:

```ts title="src/workflows/verify-ticket-purchase.ts"
import { createWorkflow, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { verifyTicketPurchaseStep } from "./steps/verify-ticket-purchase-step"
import { updateTicketPurchaseStatusStep } from "./steps/update-ticket-purchase-status-step"

export type VerifyTicketPurchaseWorkflowInput = {
  ticket_purchase_id: string
}

export const verifyTicketPurchaseWorkflow = createWorkflow(
  "verify-ticket-purchase",
  function (input: VerifyTicketPurchaseWorkflowInput) {
    verifyTicketPurchaseStep(input)
    
    const ticketPurchase = updateTicketPurchaseStatusStep({
      ticket_purchase_id: input.ticket_purchase_id,
      status: "scanned",
    })

return new WorkflowResponse(ticketPurchase)
  }
)
```

The workflow receives the ticket purchase ID as input.

In the workflow, you verify the ticket purchase and then update its status to `scanned`.

### e. Verify Ticket API Route

Finally, you'll create an API route that executes the `verifyTicketPurchaseWorkflow` workflow to verify a ticket QR code. A QR scanner can call this API route when scanning a ticket at the event entrance.

To create the API route, create the file `src/api/tickets/[id]/verify/route.ts` with the following content:

```ts title="src/api/tickets/[id]/verify/route.ts"
import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { verifyTicketPurchaseWorkflow } from "../../../../workflows/verify-ticket-purchase"

export async function POST(req: MedusaRequest, res: MedusaResponse) {
  const { id } = req.params

await verifyTicketPurchaseWorkflow(req.scope).run({
    input: {
      ticket_purchase_id: id,
    },
  })
  
  res.json({
    success: true,
  })
}
```

You expose a `POST` API route at `/tickets/:id/verify`. In the route handler, you execute the `verifyTicketPurchaseWorkflow` workflow with the ticket purchase ID from the URL parameters.

If the ticket is valid, the route returns a success response with `200` status code. If the ticket is invalid, an error is thrown with `400` status code.

### Test Ticket Verification

To test the ticket verification functionality, start the Medusa application.

Then, place an order with at least one ticket product. After placing the order, check your email for the order confirmation email containing the tickets with QR codes.

Next, decode the QR code to get the ticket purchase ID. You can use an online QR code decoder or a QR code scanner app on your phone.

Finally, make a `POST` request to the `/tickets/:id/verify` API route with the ticket purchase ID:

```bash
curl -X POST http://localhost:9000/tickets/{ticket_purchase_id}/verify
```

Replace `{ticket_purchase_id}` with the actual ticket purchase ID you obtained from the QR code.

If the ticket is valid, you'll receive a success response. Otherwise, you'll receive an error response indicating the ticket is invalid or has already been scanned.

---

## Next Steps

You've now implemented the ticket booking functionality in the backend. Follow the [Ticket Booking Storefront](./storefront/page.mdx) tutorial to customize the Next.js Starter Storefront for ticket booking.

You can expand on this tutorial by adding more features, such as:

- Provide more management features for venues and ticket products, such as updating and deleting them.
- Allow purchasing tickets for specific times in a day.
- Handle [order events](/references/events#order-events), such as `order.canceled`, to make changes to ticket purchases.

### Learn More about Medusa

If you're new to Medusa, check out the [main documentation](!docs!/learn), where you'll get a more in-depth understanding of all the concepts you've used in this guide and more.

To learn more about the commerce features that Medusa provides, check out Medusa's [Commerce Modules](../../../commerce-modules/page.mdx).

### Troubleshooting

If you encounter issues during your development, check out the [troubleshooting guides](../../../troubleshooting/page.mdx).

### Getting Help

If you encounter issues not covered in the troubleshooting guides:

1. Visit the [Medusa GitHub repository](https://github.com/medusajs/medusa) to report issues or ask questions.
2. Join the [Medusa Discord community](https://discord.gg/medusajs) for real-time support from community members.