tf-checkout-react 1.3.12-beta.1 → 1.3.12-beta.11

package/README.md

@@ -1,7 +1,13 @@
 # tf-checkout-react
+
  
 
+<details>
+  <summary><strong>Table of Contents</strong></summary>
+
 - [About The Project](#about-the-project)
+- [Intergrations](#intergrations)
+  - [WebFlow](#webflow)
 - [Getting started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
@@ -11,37 +17,66 @@
   - [Set configuration](#set-configuration)
 - [Features/Functionalities](#featuresfunctionalities)
   - [Login](#login)
+    - [Login Modal Interface](#login-modal-interface)
   - [Tickets Container](#tickets-container)
+    - [Tickets Container Interface](#tickets-container-interface)
   - [Billing Container](#billing-container)
-  - [Checkout Containers](#checkout-containers)
+    - [Billing Container Interface](#billing-container-interface)
+  - [Checkout Container](#checkout-container)
+    - [Checkout Container Interface](#checkout-container-interface)
   - [Confirmation Container](#confirmation-container)
+    - [Confirmation Container Interface](#confirmation-container-interface)
   - [Orders Container](#orders-container)
-  - [Order Container](#order-container)
+    - [Orders Container Interface](#orders-container-interface)
+  - [Order Details Container](#order-details-container)
+    - [Order Details Container Interface](#order-details-container-interface)
 - [Commands](#commands)
   - [Rollup](#rollup)
   - [TypeScript](#typescript)
   - [GitHub Actions](#github-actions)
 
+</details>
+
 &nbsp;
+
 # About The Project
 
 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.
 
 &nbsp;
+
+# Intergrations
+
+## [WebFlow](/webflow/public/INTEGRATION.md)
+
+## Clients (Minimal version required)
+
+- Mana Common (1.3.19)
+- Restlesnites (1.3.3)
+
+&nbsp;
+
 # Getting started
+
 ## Prerequisites
+
 - node >= 12.14.1
 - npm >= 6.13.4
+
 ## Installation
+
 ### Existing project
 
 ```
 npm i tf-checkout-react
 ```
+
 or
+
 ```
 yarn add tf-checkout-react
 ```
+
 ### Run Independently
 
 - Clone this repo: `git clone https://github.com/theticketfairy/tf-checkout-react.git`
@@ -57,6 +92,8 @@ Project will run under `localhost:3002`. Port can be changed from `package.json`
 
 ## Set configuration
 
+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.
+
 Import `setConfigs` function from the package.
 
 ```
@@ -65,10 +102,16 @@ import { setConfigs } from 'tf-checkout-react'
 
 Call it in the root and pass neccesary options. Here are available options:
 
+### Configurations for production
+
 - BASE_URL - need for making API calls (default: `https://www.ticketfairy.com`)
-- EVENT_ID - only for local testing
-- BRAND_SLUG - only for local testing
-- X_SOURCE_ORIGIN - need for local environment. This header will be included in every API request (ex. `houseofx.nyc`)
+
+### Configurations for development/testing
+
+- BASE_URL - need for making API calls
+- EVENT_ID - get and use specific event data
+- BRAND_SLUG - slug of the event's parent/owner brand
+- X_SOURCE_ORIGIN - need for local environment. This header will be included in every API request.
 
 &nbsp;
 
@@ -76,206 +119,355 @@ Call it in the root and pass neccesary options. Here are available options:
 
 ## Login
 
-Used to authenticate user. 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.
+### Used to authenticate user. Contains `email` and `password` fields.
 
-### `props`
+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.
 
-```
-interface Props {
-  onClose: () => void;
-  onLogin: () => void;
-  alreadyHasUser?: boolean;
-  userExpired?: boolean;
-  onAuthorizeSuccess?: (res: any) => void;
-  onAuthorizeError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  modalClassname?: string;
-}
-```
+### Login Modal Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                 | Type                      | Required | Default Value                   | Description                                        |
+| ------------------------ | ------------------------- | -------- | ------------------------------- | -------------------------------------------------- |
+| onLogin                  | Function: () => void      | yes      | N/A                             | Called after log in request’s success.             |
+| onClose                  | Function: () => void      | yes      | N/A                             | Called on modal close.                             |
+| onGetProfileDataSuccess  | Function: (data) => void  | no       | value => value                  | Called after fetching user data request’s success. |
+| onGetProfileDataError    | Function: (error) => void | no       | value => value                  | Called after fetching user data request’s failure. |
+| onForgotPassword         | Function: () => void      | no       | value => value                  | Called on “Forgot Password” button click.          |
+| onSignup                 | Function: () => void      | no       | value => value                  | Called on “Sign Up” button click.                  |
+| modalClassname           | string                    | no       | " "                             | Login modal main container class.                  |
+| logo                     | string / URL / path       | no       | TheTicketFairy black logo (URL) | Login modal top section’s logo.                    |
+| showForgotPasswordButton | boolean                   | no       | false                           | Display “Forgot Password” button.                  |
+| showSignUpButton         | boolean                   | no       | false                           | Display “Sign Up” button.                          |
+
+</details>
 
 &nbsp;
-## Tickets Container
 
-Tickets container/component will retrieve and show a list of tickets corresponding to `eventId`. It also containes `PromoCode`, `AccessCode`, `WaitingLsit` and `SessionButtons` functionalities.
+## Register
 
-### `props`
+### Used to register new user. Contains `firstName`, `lastName`, `email`, `password` and `confirmPassword` fields.
 
-```
-interface Props {
-  eventId: number;
-  getTicketsLabel?: string;
-  contentStyle?: React.CSSProperties;
-
-  onAddToCartSuccess: (response: CartSuccess) => void;
-  onAddToCartError: (e: AxiosError) => void;
-  onGetTicketsSuccess: (response: any) => void;
-  onGetTicketsError: (e: AxiosError) => void;
-  onLogoutSuccess: () => void;
-  onLogoutError: (e: AxiosError) => void;
-  onLoginSuccess: () => void;
-
-  theme?: 'light' | 'dark';
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-
-  queryPromoCode?: string;
-  isPromotionsEnabled?: boolean;
-  isAccessCodeEnabled?: boolean;
-
-  hideSessionButtons?: boolean;
-  hideWaitingList?: boolean;
-  enableBillingInfoAutoCreate?: boolean;
-  isButtonScrollable?: boolean;
-  sortBySoldOut?: boolean;
-  disableCountdownLeadingZero?: boolean;
-}
-```
+`RegisterModal` component provides register form with validations and error handlings. Also it provides callback functions for every action and API call.
+
+### Register Modal Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                | Type                      | Required | Default Value  | Description                                              |
+| ----------------------- | ------------------------- | -------- | -------------- | -------------------------------------------------------- |
+| onRegister (deprecated) | Function: () => void      | no       | N/A            | -                                                        |
+| onClose                 | Function: () => void      | yes      | N/A            | Called on modal close, after register request's success. |
+| onGetProfileDataSuccess | Function: (data) => void  | no       | value => value | Called after fetching user data request’s success.       |
+| onGetProfileDataError   | Function: (error) => void | no       | value => value | Called after fetching user data request’s failure.       |
+
+</details>
+
+&nbsp;
+
+## Forgot Password
+
+### Used to recover forgot password of user. Contains `email` field.
+
+`ForgotPasswordModal` component provides forgot password form with validations and error handlings. Also it provides callback functions for every action and API call.
+
+### Forgot Password Modal Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                | Type                      | Required | Default Value  | Description                                              |
+| ----------------------- | ------------------------- | -------- | -------------- | -------------------------------------------------------- |
+| onLogin                 | Function: () => void      | yes      | N/A            | Called on "Back to Log In" button click.                 |
+| onClose                 | Function: () => void      | yes      | N/A            | Called on modal close, after register request's success. |
+| onForgotPasswordSuccess | Function: (data) => void  | no       | value => value | Called after forgot password request’s success.          |
+| onForgotPasswordError   | Function: (error) => void | no       | value => value | Called after forgot password request’s failure.          |
+
+</details>
+
+&nbsp;
+
+## Tickets Container
+
+Tickets container/component will retrieve and show a list of tickets corresponding to selected event. It also containes `PromoCode`, `AccessCode`, `WaitingLsit` and `SessionButtons` functionalities.
+
+### Tickets Container Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                                 | Type                      | Required | Default value  | Description                                                                                                     |
+| ---------------------------------------- | ------------------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
+| eventId                                  | string/number             | yes      | N/A            |                                                                                                                 |
+| getTicketsLabel                          | string                    | no       | “Get Tickets"  | “Get Tickets” button label.                                                                                     |
+| contentStyle                             | CSSProperties             | no       | {}             | Main div container styles.                                                                                      |
+| theme                                    | ‘light’, ‘dark'           | no       | ‘light'        | Main div class.                                                                                                 |
+| themeOptions                             | MUI ThemeOptions          | no       | N/A            | MUI Theme Provider’s theme.                                                                                     |
+| queryPromoCode (deprecated)              | string                    | no       | N/A            | Promo code value get from URL query parameters.                                                                 |
+| isPromotionsEnabled                      | boolean                   | no       | false          | Enable Promotions feature.                                                                                      |
+| isAccessCodeEnabled                      | boolean                   | no       | false          | Enable Access Code feature.                                                                                     |
+| hideTicketsHeader                        | boolean                   | no       | false          | Hides section header component.                                                                                 |
+| hideSessionButtons                       | boolean                   | no       | false          | Hide “My Tickets” and “Log Out” buttons.                                                                        |
+| hideWaitingList                          | boolean                   | no       | false          | Disable Waiting List feature.                                                                                   |
+| enableBillingInfoAutoCreate              | boolean                   | no       | true           | Enable to automatically create billing info data, instead of manually creation by user.                         |
+| enableInfluencersSection                 | boolean                   | no       | true           | Display Influencers section.                                                                                    |
+| enableAddOns                             | boolean                   | no       | true           | Enable Add-Ons feature.                                                                                         |
+| isButtonScrollable (deprecated)          | boolean                   | no       | false          | Enable “Get Tickets” button’s scroll.                                                                           |
+| 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. |
+| disableCountdownLeadingZero (deprecated) | boolean                   | no       | false          | -                                                                                                               |
+| isLoggedIn (deprecated)                  | boolean                   | no       | false          | -                                                                                                               |
+| actionsSectionComponent                  | ReactNode                 | no       | N/A            | Custom component instead of “Get Tickets” button.                                                               |
+| ticketsHeaderComponent                   | ReactNode                 | no       | N/A            | Tickets section header component.                                                                               |
+| onAddToCartSuccess                       | Function: (data) => void  | no       | value => value | Called after add to cart request’s success.                                                                     |
+| onAddToCartError                         | Function: (error) => void | no       | value => value | Called after add to cart request’s failure.                                                                     |
+| onGetTicketsSuccess                      | Function: (data) => void  | no       | value => value | Called after fetching tickets request’s success.                                                                |
+| onGetTicketsError                        | Function: (error) => void | no       | value => value | Called after fetching tickets request’s failure.                                                                |
+| onLogoutSuccess                          | Function: () => void      | no       | value => value | Called after log out request’s success.                                                                         |
+| onLogoutError                            | Function: (error) => void | no       | value => value | Called after log out request’s failure.                                                                         |
+| onLoginSuccess                           | Function: () => void      | no       | value => value | Called after log in request’s success.                                                                          |
+
+</details>
 
 &nbsp;
+
 ## Billing Container
 
 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.
 
-### `props`
-
-```
-interface Props {
-  data?: IBillingInfoData[];
-  ticketHoldersFields?: IBillingInfoData;
-  initialValues?: FormikValues;
-  handleSubmit?: (
-    values: FormikValues,
-    formikHelpers: FormikHelpers<FormikValues>,
-    eventId: any,
-    res: any
-  ) => void;
-  onSubmitError?: (e: AxiosError) => void;
-
-  onRegisterSuccess?: (value: any) => void;
-  onRegisterError?: (e: AxiosError, email: string) => void;
-  onGetCartSuccess?: (res: any) => void;
-  onGetCartError?: (e: AxiosError) => void;
-  onGetCountriesSuccess?: (res: any) => void;
-  onGetCountriesError?: (e: AxiosError) => void;
-  onGetStatesSuccess?: (res: any) => void;
-  onGetStatesError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  onAuthorizeSuccess?: () => void;
-  onAuthorizeError?: (e: AxiosError) => void;
-  onSkipBillingPage: (data: any) => void;
-  onCountdownFinish?: () => void;
-
-  isLoggedIn?: boolean;
-  onLogin?: () => void;
-  onLoginSuccess?: () => void;
-  onErrorClose?: () => void;
-
-  theme?: 'light' | 'dark';
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-
-  buttonName?: string;
-  accountInfoTitle?: string | JSX.Element;
-  hideLogo?: boolean;
-  hideErrorsAlertSection?: boolean;
-  skipPage?: boolean;
-  canSkipHolderNames?: boolean;
-  shouldFetchCountries?: boolean;
-  enableTimer?: boolean;
-}
-```
+### Billing Container Interface
+
+Billing container interface extends [Login Modal Interface](#login-modal-interface), [Register Modal Interface](#register-modal-interface), [Forgot Password Modal Interface](#forgot-password-modal-interface).
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                          | Type                                                     | Required | Default Value           | Description                                                                                         |
+| --------------------------------- | -------------------------------------------------------- | -------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
+| data                              | IBillingInfoData[]                                       | no       | []                      | Form fields list to be rendered to collect billing info data.                                       |
+| ticketHoldersFields               | IBillingInfoData[]                                       | no       | [{ id: 1, fields: [] }] | Form fields list to be rendered to collect ticket holders data.                                     |
+| initialValues (deprecated)        | { [key: string]: any }                                   | no       | {}                      | Form’s initial values.                                                                              |
+| theme                             | 'light' / 'dark'                                         | no       | 'light'                 | MUI Theme Provider’s theme.                                                                         |
+| isLoggedIn (deprecated)           | boolean                                                  | no       | false                   | -                                                                                                   |
+| accountInfoTitle                  | string / JSX.Element                                     | no       | “”                      | Render some text or JSX component above Login section. Do not available if there is logged in user. |
+| hideLogo                          | boolean                                                  | no       | false                   | Hide TicketFairy logo under “Login” button.                                                         |
+| themeOptions                      | MUI ThemeOptions                                         | no       | N/A                     | MUI Theme Provider’s theme.                                                                         |
+| hideErrorsAlertSection            | boolean                                                  | no       | false                   | Hide form submit errors rendered by package.                                                        |
+| skipPage                          | boolean                                                  | no       | false                   | Enable skipping Billing Info page.                                                                  |
+| canSkipHolderNames                | boolean                                                  | no       | false                   | Enable to autogenerate ticket holders’ data, if ticket holders’ data are not required.              |
+| shouldFetchCountries (deprecated) | boolean                                                  | no       | true                    | Enable to fetch countries list from TicketFairy.                                                    |
+| enableTimer                       | boolean                                                  | no       | false                   | Display whole checkout process timer.                                                               |
+| brandOptIn (deprecated)           | boolean                                                  | no       | false                   | -                                                                                                   |
+| handleSubmit                      | Function: (data, helpers, eventId, responseData) => void | no       | value => value          | Called after billing info data submit request’s success.                                            |
+| onSubmitError                     | Function: (error) => void                                | no       | value => value          | Called after billing info data submit request’s failure.                                            |
+| onGetCartSuccess                  | Function: (data) => void                                 | no       | value => value          | Called after fetching cart data request’s success.                                                  |
+| onGetCartError                    | Function: (error) => void                                | no       | value => value          | Called after fetching cart data request’s failure.                                                  |
+| onLogin (deprecated)              | -                                                        | -        | -                       | -                                                                                                   |
+| onErrorClose                      | Function: () => void                                     | no       | value => value          | Called after closing error alert component.                                                         |
+| onSkipBillingPage                 | Function: (data) => void                                 | no       | value => value          | Called if skipPage is true.                                                                         |
+
+</details>
 
 &nbsp;
-## Checkout Containers
+
+## Checkout Container
 
 Will show the order details and a card form that the user will need to fill with its card details.  
 TicketFairy doesn't store any card related data, we use [Stripe](https://stripe.com/) as payments solution.
 
-### `props`
-
-```
-interface Props {
-  paymentFields: IPaymentField[];
-  handlePayment: any;
-  checkoutData: any;
-  formTitle?: string;
-  errorText?: string;
-  onErrorClose?: () => void;
-  onGetPaymentDataSuccess: (value: any) => void;
-  onGetPaymentDataError: (value: AxiosError) => void;
-  onPaymentError: (value: AxiosError) => void;
-  stripeCardOptions?: StripeCardNumberElementOptions;
-  disableZipSection: boolean;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  elementsOptions?: StripeElementsOptions;
-  onCountdownFinish?: () => void;
-  enableTimer?: boolean;
-}
-```
+### Checkout Container Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                   | Type                            | Required | Default Value      | Description                                                 |
+| -------------------------- | ------------------------------- | -------- | ------------------ | ----------------------------------------------------------- |
+| paymentFields              | IPaymentField[]                 | yes      | N/A                | Define which field’s data should be displayed.              |
+| handlePayment (deprecated) | Function: (data) => void        | yes      | N/A                | Called after payment request’s success.                     |
+| onPaymentError             | Function: (error) => void       | yes      | value => value     | Called after payment request’s failure.                     |
+| checkoutData (deprecated)  | { hash: string; total: string } | yes      | N/A                | Object which contains checkout hash and order’s total cost. |
+| onGetPaymentDataSuccess    | Function: (data) => void        | yes      | value => value     | Called after fetching payment data request’s success.       |
+| onGetPaymentDataError      | Function: (error) => void       | yes      | value => value     | Called after fetching payment data request’s failure.       |
+| onCountdownFinish          | Function: () => void            | yes      | value => value     | Called after checkout time expired.                         |
+| enableTimer                | boolean                         | no       | false              | Enable checkout process timer.                              |
+| enablePaymentPlan          | boolean                         | no       | false              | Enable pay with payment plan feature.                       |
+| disableZipSection          | boolean                         | no       | false              | Hide “Zip code” field.                                      |
+| paymentButtonText          | string                          | no       | “Pay”              | Custom text for “Pay” button.                               |
+| stripeCardOptions          | StripeCardNumberElementOptions  | no       | {}                 | Custom styles for Stripe card.                              |
+| themeOptions               | MUI ThemeOptions                | no       | N/A                | MUI Theme Provider’s theme.                                 |
+| formTitle                  | string                          | no       | “Get Your Tickets” | Custom text for payment form title.                         |
+| errorText (deprecated)     | string                          | no       | N/A                | Payment confirmation error text.                            |
+| onErrorClose               | Function: () => void            | no       | N/A                | Called after closing error alert component.                 |
+| elementsOptions            | StripeElementsOptions           | no       | N/A                | Custom Stripe card elements.                                |
+
+</details>
 
 &nbsp;
+
 ## Confirmation Container
 
 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.
 
-### `props`
+### Confirmation Container Interface
 
-```
-interface Props {
-  isReferralEnabled: boolean;
-  showDefaultShareButtons: boolean;
-  messengerAppId: string;
-  shareButtons: IShareButton[];
-  orderHash?: string;
-
-  onGetConfirmationDataSuccess: (res: any) => void;
-  onGetConfirmationDataError: (e: AxiosError) => void;
-  onLinkCopied: () => void;
-}
-```
+<details>
+  <summary><b>props</b></summary>
+
+| Property                     | Type                                  | Required | Default Value                               | Description                                           |
+| ---------------------------- | ------------------------------------- | -------- | ------------------------------------------- | ----------------------------------------------------- |
+| isReferralEnabled            | boolean                               | yes      | false                                       | Enable Referrals feature.                             |
+| showDefaultShareButtons      | boolean                               | yes      | false                                       | Display social media share buttons.<sup>[1](#1)</sup> |
+| messengerAppId               | string                                | yes      | “”                                          | Facebook app ID.                                      |
+| shareButtons                 | IShareButton[] <sup>[1](#1)</sup>     | yes      | []                                          | Custom social media share buttons.                    |
+| confirmationLabels           | IConfirmationLabels<sup>[2](#2)</sup> | yes      | defaultConfirmationLabels<sup>[2](#2)</sup> | Custom texts to display on Confirmation page.         |
+| onLinkCopied                 | Function: () => void                  | no       | value => value                              | Called after personal share link copy.                |
+| onGetConfirmationDataSuccess | Function: (data) => void              | no       | value => value                              | Called after order confirmation request’s success.    |
+| onGetConfirmationDataError   | Function: (error) => void             | no       | value => value                              | Called after order confirmation request’s failure.    |
+| hasCopyIcon                  | boolean                               | no       | true                                        | Display Copy icon near personal share link.           |
+| orderHash (deprecated)       | string                                | no       | N/A                                         | -                                                     |
+
+</details>
 
 &nbsp;
+
 ## Orders Container
 
 Will show the purchased orders for the logged user.
 
-### `props`
+### Orders Container Interface
+
+Orders container interface extends [Login Modal Interface](#login-modal-interface).
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property           | Type                           | Required | Default Value  | Description                                          |
+| ------------------ | ------------------------------ | -------- | -------------- | ---------------------------------------------------- |
+| handleDetailsInfo  | Function: (id: string) => void | yes      | value => value | Called on "Order Details" button click.              |
+| onGetOrdersSuccess | Function: (data) => void       | yes      | value => value | Called after fetching orders data request’s success. |
+| onGetOrdersError   | Function: (error) => void      | yes      | value => value | Called after fetching orders data request’s failure. |
+| theme              | 'light' / 'dark'               | no       | ‘dark'         | Main container class.                                |
+
+</details>
+
+&nbsp;
+
+## Order Details Container
+
+Will show the purchased order details. Contains `order PDF download` and `ticket resale` functionalities. Currently both functionalities are enabled by default.
+
+### Order Details Container Interface
+
+<details>
+  <summary><b>props</b></summary>
+
+| Property                  | Type                                      | Required | Default Value                                | Description                                                                              |
+| ------------------------- | ----------------------------------------- | -------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| columns                   | [ { label: string } ]                     | yes      | []                                           | Order details table’s columns’ labels.                                                   |
+| ticketsTableColumns       | ITicketsTableColumns[] <sup>[3](#3)</sup> | no       | defaultTicketsTableColumns<sup>[3](#3)</sup> | Order’s tickets table’s columns.                                                         |
+| displayColumnNameInRow    | boolean                                   | no       | false                                        | Display column’s names in row, instead of table header.                                  |
+| personalLinkIcon          | string                                    | no       | “”                                           | Custom icon to display near personal share link.                                         |
+| onGetOrdersSuccess        | Function: (data) => void                  | no       | value => value                               | Called after fetching order data request’s success.                                      |
+| onGetOrdersError          | Function: (error) => void                 | no       | value => value                               | Called after fetching order data request’s failure.                                      |
+| onResaleTicketSuccess     | Function: (data) => void                  | no       | value => value                               | Called after resale ticket request’s success.                                            |
+| onResaleTicketError       | Function: (error) => void                 | no       | value => value                               | Called after resale ticket request’s failure.                                            |
+| onRemoveFromResaleSuccess | Function: (data) => void                  | no       | value => value                               | Called after remove from resale ticket request’s success.                                |
+| onRemoveFromResaleError   | Function: (error) => void                 | no       | value => value                               | Called after remove from resale ticket request’s failure.                                |
+| onReturnButtonClick       | Function: () => void                      | no       | N/A                                          | Called on “Return” button click. If not passed, button click will redirect to ‘/orders’. |
+
+</details>
+
+&nbsp;
+
+## Ticket Resale Container
+
+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.
+
+### Ticket Resale Container Interface
 
+<details>
+  <summary><b>props</b></summary>
+
+| Property                       | Type                      | Required | Default Value  | Description                                    |
+| ------------------------------ | ------------------------- | -------- | -------------- | ---------------------------------------------- |
+| onProcessTicketSuccess         | Function: (data) => void  | no       | value => value | Called after process ticket request’s success. |
+| onGetOrdersError               | Function: (error) => void | no       | value => value | Called after process ticket request’s failure. |
+| onDeclineTicketPurchaseSuccess | Function: (data) => void  | no       | value => value | Called after decline ticket request’s success. |
+| onDeclineTicketPurchaseError   | Function: (error) => void | no       | value => value | Called after decline ticket request’s failure. |
+
+</details>
+
+&nbsp;
+
+<details>
+  <summary><small id="1">1. Share buttons</small></summary>
+
+```
+IShareButton {
+  mainLabel: string;
+  subLabel: string;
+  platform: string;
+  shareData: any;
+}
+```
+
+```
+Default share options if `showDefaultShareButtons` is true, are: "Share on Facebook", "Tweet to your Followers", "Message friends on Facebook" and "Message friends on WhatsApp".
 ```
-interface Props {
-  handleDetailsInfo: (id: string) => void;
-  onGetOrdersSuccess: (res: any) => void;
-  onGetOrdersError: (err: any) => void;
 
-  theme?: 'light' | 'dark';
+</details>
+
+<details>
+  <summary><small id="2">2. Confirmation Labels</small></summary>
+
+```
+IConfirmationLabels {
+  confirmationTitle?: string;
+  confirmationMain?: string;
+  confirmationHelper?: string
 }
 ```
 
-&nbsp;
-## Order Container
+```
+const defaultConfirmationLabels = {
+  confirmationTitle = "Your Tickets are Confirmed!",
+  confirmationMain = "Your tickets are available in My Tickets section",
+  confirmationHelper = "Please bring them with you to the event"
+}
+```
 
-Will show the purchased order details. Contains `order PDF download` and `ticket resale` functionalities. Currently both functionalities are enabled by default.
+</details>
 
-### `props`
+<details>
+  <summary><small id="3">3. Tickets table columns</small></summary>
 
 ```
-interface Props {
-  onGetOrderSuccess: (res: any) => void;
-  onGetOrderError: (err: any) => void;
+interface ITicketsTableColumns {
+  id?: string | number;
+  key: keyof ITicketTypes & keyof IActionColumns;
+  label: string | number | null | undefined;
+}
+
+interface IActionColumns {
+  download?: boolean;
+  sell_ticket?: boolean;
 }
 ```
 
-&nbsp;
-## Commands
+```
+const defaultTicketsTableColumns = [
+  { key: 'ticket_type', label: 'Ticket Type' },
+  { key: 'holder_name', label: 'Ticket Holder' },
+  { key: 'status', label: 'Status' },
+  { key: 'download', label: '' },
+  { key: 'sell_ticket', label: '' }
+]
+```
+
+</details>
+
+# Commands
 
 TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
 
@@ -300,11 +492,13 @@ The default example imports and live reloads whatever is in `/dist`, so if you a
 To do a one-off build, use `npm run build` or `yarn build`.
 
 &nbsp;
+
 ### Rollup
 
 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.
 
 &nbsp;
+
 ### TypeScript
 
 `tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.