tf-checkout-react-native 1.0.2 → 1.0.7

package/README.md

@@ -6,15 +6,98 @@ React Native library for Ticket Fairy checkout
 
 Configure [ReactNative environment](https://reactnative.dev/docs/environment-setup) for desired platforms (iOS, Android or both).
 
-# Installation [🚧 WIP 🚧]
+### Android
 
-These are not the REAL library names.
+- Android 5.0 (API level 21) and above
+- Android gradle plugin 4.x and above
 
-`yarn add theticketfairy/tf-checkout-react-native`
+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
+
+- Compatible with apps targeting iOS 11 or above.
+
+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
+yarn add tf-checkout-react-native
+```
 
 or
 
-`npm install theticketfairy/tf-checkout-react-native`
+```node
+npm install tf-checkout-react-native
+```
+
+## Required for Android
+
+Add below dependency to your `app/build.gradle` file with specified version (in our example we are using `1.4.0`).
+
+```java
+implementation 'com.google.android.material:material:<version>'
+```
+
+Set appropriate style in your styles.xml file.
+
+```xml
+<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <!-- ... -->
+</style>
+```
+
+# Set your configuration
+
+Import the function from the library.
+
+```js
+import { setConfig } from 'tf-checkout-react-native'
+```
+
+Use it in your initial useEffect function:
+
+```js
+setConfig({
+  DOMAIN: 'https://yourdomain.mx',
+  IS_BILLING_STREET_NAME_REQUIRED: false,
+})
+```
+
+`setConfig` set your event's configuration, with the following options:
+
+```js
+{
+  DOMAIN?: string,
+  BASE_URL?: string,
+  CLIENT_ID?: string,
+  CLIENT_SECRET?: string,
+  TIMEOUT?: number,
+  BRAND?: string,
+  IS_BILLING_STREET_NAME_REQUIRED?: 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.
+
+`IS_BILLING_STREET_NAME_REQUIRED`: Whether or not the Street name is required in the billing component.
 
 # Run the example app
 
@@ -26,9 +109,13 @@ or
 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.
 
-# Features
+# Features [🚧 WIP 🚧]
 
-This library exports 4 main components:
+This library exports the following components:
+
+## Login
+
+This is used to authenticate the user.
 
 ## Tickets
 
@@ -50,10 +137,96 @@ TicketFairy doesn't store any card related data, we use [Stripe](https://stripe.
 
 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
+
+Will show the purchased orders for the logged user.
+
+## My Order details
+
+Will show the details for the selected Order, it also allows the user to download the Ticket PDF.
+
 # Usage [🚧 WIP 🚧]
 
+## Login
+
+Import the component from the library
+
+```js
+import { Login } from 'tf-checkout-react-native'
+```
+
+Then add it to the render function.
+
+```js
+<Login
+  onLoginSuccessful={handleOnLoginDialogSuccess}
+  isLoginDialogVisible={isLoginDialogVisible}
+  showLoginDialog={() => setIsLoginDialogVisible(true)}
+  hideLoginDialog={() => setIsLoginDialogVisible(false)}
+  userFirstName={loggedUserName}
+  refs={{
+    inputs?: {
+      email?: any
+      password?: any
+    }
+    button?: {
+      containerView?: any
+      touchableOpacity?: any
+      loadingView?: any
+      activityIndicator?: any
+      loadingText?: any
+  }}
+/>
+```
+
+## 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.
+
+# styles
+
+<img width="899" alt="image" src="https://user-images.githubusercontent.com/66479719/154158723-864cdabd-2a0b-4a84-95ad-3176c67f7e8b.png">
+
+---
+
 ## Tickets
 
+![image](https://user-images.githubusercontent.com/66479719/151049068-450a52d9-dfc8-40bf-b12a-f2555a832c8d.png)
+
 Import the component from the library
 
 ```js
@@ -66,6 +239,8 @@ Then add it to the render function.
 <Tickets eventId={EVENT_ID} onAddToCartSuccess={handleOnAddToCartSuccess} />
 ```
 
+## Props
+
 `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:
 
@@ -79,6 +254,38 @@ Then add it to the render function.
 
 You can then call the `BillingInfo` component and pass them as props in the `cartProps` prop.
 
+## styles
+
+Receives several props to style its sub-components.
+
+rootContainer?: ViewStyle
+
+container?: ViewStyle
+
+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">
+
+<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">
+
+<img width="682" alt="image" src="https://user-images.githubusercontent.com/66479719/154126406-101af4ca-7586-4686-9a93-88ef0375968e.png">
+
+---
+
 ## BillingInfo
 
 Import the component from the library
@@ -106,7 +313,9 @@ Add it to the render function.
 }
 ```
 
-`onCheckoutSuccess` will be called when the user completes all the data required in the form. Will return the following data:
+### 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:
 
 ```js
 {
@@ -119,6 +328,16 @@ Add it to the render function.
 
 `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.
+
+---
+
 ## Checkout
 
 Import the component from the library
@@ -146,6 +365,10 @@ Add it to the render function.
 
 `onPaymentSuccess` will handle the success in the payment process. Will return the `hash`.
 
+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.
+
+---
+
 ## PurchaseConfirmation
 
 Import the component from the library
@@ -166,3 +389,135 @@ Add it to the render function.
 `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.
+
+---
+
+## MyOrders
+
+![image](https://user-images.githubusercontent.com/66479719/151049211-5faebe6b-df3b-4785-ac0d-3adb7a3d6699.png)
+
+If there is a valid session, there will appear a button to access `MyOrders` in the `Tickets` component.
+
+Import the component from the library.
+
+```js
+import { MyOrders } from 'tf-checkout-react-native'
+```
+
+There is no need to pass any data prop to it.
+
+### Props
+
+`onSelectOrder` handler to know which order the user has selected. Will return an object with following structure:
+
+```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` to customize the component look & feel.
+
+`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)
+
+When user selects an order from the `MyOrders`component, will show it details.
+
+Import the component from the library.
+
+```js
+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.
+`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?: {
+    title?: string
+    ticketId?: string
+    ticketType?: string
+    ticketHolder?: string
+    status?: string
+    download?: string
+  }
+}
+```

package/lib/api/ApiClient.d.ts

@@ -1,7 +1,7 @@
 import { AxiosResponse } from 'axios';
 import { IWaitingListFields } from '../components/waitingList/types';
 import { IUserProfile } from '../types';
-import { IAuthorizeResponse, ICheckoutResponse, IClientRequest, IEventResponse, IFetchTicketsResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IRegisterNewUserResponse } from './types';
+import { IAuthorizeResponse, ICartResponse, ICheckoutResponse, IClientRequest, IEventResponse, IFetchTicketsResponse, IFreeRegistrationResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IRegisterNewUserResponse } from './types';
 export declare const Client: IClientRequest;
 export declare const setCustomHeader: (response: any) => void;
 export declare const setAccessTokenHandler: (accessToken: string) => Promise<void>;
@@ -19,7 +19,7 @@ export declare const addToWaitingList: (id: number, values: IWaitingListFields)
     addToWaitingListError: string;
     addToWaitingListData: any;
 }>;
-export declare const fetchMyOrders: () => Promise<IMyOrdersResponse>;
+export declare const fetchMyOrders: (filter?: string) => Promise<IMyOrdersResponse>;
 export declare const fetchOrderDetails: (orderId: string) => Promise<{
     orderDetailsError: string;
     orderDetailsData: IMyOrderDetailsResponse | undefined;
@@ -30,6 +30,8 @@ export declare const addToCart: (id: string | number, data: any) => Promise<{
         isBillingRequired: boolean;
         isNameRequired: any;
         isAgeRequired: any;
+        isPhoneRequired: any;
+        minimumAge: any;
     } | undefined;
     error: undefined;
 }>;
@@ -43,8 +45,8 @@ export declare const fetchStates: (countryId: string) => Promise<{
     data: any;
 }>;
 export declare const fetchCart: () => Promise<{
-    error: string;
-    data: any;
+    cartError: string;
+    cartData: ICartResponse;
 }>;
 export declare const checkoutOrder: (data: any, accessToken: string) => Promise<ICheckoutResponse>;
 export declare const fetchEventConditions: (eventId: string) => Promise<{
@@ -56,6 +58,7 @@ export declare const postOnPaymentSuccess: (orderHash: string) => Promise<{
     error: string;
     data: any;
 }>;
+export declare const postOnFreeRegistration: (orderHash: string) => Promise<IFreeRegistrationResponse>;
 export declare const fetchPurchaseConfirmation: (orderHash: string) => Promise<{
     error: undefined;
     data: void | AxiosResponse<any, any>;