> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Events Quick Start

## Article: Events Quick Start

## Article Link: https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/events-quick-start.md

## Article Content:

# Events Quick Start

The SDK `events` module allows you to integrate Wix Events business services with your site or app. This means you can create and manage events, sell tickets, and retrieve information about guests. This tutorial shows you how to use the `events` module to create ticket reservations.

> **Note:** If you're using the [Wix CLI](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/about-the-wix-cli-for-headless.md), you don't need to handle OAuth setup or create a client because it's done automatically. 

The tutorial is based on this [example site](https://wix-headless-example.vercel.app/tickets). To get the code, fork the [Headless Templates repo](https://github.com/wix/headless-templates). The site code is under [minimal examples](https://github.com/wix/headless-templates/tree/main/nextjs/minimal-examples).

This implementation focuses on simplicity and understandability, rather than feature richness, performance or completeness. For details about additional functionality, see [Wix Events](https://dev.wix.com/docs/sdk/backend-modules/events/introduction.md) in the API Reference. Looking for a more comprehensive example site integrating Wix Headless APIs for ticket reservations and event management? Check out our [starter templates](https://dev.wix.com/docs/go-headless/get-started/templates/self-managed-templates/next-js-templates.md).

> **Note:** The code in this tutorial is written in [JSX](https://react.dev/learn/writing-markup-with-jsx), but you can use the SDK in any JavaScript environment.

Implementing the ticket reservation flow includes the following steps:

1. Set up the Wix Headless environment.
1. Import the SDK modules and create an SDK client.
1. Create a React component and state variables.
1. Fetch events and ticket availability.
1. Implement the checkout flow.
1. Add the `useEffect` hook.
1. Render the UI.

## Step 1: Set up the Wix Headless environment

Before using the SDK, there are a few things you need to set up on your Wix account and in your external site or app's coding environment.

To set up the Wix Headless environment, follow these steps:

1. If you haven't already, [create a project](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/create-a-project.md).
   When prompted to add functionalities to your new project, select **Events**.
1. Set up authorization for your site by [creating and configuring](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) an OAuth app.
1. Set a [domain to be used by Wix-managed pages](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/set-a-wix-pages-domain.md).
1. Set a [domain that Wix can redirect to](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md) after completing a Wix-managed process.
1. Install the API client and relevant SDK module packages by running the following commands:
   For NPM:

   ```
   npm install @wix/sdk
   npm install @wix/events
   ```

   For Yarn:

   ```
   yarn add @wix/sdk
   yarn add @wix/events
   ```

1. Install the `react` package to handle UI rendering and the `js-cookie` package to handle session cookies. Run the following commands:
   For NPM:
   ```
   npm install react
   npm install js-cookie
   ```
   For Yarn:
   ```
   yarn add react
   yarn add js-cookie
   ```

## Step 2: Import the SDK modules and create an SDK client

The next step is to set up your code file to run the SDK functions. To set up the code file, follow these steps:

1. Add the following import statements to the top of your code file:

   ```jsx
   import Cookies from 'js-cookie';
   import { useEffect, useState } from 'react';

   import { createClient, OAuthStrategy } from '@wix/sdk';
   import { wixEvents, checkout } from '@wix/events';
   import { redirects } from '@wix/redirects';
   ```

2. Create an SDK client by adding the following code to your code file. Replace the value for `clientId` with your OAuth app's client ID. You can find the ID in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings).
   The value for `tokens` is the `'session'` cookie on the site visitor's browser. It's used to make calls to the Wix API. This way, you can maintain previous visitor sessions. For information about managing session cookies, see [Session Token Management](https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/quick-start.md).
   ```js
   const myWixClient = createClient({
     modules: { wixEvents, checkout, redirects },
     auth: OAuthStrategy({
       clientId: `<YOUR-CLIENT-ID>`,
       tokens: JSON.parse(Cookies.get('session') || '{"accessToken": {}, "refreshToken": {}}'),
     }),
   });
   ```

## Step 3: Create a React component and state variables

The logic for our ticket reservation flow is contained in a React component called `Tickets`. To create the component, follow these steps:

1. Add the following function component to your code file:
   ```javascript
   export default function Tickets() {}
   ```
1. Define state variables by adding the following code to the `Tickets` component.
   The `eventsList` variable stores the list of events from your project's Wix Events. The `ticketsAvailability` variable stores available ticket information.
   ```javascript
   const [eventsList, setEventsList] = useState([]);
   const [ticketsAvailability, setTicketsAvailability] = useState([]);
   ```

## Step 4: Fetch events and ticket availability

1. Define a function called `fetchEvents` that gets the list of events that you would like to display in your component from your project's backend. This function uses the [`queryEventsV2()`](https://dev.wix.com/docs/sdk/backend-modules/events/wix-events-v2/query-events.md) function to fetch your project's events. The function runs when the component is first rendered.
   ```javascript
   async function fetchEvents() {
     const eventsList = await myWixClient.wixEvents.queryEventsV2({
       query: { paging: { limit: 10 } },
     });
     setEventsList(eventsList.events);
   }
   ```
1. Define a function called `fetchTicketsAvailability` that gets the list of available tickets when an event is selected. This function uses the [`queryAvailableTickets()`](https://dev.wix.com/docs/sdk/backend-modules/events/orders/query-available-tickets.md) function to find the available tickets for the selected event.
   ```javascript
   async function fetchTicketsAvailability(event) {
     const tickets = await myWixClient.checkout.queryAvailableTickets({
       filter: { eventId: event._id },
       limit: 10,
     });
     setTicketsAvailability(tickets.definitions);
   }
   ```

## Step 5: Implement the checkout flow

Add a function called `createRedirect` to the `Tickets` function component. This function does the following:

1. Uses the [`createReservation()`](https://dev.wix.com/docs/sdk/backend-modules/events/orders/create-reservation.md) function to create a reservation for the selected event.
1. Uses the [`createRedirectSession()`](https://dev.wix.com/docs/sdk/backend-modules/redirects/redirects/create-redirect-session.md) with the retrieved reservation ID to retrieve a checkout URL. This is the URL for a Wix-managed checkout page that the visitor can use to complete the checkout process.
1. Redirects the browser to the checkout URL. If the checkout is successful, the visitor is redirected to a Wix thank you page. After the thank you page, or if the checkout fails, the visitor is redirected to the URL passed in the `postFlowUrl` property when calling `createRedirectSession()`.

   **Note:** When redirecting from Wix to an external site, Wix validates that the provided URL is registered an allowed domain for the given client ID. Therefore, you must [add your domain to the OAuth app](https://dev.wix.com/docs/go-headless/develop-your-project/business-flows/add-allowed-redirect-domains.md).

   ```javascript
   async function createRedirect(ticket) {
     const eventSlug = eventsList.find(
       (event) => event._id === ticket.eventId
     ).slug;
     const reservation = await myWixClient.checkout.createReservation(
       ticket.eventId,
       {
         ticketQuantities: [
           {
             ticketDefinitionId: ticket._id,
             quantity: 1,
           },
         ],
       }
     );
     const redirect = await myWixClient.redirects.createRedirectSession({
       eventsCheckout: { eventSlug, reservationId: reservation._id },
       callbacks: { postFlowUrl: window.location.href },
     });
     window.location = redirect.redirectSession.fullUrl;
   }
   ```

## Step 6: Add the `useEffect` hook

Add the following code to the `Tickets` component to run the `fetchEvents()` function after the component is rendered. This ensures that the data is retrieved when the component mounts:

```javascript
useEffect(() => {
  fetchEvents();
}, []);
```

## Step 7: Render the UI

Add the following code to the `Tickets` component's return statement to render the UI. The UI displays the following:

- A **Choose Events** section with a list of your events. Clicking an event checks for available tickets.
- A **Choose Tickets** section with a list of tickets for the event.

```javascript
<div>
  <h2>Choose Event:</h2>
    {eventsList.map((event) => {
      return <div key={event._id} onClick={() => fetchTicketsAvailability(event)}>{event.title}</div>;
    })}
</div>
<div>
  <h2>Choose Tickets:</h2>
    {ticketsAvailability.map((ticket) => {
      return <div key={ticket._id} onClick={() => createRedirect(ticket)}>{ticket.name}</div>;
    })}
</div>
```

## Complete code example

You can use the following full code example as a starting point for developing your own site:

```javascript

import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';
import { createClient, OAuthStrategy } from '@wix/sdk';
import { wixEvents, checkout } from '@wix/events';
import { redirects } from '@wix/redirects';

const myWixClient = createClient({
  modules: { wixEvents, checkout, redirects },
  auth: OAuthStrategy({
    clientId: `<YOUR-CLIENT-ID>`,
    tokens: JSON.parse(Cookies.get('session') || '{"accessToken": {}, "refreshToken": {}}'),
  }),
});

export default function Tickets() {
  const [eventsList, setEventsList] = useState([]);
  const [ticketsAvailability, setTicketsAvailability] = useState([]);

  async function fetchEvents() {
    const eventsList = await myWixClient.wixEvents.queryEventsV2({ query: { paging: { limit: 10 } } });
    setEventsList(eventsList.events);
  }

  async function fetchTicketsAvailability(event) {
    const tickets = await myWixClient.checkout.queryAvailableTickets({
      filter: { eventId: event._id },
      limit: 10,
    });
    setTicketsAvailability(tickets.definitions);
  }

  async function createRedirect(ticket) {
    const eventSlug = eventsList.find((event) => event._id === ticket.eventId).slug;
    const reservation = await myWixClient.checkout.createReservation(ticket.eventId, {
      ticketQuantities: [{
        ticketDefinitionId: ticket._id,
        quantity: 1,
      }],
    });
    const redirect = await myWixClient.redirects.createRedirectSession({
      eventsCheckout: { eventSlug, reservationId: reservation._id },
      callbacks: { postFlowUrl: window.location.href }
    });
    window.location = redirect.redirectSession.fullUrl;
  }

  useEffect(() => { fetchEvents(); }, []);

  return (
    <div>
      <h2>Choose Event:</h2>
      {eventsList.map((event) => {
        return <div key={event._id} onClick={() => fetchTicketsAvailability(event)}>{event.title}</div>;
      })}
    </div>
    <div>
      <h2>Choose Tickets:</h2>
      {ticketsAvailability.map((ticket) => {
        return <div key={ticket._id} onClick={() => createRedirect(ticket)}>{ticket.name}</div>;
      })}
    </div>
  )
}
```