npx create-medusa-app@latest

import { model } from "@medusajs/framework/utils"
import { VenueRow } from "./venue-row"

export const Venue = model.define("venue", {
  id: model.id().primaryKey(),
  name: model.text(),
  address: model.text().nullable(),
  rows: model.hasMany(() => VenueRow, {
    mappedBy: "venue",
  }),
})
.cascades({
  delete: ["rows"],
})

export default Venue

import { model } from "@medusajs/framework/utils"
import { Venue } from "./venue"

export enum RowType {
  PREMIUM = "premium",
  BALCONY = "balcony",
  STANDARD = "standard",
  VIP = "vip"
}

export const VenueRow = model.define("venue_row", {
  id: model.id().primaryKey(),
  row_number: model.text(),
  row_type: model.enum(RowType),
  seat_count: model.number(),
  venue: model.belongsTo(() => Venue, {
    mappedBy: "rows",
  }),
})
.indexes([
  {
    on: ["venue_id", "row_number"],
    unique: true,
  },
])

export default VenueRow

import { model } from "@medusajs/framework/utils"
import { Venue } from "./venue"
import { TicketProductVariant } from "./ticket-product-variant"
import { TicketPurchase } from "./ticket-purchase"

export const TicketProduct = model.define("ticket_product", {
  id: model.id().primaryKey(),
  product_id: model.text().unique(),
  venue: model.belongsTo(() => Venue),
  dates: model.array(),
  variants: model.hasMany(() => TicketProductVariant, {
    mappedBy: "ticket_product",
  }),
  purchases: model.hasMany(() => TicketPurchase, {
    mappedBy: "ticket_product",
  }),
})
.indexes([
  {
    on: ["venue_id", "dates"],
  },
])

export default TicketProduct

import { model } from "@medusajs/framework/utils"
import { TicketProduct } from "./ticket-product"
import { RowType } from "./venue-row"
import { TicketPurchase } from "./ticket-purchase"

export const TicketProductVariant = model.define("ticket_product_variant", {
  id: model.id().primaryKey(),
  product_variant_id: model.text().unique(),
  ticket_product: model.belongsTo(() => TicketProduct, {
    mappedBy: "variants",
  }),
  row_type: model.enum(RowType),
  purchases: model.hasMany(() => TicketPurchase, {
    mappedBy: "ticket_variant",
  }),
})
.indexes([
  {
    on: ["ticket_product_id", "row_type"],
  },
])

export default TicketProductVariant

import { model } from "@medusajs/framework/utils"
import { TicketProduct } from "./ticket-product"
import { TicketProductVariant } from "./ticket-product-variant"
import { VenueRow } from "./venue-row"

export const TicketPurchase = model.define("ticket_purchase", {
  id: model.id().primaryKey(),
  order_id: model.text(),
  ticket_product: model.belongsTo(() => TicketProduct),
  ticket_variant: model.belongsTo(() => TicketProductVariant),
  venue_row: model.belongsTo(() => VenueRow),
  seat_number: model.text(),
  show_date: model.dateTime(),
  status: model.enum(["pending", "scanned"]).default("pending"),
})
.indexes([
  {
    on: ["order_id"],
  },
  {
    on: ["ticket_product_id", "venue_row_id", "seat_number", "show_date"],
    unique: true,
  },
])

export default TicketPurchase

import { MedusaService } from "@medusajs/framework/utils"
import Venue from "./models/venue"
import VenueRow from "./models/venue-row"
import TicketProduct from "./models/ticket-product"
import TicketProductVariant from "./models/ticket-product-variant"
import TicketPurchase from "./models/ticket-purchase"

export class TicketBookingModuleService extends MedusaService({
  Venue,
  VenueRow,
  TicketProduct,
  TicketProductVariant,
  TicketPurchase,
}) { }

export default TicketBookingModuleService

import TicketBookingModuleService from "./service"
import { Module } from "@medusajs/framework/utils"

export const TICKET_BOOKING_MODULE = "ticketBooking"

export default Module(TICKET_BOOKING_MODULE, {
  service: TicketBookingModuleService,
})

module.exports = defineConfig({
  // ...
  modules: [
    {
      resolve: "./src/modules/ticket-booking",
    },
  ],
})

npx medusa db:generate ticketBooking

npx medusa db:migrate

import TicketingModule from "../modules/ticket-booking"
import ProductModule from "@medusajs/medusa/product"
import { defineLink } from "@medusajs/framework/utils"

export default defineLink(
  {
    linkable: TicketingModule.linkable.ticketProduct,
    deleteCascade: true,
  },
  ProductModule.linkable.product
)

import TicketingModule from "../modules/ticket-booking"
import ProductModule from "@medusajs/medusa/product"
import { defineLink } from "@medusajs/framework/utils"

export default defineLink(
  {
    linkable: TicketingModule.linkable.ticketProductVariant,
    deleteCascade: true,
  },
  ProductModule.linkable.productVariant
)

import TicketingModule from "../modules/ticket-booking"
import OrderModule from "@medusajs/medusa/order"
import { defineLink } from "@medusajs/framework/utils"

export default defineLink(
  {
    linkable: TicketingModule.linkable.ticketPurchase,
    deleteCascade: true,
    isList: true,
  },
  OrderModule.linkable.order
)

npx medusa db:migrate

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { TICKET_BOOKING_MODULE } from "../../modules/ticket-booking"

export type CreateVenueStepInput = {
  name: string
  address?: string
}

export const createVenueStep = createStep(
  "create-venue",
  async (input: CreateVenueStepInput, { container }) => {
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

    const venue = await ticketBookingModuleService.createVenues(input)

    return new StepResponse(venue, venue)
  },
  async (venue, { container }) => {
    if (!venue) {return}

    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)
    
    await ticketBookingModuleService.deleteVenues(venue.id)
  }
)

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 CreateVenueRowsStepInput = {
  rows: {
    venue_id: string
    row_number: string
    row_type: RowType
    seat_count: number
  }[]
}

export const createVenueRowsStep = createStep(
  "create-venue-rows",
  async (input: CreateVenueRowsStepInput, { container }) => {
    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)

    const venueRows = await ticketBookingModuleService.createVenueRows(
      input.rows
    )

    return new StepResponse(venueRows, venueRows)
  },
  async (venueRows, { container }) => {
    if (!venueRows) {return}

    const ticketBookingModuleService = container.resolve(TICKET_BOOKING_MODULE)
    
    await ticketBookingModuleService.deleteVenueRows(
      venueRows.map((row) => row.id)
    )
  }
)

import { createWorkflow, transform, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { createVenueStep } from "./steps/create-venue"
import { createVenueRowsStep } from "./steps/create-venue-rows"
import { RowType } from "../modules/ticket-booking/models/venue-row"
import { useQueryGraphStep } from "@medusajs/core-flows"

export type CreateVenueWorkflowInput = {
  name: string
  address?: string
  rows: Array<{
    row_number: string
    row_type: RowType
    seat_count: number
  }>
}

export const createVenueWorkflow = createWorkflow(
  "create-venue",
  (input: CreateVenueWorkflowInput) => {
    const venue = createVenueStep({
      name: input.name,
      address: input.address,
    })

    const venueRowsData = transform({
      venue,
      input,
    }, (data) => {
      return data.input.rows.map((row) => ({
        venue_id: data.venue.id,
        row_number: row.row_number,
        row_type: row.row_type,
        seat_count: row.seat_count,
      }))
    })

    createVenueRowsStep({
      rows: venueRowsData,
    })

    const { data: venues } = useQueryGraphStep({
      entity: "venue",
      fields: ["id", "name", "address", "rows.*"],
      filters: {
        id: venue.id,
      },
    })

    return new WorkflowResponse({
      venue: venues[0],
    })
  }
)

import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { createVenueWorkflow } from "../../../workflows/create-venue"
import { RowType } from "../../../modules/ticket-booking/models/venue-row"
import { z } from "@medusajs/framework/zod"

export const CreateVenueSchema = z.object({
  name: z.string(),
  address: z.string().optional(),
  rows: z.array(z.object({
    row_number: z.string(),
    row_type: z.enum(RowType),
    seat_count: z.number(),
  })),
})

type CreateVenueSchema = z.infer<typeof CreateVenueSchema>

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

  res.json(result)
}

import { 
  defineMiddlewares, 
  validateAndTransformBody,
} from "@medusajs/framework/http"
import { CreateVenueSchema } from "./admin/venues/route"

export default defineMiddlewares({
  routes: [
    {
      matcher: "/admin/venues",
      methods: ["POST"],
      middlewares: [
        validateAndTransformBody(CreateVenueSchema),
      ],
    },
  ],
})

export async function GET(
  req: MedusaRequest,
  res: MedusaResponse
) {
  const query = req.scope.resolve("query")

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

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

import { validateAndTransformQuery } from "@medusajs/framework/http"
import { createFindParams } from "@medusajs/medusa/api/utils/validators"

export default defineMiddlewares({
  routes: [
    // ...
    {
      matcher: "/admin/venues",
      methods: ["GET"],
      middlewares: [
        validateAndTransformQuery(createFindParams(), {
          isList: true,
          defaults: ["id", "name", "address", "rows.*"],
        }),
      ],
    },
  ],
})

import Medusa from "@medusajs/js-sdk"

export const sdk = new Medusa({
  baseUrl: import.meta.env.VITE_BACKEND_URL || "/",
  debug: import.meta.env.DEV,
  auth: {
    type: "session",
  },
})

export enum RowType {
  PREMIUM = "premium",
  BALCONY = "balcony",
  STANDARD = "standard",
  VIP = "vip"
}

export interface VenueRow {
  id: string
  row_number: string
  row_type: RowType
  seat_count: number
  venue_id: string
  created_at: string
  updated_at: string
}

export interface Venue {
  id: string
  name: string
  address?: string
  rows: VenueRow[]
  created_at: string
  updated_at: string
}

export interface CreateVenueRequest {
  name: string
  address?: string
  rows: {
    row_number: string
    row_type: RowType
    seat_count: number
  }[]
}

export interface VenuesResponse {
  venues: Venue[]
  count: number
  limit: number
  offset: number
}

import { defineRouteConfig } from "@medusajs/admin-sdk"
import { Buildings } from "@medusajs/icons"
import { 
  createDataTableColumnHelper, 
  Container, 
  DataTable, 
  useDataTable, 
  Heading, 
  DataTablePaginationState,
} from "@medusajs/ui"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { useState, useMemo } from "react"
import { sdk } from "../../lib/sdk"
import { Venue, CreateVenueRequest } from "../../types"

const VenuesPage = () => {
  // TODO implement component
}

export const config = defineRouteConfig({
  label: "Venues",
  icon: Buildings,
})

export default VenuesPage

const columnHelper = createDataTableColumnHelper<Venue>()

const columns = [
  columnHelper.accessor("name", {
    header: "Name",
    cell: ({ row }) => (
      <div>
        <div className="txt-small-plus">{row.original.name}</div>
        {row.original.address && (
          <div className="txt-small text-gray-500">{row.original.address}</div>
        )}
      </div>
    ),
  }),
  columnHelper.accessor("rows", {
    header: "Total Capacity",
    cell: ({ row }) => {
      const totalCapacity = row.original.rows.reduce(
        (sum, rowItem) => sum + rowItem.seat_count,
        0
      )
      return <span className="txt-small-plus">{totalCapacity} seats</span>
    },
  }),
  columnHelper.accessor("address", {
    header: "Address",
    cell: ({ row }) => (
      <span>{row.original.address || "-"}</span>
    ),
  }),
]

const VenuesPage = () => {
  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<{
    venues: Venue[]
    count: number
    limit: number
    offset: number
  }>({
    queryKey: ["venues", offset, limit],
    queryFn: () => sdk.client.fetch("/admin/venues", {
      query: {
        offset: pagination.pageIndex * pagination.pageSize,
        limit: pagination.pageSize,
        order: "-created_at",
      },
    }),
  })

  const table = useDataTable({
    columns,
    data: data?.venues || [],
    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>
            Venues
          </Heading>
        </DataTable.Toolbar>
        <DataTable.Table />
        <DataTable.Pagination />
      </DataTable>
    </Container>
  )
}

import React from "react"
import { Heading } from "@medusajs/ui"
import { RowType, VenueRow } from "../types"

interface ChartVenueRow extends Pick<VenueRow, "row_number" | "row_type" | "seat_count"> {}

interface SeatChartProps {
  rows: ChartVenueRow[]
  className?: string
}

const getRowTypeColor = (rowType: RowType): string => {
  switch (rowType) {
    case RowType.VIP:
      return "bg-purple-500"
    case RowType.PREMIUM:
      return "bg-orange-500"
    case RowType.BALCONY:
      return "bg-blue-500"
    case RowType.STANDARD:
      return "bg-gray-500"
    default:
      return "bg-gray-300"
  }
}

const getRowTypeLabel = (rowType: RowType): string => {
  switch (rowType) {
    case RowType.VIP:
      return "VIP"
    case RowType.PREMIUM:
      return "Premium"
    case RowType.BALCONY:
      return "Balcony"
    case RowType.STANDARD:
      return "Standard"
    default:
      return "Unknown"
  }
}

export const SeatChart = ({ rows, className = "" }: SeatChartProps) => {
  if (rows.length === 0) {
    return (
      <div className={`p-8 text-center text-gray-500 ${className}`}>
        <p>No rows added yet. Add rows to see the seat chart.</p>
      </div>
    )
  }

  // Sort rows by row_number for consistent display
  const sortedRows = [...rows].sort((a, b) => a.row_number.localeCompare(b.row_number))

  return (
    <div className={`space-y-4 ${className}`}>
      <div className="flex items-center justify-between">
        <Heading level="h3">Seat Chart Preview</Heading>
        <div className="flex items-center gap-4 txt-small">
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-purple-500 rounded"></div>
            <span>VIP</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-orange-500 rounded"></div>
            <span>Premium</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-blue-500 rounded"></div>
            <span>Balcony</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-4 h-4 bg-gray-500 rounded"></div>
            <span>Standard</span>
          </div>
        </div>
      </div>

      <div className="border rounded-lg p-4 bg-gray-50">
        <div className="grid grid-cols-[auto_auto_1fr_auto] gap-4 items-center">
          <div className="txt-small-plus text-gray-700 text-center">Row</div>
          <div className="txt-small-plus text-gray-700 text-center">Type</div>
          <div className="txt-small-plus text-gray-700 text-center">Seats</div>
          <div className="txt-small-plus text-gray-700 text-center">Count</div>
          {sortedRows.map((row) => (
            <React.Fragment key={row.row_number}>
              <div className="txt-small-plus text-gray-700 text-center">
                {row.row_number}
              </div>
              <div className="flex items-center justify-center gap-2">
                <div className={`w-4 h-4 rounded ${getRowTypeColor(row.row_type)}`}></div>
                <span className="txt-small text-ui-fg-subtle">
                  {getRowTypeLabel(row.row_type)}
                </span>
              </div>
              <div className="flex justify-center gap-1 flex-wrap">
                {Array.from({ length: row.seat_count }, (_, i) => (
                  <div
                    key={i}
                    className={`w-3 h-3 rounded-sm ${getRowTypeColor(row.row_type)} opacity-70`}
                  />
                ))}
              </div>
              <div className="txt-small text-gray-500 text-center">
                {row.seat_count}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="txt-small text-gray-500">
        Total capacity: {rows.reduce((sum, row) => sum + row.seat_count, 0)} seats
      </div>
    </div>
  )
}

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<VenueRow, "row_number" | "row_type" | "seat_count"> {}

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

export const CreateVenueModal = ({
  open,
  onOpenChange,
  onSubmit,
}: CreateVenueModalProps) => {
  const [name, setName] = useState("")
  const [address, setAddress] = useState("")
  const [rows, setRows] = useState<NewVenueRow[]>([])
  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
}

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

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

return (
  <FocusModal open={open} onOpenChange={handleClose}>
    <FocusModal.Content>
      <form onSubmit={handleSubmit} className="flex h-full flex-col overflow-hidden">
        <FocusModal.Header>
          <Heading level="h1">Create New Venue</Heading>
        </FocusModal.Header>
        <FocusModal.Body className="p-6 overflow-auto">
          <div className="max-w-[720px] mx-auto">
            <div className="space-y-4 w-fit mx-auto">
              <div>
                <Label htmlFor="name">Venue Name</Label>
                <Input
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Enter venue name"
                />
              </div>

              <div>
                <Label htmlFor="address">
                  Address
                  <span className="text-ui-fg-muted txt-compact-small"> (Optional)</span>
                </Label>
                <Textarea
                  id="address"
                  value={address}
                  onChange={(e) => 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>

            <hr className="my-10" />

            <div>
              <SeatChart rows={rows} />
            </div>
          </div>
        </FocusModal.Body>
        <FocusModal.Footer>

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

import { 
  Button,
} from "@medusajs/ui"
import { CreateVenueModal } from "../../components/create-venue-modal"

const VenuesPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  // ...
}

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}`)
    }
  }
  // ...
}

return (
  <Container className="divide-y p-0">
      <Button
        variant="secondary"
        onClick={() => setIsModalOpen(true)}
      >
        Create Venue
      </Button>
  </Container>
)

return (
  <Container className="divide-y p-0">
    <CreateVenueModal
      open={isModalOpen}
      onOpenChange={handleCloseModal}
      onSubmit={handleCreateVenue}
    />
  </Container>
)

npm run dev

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 })
  }
)

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)
    )
  }
)

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)
    )
  }
)

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
  }
)

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

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

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

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],
})

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 "@medusajs/framework/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.enum(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)
}

import { CreateTicketProductSchema } from "./admin/ticket-products/route"

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

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,
  })
}

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.*",
          ],
        }),
      ],
    },
  ],
})

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
}

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

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>
  )
}

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
}

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

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(", ")}

          Total Seats: {selectedVenue.rows.reduce((acc, row) => acc + row.seat_count, 0)}
        </Text>
      </div>
    )}

    <hr className="my-6" />

    <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>
)

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
}

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

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>
)

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
}

// 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

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

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

// 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

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>
)

import {
  Button,
} from "@medusajs/ui"
import { CreateTicketProductModal } from "../../components/create-ticket-product-modal"

const TicketProductsPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  // ...
}

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}`)
    }
  }
  // ...
}

return (
  <Container className="divide-y p-0">
      <Button
        variant="secondary"
        onClick={() => setIsModalOpen(true)}
      >
        Create Show
      </Button>
  </Container>
)

return (
  <Container className="divide-y p-0">
    <CreateTicketProductModal
      open={isModalOpen}
      onOpenChange={handleCloseModal}
      onSubmit={handleCreateTicketProduct}
    />
  </Container>
)

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}`
        )
      }
    }
  }
)

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)
    )
  }
)

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,
    })
  }
)

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],
    })
  }
)

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,
  })
}

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,
  })
}

import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { MedusaError } from "@medusajs/framework/utils"
import { z } from "@medusajs/framework/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,
  })
}

import { GetTicketProductSeatsSchema } from "./store/ticket-products/[id]/seats/route"

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

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,
            },
          },
        ],
      },
    },
  ],
})

<!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%">
          <!-- Header -->
          <tr>
            <td class="header">
              <div class="brand">Medusa</div>
            </td>
          </tr>

          <!-- Greeting & Summary -->
          <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>

              <div class="divider"></div>

              <!-- QR Codes -->
              <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">
                    <!-- `qr` can be a full https URL or a data URI (e.g. data:image/png;base64,...) -->
                    
                    <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>

              <div class="divider"></div>

              <!-- Billing snippet -->
              <h3 class="section-title">Billing</h3>
                <div class="card">
                  {{#if billing_address}}
                    <div><strong>Billing address</strong>

                      {{billing_address.first_name}} {{billing_address.last_name}}

                      {{billing_address.address_1}}{{#if billing_address.address_2}}, {{billing_address.address_2}}{{/if}}

                      {{billing_address.city}}, {{billing_address.province}} {{billing_address.postal_code}}

                      {{billing_address.country_code}}
                    </div>
                  {{/if}}
                </div>

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

npm install qrcode
npm install --save-dev @types/qrcode

import { promiseAll } from "@medusajs/framework/utils"
import QRCode from "qrcode"

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
  }
}

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",
}

info:    Processing order.placed which has 1 subscribers

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)
  }
)

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,
    })
  }
)

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)
  }
)

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,
  })
}

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