tf-checkout-react-native 1.0.10 → 1.0.13

package/README.md

@@ -6,7 +6,13 @@ 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`
@@ -26,30 +32,34 @@ To download the PDFs, add the `WRITE_EXTERNAL_STORAGE` permission to the Android
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 ```
 
-## iOS
+### iOS
 
 - Compatible with apps targeting iOS 11 or above.
+- 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`).
 
@@ -61,7 +71,7 @@ Set appropriate style in your styles.xml file.
 
 ```xml
 <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    <!-- ... -->
+  <!-- ... -->
 </style>
 ```
 
@@ -79,7 +89,6 @@ Use it in your initial useEffect function:
 useEffect(() => {
   setConfig({
     DOMAIN: 'https://yourdomain.mx',
-    IS_BILLING_STREET_NAME_REQUIRED: false,
   })
 }, [])
 ```
@@ -94,27 +103,26 @@ useEffect(() => {
   CLIENT_SECRET?: string,
   TIMEOUT?: number,
   BRAND?: string,
+  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.
+### 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.
@@ -123,41 +131,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
 
@@ -186,48 +214,34 @@ 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>
+  }
 />
 ```
 
-## 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 {
@@ -245,7 +259,6 @@ interface ILoginViewStyles {
     input?: IInputStyles
     title?: StyleProp<TextStyle>
     message?: StyleProp<TextStyle>
-    logo?: StyleProp<ImageStyle>
   }
   loggedIn?: {
     container?: StyleProp<ViewStyle>
@@ -255,12 +268,29 @@ 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
 
@@ -280,6 +310,35 @@ Then add it to the render function.
 
 ## Props
 
+```js
+{
+  eventId: number
+
+  onAddToCartSuccess: (data: IAddToCartSuccess) => void
+  onAddToCartError?: (error: any) => void
+  onFetchTicketsError?: (error: any) => void
+  onFetchTicketsSuccess?: (data: {
+    tickets: ITicket[]
+    promoCodeResponse: {
+      success?: boolean
+      message?: string
+    }
+    isInWaitingList: boolean
+    isAccessCodeRequired: boolean
+  }) => void
+  onFetchEventError?: (error: string) => void
+
+  styles?: ITicketsViewStyles
+  texts?: ITicketsViewTexts
+
+  isPromoEnabled?: boolean
+  isAccessCodeEnabled?: boolean
+
+  onPressMyOrders: () => void
+  onPressLogout?: () => void
+}
+```
+
 `eventId` is required in order to fetch the tickets from this event.
 `onAddToCartSuccess` is called after the Add to Cart was completed successfully, it will return the following data:
 
@@ -293,6 +352,8 @@ Then add it to the render function.
 
 You can then call the `BillingInfo` component and pass them as props in the `cartProps` prop.
 
+`onFetchTicketsSuccess` When tickets fetching was successful, will return fetched data, including `promoCodeResponse`.
+
 ## styles
 
 Receives several props to style its sub-components.
@@ -318,7 +379,6 @@ Receives several props to style its sub-components.
 
 <img width="682" alt="image" src="https://user-images.githubusercontent.com/66479719/154126406-101af4ca-7586-4686-9a93-88ef0375968e.png">
 
----
 
 # BillingInfo
 
@@ -332,11 +392,22 @@ Add it to the render function.
 
 ```js
 <BillingInfo
-  cartProps: IAddToCartSuccess
+  cartProps: { 
+    isBillingRequired: boolean
+    isNameRequired: boolean
+    isAgeRequired: boolean
+    isPhoneRequired: boolean
+    minimumAge: number
+  }
   onRegisterSuccess?: (tokens: ITokens) => void
   onRegisterFail?: (error: string) => void
 
-  onCheckoutSuccess: (data: IOnCheckoutSuccess) => void
+  onCheckoutSuccess: (data: {   
+    id: string
+    hash: string
+    total: string
+    status: string
+  }) => void
   onCheckoutFail?: (error: string) => void
 
   onLoginSuccess: (data: any) => void
@@ -357,46 +428,40 @@ Add it to the render function.
 
   styles?: IBillingInfoViewStyles
   texts?: IBillingInfoViewTexts
-/>
-```
-
-## Props
-
-### cartProps
-
-will receive
-
-```js
-{
-  isBillingRequired: boolean
-  isNameRequired: boolean
-  isAgeRequired: boolean
-}
-```
 
-### onCheckoutSuccess
-
-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
@@ -448,28 +513,20 @@ interface IBillingInfoViewStyles {
   dropdownStyles?: IDropdownStyles
   checkboxStyles?: ICheckboxStyles
 
-  titles?: StyleProp<TextStyle>
-  headers?: StyleProp<TextStyle>
+  screenTitle?: StyleProp<TextStyle>
+  ticketHoldersTitle?: StyleProp<TextStyle>
+  ticketHolderItemHeader?: StyleProp<TextStyle>
+
   texts?: StyleProp<TextStyle>
   customCheckbox?: ICheckboxStyles
 
   datePicker?: IDatePickerStyles
-  skippingDialog?: {
-    rootContainer?: StyleProp<ViewStyle>
-    dialogContainer?: StyleProp<ViewStyle>
-    brandImage?: StyleProp<ImageStyle>
-    message?: StyleProp<TextStyle>
-    spinner?: {
-      color: ColorValue
-      size: 'large' | 'small'
-    }
-  }
 }
 ```
 
 ---
 
-# Checkout
+## Checkout
 
 Import the component from the library
 
@@ -479,26 +536,58 @@ import { Checkout } from 'tf-checkout-react-native'
 
 Add it to the render function.
 
+### Props
+
 ```js
-<Checkout
-  eventId={EVENT_ID}
-  hash={checkoutProps!.hash}
-  total={checkoutProps!.total}
-  onPaymentSuccess={handleOnPaymentSuccess}
-/>
-```
+{
+  eventId: number
+  hash: string
+  total: string
+
+  onFetchOrderReviewFail?: (error: string) => void
+  onFetchOrderReviewSuccess?: (data: any) => void
 
-`eventId` Same as used in the `Tickets` component.
+  onFetchEventConditionsFail?: (error: string) => void
+  onFetchEventConditionsSuccess?: (data: any) => void
 
-`hash` retrieved from the `onCheckoutSuccess` callback in the `BillingInfo`component.
+  onCheckoutCompletedSuccess?: (data: any) => void
+  onCheckoutCompletedFail?: (error: string) => void
 
-`total` retrieved from the `onCheckoutSuccess` callback in the `BillingInfo` component.
+  onPaymentSuccess: (data: any) => void
+  onPaymentError?: (error: string) => void
 
-`onPaymentSuccess` will handle the success in the payment process. Will return the `hash`.
+  onStripeInitializeError?: (error: string) => void
 
-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.
+  onPressExit: () => void
 
-`styles`
+  texts?: {
+    title?: string
+    subTitle?: string
+    missingStripeConfigMessage?: string
+    exitButton?: string
+    payButton?: string
+    freeRegistrationButton?: string
+  }
+
+  styles?: ICheckoutStyles
+
+  onLoadingChange?: (isLoading: boolean) => void
+  areAlertsEnabled?: boolean
+  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`. |
+
+*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.*
+
+### styles
 
 ```js
 {
@@ -522,9 +611,17 @@ If the you need to modify the card container, use the `styles.payment.cardContai
 }
 ```
 
----
+### 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
 
@@ -538,13 +635,40 @@ Add it to the render function.
 <PurchaseConfirmation
   orderHash={checkoutProps!.hash}
   onComplete={handleOnComplete}
-/>
-```
 
-`orderHash` the `hash` returned in the `BillingInfo` component.
+  styles?: {
+    rootContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
 
-`onComplete` to handle the completion of the flow. Here you can handle the unmount of the component or navigate to another screen.
+    message?: {
+      container?: StyleProp<ViewStyle>
+      line1?: StyleProp<TextStyle>
+      line2?: StyleProp<TextStyle>
+    }
+    exitButton?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+    }
+  }
 
+  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  |
 ---
 
 ## MyOrders
@@ -628,7 +752,7 @@ export interface IMyOrdersStyles {
 
 ---
 
-# MyOrderDetails
+## MyOrderDetails
 
 ![image](https://user-images.githubusercontent.com/66479719/151049265-ebaabb75-58b1-4b22-bf99-83b1375b1a70.png)
 
@@ -676,7 +800,7 @@ order: {
 }
 ```
 
-`styles` optional, to customize the component look & feel.
+### styles
 
 ```
 styles?: {
@@ -725,7 +849,7 @@ styles?: {
   }
 ```
 
-`texts` optional, to customize the texts that shows on the labels.
+### texts
 
 ```js
 texts?: {

package/lib/api/ApiClient.js

@@ -175,7 +175,10 @@ export const fetchMyOrders = async (page = 1, filter = '') => {
     let responseError = '';
     const withFilterEvent = filter ? `&filter[event]=${filter}` : '';
     const withBrand = Config.BRAND ? `&filter[brand]=${Config.BRAND}` : '';
-    const endpoint = `/v1/account/orders/?page=${page}&limit=${limit}${withFilterEvent}${withBrand}`;
+    const withSubBrands = Config.ARE_SUB_BRANDS_INCLUDED
+        ? `&filter[subbrands]=${Config.ARE_SUB_BRANDS_INCLUDED}`
+        : '';
+    const endpoint = `/v1/account/orders/?page=${page}&limit=${limit}${withFilterEvent}${withBrand}${withSubBrands}`;
     const response = await Client.get(endpoint).catch((error) => {
         var _a;
         responseError = ((_a = error.response) === null || _a === void 0 ? void 0 : _a.data.message) || 'Error fetching My Orders';