tf-checkout-react 1.3.14 → 1.3.15
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 +349 -160
- package/dist/components/confirmModal/index.d.ts +1 -1
- package/dist/components/ticketsContainer/index.d.ts +5 -1
- package/dist/tf-checkout-react.cjs.development.js +155 -74
- 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 +156 -75
- package/dist/tf-checkout-react.esm.js.map +1 -1
- package/dist/tf-checkout-styles.css +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/api/index.ts +3 -1
- package/src/components/.DS_Store +0 -0
- package/src/components/billing-info-container/index.tsx +15 -5
- package/src/components/common/CustomField.tsx +25 -22
- package/src/components/common/dist/PhoneNumberField.js +96 -0
- package/src/components/confirmModal/index.tsx +16 -9
- package/src/components/ticketsContainer/index.tsx +57 -3
package/README.md
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
# tf-checkout-react
|
|
2
|
+
|
|
2
3
|
|
|
3
4
|
|
|
5
|
+
<details>
|
|
6
|
+
<summary><strong>Table of Contents</strong></summary>
|
|
7
|
+
|
|
4
8
|
- [About The Project](#about-the-project)
|
|
9
|
+
- [Intergrations](#intergrations)
|
|
10
|
+
- [WebFlow](#webflow)
|
|
5
11
|
- [Getting started](#getting-started)
|
|
6
12
|
- [Prerequisites](#prerequisites)
|
|
7
13
|
- [Installation](#installation)
|
|
@@ -11,37 +17,61 @@
|
|
|
11
17
|
- [Set configuration](#set-configuration)
|
|
12
18
|
- [Features/Functionalities](#featuresfunctionalities)
|
|
13
19
|
- [Login](#login)
|
|
20
|
+
- [Login Modal Interface](#login-modal-interface)
|
|
14
21
|
- [Tickets Container](#tickets-container)
|
|
22
|
+
- [Tickets Container Interface](#tickets-container-interface)
|
|
15
23
|
- [Billing Container](#billing-container)
|
|
16
|
-
|
|
24
|
+
- [Billing Container Interface](#billing-container-interface)
|
|
25
|
+
- [Checkout Container](#checkout-container)
|
|
26
|
+
- [Checkout Container Interface](#checkout-container-interface)
|
|
17
27
|
- [Confirmation Container](#confirmation-container)
|
|
28
|
+
- [Confirmation Container Interface](#confirmation-container-interface)
|
|
18
29
|
- [Orders Container](#orders-container)
|
|
19
|
-
|
|
30
|
+
- [Orders Container Interface](#orders-container-interface)
|
|
31
|
+
- [Order Details Container](#order-details-container)
|
|
32
|
+
- [Order Details Container Interface](#order-details-container-interface)
|
|
20
33
|
- [Commands](#commands)
|
|
21
34
|
- [Rollup](#rollup)
|
|
22
35
|
- [TypeScript](#typescript)
|
|
23
36
|
- [GitHub Actions](#github-actions)
|
|
24
37
|
|
|
38
|
+
</details>
|
|
39
|
+
|
|
25
40
|
|
|
41
|
+
|
|
26
42
|
# About The Project
|
|
27
43
|
|
|
28
44
|
This package containes Ticketfairy checkout functionality. Besides that package provides different functionalities connected with checkout functionality, such as `login/register`, `order management functionality`, `resale functionality`, `referrals functionality`, etc.
|
|
29
45
|
|
|
30
46
|
|
|
47
|
+
|
|
48
|
+
# Intergrations
|
|
49
|
+
|
|
50
|
+
## [WebFlow](/webflow/public/INTEGRATION.md)
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
31
54
|
# Getting started
|
|
55
|
+
|
|
32
56
|
## Prerequisites
|
|
57
|
+
|
|
33
58
|
- node >= 12.14.1
|
|
34
59
|
- npm >= 6.13.4
|
|
60
|
+
|
|
35
61
|
## Installation
|
|
62
|
+
|
|
36
63
|
### Existing project
|
|
37
64
|
|
|
38
65
|
```
|
|
39
66
|
npm i tf-checkout-react
|
|
40
67
|
```
|
|
68
|
+
|
|
41
69
|
or
|
|
70
|
+
|
|
42
71
|
```
|
|
43
72
|
yarn add tf-checkout-react
|
|
44
73
|
```
|
|
74
|
+
|
|
45
75
|
### Run Independently
|
|
46
76
|
|
|
47
77
|
- Clone this repo: `git clone https://github.com/theticketfairy/tf-checkout-react.git`
|
|
@@ -57,6 +87,8 @@ Project will run under `localhost:3002`. Port can be changed from `package.json`
|
|
|
57
87
|
|
|
58
88
|
## Set configuration
|
|
59
89
|
|
|
90
|
+
In order to make this package work properly, you need to set some configurations, otherwise the default configurations will be used. Currently only configuration which is needed for production, is `BASE_URL`. Other configurations written below are only for development/test environments.
|
|
91
|
+
|
|
60
92
|
Import `setConfigs` function from the package.
|
|
61
93
|
|
|
62
94
|
```
|
|
@@ -65,10 +97,16 @@ import { setConfigs } from 'tf-checkout-react'
|
|
|
65
97
|
|
|
66
98
|
Call it in the root and pass neccesary options. Here are available options:
|
|
67
99
|
|
|
100
|
+
### Configurations for production
|
|
101
|
+
|
|
68
102
|
- BASE_URL - need for making API calls (default: `https://www.ticketfairy.com`)
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
103
|
+
|
|
104
|
+
### Configurations for development/testing
|
|
105
|
+
|
|
106
|
+
- BASE_URL - need for making API calls
|
|
107
|
+
- EVENT_ID - get and use specific event data
|
|
108
|
+
- BRAND_SLUG - slug of the event's parent/owner brand
|
|
109
|
+
- X_SOURCE_ORIGIN - need for local environment. This header will be included in every API request.
|
|
72
110
|
|
|
73
111
|
|
|
74
112
|
|
|
@@ -76,206 +114,355 @@ Call it in the root and pass neccesary options. Here are available options:
|
|
|
76
114
|
|
|
77
115
|
## Login
|
|
78
116
|
|
|
79
|
-
Used to authenticate user.
|
|
117
|
+
### Used to authenticate user. Contains `email` and `password` fields.
|
|
80
118
|
|
|
81
|
-
|
|
119
|
+
Import `LoginModal` from package. `LoginModal` component provides login form with validations and error handlings. Also it provides callback functions for every action and API call.
|
|
82
120
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
121
|
+
### Login Modal Interface
|
|
122
|
+
|
|
123
|
+
<details>
|
|
124
|
+
<summary><b>props</b></summary>
|
|
125
|
+
|
|
126
|
+
| Property | Type | Required | Default Value | Description |
|
|
127
|
+
| ------------------------ | ------------------------- | -------- | ------------------------------- | -------------------------------------------------- |
|
|
128
|
+
| onLogin | Function: () => void | yes | N/A | Called after log in request’s success. |
|
|
129
|
+
| onClose | Function: () => void | yes | N/A | Called on modal close. |
|
|
130
|
+
| onGetProfileDataSuccess | Function: (data) => void | no | value => value | Called after fetching user data request’s success. |
|
|
131
|
+
| onGetProfileDataError | Function: (error) => void | no | value => value | Called after fetching user data request’s failure. |
|
|
132
|
+
| onForgotPassword | Function: () => void | no | value => value | Called on “Forgot Password” button click. |
|
|
133
|
+
| onSignup | Function: () => void | no | value => value | Called on “Sign Up” button click. |
|
|
134
|
+
| modalClassname | string | no | " " | Login modal main container class. |
|
|
135
|
+
| logo | string / URL / path | no | TheTicketFairy black logo (URL) | Login modal top section’s logo. |
|
|
136
|
+
| showForgotPasswordButton | boolean | no | false | Display “Forgot Password” button. |
|
|
137
|
+
| showSignUpButton | boolean | no | false | Display “Sign Up” button. |
|
|
138
|
+
|
|
139
|
+
</details>
|
|
96
140
|
|
|
97
141
|
|
|
98
|
-
## Tickets Container
|
|
99
142
|
|
|
100
|
-
|
|
143
|
+
## Register
|
|
101
144
|
|
|
102
|
-
### `
|
|
145
|
+
### Used to register new user. Contains `firstName`, `lastName`, `email`, `password` and `confirmPassword` fields.
|
|
103
146
|
|
|
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
|
-
|
|
147
|
+
`RegisterModal` component provides register form with validations and error handlings. Also it provides callback functions for every action and API call.
|
|
148
|
+
|
|
149
|
+
### Register Modal Interface
|
|
150
|
+
|
|
151
|
+
<details>
|
|
152
|
+
<summary><b>props</b></summary>
|
|
153
|
+
|
|
154
|
+
| Property | Type | Required | Default Value | Description |
|
|
155
|
+
| ----------------------- | ------------------------- | -------- | -------------- | -------------------------------------------------------- |
|
|
156
|
+
| onRegister (deprecated) | Function: () => void | no | N/A | - |
|
|
157
|
+
| onClose | Function: () => void | yes | N/A | Called on modal close, after register request's success. |
|
|
158
|
+
| onGetProfileDataSuccess | Function: (data) => void | no | value => value | Called after fetching user data request’s success. |
|
|
159
|
+
| onGetProfileDataError | Function: (error) => void | no | value => value | Called after fetching user data request’s failure. |
|
|
160
|
+
|
|
161
|
+
</details>
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
## Forgot Password
|
|
166
|
+
|
|
167
|
+
### Used to recover forgot password of user. Contains `email` field.
|
|
168
|
+
|
|
169
|
+
`ForgotPasswordModal` component provides forgot password form with validations and error handlings. Also it provides callback functions for every action and API call.
|
|
170
|
+
|
|
171
|
+
### Forgot Password Modal Interface
|
|
172
|
+
|
|
173
|
+
<details>
|
|
174
|
+
<summary><b>props</b></summary>
|
|
175
|
+
|
|
176
|
+
| Property | Type | Required | Default Value | Description |
|
|
177
|
+
| ----------------------- | ------------------------- | -------- | -------------- | -------------------------------------------------------- |
|
|
178
|
+
| onLogin | Function: () => void | yes | N/A | Called on "Back to Log In" button click. |
|
|
179
|
+
| onClose | Function: () => void | yes | N/A | Called on modal close, after register request's success. |
|
|
180
|
+
| onForgotPasswordSuccess | Function: (data) => void | no | value => value | Called after forgot password request’s success. |
|
|
181
|
+
| onForgotPasswordError | Function: (error) => void | no | value => value | Called after forgot password request’s failure. |
|
|
182
|
+
|
|
183
|
+
</details>
|
|
136
184
|
|
|
137
185
|
|
|
186
|
+
|
|
187
|
+
## Tickets Container
|
|
188
|
+
|
|
189
|
+
Tickets container/component will retrieve and show a list of tickets corresponding to selected event. It also containes `PromoCode`, `AccessCode`, `WaitingLsit` and `SessionButtons` functionalities.
|
|
190
|
+
|
|
191
|
+
### Tickets Container Interface
|
|
192
|
+
|
|
193
|
+
<details>
|
|
194
|
+
<summary><b>props</b></summary>
|
|
195
|
+
|
|
196
|
+
| Property | Type | Required | Default value | Description |
|
|
197
|
+
| ---------------------------------------- | ------------------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
198
|
+
| eventId | string/number | yes | N/A | |
|
|
199
|
+
| getTicketsLabel | string | no | “Get Tickets" | “Get Tickets” button label. |
|
|
200
|
+
| contentStyle | CSSProperties | no | {} | Main div container styles. |
|
|
201
|
+
| theme | ‘light’, ‘dark' | no | ‘light' | Main div class. |
|
|
202
|
+
| themeOptions | MUI ThemeOptions | no | N/A | MUI Theme Provider’s theme. |
|
|
203
|
+
| queryPromoCode (deprecated) | string | no | N/A | Promo code value get from URL query parameters. |
|
|
204
|
+
| isPromotionsEnabled | boolean | no | false | Enable Promotions feature. |
|
|
205
|
+
| isAccessCodeEnabled | boolean | no | false | Enable Access Code feature. |
|
|
206
|
+
| hideTicketsHeader | boolean | no | false | Hides section header component. |
|
|
207
|
+
| hideSessionButtons | boolean | no | false | Hide “My Tickets” and “Log Out” buttons. |
|
|
208
|
+
| hideWaitingList | boolean | no | false | Disable Waiting List feature. |
|
|
209
|
+
| enableBillingInfoAutoCreate | boolean | no | true | Enable to automatically create billing info data, instead of manually creation by user. |
|
|
210
|
+
| enableInfluencersSection | boolean | no | true | Display Influencers section. |
|
|
211
|
+
| enableAddOns | boolean | no | true | Enable Add-Ons feature. |
|
|
212
|
+
| isButtonScrollable (deprecated) | boolean | no | false | Enable “Get Tickets” button’s scroll. |
|
|
213
|
+
| sortBySoldOut | boolean | no | false | Enable to sort tickets by sort order and sold out status. By default tickets will be sorted only by sort order. |
|
|
214
|
+
| disableCountdownLeadingZero (deprecated) | boolean | no | false | - |
|
|
215
|
+
| isLoggedIn (deprecated) | boolean | no | false | - |
|
|
216
|
+
| actionsSectionComponent | ReactNode | no | N/A | Custom component instead of “Get Tickets” button. |
|
|
217
|
+
| ticketsHeaderComponent | ReactNode | no | N/A | Tickets section header component. |
|
|
218
|
+
| onAddToCartSuccess | Function: (data) => void | no | value => value | Called after add to cart request’s success. |
|
|
219
|
+
| onAddToCartError | Function: (error) => void | no | value => value | Called after add to cart request’s failure. |
|
|
220
|
+
| onGetTicketsSuccess | Function: (data) => void | no | value => value | Called after fetching tickets request’s success. |
|
|
221
|
+
| onGetTicketsError | Function: (error) => void | no | value => value | Called after fetching tickets request’s failure. |
|
|
222
|
+
| onLogoutSuccess | Function: () => void | no | value => value | Called after log out request’s success. |
|
|
223
|
+
| onLogoutError | Function: (error) => void | no | value => value | Called after log out request’s failure. |
|
|
224
|
+
| onLoginSuccess | Function: () => void | no | value => value | Called after log in request’s success. |
|
|
225
|
+
|
|
226
|
+
</details>
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
|
|
138
230
|
## Billing Container
|
|
139
231
|
|
|
140
232
|
Billing container provides form for filling user's data. Form contains `user info`, `age` and `ticket holders` sections. Depending on event's requirements billing information form may differ. Form will autofill all available information and in case of all required fields are autofilled, billing page will redirect to payment page. Form submition will automatically register new user, if there is no existing user with provided email.
|
|
141
233
|
|
|
142
|
-
###
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
onLoginSuccess?: () => void;
|
|
175
|
-
onErrorClose?: () => void;
|
|
176
|
-
|
|
177
|
-
theme?: 'light' | 'dark';
|
|
178
|
-
themeOptions?: ThemeOptions & {
|
|
179
|
-
input?: CSSProperties;
|
|
180
|
-
checkbox?: CSSProperties;
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
buttonName?: string;
|
|
184
|
-
accountInfoTitle?: string | JSX.Element;
|
|
185
|
-
hideLogo?: boolean;
|
|
186
|
-
hideErrorsAlertSection?: boolean;
|
|
187
|
-
skipPage?: boolean;
|
|
188
|
-
canSkipHolderNames?: boolean;
|
|
189
|
-
shouldFetchCountries?: boolean;
|
|
190
|
-
enableTimer?: boolean;
|
|
191
|
-
}
|
|
192
|
-
```
|
|
234
|
+
### Billing Container Interface
|
|
235
|
+
|
|
236
|
+
Billing container interface extends [Login Modal Interface](#login-modal-interface), [Register Modal Interface](#register-modal-interface), [Forgot Password Modal Interface](#forgot-password-modal-interface).
|
|
237
|
+
|
|
238
|
+
<details>
|
|
239
|
+
<summary><b>props</b></summary>
|
|
240
|
+
|
|
241
|
+
| Property | Type | Required | Default Value | Description |
|
|
242
|
+
| --------------------------------- | -------------------------------------------------------- | -------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
|
|
243
|
+
| data | IBillingInfoData[] | no | [] | Form fields list to be rendered to collect billing info data. |
|
|
244
|
+
| ticketHoldersFields | IBillingInfoData[] | no | [{ id: 1, fields: [] }] | Form fields list to be rendered to collect ticket holders data. |
|
|
245
|
+
| initialValues (deprecated) | { [key: string]: any } | no | {} | Form’s initial values. |
|
|
246
|
+
| theme | 'light' / 'dark' | no | 'light' | MUI Theme Provider’s theme. |
|
|
247
|
+
| isLoggedIn (deprecated) | boolean | no | false | - |
|
|
248
|
+
| accountInfoTitle | string / JSX.Element | no | “” | Render some text or JSX component above Login section. Do not available if there is logged in user. |
|
|
249
|
+
| hideLogo | boolean | no | false | Hide TicketFairy logo under “Login” button. |
|
|
250
|
+
| themeOptions | MUI ThemeOptions | no | N/A | MUI Theme Provider’s theme. |
|
|
251
|
+
| hideErrorsAlertSection | boolean | no | false | Hide form submit errors rendered by package. |
|
|
252
|
+
| skipPage | boolean | no | false | Enable skipping Billing Info page. |
|
|
253
|
+
| canSkipHolderNames | boolean | no | false | Enable to autogenerate ticket holders’ data, if ticket holders’ data are not required. |
|
|
254
|
+
| shouldFetchCountries (deprecated) | boolean | no | true | Enable to fetch countries list from TicketFairy. |
|
|
255
|
+
| enableTimer | boolean | no | false | Display whole checkout process timer. |
|
|
256
|
+
| brandOptIn (deprecated) | boolean | no | false | - |
|
|
257
|
+
| handleSubmit | Function: (data, helpers, eventId, responseData) => void | no | value => value | Called after billing info data submit request’s success. |
|
|
258
|
+
| onSubmitError | Function: (error) => void | no | value => value | Called after billing info data submit request’s failure. |
|
|
259
|
+
| onGetCartSuccess | Function: (data) => void | no | value => value | Called after fetching cart data request’s success. |
|
|
260
|
+
| onGetCartError | Function: (error) => void | no | value => value | Called after fetching cart data request’s failure. |
|
|
261
|
+
| onLogin (deprecated) | - | - | - | - |
|
|
262
|
+
| onErrorClose | Function: () => void | no | value => value | Called after closing error alert component. |
|
|
263
|
+
| onSkipBillingPage | Function: (data) => void | no | value => value | Called if skipPage is true. |
|
|
264
|
+
|
|
265
|
+
</details>
|
|
193
266
|
|
|
194
267
|
|
|
195
|
-
|
|
268
|
+
|
|
269
|
+
## Checkout Container
|
|
196
270
|
|
|
197
271
|
Will show the order details and a card form that the user will need to fill with its card details.
|
|
198
272
|
TicketFairy doesn't store any card related data, we use [Stripe](https://stripe.com/) as payments solution.
|
|
199
273
|
|
|
200
|
-
###
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
274
|
+
### Checkout Container Interface
|
|
275
|
+
|
|
276
|
+
<details>
|
|
277
|
+
<summary><b>props</b></summary>
|
|
278
|
+
|
|
279
|
+
| Property | Type | Required | Default Value | Description |
|
|
280
|
+
| -------------------------- | ------------------------------- | -------- | ------------------ | ----------------------------------------------------------- |
|
|
281
|
+
| paymentFields | IPaymentField[] | yes | N/A | Define which field’s data should be displayed. |
|
|
282
|
+
| handlePayment (deprecated) | Function: (data) => void | yes | N/A | Called after payment request’s success. |
|
|
283
|
+
| onPaymentError | Function: (error) => void | yes | value => value | Called after payment request’s failure. |
|
|
284
|
+
| checkoutData (deprecated) | { hash: string; total: string } | yes | N/A | Object which contains checkout hash and order’s total cost. |
|
|
285
|
+
| onGetPaymentDataSuccess | Function: (data) => void | yes | value => value | Called after fetching payment data request’s success. |
|
|
286
|
+
| onGetPaymentDataError | Function: (error) => void | yes | value => value | Called after fetching payment data request’s failure. |
|
|
287
|
+
| onCountdownFinish | Function: () => void | yes | value => value | Called after checkout time expired. |
|
|
288
|
+
| enableTimer | boolean | no | false | Enable checkout process timer. |
|
|
289
|
+
| enablePaymentPlan | boolean | no | false | Enable pay with payment plan feature. |
|
|
290
|
+
| disableZipSection | boolean | no | false | Hide “Zip code” field. |
|
|
291
|
+
| paymentButtonText | string | no | “Pay” | Custom text for “Pay” button. |
|
|
292
|
+
| stripeCardOptions | StripeCardNumberElementOptions | no | {} | Custom styles for Stripe card. |
|
|
293
|
+
| themeOptions | MUI ThemeOptions | no | N/A | MUI Theme Provider’s theme. |
|
|
294
|
+
| formTitle | string | no | “Get Your Tickets” | Custom text for payment form title. |
|
|
295
|
+
| errorText (deprecated) | string | no | N/A | Payment confirmation error text. |
|
|
296
|
+
| onErrorClose | Function: () => void | no | N/A | Called after closing error alert component. |
|
|
297
|
+
| elementsOptions | StripeElementsOptions | no | N/A | Custom Stripe card elements. |
|
|
298
|
+
|
|
299
|
+
</details>
|
|
224
300
|
|
|
225
301
|
|
|
302
|
+
|
|
226
303
|
## Confirmation Container
|
|
227
304
|
|
|
228
305
|
This is shown once the payment is successfully completed, could show components to share the purchase in social media or refer it with friends to get discounts on the purchase.
|
|
229
306
|
|
|
230
|
-
###
|
|
307
|
+
### Confirmation Container Interface
|
|
231
308
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
309
|
+
<details>
|
|
310
|
+
<summary><b>props</b></summary>
|
|
311
|
+
|
|
312
|
+
| Property | Type | Required | Default Value | Description |
|
|
313
|
+
| ---------------------------- | ------------------------------------- | -------- | ------------------------------------------- | ----------------------------------------------------- |
|
|
314
|
+
| isReferralEnabled | boolean | yes | false | Enable Referrals feature. |
|
|
315
|
+
| showDefaultShareButtons | boolean | yes | false | Display social media share buttons.<sup>[1](#1)</sup> |
|
|
316
|
+
| messengerAppId | string | yes | “” | Facebook app ID. |
|
|
317
|
+
| shareButtons | IShareButton[] <sup>[1](#1)</sup> | yes | [] | Custom social media share buttons. |
|
|
318
|
+
| confirmationLabels | IConfirmationLabels<sup>[2](#2)</sup> | yes | defaultConfirmationLabels<sup>[2](#2)</sup> | Custom texts to display on Confirmation page. |
|
|
319
|
+
| onLinkCopied | Function: () => void | no | value => value | Called after personal share link copy. |
|
|
320
|
+
| onGetConfirmationDataSuccess | Function: (data) => void | no | value => value | Called after order confirmation request’s success. |
|
|
321
|
+
| onGetConfirmationDataError | Function: (error) => void | no | value => value | Called after order confirmation request’s failure. |
|
|
322
|
+
| hasCopyIcon | boolean | no | true | Display Copy icon near personal share link. |
|
|
323
|
+
| orderHash (deprecated) | string | no | N/A | - |
|
|
324
|
+
|
|
325
|
+
</details>
|
|
245
326
|
|
|
246
327
|
|
|
328
|
+
|
|
247
329
|
## Orders Container
|
|
248
330
|
|
|
249
331
|
Will show the purchased orders for the logged user.
|
|
250
332
|
|
|
251
|
-
###
|
|
333
|
+
### Orders Container Interface
|
|
334
|
+
|
|
335
|
+
Orders container interface extends [Login Modal Interface](#login-modal-interface).
|
|
336
|
+
|
|
337
|
+
<details>
|
|
338
|
+
<summary><b>props</b></summary>
|
|
339
|
+
|
|
340
|
+
| Property | Type | Required | Default Value | Description |
|
|
341
|
+
| ------------------ | ------------------------------ | -------- | -------------- | ---------------------------------------------------- |
|
|
342
|
+
| handleDetailsInfo | Function: (id: string) => void | yes | value => value | Called on "Order Details" button click. |
|
|
343
|
+
| onGetOrdersSuccess | Function: (data) => void | yes | value => value | Called after fetching orders data request’s success. |
|
|
344
|
+
| onGetOrdersError | Function: (error) => void | yes | value => value | Called after fetching orders data request’s failure. |
|
|
345
|
+
| theme | 'light' / 'dark' | no | ‘dark' | Main container class. |
|
|
346
|
+
|
|
347
|
+
</details>
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
## Order Details Container
|
|
352
|
+
|
|
353
|
+
Will show the purchased order details. Contains `order PDF download` and `ticket resale` functionalities. Currently both functionalities are enabled by default.
|
|
354
|
+
|
|
355
|
+
### Order Details Container Interface
|
|
356
|
+
|
|
357
|
+
<details>
|
|
358
|
+
<summary><b>props</b></summary>
|
|
359
|
+
|
|
360
|
+
| Property | Type | Required | Default Value | Description |
|
|
361
|
+
| ------------------------- | ----------------------------------------- | -------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
362
|
+
| columns | [ { label: string } ] | yes | [] | Order details table’s columns’ labels. |
|
|
363
|
+
| ticketsTableColumns | ITicketsTableColumns[] <sup>[3](#3)</sup> | no | defaultTicketsTableColumns<sup>[3](#3)</sup> | Order’s tickets table’s columns. |
|
|
364
|
+
| displayColumnNameInRow | boolean | no | false | Display column’s names in row, instead of table header. |
|
|
365
|
+
| personalLinkIcon | string | no | “” | Custom icon to display near personal share link. |
|
|
366
|
+
| onGetOrdersSuccess | Function: (data) => void | no | value => value | Called after fetching order data request’s success. |
|
|
367
|
+
| onGetOrdersError | Function: (error) => void | no | value => value | Called after fetching order data request’s failure. |
|
|
368
|
+
| onResaleTicketSuccess | Function: (data) => void | no | value => value | Called after resale ticket request’s success. |
|
|
369
|
+
| onResaleTicketError | Function: (error) => void | no | value => value | Called after resale ticket request’s failure. |
|
|
370
|
+
| onRemoveFromResaleSuccess | Function: (data) => void | no | value => value | Called after remove from resale ticket request’s success. |
|
|
371
|
+
| onRemoveFromResaleError | Function: (error) => void | no | value => value | Called after remove from resale ticket request’s failure. |
|
|
372
|
+
| onReturnButtonClick | Function: () => void | no | N/A | Called on “Return” button click. If not passed, button click will redirect to ‘/orders’. |
|
|
373
|
+
|
|
374
|
+
</details>
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
## Ticket Resale Container
|
|
379
|
+
|
|
380
|
+
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.
|
|
381
|
+
|
|
382
|
+
### Ticket Resale Container Interface
|
|
383
|
+
|
|
384
|
+
<details>
|
|
385
|
+
<summary><b>props</b></summary>
|
|
252
386
|
|
|
387
|
+
| Property | Type | Required | Default Value | Description |
|
|
388
|
+
| ------------------------------ | ------------------------- | -------- | -------------- | ---------------------------------------------- |
|
|
389
|
+
| onProcessTicketSuccess | Function: (data) => void | no | value => value | Called after process ticket request’s success. |
|
|
390
|
+
| onGetOrdersError | Function: (error) => void | no | value => value | Called after process ticket request’s failure. |
|
|
391
|
+
| onDeclineTicketPurchaseSuccess | Function: (data) => void | no | value => value | Called after decline ticket request’s success. |
|
|
392
|
+
| onDeclineTicketPurchaseError | Function: (error) => void | no | value => value | Called after decline ticket request’s failure. |
|
|
393
|
+
|
|
394
|
+
</details>
|
|
395
|
+
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
<details>
|
|
399
|
+
<summary><small id="1">1. Share buttons</small></summary>
|
|
400
|
+
|
|
401
|
+
```
|
|
402
|
+
IShareButton {
|
|
403
|
+
mainLabel: string;
|
|
404
|
+
subLabel: string;
|
|
405
|
+
platform: string;
|
|
406
|
+
shareData: any;
|
|
407
|
+
}
|
|
253
408
|
```
|
|
254
|
-
interface Props {
|
|
255
|
-
handleDetailsInfo: (id: string) => void;
|
|
256
|
-
onGetOrdersSuccess: (res: any) => void;
|
|
257
|
-
onGetOrdersError: (err: any) => void;
|
|
258
409
|
|
|
259
|
-
|
|
410
|
+
```
|
|
411
|
+
Default share options if `showDefaultShareButtons` is true, are: "Share on Facebook", "Tweet to your Followers", "Message friends on Facebook" and "Message friends on WhatsApp".
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
</details>
|
|
415
|
+
|
|
416
|
+
<details>
|
|
417
|
+
<summary><small id="2">2. Confirmation Labels</small></summary>
|
|
418
|
+
|
|
419
|
+
```
|
|
420
|
+
IConfirmationLabels {
|
|
421
|
+
confirmationTitle?: string;
|
|
422
|
+
confirmationMain?: string;
|
|
423
|
+
confirmationHelper?: string
|
|
260
424
|
}
|
|
261
425
|
```
|
|
262
426
|
|
|
263
|
-
|
|
264
|
-
|
|
427
|
+
```
|
|
428
|
+
const defaultConfirmationLabels = {
|
|
429
|
+
confirmationTitle = "Your Tickets are Confirmed!",
|
|
430
|
+
confirmationMain = "Your tickets are available in My Tickets section",
|
|
431
|
+
confirmationHelper = "Please bring them with you to the event"
|
|
432
|
+
}
|
|
433
|
+
```
|
|
265
434
|
|
|
266
|
-
|
|
435
|
+
</details>
|
|
267
436
|
|
|
268
|
-
|
|
437
|
+
<details>
|
|
438
|
+
<summary><small id="3">3. Tickets table columns</small></summary>
|
|
269
439
|
|
|
270
440
|
```
|
|
271
|
-
interface
|
|
272
|
-
|
|
273
|
-
|
|
441
|
+
interface ITicketsTableColumns {
|
|
442
|
+
id?: string | number;
|
|
443
|
+
key: keyof ITicketTypes & keyof IActionColumns;
|
|
444
|
+
label: string | number | null | undefined;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
interface IActionColumns {
|
|
448
|
+
download?: boolean;
|
|
449
|
+
sell_ticket?: boolean;
|
|
274
450
|
}
|
|
275
451
|
```
|
|
276
452
|
|
|
277
|
-
|
|
278
|
-
|
|
453
|
+
```
|
|
454
|
+
const defaultTicketsTableColumns = [
|
|
455
|
+
{ key: 'ticket_type', label: 'Ticket Type' },
|
|
456
|
+
{ key: 'holder_name', label: 'Ticket Holder' },
|
|
457
|
+
{ key: 'status', label: 'Status' },
|
|
458
|
+
{ key: 'download', label: '' },
|
|
459
|
+
{ key: 'sell_ticket', label: '' }
|
|
460
|
+
]
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
</details>
|
|
464
|
+
|
|
465
|
+
# Commands
|
|
279
466
|
|
|
280
467
|
TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
|
|
281
468
|
|
|
@@ -300,11 +487,13 @@ The default example imports and live reloads whatever is in `/dist`, so if you a
|
|
|
300
487
|
To do a one-off build, use `npm run build` or `yarn build`.
|
|
301
488
|
|
|
302
489
|
|
|
490
|
+
|
|
303
491
|
### Rollup
|
|
304
492
|
|
|
305
493
|
TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
|
|
306
494
|
|
|
307
495
|
|
|
496
|
+
|
|
308
497
|
### TypeScript
|
|
309
498
|
|
|
310
499
|
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
|