-
Notifications
You must be signed in to change notification settings - Fork 10
/
tickets.js
141 lines (126 loc) · 5.47 KB
/
tickets.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { createClient, OAuthStrategy } from "@wix/sdk";
import { orders as checkout, wixEventsV2 as wixEvents } from "@wix/events";
import { redirects } from "@wix/redirects";
import testIds from "@/src/utils/test-ids";
// We're creating a Wix client using the createClient function from the Wix SDK.
const myWixClient = createClient({
// We specify the modules we want to use with the client.
// In this case, we're using the wixEvents, checkout, and redirects modules.
modules: { wixEvents, checkout, redirects },
// We're using the OAuthStrategy for authentication.
// This strategy requires a client ID and a set of tokens.
auth: OAuthStrategy({
// The client ID is a unique identifier for the application.
// It's used to authenticate the application with the Wix platform.
clientId: `9e37d7b0-3621-418f-a6b6-b82bdeaf051d`,
// The tokens are used to authenticate the user.
// In this case, we're getting the tokens from a cookie named "session".
// If the cookie doesn't exist, we default to null.
tokens: JSON.parse(Cookies.get("session") || null),
}),
});
export default function Tickets() {
// State variables for events list and tickets availability
const [eventsList, setEventsList] = useState([]);
const [ticketsAvailability, setTicketsAvailability] = useState([]);
// This is function fetches a list of events.
async function fetchEvents() {
// We call the queryEvents method from the wixEvents module of the Wix client.
// This method retrieves a list of events.
// In this case, we're limiting the number of events to 10.
const eventsList = await myWixClient.wixEvents
.queryEvents()
.limit(10)
.find();
// Then, we update the state of the events list in the React component.
setEventsList(eventsList.items);
}
// This function fetches the availability of tickets for a specific event.
async function fetchTicketsAvailability(event) {
// We call the queryAvailableTickets method from the checkout module of the Wix client.
// This method retrieves the available tickets for a specific event.
// We filter the tickets by the event ID and limit the number of tickets to 10.
const tickets = await myWixClient.checkout.queryAvailableTickets({
filter: { eventId: event._id },
limit: 10,
});
// Then, we update the state of the tickets availability in the React component.
setTicketsAvailability(tickets.definitions);
}
// This function creates a redirect to the checkout page for a specific ticket.
async function createRedirect(ticket) {
// We find the event associated with the ticket from the events list.
// We're interested in the slug of the event, which is a URL-friendly version of the event name.
const eventSlug = eventsList.find(
(event) => event._id === ticket.eventId,
).slug;
// We call the createReservation method from the checkout module of the Wix client.
// This method creates a reservation for the ticket.
// We pass the event ID and an object that specifies the quantity of the ticket.
const reservation = await myWixClient.checkout.createReservation(
ticket.eventId,
{
ticketQuantities: [
{
ticketDefinitionId: ticket._id,
quantity: 1,
},
],
},
);
// We call the createRedirectSession method from the redirects module of the Wix client.
// This method creates a redirect session to the checkout page.
// We pass an object that specifies the event slug and the reservation ID for the eventsCheckout.
// We also specify the postFlowUrl to be the current page URL. This is where the user will be redirected after the checkout flow.
const redirect = await myWixClient.redirects.createRedirectSession({
eventsCheckout: { eventSlug, reservationId: reservation._id },
callbacks: { postFlowUrl: window.location.href },
});
// Finally, we redirect the user to the URL generated by the redirect session.
window.location = redirect.redirectSession.fullUrl;
}
// Fetch events on component mount
useEffect(() => {
fetchEvents();
}, []);
return (
<main data-testid={testIds.EVENTS_PAGE.CONTAINER}>
<div>
<h2>Choose an Event:</h2>
{/* We map over the events list and create a section for each event. */}
{eventsList.map((event) => {
return (
<section
key={event._id}
data-testid={testIds.EVENTS_PAGE.EVENT}
// When the section is clicked, we fetch the availability of tickets for the event.
onClick={() => fetchTicketsAvailability(event)}
>
{/* We display the title of the event. */}
{event.title}
</section>
);
})}
</div>
<div>
<h2>Choose a Ticket:</h2>
{/* We map over the tickets availability list and create a section for each ticket. */}
{ticketsAvailability.map((ticket) => {
return (
<section
key={ticket._id}
data-testid={testIds.EVENTS_PAGE.TICKET_OPTION}
// When the section is clicked, we create a redirect to the checkout page for the ticket.
onClick={() => createRedirect(ticket)}
>
{/* We display the name of the ticket. */}
{ticket.name}
</section>
);
})}
</div>
</main>
);
}