tf-checkout-react-native 1.0.12 → 1.0.15

package/README.md

@@ -6,53 +6,58 @@ React Native library for Ticket Fairy checkout.
 
 Configure [ReactNative environment](https://reactnative.dev/docs/environment-setup) for desired platforms (iOS, Android or both).
 
-## Android
+### React Native
+
+- Suggested ReactNative version `0.66.3`
+- Suggested Flipper version `0.66`
+- React version `0.17.1`
+
+### Android
 
 - Android 5.0 (API level 21) and above
-- Minimum Gradle plugin version `4.2.2`
-- Minimum Gradle version `6.7.1`
-- Compile Sdk Version and Target Sdk Version `31`
-- Build Tools Version `30.0.3`
+- Gradle plugin version `4.2.2`
+- Gradle version `6.7.1`
+- Compile Sdk Version and Target Sdk Version `30`
+- Build Tools Version `30.0.2`
+- Java version `1.8`
+- Kotlin version `1.5.31`
 
 Add the following to your Android Manifest as activity property.
 
-```
-android:exported="true"
-```
-
 To download the PDFs, add the `WRITE_EXTERNAL_STORAGE` permission to the Android's Manifest file.
 
 ```xml
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 ```
 
-## iOS
+### iOS
 
 - Compatible with apps targeting iOS 11 or above.
-
-- Pods version `1.11.2`
+- Pods version `1.10.1`
 - Command Line Tools version `13.0`
 
 To download the PDFs, add the following flags to `Info.plist` file:
 
+```
 - UIFileSharingEnabled: Application supports iTunes file sharing
 - LSSupportsOpeningDocumentsInPlace: Supports opening documents in place
+```
 
 # Installation
 
-```node
+```sh
 yarn add tf-checkout-react-native
 ```
 
 or
 
-```node
+```sh
 npm install tf-checkout-react-native
 ```
 
 Make sure to install all the required dependencies in your project.
 
-# Required for Android
+### Required for Android
 
 Add below dependency to your `app/build.gradle` file with specified version (in our example we are using `1.4.0`).
 
@@ -64,7 +69,7 @@ Set appropriate style in your styles.xml file.
 
 ```xml
 <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    <!-- ... -->
+  <!-- ... -->
 </style>
 ```
 
@@ -82,7 +87,6 @@ Use it in your initial useEffect function:
 useEffect(() => {
   setConfig({
     DOMAIN: 'https://yourdomain.mx',
-    IS_BILLING_STREET_NAME_REQUIRED: false,
   })
 }, [])
 ```
@@ -100,27 +104,23 @@ useEffect(() => {
   ARE_SUB_BRANDS_INCLUDED?: boolean
 }
 ```
-
-`DOMAIN` Specify your domains name example: `https://google.com` this is important to maintain cart session active and prevent it from expiring when user login in the BillingInfo component.
-
-`BASE_URL` If our dev team gives you a custom BASE_URL.
-
-`CLIENT_ID` Set your CLIENT_ID.
-
-`CLIENT_SECRET` Set your CLIENT_SECRET.
-
-`BRAND`: Set your BRAND so users can only see this brand in their orders.
-
-`TIMEOUT` Set custom timeout for the APIs requests.
-
-`ARE_SUB_BRANDS_INCLUDED` If true will include orders from the `BRAND` sub-brands.
+### Props
+| Property | Description |
+| -------- | ----------- |
+| DOMAIN | Specify your domains name example: `https://google.com` this is important to maintain cart session active and prevent it from expiring when user login in the BillingInfo component. |
+| BASE_URL | If our dev team gives you a custom BASE_URL.|
+| CLIENT_ID | Set your CLIENT_ID. |
+| CLIENT_SECRET | Set your CLIENT_SECRET. |
+| BRAND | Set your BRAND so users can only see this brand in their orders. |
+| TIMEOUT | Set custom timeout for the APIs requests. |
+| ARE_SUB_BRANDS_INCLUDED | If true will include orders from the `BRAND` sub-brands. Default `false`. |
 
 # Run the example app
 
 1. Clone this repo.
 2. In the App.tsx file, update the `EVENT_ID` const with the assigned ID to be able to retrieve data from the server.
-3. cd into the project folder and `yarn` or `npm install`.
-4. cd into the example folder and `yarn` or `npm install`.
+3. cd into the _root project_ folder and `yarn` or `npm install`.
+4. cd into the _example_ folder and `yarn` or `npm install`.
    - If running on iOS, cd into ios folder and `pod install && cd ..`.
 5. Run `yarn ios` or `npm run ios` to initialize and run in the iPhone simulator.
 6. If running on Android, run `yarn android` or `npm run android` to run it in the Android emulator or connected physical device.
@@ -129,41 +129,61 @@ useEffect(() => {
 
 This library exports the following components:
 
-## Login
+### Login
 
 Used to authenticate the user.
 
-## Tickets
+### Tickets
 
 Will retrieve and show a list of tickets corresponding to `eventId`. It also includes a PromoCode component that validates it and updates the tickets list.
 
 User can select what ticket type wants to buy and the quantity of tickets.
 
-## Billing information
+### Billing information
 
 User will need to enter its data into a form to create a Ticket Fairy account. Also, depending on the number of tickets selected, will need to fill the information of each one of them.
 
-## Checkout
+### Checkout
 
 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.
 
-## Purchase confirmation
+### Purchase confirmation
 
 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.
 
-## My Orders
+### My Orders
 
 Will show the purchased orders for the logged user.
 
-## My Order details
+### My Order details
 
 Will show the details for the selected Order, it also allows the user to download the Ticket PDF.
 
-# Usage [🚧 WIP 🚧]
-
-# Login
+# Component styling
+### Button
+```js
+interface IButtonStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+}
+```
+### Input
+```js
+interface IInputStyles {
+  color?: ColorValue
+  container?: StyleProp<ViewStyle>
+  input?: StyleProp<TextStyle>
+  lineWidth?: number
+  activeLineWidth?: number
+  baseColor?: ColorValue
+  errorColor?: ColorValue
+}
+```
+# Exported components
+## Login
 
 Import the component from the library
 
@@ -175,10 +195,23 @@ Then add it to the render function.
 
 ```js
 <Login
-  onLoginSuccessful={handleOnLoginDialogSuccess}
-  isLoginDialogVisible={isLoginDialogVisible}
-  showLoginDialog={() => setIsLoginDialogVisible(true)}
-  hideLoginDialog={() => setIsLoginDialogVisible(false)}
+  onLoginSuccessful: (userProfile: IUserProfile, accessToken: string) => void
+  onLoginError?: (error: IError) => void
+
+  onFetchUserProfileError?: (error: IError) => void
+  onFetchUserProfileSuccess?: (data: any) => void
+
+  onFetchAccessTokenError?: (error: IError) => void
+  onFetchAccessTokenSuccess?: () => void
+  
+  isLoginDialogVisible: boolean
+  showLoginDialog: () => void
+  hideLoginDialog: () => void
+
+  //Logout
+  onLogoutSuccess?: () => void
+  onLogoutError?: () => void
+
   userFirstName={loggedUserName}
   refs={{
     inputs?: {
@@ -192,48 +225,36 @@ Then add it to the render function.
       activityIndicator?: any
       loadingText?: any
   }}
+  brandImages={
+    containerStyle?: StyleProp<ViewStyle>
+    image1?: ImageSourcePropType
+    image1Style?: StyleProp<ImageStyle>
+    image2?: ImageSourcePropType
+    image2Style?: StyleProp<ImageStyle>
+  }
+  styles?: ILoginViewStyles
+  texts?: ILoginViewTexts
 />
 ```
 
-## Props
-
-`onLoginSuccessful: (userProfile: IUserProfile, accessToken: string)`
-When login was successful, return userProfile data and the access token to use if for future API requests.
-
-`onLoginFailure?: (error: string)`
-When login fails will return the error received.
-
-`onFetchUserProfileFailure?: (error: string)`
-This is used if the authentication worked but the fetch of the userProfile failed.
-
-`onFetchAccessTokenFailure?: (error: string)`
-When the fetch of the access token failed.
-
-`isLoginDialogVisible: boolean`
-Flag to show or hide the login dialog.
-
-`showLoginDialog: () => void`
-Callback to show the Login dialog.
-
-`hideLoginDialog: () => void`
-Callback to hide the login dialog.
-
-`onLogoutSuccess?: () => void`  
-Use it to logout the authenticated user. It will delete all the stored data, including access token. Please make sure to update the `userFirstName` prop so the component will show the logged out view.
-
-`onLogoutFail?: () => void`
-Will be called if something went wrong while deleting the local data.
-
-`styles?: ILoginViewStyles`
-Use this to style your components.
-
-`texts?: ILoginViewTexts`
-Use this to change some texts that appear in this component.
-
-`userFirstName?: string`
-Once authenticated send the received firstName data to this prop, so the component can render the Logged in view.
+### Props
+| Property | Description |
+|----------|-------------|
+| onLoginSuccessful: (userProfile: IUserProfile, accessToken: string)` |When login was successful, return userProfile data and the access token to use if for future API requests.
+| onLoginFailure?: (error: string) | When login fails will return the error received. |
+| onFetchUserProfileFailure?: (error: string) | This is used if the authentication worked but the fetch of the userProfile failed. |
+| onFetchAccessTokenFailure?: (error: string) | When the fetch of the access token failed. |
+| isLoginDialogVisible: boolean | Flag to show or hide the login dialog. |
+| showLoginDialog: () => void | Callback to show the Login dialog. |
+| hideLoginDialog: () => void | Callback to hide the Login dialog. |
+| onLogoutSuccess?: () => void | Use it to logout the authenticated user. It will delete all the stored data, including access token. Please make sure to update the `userFirstName` prop so the component will show the logged out view. |
+|onLogoutFail?: () => void | Will be called if something went wrong while deleting the local data. |
+|styles?: ILoginViewStyles | Use this to style your components. |
+|texts?: ILoginViewTexts | Use this to change some texts that appear in this component. |
+|userFirstName?: string | Once authenticated send the received firstName data to this prop, so the component can render the Logged in view. |
+|brandImages?: ILoginBrandImages | Receives up to 2 images with their styles and the container style for the images. |
 
-## styles
+### styles
 
 ```js
 interface ILoginViewStyles {
@@ -251,7 +272,6 @@ interface ILoginViewStyles {
     input?: IInputStyles
     title?: StyleProp<TextStyle>
     message?: StyleProp<TextStyle>
-    logo?: StyleProp<ImageStyle>
   }
   loggedIn?: {
     container?: StyleProp<ViewStyle>
@@ -261,16 +281,32 @@ interface ILoginViewStyles {
     message?: StyleProp<TextStyle>
   }
 }
-
 ```
 
-<img width="899" alt="image" src="https://user-images.githubusercontent.com/66479719/154158723-864cdabd-2a0b-4a84-95ad-3176c67f7e8b.png">
+\*Note: Logos images styles are passed from the `brandImages` prop.
 
+### texts
+```js
+{
+  loginButton?: string
+  logoutButton?: string
+  line1?: string
+  line2?: string
+  message?: string
+  dialog?: {
+    loginButton?: string
+    message?: string
+  }
+  logoutDialog?: {
+    title?: string
+    message?: string
+    confirm?: string
+    cancel?: string
+  }
+```
 ---
 
-# Tickets
-
-![image](https://user-images.githubusercontent.com/66479719/151049068-450a52d9-dfc8-40bf-b12a-f2555a832c8d.png)
+## Tickets
 
 Import the component from the library
 
@@ -284,14 +320,34 @@ Then add it to the render function.
 <Tickets eventId={EVENT_ID} onAddToCartSuccess={handleOnAddToCartSuccess} />
 ```
 
-## Props
+### Props
+
 ```js
 {
   eventId: number
 
-  onAddToCartSuccess: (data: IAddToCartSuccess) => void
-  onAddToCartError?: (error: any) => void
-  onFetchTicketsError?: (error: any) => void
+  // Callbacks for when user taps on GET Tickets button
+  onAddToCartSuccess: (data: {
+    isBillingRequired: boolean
+    isPhoneRequired?: boolean
+    isAgeRequired?: boolean
+    minimumAge?: number
+    isNameRequired?: boolean
+  }) => void
+  onAddToCartError?: (error: {
+    code: number
+    message: string
+    extraData?: any
+  }) => void
+  
+  // Callbacks for fetching the tickets
+  onFetchTicketsError?: (error: {
+    code: number
+    message: string
+    extraData?: any
+  }) => void
+  
+  // Callbacks for fetching the Event base on the eventId prop
   onFetchTicketsSuccess?: (data: {
     tickets: ITicket[]
     promoCodeResponse: {
@@ -301,7 +357,19 @@ Then add it to the render function.
     isInWaitingList: boolean
     isAccessCodeRequired: boolean
   }) => void
-  onFetchEventError?: (error: string) => void
+  onFetchEventError?: (error: {
+    code: number
+    message: string
+    extraData?: any
+  }) => void
+
+  // Callbacks for Waiting list
+  onAddToWaitingListSuccess?: (data: any) => void
+  onAddToWaitingListError?: (error: {
+    code: number
+    message: string
+    extraData?: any
+  }) => void
 
   styles?: ITicketsViewStyles
   texts?: ITicketsViewTexts
@@ -311,6 +379,11 @@ Then add it to the render function.
 
   onPressMyOrders: () => void
   onPressLogout?: () => void
+
+  // With the following 3 props you can control the visibility of the stock loading indicators and alerts, so you can use your own.
+  onLoadingChange?: (isLoading: boolean) => void
+  areAlertsEnabled?: boolean
+  areLoadingIndicatorsEnabled?: boolean
 }
 ```
 
@@ -320,8 +393,10 @@ Then add it to the render function.
 ```js
 {
   isBillingRequired: boolean
-  isNameRequired: boolean
-  isAgeRequired: boolean
+  isPhoneRequired?: boolean
+  isAgeRequired?: boolean
+  minimumAge?: number
+  isNameRequired?: boolean
 }
 ```
 
@@ -329,11 +404,7 @@ You can then call the `BillingInfo` component and pass them as props in the `car
 
 `onFetchTicketsSuccess` When tickets fetching was successful, will return fetched data, including `promoCodeResponse`.
 
-
-## styles
-
-Receives several props to style its sub-components.
-
+### styles
 ```js
 {
   rootContainer?: ViewStyle
@@ -341,23 +412,109 @@ Receives several props to style its sub-components.
   title?: TextStyle
   getTicketsButtonDisabled?: IButtonStyles
   getTicketsButtonActive?: IButtonStyles
-  promoCode?: IPromoCodeStyles
-  ticketList?: ITicketListStyles
-  loading?: ILoadingStyles
-  waitingList?: IWaitingListStyles
-  loggedIn?: ILoggedInStyles
-}
-```
-
-<img width="790" alt="props" src="https://user-images.githubusercontent.com/66479719/153976200-4bd6b254-6e80-49d6-bacc-076c59873434.png">
+  promoCode?: {
+    rootContainer?: StyleProp<ViewStyle>
+    contentWrapper?: StyleProp<ViewStyle>
+    content?: StyleProp<ViewStyle>
+    input?: TextInputProps['style']
+    inputPlaceholderColor?: string
+    title?: StyleProp<TextStyle>
 
-<img width="675" alt="Screen Shot 2022-02-14 at 19 37 40" src="https://user-images.githubusercontent.com/66479719/153976314-9b4431bd-ea2f-49db-87ab-fb7d68b02a0c.png">
+    mainButton?: IButtonStyles
+    cancelButton?: IButtonStyles
+    applyButton?: IButtonStyles
+    applyDisabledButton?: IButtonStyles
 
-<img width="682" alt="image" src="https://user-images.githubusercontent.com/66479719/154126406-101af4ca-7586-4686-9a93-88ef0375968e.png">
+    messageContainer?: StyleProp<ViewStyle>
+    message?: StyleProp<TextStyle>
+  }
+  ticketList?: {
+    listContainer?: ViewStyle
+    item?: {
+      container?: ViewStyle
+      ticketName?: TextStyle
+      price?: TextStyle
+      oldPrice?: TextStyle
+      fees?: TextStyle
+      soldOutText?: TextStyle
+      soldOutContainer?: ViewStyle
+      dropdown?: IDropdownStyles
+      pricesContainer?: StyleProp<ViewStyle>
+    }
+  }
+  loading?: {
+    animation?: {
+      color?: ActivityIndicatorProps['color']
+      size?: ActivityIndicatorProps['size']
+    }
+    content?: ViewStyle
+    text?: TextStyle
+  }
+  waitingList?: {
+    rootContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    button?: IButtonStyles
+    input?: IInputStyles
+    buttonDisabled?: IButtonStyles
+    success?: {
+      container?: StyleProp<ViewStyle>
+      title?: StyleProp<ViewStyle>
+      message?: StyleProp<ViewStyle>
+    }
+  }
+  loggedIn?: {
+    rootContainer?: StyleProp<ViewStyle>
+    myOrdersButton?: IButtonStyles
+    logOutButton?: IButtonStyles
+  }
+}
+```
 
+### texts
+```js
+{
+  promoCode?: {
+    promoCodeButton?: string
+    inputPlaceHolder?: string
+    apply?: string
+    cancel?: string
+    mainButton?: string
+    title?: string
+  }
+  getTicketsButton?: string
+  title?: string
+  waitingList?: {
+    title?: string
+    firstName?: string
+    lastName?: string
+    email?: string
+    button?: string
+    successTitle?: string
+    successMessage?: string
+  }
+  loggedInTexts?: {
+    logoutDialog?: {
+      title?: string
+      message?: string
+      confirmButton?: string
+      cancelButton?: string
+    }
+    myOrderButtonText?: string
+    logOutButtonText?: string
+  }
+  listItem?: {
+    soldOut?: string
+    salesNotStarted?: string
+    salesEnded?: string
+    inclFees?: string
+    exclFees?: string
+    free?: string
+    ticket?: string
+  }
+}
+```
 ---
-
-# BillingInfo
+## BillingInfo
 
 Import the component from the library
 
@@ -369,75 +526,89 @@ Add it to the render function.
 
 ```js
 <BillingInfo
-  cartProps: IAddToCartSuccess
+  cartProps: { 
+    isBillingRequired: boolean
+    isNameRequired: boolean
+    isAgeRequired: boolean
+    isPhoneRequired: boolean
+    minimumAge: number
+  }
+  // registerNewUser
   onRegisterSuccess?: (tokens: ITokens) => void
-  onRegisterFail?: (error: string) => void
+  onRegisterError?: (error: string) => void
 
-  onCheckoutSuccess: (data: IOnCheckoutSuccess) => void
-  onCheckoutFail?: (error: string) => void
+  onCheckoutSuccess: (data: {   
+    id: string
+    hash: string
+    total: string
+    status: string
+  }) => void
+  onCheckoutError?: (error: IError) => void
 
   onLoginSuccess: (data: any) => void
-  onLoginFail?: (error: string) => void
+  onLoginError?: (error: IError) => void
+
 
   onFetchUserProfileSuccess?: (data: any) => void
-  onFetchUserProfileFail?: (error: any) => void
+  onFetchUserProfileError?: (error: IError) => void
 
-  onFetchCartError?: (error: string) => void
+  //fetchCart
+  onFetchCartError?: (error: IError) => void
+  onFetchCartSuccess?: () => void
 
-  styles?: IBillingInfoViewStyles
-  texts?: IBillingInfoViewTexts
+    // fetchCountries
+  onFetchCountriesError?: (error: IError) => void
+  onFetchCountriesSuccess?: () => void
 
-  privacyPolicyLinkStyle?: StyleProp<TextStyle>
+  // fetchState
+  onFetchStatesError?: (error: IError) => void
+  onFetchStatesSuccess?: () => void
 
-  onFetchUserProfileFailure?: (error: string) => void
-  onFetchAccessTokenFailure?: (error: string) => void
+  // fetch Token
+  onFetchAccessTokenError?: (error: IError) => void
+  onFetchAccessTokenSuccess?: () => void
 
   styles?: IBillingInfoViewStyles
   texts?: IBillingInfoViewTexts
 
-  logoImage?: ImageSourcePropType
-/>
-```
-
-## Props
-
-### cartProps
-
-will receive
-
-```js
-{
-  isBillingRequired: boolean
-  isNameRequired: boolean
-  isAgeRequired: boolean
-}
-```
-
-### onCheckoutSuccess
+  styles?: IBillingInfoViewStyles
+  texts?: IBillingInfoViewTexts
 
-Will be called when the user completes all the data required in the form and taps on the button. Will return the following data:
+  // Configure the skipping component visible, when isBillingRequired is false
+  skipBillingConfig?: {
+    styles?: {
+      rootContainer?: StyleProp<ViewStyle>
+      dialogContainer?: StyleProp<ViewStyle>
+      brandImage?: StyleProp<ImageStyle>
+      text?: StyleProp<TextStyle>
+      activityIndicator?: {
+        color?: ColorValue
+        size?: 'large' | 'small'
+      }
+    }
+    brandImage?: ImageSourcePropType
+    isActivityIndicatorVisible?: boolean
+  }
 
-```js
-{
-  id: string
-  hash: string
-  total: string
-  status: string
-}
+  loginBrandImages?:  {
+    containerStyle?: StyleProp<ViewStyle>
+    image1?: ImageSourcePropType
+    image1Style?: StyleProp<ImageStyle>
+    image2?: ImageSourcePropType
+    image2Style?: StyleProp<ImageStyle>
+  }
+/>
 ```
 
-`hash` and `total` will be used in the `Checkout` component.
-
-### skipBilling
-
-Will auto-populate the checkout form with the logged user data, perform the order `Checkout` and call the callback `onCheckoutSuccess` so you can call the next component.
-
-### canSkipHolderNames
-
-Will skip the need of holder names information and will be automatically filled with the logged user data.
+### Props
+| Property | Description |
+|----------|-------------|
+| cartProps | Received from the Tickets component |
+| onCheckoutSuccess | Will return Order data from the Checkout action |
+| loginBrandImages | Receives styles and images sources to show in the `Login` component |
+| skipBillingConfig | Configure the skipping component, visible when `isBillingRequired` is set to false |
 
 ### texts
-
 ```js
 interface IBillingInfoViewTexts {
   loginTexts?: ILoginViewTexts
@@ -495,22 +666,14 @@ interface IBillingInfoViewStyles {
   customCheckbox?: ICheckboxStyles
 
   datePicker?: IDatePickerStyles
-  skippingDialog?: {
-    rootContainer?: StyleProp<ViewStyle>
-    dialogContainer?: StyleProp<ViewStyle>
-    brandImage?: StyleProp<ImageStyle>
-    message?: StyleProp<TextStyle>
-    spinner?: {
-      color: ColorValue
-      size: 'large' | 'small'
-    }
-  }
+  
+  privacyPolicyLinkStyle?: StyleProp<TextStyle>
 }
 ```
 
 ---
 
-# Checkout
+## Checkout
 
 Import the component from the library
 
@@ -520,24 +683,38 @@ import { Checkout } from 'tf-checkout-react-native'
 
 Add it to the render function.
 
-## Props
+```js
+<Checkout
+  eventId={EVENT_ID}
+  hash={hash}
+  total={total}
+  onPaymentSuccess={handleOnPaymentSuccess}
+  onPressExit={handleStripeError}
+  areLoadingIndicatorsEnabled={false}
+  styles={styles}
+  {...props}
+/>
+```
+
+### Props
+
 ```js
 {
   eventId: number
   hash: string
   total: string
 
-  onFetchOrderReviewFail?: (error: string) => void
+  onFetchOrderReviewError?: (error: IError) => void
   onFetchOrderReviewSuccess?: (data: any) => void
 
-  onFetchEventConditionsFail?: (error: string) => void
+  onFetchEventConditionsError?: (error: IError) => void
   onFetchEventConditionsSuccess?: (data: any) => void
 
   onCheckoutCompletedSuccess?: (data: any) => void
-  onCheckoutCompletedFail?: (error: string) => void
+  onCheckoutCompletedError?: (error: IError) => void
 
   onPaymentSuccess: (data: any) => void
-  onPaymentError?: (error: string) => void
+  onPaymentError?: (error: IError) => void
 
   onStripeInitializeError?: (error: string) => void
 
@@ -550,6 +727,14 @@ Add it to the render function.
     exitButton?: string
     payButton?: string
     freeRegistrationButton?: string
+    providePaymentInfo?: string
+    orderReviewItems?: {
+      event?: string
+      ticketType?: string
+      numberOfTickets?: string
+      price?: string
+      total?: string
+    }
   }
 
   styles?: ICheckoutStyles
@@ -559,22 +744,18 @@ Add it to the render function.
   areLoadingIndicatorsEnabled?: boolean
 }
 ```
+| Property | Description |
+|----------|-------------|
+| eventId | Same as used in the `Tickets` component. |
+| hash | retrieved from the `onCheckoutSuccess` callback in the `BillingInfo`component. |
+| total | retrieved from the `onCheckoutSuccess` callback in the `BillingInfo` component. |
+| onPaymentSuccess | will handle the success in the payment process. Will return the `hash`. |
+| areLoadingIndicatorsEnabled | whether or not show the Loading Indicator, `default: true`. |
+| areAlertsEnabled | whether or not show the Error Alerts, `default: true`. |
 
-`eventId` Same as used in the `Tickets` component.
-
-`hash` retrieved from the `onCheckoutSuccess` callback in the `BillingInfo`component.
-
-`total` retrieved from the `onCheckoutSuccess` callback in the `BillingInfo` component.
+*Note: If the you need to modify the card container, use the `styles.payment.cardContainer` prop. Useful if the card is to short and the zip code is not visible.*
 
-`onPaymentSuccess` will handle the success in the payment process. Will return the `hash`.
-
-`areLoadingIndicatorsEnabled` whether or not show the Loading Indicator, `default: true`.
-
-`areAlertsEnabled` whether or not show the Error Alerts, `default: true`.
-
-If the you need to modify the card container, use the `styles.payment.cardContainer` prop. Useful if the card is to short and the zip code is not visible.
-
-`styles`
+### styles
 
 ```js
 {
@@ -591,22 +772,25 @@ If the you need to modify the card container, use the `styles.payment.cardContai
   payment?: {
     container?: StyleProp<ViewStyle>
     title?: StyleProp<TextStyle>
+    cardBackgroundColor?: string
     cardContainer?: StyleProp<ViewStyle>
     button?: IButtonStyles
     buttonDisabled?: IButtonStyles
   }
 }
 ```
+
 ### Stripe
+
 Currently, Stripe card is not customizable. Please see the open issues in their Github.
 
 - [563](https://github.com/stripe/stripe-react-native/issues/563)
 - [285](https://github.com/stripe/stripe-react-native/issues/285)
 
+Additionally, if you are encountering problems with building your project, please take a look at the [Stripe troubleshooting](https://github.com/stripe/stripe-react-native#troubleshooting).
 
 ---
-
-# PurchaseConfirmation
+## Purchase Confirmation
 
 Import the component from the library
 
@@ -620,19 +804,44 @@ Add it to the render function.
 <PurchaseConfirmation
   orderHash={checkoutProps!.hash}
   onComplete={handleOnComplete}
-/>
-```
 
-`orderHash` the `hash` returned in the `BillingInfo` component.
-
-`onComplete` to handle the completion of the flow. Here you can handle the unmount of the component or navigate to another screen.
+  styles?: {
+    rootContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
 
----
+    message?: {
+      container?: StyleProp<ViewStyle>
+      line1?: StyleProp<TextStyle>
+      line2?: StyleProp<TextStyle>
+    }
+    exitButton?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+    }
+  }
 
-## MyOrders
+  texts?: {
+    title?: string
+    message?: {
+      line1?: string
+      line2?: string
+    }
+    exitButton?: string
+  }
+/>
+```
+### Props
+| Property | Description |
+|----------|-------------|
+| orderHash | The `hash` returned in the `BillingInfo` component |
+| onComplete | To handle the completion of the flow. Here you can handle the unmount of the component or navigate to another screen |
+| styles | Styles for the component |
+| texts | Texts for the component  |
 
-![image](https://user-images.githubusercontent.com/66479719/151049211-5faebe6b-df3b-4785-ac0d-3adb7a3d6699.png)
 
+---
+## My Orders
 If there is a valid session, there will appear a button to access `MyOrders` in the `Tickets` component.
 
 Import the component from the library.
@@ -641,80 +850,122 @@ Import the component from the library.
 import { MyOrders } from 'tf-checkout-react-native'
 ```
 
-There is no need to pass any data prop to it.
 
 ### Props
 
-`config` has properties to hide components.
+```js
+{
+  onSelectOrder: (order: {
+    order: {
+    header: {
+      isReferralDisabled: boolean
+      shareLink: string
+      total: string
+      salesReferred: string
+    },
+    items: [
+      {
+        name: string
+        currency: string
+        price: string
+        discount: string
+        quantity: string
+        total: string
+      },
+      {...}
+    ],
+    tickets: [
+      {
+        hash: string
+        ticketType: string
+        holderName?: string
+        holderEmail?: string
+        holderPhone?: string
+        status: string
+        pdfLink?: string
+        qrData?: string
+        isSellable?: boolean
+        description?: string
+        descriptionPlain?: string
+      },
+      {...}
+    ]
+  }
+  }) => void
 
-`isEventsDropdownHidden` if the Events dropdown should be hidden.
+  onFetchMyOrdersSuccess?: () => void
+  onFetchMyOrdersError?: (error: IError) => void
 
-```js
-config={{
-  isEventsDropdownHidden: true,
-}}
-```
+  onFetchOrderDetailsSuccess?: () => void
+  onFetchOrderDetailsError?: (error: IError) => void
 
-`onSelectOrder` handler to know which order the user has selected. Will return an object with following structure:
+  onLoadingChange?: (isLoading: boolean) => void
 
-```js
-order: {
-  header: {
-    isReferralDisabled: boolean
-    shareLink: string
-    total: string
-    salesReferred: string
-  },
-  items: [
-    {
-      name: string
-      currency: string
-      price: string
-      discount: string
-      quantity: string
-      total: string
-    },
-    {...}
-  ],
-  tickets: [
-    {
-      hash: string
-      ticketType: string
-      holderName: string
-      status: string
-      pdfLink: string
-    },
-    {...}
-  ]
+  styles?: IMyOrdersStyles
+  config?: {
+    isEventsDropdownHidden?: boolean
+    areActivityIndicatorsEnabled?: boolean
+    areAlertsEnabled?: boolean
+  }
+  texts?: {
+    selectEventPlaceholder?: string
+  }
 }
 ```
 
-`styles` to customize the component look & feel.
-
+### styles
 ```js
-export interface IMyOrdersStyles {
-  orderListItem?: IOrderListItemStyles
+{
+  orderListItem?: {
+    rootContainer?: StyleProp<ViewStyle>
+    contentContainer?: StyleProp<ViewStyle>
+    infoContainer?: StyleProp<ViewStyle>
+    infoTopContainer?: StyleProp<ViewStyle>
+    infoBottomContainer?: StyleProp<ViewStyle>
+    imageContainer?: StyleProp<ViewStyle>
+    image?: StyleProp<ImageStyle>
+    infoRootContainer?: StyleProp<ViewStyle>
+    iconNextContainer?: StyleProp<ViewStyle>
+    iconNext?: StyleProp<ImageStyle>
+    orderId?: StyleProp<TextStyle>
+    orderDate?: StyleProp<TextStyle>
+    eventName?: StyleProp<TextStyle>
+    priceContainer?: StyleProp<ViewStyle>
+    price?: StyleProp<TextStyle>
+    currency?: StyleProp<TextStyle>
+  }
   safeArea?: StyleProp<ViewStyle>
   listContainer?: StyleProp<ViewStyle>
   eventsContainer?: StyleProp<ViewStyle>
   eventsTitle?: StyleProp<TextStyle>
   refreshControlColor?: ColorValue
-  eventsDropdown?: IDropdownStyles
+  eventsDropdown?: {
+    container?: StyleProp<ViewStyle>
+    button?: StyleProp<ViewStyle>
+    icon?: StyleProp<ImageStyle>
+    label?: StyleProp<TextStyle>
+    dialog?: StyleProp<ViewStyle>
+    flatListContainer?: StyleProp<ViewStyle>
+    listItem?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      buttonSelected?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+      textSelected?: StyleProp<TextStyle>
+    }
+
+  }
   rootContainer?: StyleProp<ViewStyle>
   eventsSelectionContainer?: StyleProp<ViewStyle>
   clearEventSelectionIcon?: StyleProp<ImageStyle>
 }
 ```
 
-`onFetchOrderDetailsFail` if the fetching fails, you can use this to know what happened.
-
 ---
 
-# MyOrderDetails
-
-![image](https://user-images.githubusercontent.com/66479719/151049265-ebaabb75-58b1-4b22-bf99-83b1375b1a70.png)
+## MyOrderDetails
 
-When user selects an order from the `MyOrders`component, will show it details.
+When user selects an order from the `MyOrders` component, will show it details.
 
 Import the component from the library.
 
@@ -724,44 +975,25 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
 
 ### Props
 
-`data` receives same data as the one of the object received from the `onSelectOrder` handler in `MyOrders`component:
-
 ```js
-order: {
-  header: {
-    isReferralDisabled: boolean
-    shareLink: string
-    total: string
-    salesReferred: string
-  },
-  items: [
-    {
-      name: string
-      currency: string
-      price: string
-      discount: string
-      quantity: string
-      total: string
-    },
-    {...}
-  ],
-  tickets: [
-    {
-      hash: string
-      ticketType: string
-      holderName: string
-      status: string
-      pdfLink: string
-    },
-    {...}
-  ]
-}
-```
-
-`styles` optional, to customize the component look & feel.
-
-```
-styles?: {
+{
+  data: IMyOrderDetailsResponse
+  config?: {
+    areActivityIndicatorsEnabled?: boolean
+    areAlertsEnabled?: boolean
+  }
+  onDownloadStatusChange?: (status?: 
+    'downloading' | 
+    'downloaded' | 
+    'failed'
+  ) => void
+  downloadStatusIcons?: {
+    success?: ImageSourcePropType
+    error?: ImageSourcePropType
+  }
+  onAndroidWritePermission?: (permission?: boolean) => void
+  onLinkCopied?: (copied?: boolean) => void
+  styles?: {
     rootContainer?: StyleProp<ViewStyle>
     header?: {
       container?: StyleProp<ViewStyle>
@@ -805,29 +1037,34 @@ styles?: {
     }
     downloadButton?: IButtonStyles
   }
-```
-
-`texts` optional, to customize the texts that shows on the labels.
-
-```js
-texts?: {
-  title?: string
-  subTitle?: string
-  referralLink?: string
-  listItem?: {
-    title?: string
-    ticketType?: string
-    price?: string
-    quantity?: string
-    total?: string
-  }
-  ticketItem?: {
+  texts?: {
     title?: string
-    ticketId?: string
-    ticketType?: string
-    ticketHolder?: string
-    status?: string
-    download?: string
+    subTitle?: string
+    referralLink?: string
+    listItem?: {
+      title?: string
+      ticketType?: string
+      price?: string
+      quantity?: string
+      total?: string
+    }
+    ticketItem?: {
+      title?: string
+      ticketId?: string
+      ticketType?: string
+      ticketHolder?: string
+      status?: string
+      download?: string
+    }
+    downloadNotification?: {
+      successMessage?: string
+      errorMessage?: string
+    }
+    copyText?: {
+      copy?: string
+      copied?: string
+    }
   }
 }
 ```
+