tf-checkout-react-native 1.0.24 → 1.0.25

package/README.md

@@ -2,6 +2,8 @@
 
 React Native library for Ticket Fairy checkout.
 
+For Single Sign-On (SSO) Please be awere that this is the first version of the implementation, we are working to release a V2, that will cover other use cases, in the near future.
+
 # Requirements
 
 Configure [ReactNative environment](https://reactnative.dev/docs/environment-setup) for desired platforms (iOS, Android or both).
@@ -223,6 +225,12 @@ Let the user to resale their tickets. They can choose between selling them to a
 
 After opening and URL with the corresponding schema, use this component to let the user reset its password.
 
+### Exported functions
+
+- setConfig: Sets config for the library
+
+- refreshAccessToken: Let refresh the expired access token.
+
 # Component styling
 ### Button
 ```ts
@@ -259,6 +267,69 @@ interface ICheckboxStyles {
 }
 ```
 
+# Exported functions
+## setConfig
+Set the configuration for the library.
+
+```ts
+export interface IConfig {
+  EVENT_ID: string | number
+  CLIENT?: string
+  ENV?: EnvType
+  CLIENT_ID?: string
+  CLIENT_SECRET?: string
+  TIMEOUT?: number
+  BRAND?: string
+  ARE_SUB_BRANDS_INCLUDED?: boolean
+  // AUTH is used for single sign on v1.
+  // It receives the needed information for the authenticated user.
+  AUTH?: {
+    ACCESS_TOKEN: string
+    REFRESH_TOKEN: string
+    TOKEN_TYPE: string
+    SCOPE: string
+  }
+}
+```
+## refreshAccessToken
+
+Let refresh the expired access token, it can use the internal stored refresh token, passing nothing to it, or you can pass a `string` refresh token.
+
+```ts
+const response: IFetchAccessTokenResponse = await refreshAccessToken(refreshToken?: string)
+```
+
+Returns the new access token data or error.
+
+```ts
+accessTokenError?: {
+  code?: number
+  message: string
+}
+accessTokenData?: {
+  accessToken: string
+  refreshToken: string
+  tokenType: string
+  scope: string
+}
+```
+
+# Exported handlers
+## SessionCoreHandle
+Exports function to refresh access token.
+
+### refreshAccessToken
+Allows to refresh access token inside the component. It will automatically re-fetch the component's data from the server. You will need to create a `ref` object with the corresponding type.
+
+Example: 
+
+In your parent component
+```ts 
+const sessionHandleRef = useRef<SessionHandleType>(null)
+
+// Call the refreshAccessToken function by using
+await sessionHandleRef.current?.refreshAccessToken()
+```
 
 # Exported components
 Depending on your needs, you can use the UI Components or the Core Components.
@@ -287,6 +358,14 @@ Depending on your needs, you can use the UI Components or the Core Components.
 
 [Reset Password](#reset-password-ui)
 
+---
+## Session handle
+
+In all components with the exception of Login and Reset Password, you can pass a `ref` with type `SessionHandleType` to access two functions:
+
+`refreshAccessToken` After a successful access token refresh, it will re-fetch component's data from server when applicable.
+`reloadData` It will re-fetch component's data from server.
+
 ---
 ## Login UI
 
@@ -300,7 +379,10 @@ Then add it to the render function.
 
 ```tsx
 <Login
-  onLoginSuccessful: (userProfile: IUserProfile, accessToken: string) => void
+  onLoginSuccessful: (
+    userProfile: IUserProfile, 
+    accessTokenData?: IFetchAccessTokenData
+  ) => void
   onLoginError?: (error: IError) => void
 
   onFetchUserProfileError?: (error: IError) => void
@@ -348,6 +430,34 @@ Then add it to the render function.
 />
 ```
 
+### Data Types
+#### IUserProfile
+```ts
+{
+  customerId: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  streetAddress: string
+  zipCode: string
+  countryId: string
+  company?: string
+  state: string
+  stateId: string
+  city: string
+}
+```
+
+#### IFetchAccessTokenData
+```ts
+{
+  accessToken: string
+  refreshToken: string
+  tokenType: string
+  scope: string
+}
+```
 ### Props
 | Property | Description |
 |----------|-------------|
@@ -480,13 +590,19 @@ import { Tickets } from 'tf-checkout-react-native'
 Then add it to the render function.
 
 ```js
-<Tickets eventId={EVENT_ID} onAddToCartSuccess={handleOnAddToCartSuccess} />
+const sessionHandleRef = useRef<SessionHandleType>(null)
+
+<Tickets 
+  ref={sessionHandleRef}
+  eventId={EVENT_ID} 
+  onAddToCartSuccess={handleOnAddToCartSuccess} />
 ```
 
 ### Props
 
 ```js
 {
+  ref?: SessionHandleType
   // Callbacks for when user taps on GET Tickets button
   onAddToCartSuccess: (data: {
     isBillingRequired: boolean
@@ -553,6 +669,7 @@ Then add it to the render function.
     isLoading?: boolean
   }
 
+  // Configure the Component behavior
   config: {
     areActivityIndicatorsEnabled?: boolean
     areAlertsEnabled?: boolean
@@ -578,6 +695,21 @@ Then add it to the render function.
 }
 ```
 
+### config prop
+Configure the component's behavior 
+```ts
+config: {
+  // Whether or not show the loading indicators.
+  areActivityIndicatorsEnabled?: boolean
+  // Whether or not show the alerts.
+  areAlertsEnabled?: boolean
+  // Whether or not the Ticket should be sorted by Sold Out.
+  areTicketsSortedBySoldOut?: boolean
+  // Whether or not the tickets should be grouped, they need to be configured as groups in the Tickets admin.
+  areTicketsGrouped?: boolean
+}
+```
+
 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`.
@@ -721,7 +853,11 @@ import { BillingInfo } from 'tf-checkout-react-native'
 Add it to the render function.
 
 ```js
+const sessionHandleRef = useRef<SessionHandleType>(null)
+
+
 <BillingInfo
+  ref={sessionHandleRef}
   cartProps: { 
     isBillingRequired: boolean
     isNameRequired: boolean
@@ -730,8 +866,24 @@ Add it to the render function.
     minimumAge: number
   }
   // registerNewUser
-  onRegisterSuccess?: (tokens: ITokens) => void
-  onRegisterError?: (error: string) => void
+  onRegisterSuccess?: (data: {
+      accessTokenData: {
+        accessToken: string
+        refreshToken: string
+        tokenType: string
+        scope: string
+      }
+      userProfile: {
+        firstName: string
+        lastName: string
+        email: string
+      }
+    }) => void
+  onRegisterError?: (error: { 
+    isAlreadyRegistered?: boolean
+    message?: string
+    raw?: any
+  }) => void
 
   onCheckoutSuccess: (data: {   
     id: string
@@ -741,7 +893,8 @@ Add it to the render function.
   }) => void
   onCheckoutError?: (error: IError) => void
 
-  onLoginSuccess: (data: any) => void
+  // See ILoginSuccessData data type below.
+  onLoginSuccess: (data: ILoginSuccessData) => void
   onLoginError?: (error: IError) => void
 
   onFetchUserProfileSuccess?: (data: any) => void
@@ -795,6 +948,34 @@ Add it to the render function.
 />
 ```
 
+### DataTypes
+ILoginSuccessData
+
+```ts
+interface ILoginSuccessData {
+  userProfile: {
+    customerId: string
+    firstName: string
+    lastName: string
+    email: string
+    phone: string
+    streetAddress: string
+    zipCode: string
+    countryId: string
+    company?: string
+    state: string
+    stateId: string
+    city: string
+  }
+  accessTokenData?: {
+    accessToken: string
+    refreshToken: string
+    tokenType: string
+    scope: string
+  }
+}
+```
+
 ### Props
 | Property | Description |
 |----------|-------------|
@@ -933,7 +1114,10 @@ import { Checkout } from 'tf-checkout-react-native'
 Add it to the render function.
 
 ```js
+const sessionHandleRef = useRef<SessionHandleType>(null)
+
 <Checkout
+  ref={sessionHandleRef}
   eventId={EVENT_ID}
   hash={hash}
   total={total}
@@ -949,6 +1133,7 @@ Add it to the render function.
 
 ```js
 {
+  ref?: SessionHandleType
   eventId: number
   hash: string
   total: string
@@ -1060,13 +1245,16 @@ Additionally, if you are encountering problems with building your project, pleas
 Import the component from the library
 
 ```js
-import { PurchaseConfirmation } from 'tf-checkout-react-native'
+import { PurchaseConfirmation, SessionHandleType } from 'tf-checkout-react-native'
 ```
 
 Add it to the render function.
 
 ```js
+const sessionHandleRef = useRef<SessionHandleType>(null)
+
 <PurchaseConfirmation
+  ref={sessionHandleRef}
   orderHash={checkoutProps!.hash}
   onComplete={handleOnComplete}
 
@@ -1112,14 +1300,15 @@ If there is a valid session, there will appear a button to access `MyOrders` in
 Import the component from the library.
 
 ```js
-import { MyOrders } from 'tf-checkout-react-native'
+import { MyOrders, SessionHandleType } from 'tf-checkout-react-native'
 ```
 
 
 ### Props
 
-```js
+```tsx
 {
+  ref={SessionHandleType}
   onSelectOrder: (order: {
     order: {
     header: {
@@ -1236,13 +1425,14 @@ 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'
+import { MyOrderDetails, SessionHandleType } from 'tf-checkout-react-native'
 ```
 
 ### Props
 
 ```tsx
 {
+  ref={SessionHandleType}
   data: IMyOrderDetailsData
 
   // Used to navigate to the Resale Tickets screen
@@ -1404,13 +1594,14 @@ Allows the user to resale the tickets they bought. They can decide wether sell i
 Import the component from the library.
 
 ```js
-import { ResaleTickets } from 'tf-checkout-react-native'
+import { ResaleTickets, SessionHandleType } from 'tf-checkout-react-native'
 ```
 
 ### Props
 
 ```ts
 {
+  ref={SessionHandleType}
   ticket: {
     currency: string
     description: string
@@ -1587,6 +1778,63 @@ Then add it to the render function.
 
 [ResetPasswordCore](#resetpasswordcore)
  
+---
+## SessionCoreHandle
+
+All Core components with the exception of Login and ResetPassword exposes the `refreshAccessToken` function to re-authenticate the user after the access token is expired. This is through the corresponding `CoreHandle` ref.
+
+It returns the `IFetchAccessTokenResponse` object: 
+
+```ts
+IFetchAccessTokenResponse {
+  accessTokenError?: {
+    code?: number
+    message: string
+    extraData?: any
+  }
+  accessTokenData?: {
+    accessToken: string
+    refreshToken: string
+    tokenType: string
+    scope: string
+  }
+}
+```
+
+
+### Example:
+
+Import the component from the library
+
+```js
+import { 
+  TicketsCore 
+  TicketsCoreHandle // You can import the Handle to use it as type in the useRef hook
+} from 'tf-checkout-react-native'
+```
+
+Declare a reference to pass it to the component.
+
+```js
+const ticketsCoreRef = useRef<TicketsCoreHandle>(null)
+```
+
+Then add it to the render function and assign the reference to the corresponding component.
+
+```js
+<TicketsCore ref={ticketsCoreRef}>
+  <YourComponent />
+</TicketsCore>
+```
+
+Use the reference to access the component methods.
+
+```js
+const handleGetTickets = async () => {
+  const res = await ticketsCoreRef.current.refreshAccessToken()
+}
+```
+
 ---
 
 ## TicketsCore
@@ -1602,6 +1850,8 @@ Exposes the following functions:
 
 `postReferralVisit` Posts a referral visit to the server.
 
+`refreshAccessToken` : Refreshes expired access token.
+
 ```js
 {
   // Fetches the tickets from the event set in the config function. It receives a promoCode parameter to apply to the tickets.
@@ -1755,16 +2005,16 @@ Exposes the following functions:
     }
 
     postReferralVisit(referralId: string): Promise<
-    postReferralError?: {
-      code?: number
+      postReferralError?: {
+        code?: number
+        message: string
+        extraData?: any
+      }
+      postReferralData?: {
       message: string
-      extraData?: any
-    }
-    postReferralData?: {
-    message: string
-    status: number
-  }
-    >
+      status: number
+    }>
+    refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
   }>
 }
 ```
@@ -1775,7 +2025,6 @@ Import the component from the library
 import { 
   TicketsCore 
   TicketsCoreHandle // You can import the Handle to use it as type in the useRef hook
-  
 } from 'tf-checkout-react-native'
 ```
 
@@ -1799,7 +2048,6 @@ Use the reference to access the component methods.
 const handleGetTickets = async () => {
   const res = await ticketsCoreRef.current.getTickets()
 }
-
 ```
 ---
 
@@ -1808,7 +2056,7 @@ This component *must* appear after getting the response from **getTickets()** an
 
 
 Exposes the following functions: 
-```js
+```tsx
 {
   addToWaitingList(
     params: {
@@ -1829,6 +2077,7 @@ Exposes the following functions:
       success: boolean
     }
   }>
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 }
 ```
 **addToWaitingList** Receives params with the following properties:
@@ -1901,7 +2150,7 @@ Exposes the following functions:
 
 `getUserProfile` Fetches the user profile information.
 
-`registerNewUser` Registers a new user.
+`registerNewUser` Registers a new user. Returns accessTokens data.
 
 `checkoutOrder` Performs the checkout.
 
@@ -1987,21 +2236,27 @@ Exposes the following functions:
 
   // Registers a new user.
   registerNewUser(data: FormData): Promise<{
-    error?: {
+    registerNewUserResponseError?: {
       isAlreadyRegistered?: boolean
       message?: string
       raw?: any
     }
-    data?: {
-      token_type: string
-      scope: string
-      user_profile: {
-        first_name: string
-        last_name: string
+    registerNewUserResponseData?: {
+      accessTokenData: {
+        accessToken: string
+        refreshToken: string
+        tokenType: string
+        scope: string
+      }
+      userProfile: {
+        firstName: string
+        lastName: string
         email: string
       }
     }
   }>
+
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 }
 
 ```
@@ -2029,6 +2284,8 @@ Exposes the following functions:
 
 `paymentSuccess` Payment success.
 
+`refreshAccessToken` Refreshes access token.
+
 
 ```ts
 // Get event conditions for the current event.
@@ -2131,6 +2388,9 @@ freeRegistration(orderHash: string): Promise<{
 
 // Payment success.
 paymentSuccess(orderHash: string): Promise<any>
+
+// Refresh access token.
+refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 ```
 ---
 ## PurchaseConfirmationCore
@@ -2140,6 +2400,8 @@ It exposes the following functions:
 
 `getPurchaseConfirmation` Get purchase confirmation for the current event.
 
+`refreshAccesstoken` Refreshes access token.
+
 ```ts
 getPurchaseConfirmation(
     orderHash: string
@@ -2177,6 +2439,7 @@ getPurchaseConfirmation(
       }[]
     }
   }>
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 ```
 ---
 ## MyOrdersCore
@@ -2188,8 +2451,12 @@ Exposes the following functions:
 
 `getOrderDetails` Get the details from a specific order.
 
+`refreshAccessToken` Refreshes access token.
+
 
 ```ts
+refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
+
 getMyOrders(page: number, filter: string): Promise<{
   myOrdersData?: {
     events: {
@@ -2347,7 +2614,7 @@ login(fields?: {
     extraData?: any
   }
 
-  data?: {
+  userProfile?: {
     customerId: string
     firstName: string
     lastName: string
@@ -2361,6 +2628,13 @@ login(fields?: {
     stateId: string
     city: string
   }
+
+  accessTokenData?: {
+    accessToken: string
+    refreshToken: string
+    tokenType: string
+    scope: string
+  }
 }>
 
 logout(): Promise<void>
@@ -2415,13 +2689,29 @@ Wrap your component with the Core component.
 
 # Changelog
 
+## Version 1.0.25
+- Exposes `refreshAccessToken` function.
+- Changed returned `data` prop to `userProfile` in LoginCore response.
+- In **LoginCore Component**:
+  - Add `accessTokenData` object prop in `onLoginSuccessful` response.
+- On **BillingUI Component**:
+  - Change `onRegisterSuccess` return data type.
+  - Change `onRegisterError` return data type.
+- On **LoginCore**:
+  - Change `login` return data type to include `accessTokenData` object.
+- Exports `SessionHandleType` to use it in the `ref` of the UI components.
+- All UI and Core components except Login and ResetPassword:
+  - Export function `refreshAccessToken`
+- Add `reloadData` to re-fetch servers data in UI components.
+
 ## Version 1.0.24
 - Add **SingleSignOn** feature.
 - Add show Tickets in groups and the option to sort them by sold out.
 - Add config prop to Tickets component:
 
-```
+```ts
     config: {
+      // Indicates if loading component should be visible.
       areActivityIndicatorsEnabled?: boolean
       areAlertsEnabled?: boolean
       areTicketsSortedBySoldOut?: boolean

package/lib/api/ApiClient.d.ts

@@ -1,15 +1,12 @@
 import { IWaitingListFields } from '../components/waitingList/types';
 import { IError } from '../types';
 import { IAddToCartResponse } from '../types/ITicket';
-import { IAddToCartParams, IAddToWaitingListResponse, IAuthorizeResponse, ICartResponse, ICheckoutBody, ICheckoutResponse, IClientRequest, ICloseSessionResponse, ICountriesResponse, IEventResponse, IFetchTicketsResponse, IFreeRegistrationResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IPostReferralResponse, IPurchaseConfirmationResponse, IRegisterNewUserResponse, IRemoveTicketFromResaleResponse, IResaleTicketResponse, IResetPasswordRequestData, IResetPasswordResponse, IRestorePasswordResponse, IStatesResponse, IUserProfileResponse } from './types';
+import { IAddToCartParams, IAddToWaitingListResponse, IAuthorizeResponse, ICartResponse, ICheckoutBody, ICheckoutResponse, IClientRequest, ICloseSessionResponse, ICountriesResponse, IEventResponse, IFetchAccessTokenResponse, IFetchTicketsResponse, IFreeRegistrationResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IPostReferralResponse, IPurchaseConfirmationResponse, IRegisterNewUserResponse, IRemoveTicketFromResaleResponse, IResaleTicketResponse, IResetPasswordRequestData, IResetPasswordResponse, IRestorePasswordResponse, IStatesResponse, IUserProfileResponse } from './types';
 export declare const Client: IClientRequest;
 export declare const setCustomHeader: (response: any) => void;
 export declare const setAccessTokenHandler: (accessToken: string) => Promise<void>;
 export declare const authorize: (data: FormData) => Promise<IAuthorizeResponse>;
-export declare const fetchAccessToken: (data: FormData) => Promise<{
-    error: IError | undefined;
-    accessToken: any;
-}>;
+export declare const fetchAccessToken: (data: FormData) => Promise<IFetchAccessTokenResponse>;
 export declare const fetchUserProfile: () => Promise<IUserProfileResponse>;
 export declare const registerNewUser: (data: FormData) => Promise<IRegisterNewUserResponse>;
 export declare const addToWaitingList: (values: IWaitingListFields) => Promise<IAddToWaitingListResponse>;