tf-checkout-react 1.4.19 → 1.4.20-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +329 -219
- package/dist/api/index.d.ts +1 -0
- package/dist/components/confirmationContainer/index.d.ts +3 -0
- package/dist/components/paymentContainer/PaymentPlanSection.d.ts +10 -0
- package/dist/components/stripePayment/index.d.ts +3 -2
- package/dist/tf-checkout-react.cjs.development.js +322 -121
- package/dist/tf-checkout-react.cjs.development.js.map +1 -1
- package/dist/tf-checkout-react.cjs.production.min.js +1 -1
- package/dist/tf-checkout-react.cjs.production.min.js.map +1 -1
- package/dist/tf-checkout-react.esm.js +322 -121
- package/dist/tf-checkout-react.esm.js.map +1 -1
- package/dist/tf-checkout-styles.css +1 -1
- package/dist/types/payment-plan-configuration.d.ts +18 -0
- package/package.json +2 -2
- package/src/api/index.ts +13 -1
- package/src/components/billing-info-container/utils.ts +1 -1
- package/src/components/confirmationContainer/index.tsx +53 -50
- package/src/components/paymentContainer/PaymentPlanSection.tsx +152 -0
- package/src/components/paymentContainer/index.tsx +223 -154
- package/src/components/paymentContainer/style.css +8 -0
- package/src/components/seatMapContainer/SeatMapComponent.tsx +26 -22
- package/src/components/seatMapContainer/TicketsSection.tsx +11 -10
- package/src/components/seatMapContainer/index.tsx +67 -72
- package/src/components/stripePayment/index.tsx +19 -18
- package/src/types/payment-plan-configuration.ts +19 -0
- package/src/types/seatMap.d.ts +1 -0
- package/src/components/common/dist/PhoneNumberField.js +0 -96
package/README.md
CHANGED
|
@@ -2,70 +2,81 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
<details>
|
|
5
|
+
<details open>
|
|
6
6
|
<summary><strong>Table of Contents</strong></summary>
|
|
7
7
|
|
|
8
|
-
- [
|
|
8
|
+
- [tf-checkout-react](#tf-checkout-react)
|
|
9
|
+
- [Introduction](#introduction)
|
|
9
10
|
- [Intergrations](#intergrations)
|
|
10
11
|
- [WebFlow](#webflow)
|
|
11
|
-
- [
|
|
12
|
-
|
|
13
|
-
- [
|
|
14
|
-
- [Existing project](#existing-project)
|
|
15
|
-
- [Run Independently](#run-independently)
|
|
12
|
+
- [Prerequisites](#prerequisites)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Run Independently](#run-independently)
|
|
16
15
|
- [Usage](#usage)
|
|
17
16
|
- [Set configuration](#set-configuration)
|
|
18
|
-
- [
|
|
17
|
+
- [Configurations for production](#configurations-for-production)
|
|
18
|
+
- [Configurations for development/testing](#configurations-for-developmenttesting)
|
|
19
|
+
- [Functionalities](#functionalities)
|
|
19
20
|
- [Login](#login)
|
|
20
|
-
|
|
21
|
-
- [
|
|
22
|
-
|
|
23
|
-
- [
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
- [
|
|
28
|
-
|
|
21
|
+
- [Register](#register)
|
|
22
|
+
- [Forgot Password](#forgot-password)
|
|
23
|
+
- [Promo Code](#promo-code)
|
|
24
|
+
- [Access Code](#access-code)
|
|
25
|
+
- [Waiting List](#waiting-list)
|
|
26
|
+
- [Components](#components)
|
|
27
|
+
- [`TicketsContainer`](#ticketscontainer)
|
|
28
|
+
- [`AddOnsContainer`](#addonscontainer)
|
|
29
|
+
- [`BillingInfoContainer`](#billinginfocontainer)
|
|
30
|
+
- [`PaymentContainer`](#paymentcontainer)
|
|
31
|
+
- [`ConfirmationContainer`](#confirmationcontainer)
|
|
32
|
+
- [`MyTicketsContainer`](#myticketscontainer)
|
|
29
33
|
- [Orders Container](#orders-container)
|
|
30
|
-
- [Orders Container Interface](#orders-container-interface)
|
|
31
34
|
- [Order Details Container](#order-details-container)
|
|
32
|
-
|
|
35
|
+
- [Ticket Resale Container](#ticket-resale-container)
|
|
33
36
|
- [Commands](#commands)
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
- [Rollup](#rollup)
|
|
38
|
+
- [TypeScript](#typescript)
|
|
39
|
+
- [GitHub Actions](#github-actions)
|
|
37
40
|
|
|
38
41
|
</details>
|
|
39
42
|
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
# Introduction
|
|
45
|
+
|
|
46
|
+
This package includes TicketFairy's checkout functionality, as well as various related functionalities. These functionalities include login/register, order management, resale, referrals, and more.
|
|
47
|
+
|
|
48
|
+
This package provides a set of components and functionalities designed to manage various aspects of the TicketFairy event experience. These include:
|
|
49
|
+
|
|
50
|
+
- `AccountSettings`: A component for managing user account settings, such as email address and password.
|
|
51
|
+
- `AddonsContainter`: A component for displaying a list of available add-ons and allowing the user to purchase them.
|
|
52
|
+
- `BillingInfoContainer`: A component for managing billing information, such as addresses and ticket holders.
|
|
53
|
+
- `ConfirmationContainer`: A component for displaying a confirmation page after a purchase is made.
|
|
54
|
+
- `IDVerification`: A component for verifying the identity of the user during the checkout process.
|
|
55
|
+
- `MyTicketsContainer`: A component for displaying a list of purchased orders.
|
|
56
|
+
- `OrderDetailsContainer`: A component for displaying detailed information about a purchase, such as the ticket types, add-ons and pricing.
|
|
57
|
+
- `PaymentContainer`: A component for managing payment processing during the checkout process.
|
|
58
|
+
- `ResetPasswordContainer`: A component for resetting a user's password.
|
|
59
|
+
- `SeatMapContainer`: A component for displaying and selecting seats on a venue map.
|
|
60
|
+
- `TicketResaleContainer`: A component for managing the resale of tickets or add-ons by the user.
|
|
61
|
+
- `TicketsContainer`: A component for displaying a list of available tickets and allowing the user to purchase them.
|
|
62
|
+
|
|
63
|
+
Together, these components and functionalities provide a comprehensive set of tools to manage the checkout process and related activities for a TicketFairy-powered event.
|
|
64
|
+
|
|
46
65
|
|
|
47
66
|
|
|
48
67
|
# Intergrations
|
|
49
68
|
|
|
50
69
|
## [WebFlow](/webflow/public/INTEGRATION.md)
|
|
51
70
|
|
|
52
|
-
## Clients (Minimal version required)
|
|
53
|
-
|
|
54
|
-
- Mana Common (1.3.19)
|
|
55
|
-
- Restlesnites (1.3.3)
|
|
56
|
-
|
|
57
71
|
|
|
58
72
|
|
|
59
|
-
# Getting started
|
|
60
73
|
|
|
61
|
-
|
|
74
|
+
# Prerequisites
|
|
62
75
|
|
|
63
|
-
- node >=
|
|
64
|
-
- npm >=
|
|
76
|
+
- node >= v16.19.0
|
|
77
|
+
- npm >= 8.19.3
|
|
65
78
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
### Existing project
|
|
79
|
+
# Installation
|
|
69
80
|
|
|
70
81
|
```
|
|
71
82
|
npm i tf-checkout-react
|
|
@@ -77,7 +88,7 @@ or
|
|
|
77
88
|
yarn add tf-checkout-react
|
|
78
89
|
```
|
|
79
90
|
|
|
80
|
-
|
|
91
|
+
## Run Independently
|
|
81
92
|
|
|
82
93
|
- Clone this repo: `git clone https://github.com/theticketfairy/tf-checkout-react.git`
|
|
83
94
|
- Install dependencies: `npm install`
|
|
@@ -115,232 +126,335 @@ Call it in the root and pass neccesary options. Here are available options:
|
|
|
115
126
|
|
|
116
127
|
|
|
117
128
|
|
|
118
|
-
#
|
|
129
|
+
# Functionalities
|
|
119
130
|
|
|
120
131
|
## Login
|
|
121
132
|
|
|
122
|
-
|
|
133
|
+
<details open>
|
|
134
|
+
<summary><b>Login Modal Props Interface:</b></summary>
|
|
135
|
+
|
|
136
|
+
| Property | Type | Required | Default Value | Description |
|
|
137
|
+
| ------------------------ | ------------------- | -------- | ------------------------------- | ----------------------------------------------------------------------------------- |
|
|
138
|
+
| onLogin | () => void | yes | N/A | Called after log in request’s success. |
|
|
139
|
+
| onClose | () => void | yes | N/A | Called on modal close. |
|
|
140
|
+
| onGetProfileDataSuccess | (data) => void | no | value => value | A callback function that is called when the profile data is successfully retrieved. |
|
|
141
|
+
| onGetProfileDataError | (error) => void | no | value => value | A callback function that is called when retrieving the profile data fails. |
|
|
142
|
+
| onForgotPassword | () => void | no | value => value | Called on “Forgot Password” button click. |
|
|
143
|
+
| onSignup | () => void | no | value => value | Called on “Sign Up” button click. |
|
|
144
|
+
| modalClassname | string | no | " " | Login modal main container class. |
|
|
145
|
+
| logo | string / URL / path | no | TheTicketFairy black logo (URL) | Login modal top section’s logo. |
|
|
146
|
+
| showForgotPasswordButton | boolean | no | false | Display “Forgot Password” button. |
|
|
147
|
+
| showSignUpButton | boolean | no | false | Display “Sign Up” button. |
|
|
123
148
|
|
|
124
|
-
|
|
149
|
+
</details>
|
|
125
150
|
|
|
126
|
-
|
|
151
|
+
|
|
127
152
|
|
|
128
|
-
|
|
129
|
-
<summary><b>props</b></summary>
|
|
153
|
+
## Register
|
|
130
154
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
| logo | string / URL / path | no | TheTicketFairy black logo (URL) | Login modal top section’s logo. |
|
|
141
|
-
| showForgotPasswordButton | boolean | no | false | Display “Forgot Password” button. |
|
|
142
|
-
| showSignUpButton | boolean | no | false | Display “Sign Up” button. |
|
|
155
|
+
<details open>
|
|
156
|
+
<summary><b>Register Modal Props Interface:</b></summary>
|
|
157
|
+
|
|
158
|
+
| Property | Type | Required | Default Value | Description |
|
|
159
|
+
| ----------------------- | --------------- | -------- | -------------- | ----------------------------------------------------------------------------------- |
|
|
160
|
+
| onRegister (deprecated) | () => void | no | N/A | - |
|
|
161
|
+
| onClose | () => void | yes | N/A | Called on modal close, after register request's success. |
|
|
162
|
+
| onGetProfileDataSuccess | (data) => void | no | value => value | A callback function that is called when the profile data is successfully retrieved. |
|
|
163
|
+
| onGetProfileDataError | (error) => void | no | value => value | A callback function that is called when retrieving the profile data fails. |
|
|
143
164
|
|
|
144
165
|
</details>
|
|
145
166
|
|
|
146
167
|
|
|
147
168
|
|
|
148
|
-
##
|
|
149
|
-
|
|
150
|
-
### Used to register new user. Contains `firstName`, `lastName`, `email`, `password` and `confirmPassword` fields.
|
|
169
|
+
## Forgot Password
|
|
151
170
|
|
|
152
|
-
|
|
171
|
+
<details open>
|
|
172
|
+
<summary><b>Forgot Password Modal Props Interface:</b></summary>
|
|
153
173
|
|
|
154
|
-
|
|
174
|
+
| Property | Type | Required | Default Value | Description |
|
|
175
|
+
| ----------------------- | --------------- | -------- | -------------- | ------------------------------------------------------------------------------------ |
|
|
176
|
+
| onLogin | () => void | yes | N/A | Called on "Back to Log In" button click. |
|
|
177
|
+
| onClose | () => void | yes | N/A | Called on modal close, after register request's success. |
|
|
178
|
+
| onForgotPasswordSuccess | (data) => void | no | value => value | A callback function that is called when the user successfully resets their password. |
|
|
179
|
+
| onForgotPasswordError | (error) => void | no | value => value | A callback function that is called when there is an error resetting the password. |
|
|
155
180
|
|
|
156
|
-
|
|
157
|
-
|
|
181
|
+
</details>
|
|
182
|
+
|
|
158
183
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
|
184
|
+
## Promo Code
|
|
185
|
+
|
|
186
|
+
<details open>
|
|
187
|
+
<summary><b>Promo Code Props Interface:</b></summary>
|
|
188
|
+
|
|
189
|
+
| Property | Type | Required | Default Value | Description |
|
|
190
|
+
| ----------------- | -------------------------------------- | -------- | ------------- | --------------------------------------------------------------------- |
|
|
191
|
+
| code | string | yes | ' ' | The promo code. |
|
|
192
|
+
| codeIsApplied | boolean | yes | false | Whether or not the promo code is currently applied. |
|
|
193
|
+
| showPromoInput | boolean | yes | false | Whether or not to show the promo code input field. |
|
|
194
|
+
| codeIsInvalid | boolean | yes | false | Whether or not the promo code is invalid. |
|
|
195
|
+
| showAlertIcons | boolean | no | false | Whether or not to show the alert icons. |
|
|
196
|
+
| promoText | string | no | false | Button label, which click displays promo code input. |
|
|
197
|
+
| - | - | - | - | - |
|
|
198
|
+
| setCode | (value: string) => void | yes | - | A function to set the promo code. |
|
|
199
|
+
| setCodeIsApplied | (value: boolean) => void | yes | - | A function to set whether or not the promo code is currently applied. |
|
|
200
|
+
| setCodeIsInvalid | (value: boolean) => void | yes | - | A function to set whether or not the promo code is invalid. |
|
|
201
|
+
| setShowPromoInput | (value: boolean) => void | yes | - | A function to set whether or not to show the promo code input field. |
|
|
202
|
+
| updateTickets | (value: boolean, type: string) => void | yes | - | A function to update the tickets based on the promo code. |
|
|
165
203
|
|
|
166
204
|
</details>
|
|
167
|
-
|
|
168
205
|
|
|
169
206
|
|
|
170
|
-
##
|
|
207
|
+
## Access Code
|
|
171
208
|
|
|
172
|
-
|
|
209
|
+
<details open>
|
|
210
|
+
<summary><b>Access Code Props Interface:</b></summary>
|
|
173
211
|
|
|
174
|
-
|
|
212
|
+
| Property | Type | Required | Default Value | Description |
|
|
213
|
+
| ------------- | ------------------------ | -------- | ------------- | ---------------------------------------------------------- |
|
|
214
|
+
| code | string | yes | ' ' | The access code. |
|
|
215
|
+
| - | - | - | - | - |
|
|
216
|
+
| setCode | (value: string) => void | yes | - | A function to set the access code. |
|
|
217
|
+
| updateTickets | (value: boolean) => void | yes | - | A function to update the tickets based on the access code. |
|
|
175
218
|
|
|
176
|
-
|
|
219
|
+
</details>
|
|
220
|
+
|
|
177
221
|
|
|
178
|
-
|
|
179
|
-
<summary><b>props</b></summary>
|
|
222
|
+
## Waiting List
|
|
180
223
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
|
224
|
+
<details open>
|
|
225
|
+
<summary><b>Waiting List Props Interface:</b></summary>
|
|
226
|
+
|
|
227
|
+
| Property | Type | Required | Default Value | Description |
|
|
228
|
+
| ------------------ | --------------- | -------- | ------------- | ------------------------------------------------------------- |
|
|
229
|
+
| tickets | Object | yes | ' ' | The list of tickets to be displayed. |
|
|
230
|
+
| eventId | string / number | yes | N/A | The ID of the event for which the tickets are displayed. |
|
|
231
|
+
| defaultMaxQuantity | number | yes | 10 | The default maximum quantity of tickets that can be selected. |
|
|
187
232
|
|
|
188
233
|
</details>
|
|
189
234
|
|
|
190
235
|
|
|
191
236
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
|
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
|
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
|
229
|
-
|
|
|
237
|
+
# Components
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
## `TicketsContainer`
|
|
241
|
+
|
|
242
|
+
Tickets component will retrieve and show a list of tickets corresponding to selected event. It also containes `PromoCode`, `AccessCode` and `WaitingLsit` functionalities.
|
|
243
|
+
Props interface partially extends [Promo Code Props Interface](#promo-code), [Access Code Props Interface](#access-code), [Waiting List Props Interface](#waiting-list).
|
|
244
|
+
|
|
245
|
+
<details open>
|
|
246
|
+
<summary><b>Tickets Container Props Interface</b></summary>
|
|
247
|
+
|
|
248
|
+
| Property | Type | Required | Default value | Description |
|
|
249
|
+
| ---------------------------------------- | ---------------- | -------- | -------------- | ---------------------------------------------------------------------------------------------- |
|
|
250
|
+
| eventId | string / number | yes | N/A | The unique identifier for the event that the tickets belong to. |
|
|
251
|
+
| getTicketsLabel | string | no | “Get Tickets" | The label for the "Get Tickets" button. |
|
|
252
|
+
| contentStyle | CSSProperties | no | {} | An object containing styles to apply to the tickets list container. |
|
|
253
|
+
| theme | ‘light’, ‘dark' | no | ‘light' | The theme to use for the tickets list container. Sets as `className`. |
|
|
254
|
+
| themeOptions | MUI ThemeOptions | no | N/A | MUI Theme Provider’s theme options. |
|
|
255
|
+
| queryPromoCode (deprecated) | - | - | - | - |
|
|
256
|
+
| isButtonScrollable (deprecated) | - | - | - | - |
|
|
257
|
+
| disableCountdownLeadingZero (deprecated) | - | - | - | - |
|
|
258
|
+
| isLoggedIn (deprecated) | - | - | - | - |
|
|
259
|
+
| isPromotionsEnabled | boolean | no | false | Whether or not promotions are enabled for the tickets list. |
|
|
260
|
+
| isAccessCodeEnabled | boolean | no | false | Whether or not access codes are enabled for the tickets list. |
|
|
261
|
+
| hideTicketsHeader | boolean | no | false | Whether to hide the tickets header. |
|
|
262
|
+
| hideSessionButtons | boolean | no | false | Whether to hide “My Tickets” and “Log Out” buttons. |
|
|
263
|
+
| hideWaitingList | boolean | no | false | Whether to hide the waiting list. |
|
|
264
|
+
| enableBillingInfoAutoCreate | boolean | no | true | Whether to enable auto-creation of billing information, instead of manually creation by user. |
|
|
265
|
+
| enableInfluencersSection | boolean | no | true | Whether to display the influencers section. |
|
|
266
|
+
| enableAddOns | boolean | no | true | Whether to enable add-ons. |
|
|
267
|
+
| sortBySoldOut | boolean | no | false | Whether to sort tickets by sold-out status. By default tickets will be sorted by sort order. |
|
|
268
|
+
| hideTableTicketsHeader | boolean | no | false | Whether to hide table type tickets section header. |
|
|
269
|
+
| showPoweredByImage | boolean | no | false | Whether to show the "Powered by TheTicketFairy" image. |
|
|
270
|
+
| showGroupNameBlock | boolean | no | false | Whether to show the ticket group name block. |
|
|
271
|
+
| actionsSectionComponent | ReactNode | no | N/A | Custom component instead of “Get Tickets” button. |
|
|
272
|
+
| ticketsHeaderComponent | ReactNode | no | N/A | A React component to render the tickets section header. |
|
|
273
|
+
| tableTicketsHeaderComponent | ReactNode | no | N/A | A React component to render the table type tickets section header. |
|
|
274
|
+
| ordersPath | string | no | '/orders' | The URL path to the orders page. |
|
|
275
|
+
| currencySybmol | string | no | ' ' | The currency symbol to use. |
|
|
276
|
+
| - | - | - | - | - |
|
|
277
|
+
| onAddToCartSuccess | (data) => void | no | value => value | A callback function to be called when a ticket is successfully added to the cart. |
|
|
278
|
+
| onAddToCartError | (error) => void | no | value => value | A callback function to be called when there is an error adding a ticket to the cart. |
|
|
279
|
+
| onGetTicketsSuccess | (data) => void | no | value => value | A callback function to be called when the tickets are successfully retrieved. |
|
|
280
|
+
| onGetTicketsError | (error) => void | no | value => value | A callback function to be called when there is an error retrieving the tickets. |
|
|
281
|
+
| onLogoutSuccess | () => void | no | value => value | A callback function to be called when the user successfully logs out. |
|
|
282
|
+
| onLogoutError | (error) => void | no | value => value | A callback function to be called when there is an error logging out. |
|
|
283
|
+
| onLoginSuccess | () => void | no | value => value | A callback function to be called when the user successfully logs in. |
|
|
284
|
+
| handleNotInvitedModalClose | () => void | no | value => value | A callback function to be called when the "Not Invited" modal is closed. |
|
|
285
|
+
| handleInvalidLinkModalClose | () => void | no | value => value | A callback function to be called when the "Invalid Link" modal is closed. |
|
|
286
|
+
| onReserveButtonClick | () => void | no | value => value | A callback function to be called when the 'Select on map' button is clicked. |
|
|
287
|
+
| onPendingVerification | () => void | no | value => value | A callback function to be called when the verification process is passed and pending response. |
|
|
230
288
|
|
|
231
289
|
</details>
|
|
232
290
|
|
|
233
291
|
|
|
234
292
|
|
|
235
|
-
##
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
|
247
|
-
|
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
|
|
|
254
|
-
|
|
|
255
|
-
|
|
|
256
|
-
| hideErrorsAlertSection | boolean | no | false | Hide form submit errors rendered by package. |
|
|
257
|
-
| skipPage | boolean | no | false | Enable skipping Billing Info page. |
|
|
258
|
-
| canSkipHolderNames | boolean | no | false | Enable to autogenerate ticket holders’ data, if ticket holders’ data are not required. |
|
|
259
|
-
| shouldFetchCountries (deprecated) | boolean | no | true | Enable to fetch countries list from TicketFairy. |
|
|
260
|
-
| enableTimer | boolean | no | false | Display whole checkout process timer. |
|
|
261
|
-
| brandOptIn (deprecated) | boolean | no | false | - |
|
|
262
|
-
| handleSubmit | Function: (data, helpers, eventId, responseData) => void | no | value => value | Called after billing info data submit request’s success. |
|
|
263
|
-
| onSubmitError | Function: (error) => void | no | value => value | Called after billing info data submit request’s failure. |
|
|
264
|
-
| onGetCartSuccess | Function: (data) => void | no | value => value | Called after fetching cart data request’s success. |
|
|
265
|
-
| onGetCartError | Function: (error) => void | no | value => value | Called after fetching cart data request’s failure. |
|
|
266
|
-
| onLogin (deprecated) | - | - | - | - |
|
|
267
|
-
| onErrorClose | Function: () => void | no | value => value | Called after closing error alert component. |
|
|
268
|
-
| onSkipBillingPage | Function: (data) => void | no | value => value | Called if skipPage is true. |
|
|
293
|
+
## `AddOnsContainer`
|
|
294
|
+
|
|
295
|
+
Add-Ons component will retrieve and show a list of add-ons corresponding to selected event.
|
|
296
|
+
|
|
297
|
+
<details open>
|
|
298
|
+
<summary><b>Tickets Container Props Interface</b></summary>
|
|
299
|
+
|
|
300
|
+
| Property | Type | Required | Default value | Description |
|
|
301
|
+
| --------------------------- | --------------- | -------- | -------------- | ---------------------------------------------------------------------------------------------------- |
|
|
302
|
+
| classNamePrefix | string | no | 'add_on' | Prefix to use for the CSS class names of the component. |
|
|
303
|
+
| enableBillingInfoAutoCreate | boolean | no | true | Whether to enable auto-creation of billing information, instead of manually creation by user. |
|
|
304
|
+
| enableTimer | boolean | no | true | Whether to show a timer for the user. |
|
|
305
|
+
| - | - | - | - | - |
|
|
306
|
+
| onGetAddonsPageInfoSuccess | (data) => void | no | value => value | A callback function to be called when the add-ons page information is successfully fetched. |
|
|
307
|
+
| onGetAddonsPageInfoError | (error) => void | no | value => value | A callback function to be called when there is an error while fetching the add-ons page information. |
|
|
308
|
+
| onPostCheckoutSuccess | (data) => void | no | value => value | A callback function to be called when the add-ons are successfully added to the cart. |
|
|
309
|
+
| onPostCheckoutError | (error) => void | no | value => value | A callback function to be called when there is an error while adding add-ons to the cart. |
|
|
310
|
+
| onConfirmSelectionSuccess | (data) => void | no | value => value | A callback function to be called when the add-ons selection is successfully confirmed. |
|
|
311
|
+
| onConfirmSelectionError | (error) => void | no | value => value | A callback function to be called when there is an error while confirming the add-ons selection. |
|
|
312
|
+
| onCountdownFinish | () => void | no | value => value | A callback function that is called when the countdown timer finishes. |
|
|
313
|
+
| onPendingVerification | () => void | no | value => value | A callback function to be called when the verification process is passed and pending response. |
|
|
269
314
|
|
|
270
315
|
</details>
|
|
271
316
|
|
|
272
317
|
|
|
273
318
|
|
|
274
|
-
##
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
|
285
|
-
|
|
|
286
|
-
|
|
|
287
|
-
|
|
|
288
|
-
|
|
|
289
|
-
|
|
|
290
|
-
|
|
|
291
|
-
|
|
|
292
|
-
|
|
|
293
|
-
|
|
|
294
|
-
|
|
|
295
|
-
|
|
|
296
|
-
|
|
|
297
|
-
|
|
|
298
|
-
|
|
|
299
|
-
|
|
|
300
|
-
|
|
|
301
|
-
|
|
|
302
|
-
|
|
|
319
|
+
## `BillingInfoContainer`
|
|
320
|
+
The component is responsible for managing the billing information during the checkout process. It provides a form that allows users to enter their billing information, including addresses and ticket holders' information.
|
|
321
|
+
Props interface extends [Login Modal Interface](#login), [Register Modal Interface](#register), [Forgot Password Modal Interface](#forgot-password).
|
|
322
|
+
|
|
323
|
+
<details open>
|
|
324
|
+
|
|
325
|
+
| Property | Type | Required | Default Value | Description |
|
|
326
|
+
| --------------------------------- | -------------------------------------------- | -------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
|
|
327
|
+
| data | IBillingInfoData[] | no | [] | Form fields list to be rendered to collect billing info data. |
|
|
328
|
+
| ticketHoldersFields | IBillingInfoData[] | no | [{ id: 1, fields: [] }] | Form fields list to be rendered to collect ticket holders data. |
|
|
329
|
+
| initialValues (deprecated) | { [key: string]: any } | no | {} | Form’s initial values. |
|
|
330
|
+
| theme | 'light' / 'dark' | no | 'light' | MUI Theme Provider’s theme. |
|
|
331
|
+
| isLoggedIn (deprecated) | - | - | - | - |
|
|
332
|
+
| onLogin (deprecated) | - | - | - | - |
|
|
333
|
+
| brandOptIn (deprecated) | - | - | - | - |
|
|
334
|
+
| shouldFetchCountries (deprecated) | - | - | - | - |
|
|
335
|
+
| accountInfoTitle | string / JSX.Element | no | “” | Render some text or JSX component above Login section. Do not available if there is logged in user. |
|
|
336
|
+
| hideLogo | boolean | no | false | Hide TicketFairy logo under “Login” button. |
|
|
337
|
+
| themeOptions | MUI ThemeOptions | no | N/A | MUI Theme Provider’s theme. |
|
|
338
|
+
| hideErrorsAlertSection | boolean | no | false | Hide form submit errors rendered by package. |
|
|
339
|
+
| skipPage | boolean | no | false | Enable skipping Billing Info page. |
|
|
340
|
+
| canSkipHolderNames | boolean | no | false | Allows the user to skip entering ticket holders' names. |
|
|
341
|
+
| enableTimer | boolean | no | false | Enables the countdown timer. |
|
|
342
|
+
| buttonName | string | no | false | The text to display on the submit button. |
|
|
343
|
+
| showPoweredByImage | boolean | no | false | Displays the "Powered by TheTicketFairy" image. |
|
|
344
|
+
| isCountryCodeEditable | boolean | no | true | Allows the user to edit the country code. |
|
|
345
|
+
| - | - | - | - | - |
|
|
346
|
+
| handleSubmit | (values, helpers, eventId, response) => void | no | value => value | A callback function that is called when the form is submitted. |
|
|
347
|
+
| onSubmitError | (error) => void | no | value => value | A callback function that is called when form submission fails. |
|
|
348
|
+
| onGetCartSuccess | (data) => void | no | value => value | A callback function that is called when the cart data is successfully retrieved. |
|
|
349
|
+
| onGetCartError | (error) => void | no | value => value | A callback function that is called when retrieving the cart data fails. |
|
|
350
|
+
| onErrorClose | () => void | no | value => value | A callback function that is called when the error message is closed. |
|
|
351
|
+
| onSkipBillingPage | (data) => void | no | value => value | A callback function that is called when the billing page skips. |
|
|
352
|
+
| onGetCountriesSuccess | (data) => void | no | value => value | A callback function that is called when the list of countries is successfully retrieved. |
|
|
353
|
+
| onGetCountriesError | (error) => void | no | value => value | A callback function that is called when retrieving the list of countries fails. |
|
|
354
|
+
| onGetStatesSuccess | (data) => void | no | value => value | A callback function that is called when the list of states is successfully retrieved. |
|
|
355
|
+
| onGetCountriesError | (error) => void | no | value => value | A callback function that is called when retrieving the list of states fails. |
|
|
356
|
+
| onAuthorizeSuccess | (data) => void | no | value => value | A callback function that is called when authorization is successful. |
|
|
357
|
+
| onAuthorizeError | (error) => void | no | value => value | A callback function that is called when authorization fails. |
|
|
358
|
+
| onCountdownFinish | () => void | no | value => value | A callback function that is called when the countdown timer finishes. |
|
|
359
|
+
| onPendingVerification | () => void | no | value => value | A callback function that is called when the verification process is passed and pending response. |
|
|
303
360
|
|
|
304
361
|
</details>
|
|
305
362
|
|
|
306
363
|
|
|
307
364
|
|
|
308
|
-
##
|
|
365
|
+
## `PaymentContainer`
|
|
366
|
+
The component provides a form for users to enter their payment information and checkout. It accepts various props to customize the form and handle the checkout process.
|
|
367
|
+
|
|
368
|
+
<details open>
|
|
369
|
+
|
|
370
|
+
| Property | Type | Required | Default Value | Description |
|
|
371
|
+
| ----------------------- | ------------------------------- | -------- | -------------------- | ----------------------------------------------------------------------------------- |
|
|
372
|
+
| paymentFields | IPaymentField[] | yes | [] | An array of payment fields to render in the form. |
|
|
373
|
+
| checkoutData | { hash: string, total: number } | yes | N/A | An object containing checkout data, such as the order total and hash. |
|
|
374
|
+
| formTitle | string | no | 'Get Your Tickets' | Text to display above the payment form. |
|
|
375
|
+
| errorText | string | no | '' | Text to display if there is an error during the payment process. |
|
|
376
|
+
| paymentButtonText | string | no | 'Pay' | Text to display on the payment button. |
|
|
377
|
+
| paymentInfoLabel | string | no | 'Order Confirmation' | Text to display above the payment information section. |
|
|
378
|
+
| orderInfoLabel | string | no | 'Order Review' | Text to display above the order information section. |
|
|
379
|
+
| stripeCardOptions | StripeCardNumberElementOptions | no | {} | Options for the Stripe card input element. |
|
|
380
|
+
| elementsOptions | StripeElementsOptions | no | {} | Options for the Stripe Elements instance. |
|
|
381
|
+
| themeOptions | ThemeOptions | no | {} | An object containing theme options for the payment form. |
|
|
382
|
+
| enableTimer | boolean | no | false | Whether to show a timer for the user. |
|
|
383
|
+
| disableZipSection | boolean | no | false | Whether to show the zip code input field. |
|
|
384
|
+
| enablePaymentPlan | boolean | no | true | Whether to enable payment plans. |
|
|
385
|
+
| - | - | - | - | - |
|
|
386
|
+
| handlePayment | (data) => void | yes | value => value | A callback function to handle the payment process. |
|
|
387
|
+
| onPaymentError | (error) => void | no | value => value | A callback function that is called when the payment process fails. |
|
|
388
|
+
| onErrorClose | () => void | no | value => value | A callback function that is called when the error message is closed. |
|
|
389
|
+
| onGetPaymentDataSuccess | (data) => void | no | value => value | A callback function that is called when the payment data is successfully retrieved. |
|
|
390
|
+
| onGetPaymentDataError | (error) => void | no | value => value | A callback function that is called when retrieving the payment data fails. |
|
|
391
|
+
| onCountdownFinish | () => void | no | value => value | A callback function that is called when the countdown timer finishes. |
|
|
309
392
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
### Confirmation Container Interface
|
|
393
|
+
</details>
|
|
313
394
|
|
|
314
|
-
|
|
315
|
-
<summary><b>props</b></summary>
|
|
395
|
+
|
|
316
396
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
|
|
|
326
|
-
|
|
|
327
|
-
|
|
|
328
|
-
| orderHash
|
|
397
|
+
## `ConfirmationContainer`
|
|
398
|
+
The component is responsible for displaying the confirmation page after a successful payment.
|
|
399
|
+
|
|
400
|
+
<details open>
|
|
401
|
+
|
|
402
|
+
| Property | Type | Required | Default Value | Description |
|
|
403
|
+
| ---------------------------- | ------------------- | -------- | -------------- | ---------------------------------------------------------------------------------------- |
|
|
404
|
+
| isReferralEnabled | boolean | yes | false | Whether referral functionality is enabled. |
|
|
405
|
+
| showDefaultShareButtons | boolean | yes | false | Whether to display default share buttons. |
|
|
406
|
+
| shareButtons | IShareButton[] | yes | [] | Array of objects representing the share buttons. |
|
|
407
|
+
| messengerAppId | string | yes | N/A | Messenger App ID for Facebook share button. |
|
|
408
|
+
| orderHash | string | no | N/A | Hash value of the order. |
|
|
409
|
+
| clientLabel | string | no | 'Ticket Fairy' | Client's name. |
|
|
410
|
+
| confirmationLabels | IConfirmationLabels | no | {} | Object containing labels for the confirmation page. |
|
|
411
|
+
| hasCopyIcon | boolean | no | true | Whether to display a copy icon beside the referral link. |
|
|
412
|
+
| showReferralsInfoText | boolean | no | false | Whether to display referral information text. |
|
|
413
|
+
| showCopyInfoModal | boolean | no | false | Whether to display a copy info modal after the link is copied. |
|
|
414
|
+
| showPricingNoteSection | boolean | no | false | Whether to display the pricing note section. |
|
|
415
|
+
| - | - | - | - | - |
|
|
416
|
+
| onGetConfirmationDataSuccess | (data) => void | yes | value => value | A callback function that is called when the confirmation data is successfully retrieved. |
|
|
417
|
+
| onGetConfirmationDataError | (error) => void | yes | value => value | A callback function that is called when retrieving the confirmation data fails. |
|
|
418
|
+
| onLinkCopied | () => void | no | value => value | A callback function that is called when the referral link is copied. |
|
|
329
419
|
|
|
330
420
|
</details>
|
|
331
421
|
|
|
332
422
|
|
|
333
423
|
|
|
334
|
-
##
|
|
424
|
+
## `MyTicketsContainer`
|
|
425
|
+
The component is responsible for rendering a list of orders with details and some customization options.
|
|
426
|
+
|
|
427
|
+
<details open>
|
|
428
|
+
|
|
429
|
+
| Property | Type | Required | Default Value | Description |
|
|
430
|
+
| ---------------------------- | ------------------- | -------- | -------------- | ---------------------------------------------------------------------------------------- |
|
|
431
|
+
| isReferralEnabled | boolean | yes | false | Whether referral functionality is enabled. |
|
|
432
|
+
| showDefaultShareButtons | boolean | yes | false | Whether to display default share buttons. |
|
|
433
|
+
| shareButtons | IShareButton[] | yes | [] | Array of objects representing the share buttons. |
|
|
434
|
+
| messengerAppId | string | yes | N/A | Messenger App ID for Facebook share button. |
|
|
435
|
+
| orderHash | string | no | N/A | Hash value of the order. |
|
|
436
|
+
| clientLabel | string | no | 'Ticket Fairy' | Client's name. |
|
|
437
|
+
| confirmationLabels | IConfirmationLabels | no | {} | Object containing labels for the confirmation page. |
|
|
438
|
+
| hasCopyIcon | boolean | no | true | Whether to display a copy icon beside the referral link. |
|
|
439
|
+
| showReferralsInfoText | boolean | no | false | Whether to display referral information text. |
|
|
440
|
+
| showCopyInfoModal | boolean | no | false | Whether to display a copy info modal after the link is copied. |
|
|
441
|
+
| showPricingNoteSection | boolean | no | false | Whether to display the pricing note section. |
|
|
442
|
+
| - | - | - | - | - |
|
|
443
|
+
| onGetConfirmationDataSuccess | (data) => void | yes | value => value | A callback function that is called when the confirmation data is successfully retrieved. |
|
|
444
|
+
| onGetConfirmationDataError | (error) => void | yes | value => value | A callback function that is called when retrieving the confirmation data fails. |
|
|
445
|
+
| onLinkCopied | () => void | no | value => value | A callback function that is called when the referral link is copied. |
|
|
446
|
+
|
|
447
|
+
</details>
|
|
335
448
|
|
|
336
|
-
|
|
449
|
+
|
|
337
450
|
|
|
338
|
-
|
|
451
|
+
## Orders Container
|
|
339
452
|
|
|
453
|
+
Will show the purchased orders for the logged user.
|
|
340
454
|
Orders container interface extends [Login Modal Interface](#login-modal-interface).
|
|
341
455
|
|
|
342
|
-
<details>
|
|
343
|
-
<summary><b>
|
|
456
|
+
<details open>
|
|
457
|
+
<summary><b>Orders Container Props Interface:</b></summary>
|
|
344
458
|
|
|
345
459
|
| Property | Type | Required | Default Value | Description |
|
|
346
460
|
| ------------------ | ------------------------------ | -------- | -------------- | ---------------------------------------------------- |
|
|
@@ -357,10 +471,8 @@ Orders container interface extends [Login Modal Interface](#login-modal-interfac
|
|
|
357
471
|
|
|
358
472
|
Will show the purchased order details. Contains `order PDF download` and `ticket resale` functionalities. Currently both functionalities are enabled by default.
|
|
359
473
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
<details>
|
|
363
|
-
<summary><b>props</b></summary>
|
|
474
|
+
<details open>
|
|
475
|
+
<summary><b>Order Container Props Interface:</b></summary>
|
|
364
476
|
|
|
365
477
|
| Property | Type | Required | Default Value | Description |
|
|
366
478
|
| ------------------------- | ----------------------------------------- | -------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
@@ -384,10 +496,8 @@ Will show the purchased order details. Contains `order PDF download` and `ticket
|
|
|
384
496
|
|
|
385
497
|
Container renders information about accepting or declining of resold tickets. It will automatically redirect to home page, if not valid hash is provided in URL.
|
|
386
498
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
<details>
|
|
390
|
-
<summary><b>props</b></summary>
|
|
499
|
+
<details open>
|
|
500
|
+
<summary><b>Ticket Resale Container Props Interface:</b></summary>
|
|
391
501
|
|
|
392
502
|
| Property | Type | Required | Default Value | Description |
|
|
393
503
|
| ------------------------------ | ------------------------- | -------- | -------------- | ---------------------------------------------- |
|
|
@@ -400,7 +510,7 @@ Container renders information about accepting or declining of resold tickets. It
|
|
|
400
510
|
|
|
401
511
|
|
|
402
512
|
|
|
403
|
-
<details>
|
|
513
|
+
<details open>
|
|
404
514
|
<summary><small id="1">1. Share buttons</small></summary>
|
|
405
515
|
|
|
406
516
|
```
|
|
@@ -418,7 +528,7 @@ Default share options if `showDefaultShareButtons` is true, are: "Share on Faceb
|
|
|
418
528
|
|
|
419
529
|
</details>
|
|
420
530
|
|
|
421
|
-
<details>
|
|
531
|
+
<details open>
|
|
422
532
|
<summary><small id="2">2. Confirmation Labels</small></summary>
|
|
423
533
|
|
|
424
534
|
```
|
|
@@ -439,7 +549,7 @@ const defaultConfirmationLabels = {
|
|
|
439
549
|
|
|
440
550
|
</details>
|
|
441
551
|
|
|
442
|
-
<details>
|
|
552
|
+
<details open>
|
|
443
553
|
<summary><small id="3">3. Tickets table columns</small></summary>
|
|
444
554
|
|
|
445
555
|
```
|