-
Notifications
You must be signed in to change notification settings - Fork 10
/
booking.js
125 lines (111 loc) · 5.06 KB
/
booking.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
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { createClient, OAuthStrategy } from "@wix/sdk";
import { availabilityCalendar, services } from "@wix/bookings";
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 services, availabilityCalendar, and redirects modules.
modules: { services, availabilityCalendar, 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 Booking() {
// State variables for service list and availability entries
const [serviceList, setServiceList] = useState([]);
const [availabilityEntries, setAvailabilityEntries] = useState([]);
// This is function fetches the list of services.
async function fetchServices() {
// We call the queryServices method from the services module of the Wix client.
// This method retrieves the list of services.
const serviceList = await myWixClient.services.queryServices().find();
// Then, we update the state of the service list in the React component.
setServiceList(serviceList.items);
}
// This is function fetches the availability of a service.
async function fetchAvailability(service) {
// We create two Date objects for today and tomorrow.
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
// We call the queryAvailability method from the availabilityCalendar module of the Wix client.
// This method retrieves the availability of a service.
const availability =
await myWixClient.availabilityCalendar.queryAvailability(
{
filter: {
serviceId: [service._id], // We filter by the service ID.
startDate: today.toISOString(), // We set the start date to be today.
endDate: tomorrow.toISOString(), // We set the end date to be tomorrow.
},
},
{ timezone: "UTC" }, // We set the timezone to be UTC.
); // the response contains the availability entries for the service within the specified time range.
// Then, we update the state of the availability entries in the React component.
setAvailabilityEntries(availability.availabilityEntries);
}
// This is function creates a redirect to the checkout page.
async function createRedirect(slotAvailability) {
// We call the createRedirectSession method from the redirects module of the Wix client.
// This method creates a redirect session to the checkout page.
const redirect = await myWixClient.redirects.createRedirectSession({
// We pass an object that specifies the slotAvailability for the bookingsCheckout.
bookingsCheckout: { slotAvailability, timezone: "UTC" },
// We also specify the postFlowUrl to be the current page URL. This is where the user will be redirected after the checkout flow.
callbacks: { postFlowUrl: window.location.href },
});
// Finally, we redirect the user to the URL generated by the redirect session.
window.location = redirect.redirectSession.fullUrl;
}
// Fetch services on component mount
useEffect(() => {
fetchServices();
}, []);
return (
<main data-testid={testIds.BOOKINGS_PAGE.CONTAINER}>
<div>
<h2>Choose a Service:</h2>
{/* Mapping through service list and displaying each service */}
{serviceList.map((service) => {
return (
// Each service is displayed in a section. When clicked, the availability of the service is fetched.
<section
key={service._id}
data-testid={testIds.BOOKINGS_PAGE.SERVICE}
onClick={() => fetchAvailability(service)}
>
{service.name}
</section>
);
})}
</div>
<div>
<h2>Choose a Slot:</h2>
{/* Mapping through availability entries and displaying each slot */}
{availabilityEntries.map((entry) => {
return (
// Each slot is displayed in a section. When clicked, a redirect to the checkout page is created.
<section
key={entry.slot.startDate}
data-testid={testIds.BOOKINGS_PAGE.SLOT}
onClick={() => createRedirect(entry)}
>
{new Date(entry.slot.startDate).toLocaleString()}
</section>
);
})}
</div>
</main>
);
}