tf-checkout-react-native 1.0.23 → 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).
@@ -11,7 +13,7 @@ Configure [ReactNative environment](https://reactnative.dev/docs/environment-set
 - Suggested ReactNative version `0.66.3`
 - Suggested Flipper version `0.99.0`
 - React version `0.17.1`
-
+- Node version `16.10.0`
 ### Android
 
 - Android 5.0 (API level 21) and above
@@ -99,16 +101,41 @@ Import the function from the library.
 import { setConfig } from 'tf-checkout-react-native'
 ```
 
-Use it in your initial useEffect function:
+Use it in your initial useEffect function, please keep in mind this is an `async` function. It is highly recommended that you track when `setConfig` is finished, and pass that control prop to the Tickets component.
 
 ```ts
-useEffect(() => {
-  setConfig({
-    EVENT_ID: '4344',
-    CLIENT: 'ttf',
-    ENV: 'STAG'
-  })
-}, [])
+
+const YourComponent: FC () => {
+    const [isCheckingCurrentSession, setIsCheckingCurrentSession] = useState(true)
+
+  useEffect(() => {
+    const initConfig = async () => {
+      setIsCheckingCurrentSession(true)
+
+      await setConfig({
+        EVENT_ID: '4344',
+        CLIENT: 'ttf',
+        ENV: 'STAG',
+        CLIENT_ID: '3emd9023349dfn',
+        CLIENT_SECRET: 'CCEw33o4030e4df',
+        AUTH: {
+          ACCESS_TOKEN: 'token393939',
+          REFRESH_TOKEN: 'dee2030edmd',
+          TOKEN_TYPE: 'bearer',
+          SCOPE: 'scope',
+        }
+      })
+
+      setIsCheckingCurrentSession(false)
+    }
+
+    initConfig()
+  }, [])
+
+  return <Tickets 
+    isCheckingCurrentSession 
+  />
+}
 ```
 
 `setConfig` set your event's configuration, with the following options:
@@ -123,6 +150,12 @@ useEffect(() => {
   TIMEOUT?: number,
   BRAND?: string,
   ARE_SUB_BRANDS_INCLUDED?: boolean
+  AUTH?: {
+    ACCESS_TOKEN: string
+    REFRESH_TOKEN: string
+    TOKEN_TYPE: string
+    SCOPE: string
+  }
 }
 ````
 ### Props
@@ -136,6 +169,7 @@ useEffect(() => {
 | 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`. |
+| AUTH | Object that receives data for Single Sign On (SSO).|
 
 # Run the example app
 
@@ -147,13 +181,13 @@ useEffect(() => {
 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 [🚧 WIP 🚧]
+# Features
 
 This library exports the following components:
 
 ### Login
 
-Used to authenticate the user.
+Used to authenticate the user and request password restore.
 
 ### Tickets
 
@@ -187,6 +221,16 @@ Will show the details for the selected Order, it also allows the user to downloa
 
 Let the user to resale their tickets. They can choose between selling them to a friend or to any other user.
 
+### Reset Password
+
+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
@@ -223,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.
@@ -249,6 +356,16 @@ Depending on your needs, you can use the UI Components or the Core Components.
 
 [Resale](#resale-tickets-ui)
 
+[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
 
@@ -262,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
@@ -301,9 +421,43 @@ Then add it to the render function.
   }
   styles?: ILoginViewStyles
   texts?: ILoginViewTexts
+
+  isShowPasswordButtonVisible?: boolean
+
+  //Restore password
+  onRestorePasswordError?: (error: IError) => void
+  onRestorePasswordSuccess?: () => void
 />
 ```
 
+### 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 |
 |----------|-------------|
@@ -320,6 +474,8 @@ Then add it to the render function.
 |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. |
+| onRestorePasswordError?: (error: string) | When restore password fails will return the error received. |
+| onRestorePasswordSuccess? | Called when restore password request was successful |
 
 ### styles
 
@@ -347,6 +503,33 @@ interface ILoginViewStyles {
     button?: IButtonStyles
     message?: StyleProp<TextStyle>
   }
+  restorePassword?: {
+    rootContainer?: StyleProp<ViewStyle>
+    restorePasswordButton?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+    }
+    cancelRestorePasswordButton?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+    }
+    input?: IInputStyles
+    title?: StyleProp<TextStyle>
+    message?: StyleProp<TextStyle>
+    apiError?: StyleProp<TextStyle>
+  }
+  restorePasswordSuccess?: {
+    rootContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    message?: StyleProp<TextStyle>
+    button?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+    }
+  }
 }
 ```
 
@@ -375,12 +558,30 @@ interface ILoginViewStyles {
     loggedAs?: string
     notYou?: string
   }
-
+  restorePassword?: {
+    restorePasswordButton?: string
+    cancelButton?: string
+    message?: string
+    inputLabel?: string
+    title?: string
+  }
+  restorePasswordSuccess?: {
+    title?: string
+    message?: string
+    button?: string
+  }
+}
 ```
 ---
 ## Tickets UI 
 
-Import the component from the library
+This component will first fetch for the Event's data, if data is ok, then will fetch the tickets for this event. 
+
+### Password protected event
+
+If the Event's response returns a `401` error, then it means it's password protected and need to authenticate with a password. Then the `EnterPassword` component will be shown for the user to enter the password.
+
+Import the component from the library.
 
 ```js
 import { Tickets } from 'tf-checkout-react-native'
@@ -389,15 +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
 {
-  eventId: number
-
+  ref?: SessionHandleType
   // Callbacks for when user taps on GET Tickets button
   onAddToCartSuccess: (data: {
     isBillingRequired: boolean
@@ -452,12 +657,28 @@ 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
-  
+  onLoadingChange?: (isLoading: boolean) => void 
   promoCodeCloseIcon?: ImageSourcePropType
+
+  // Event password protected
+  onPressSubmitEventPassword?: (password: string) => void
+  passwordProtectedEventData?: {
+    isPasswordProtected?: boolean
+    message?: string
+    apiError?: string
+    isLoading?: boolean
+  }
+
+  // Configure the Component behavior
+  config: {
+    areActivityIndicatorsEnabled?: boolean
+    areAlertsEnabled?: boolean
+    areTicketsSortedBySoldOut?: boolean
+    areTicketsGrouped?: boolean
+  }
+
+  // For SSO
+  isCheckingCurrentSession?: boolean
 }
 ```
 
@@ -474,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`.
@@ -487,8 +723,8 @@ You can then call the `BillingInfo` component and pass them as props in the `car
   getTicketsButtonDisabled?: IButtonStyles
   getTicketsButtonActive?: IButtonStyles
   promoCode?: {
-    rootContainer?: StyleProp<ViewStyle>
-    contentWrapper?: StyleProp<ViewStyle>
+    rootContainer?: ViewStyle
+    contentWrapper?: ViewStyle
     content?: StyleProp<ViewStyle>
     input?: TextInputProps['style']
     inputPlaceholderColor?: string
@@ -504,6 +740,10 @@ You can then call the `BillingInfo` component and pass them as props in the `car
     cancelIcon?: StyleProp<ImageStyle>
   }
   ticketList?: {
+    sectionHeader?: {
+      container?: StyleProp<ViewStyle>
+      title?: StyleProp<TextStyle>
+    }
     listContainer?: ViewStyle
     item?: {
       container?: ViewStyle
@@ -542,6 +782,14 @@ You can then call the `BillingInfo` component and pass them as props in the `car
     myOrdersButton?: IButtonStyles
     logOutButton?: IButtonStyles
   }
+  enterPassword?: {
+    input?: IInputStyles
+    title?: StyleProp<TextStyle>
+    error?: StyleProp<TextStyle>
+    button?: IButtonStyles
+    rootContainer?: StyleProp<ViewStyle>
+    contentContainer?: StyleProp<ViewStyle>
+  }
 }
 ```
 
@@ -586,6 +834,11 @@ You can then call the `BillingInfo` component and pass them as props in the `car
     free?: string
     ticket?: string
   }
+  enterPassword?: {
+    inputLabel?: string
+    title?: string
+    buttonText?: string
+  }
 }
 ```
 ---
@@ -600,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
@@ -609,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
@@ -620,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
@@ -674,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 |
 |----------|-------------|
@@ -718,9 +1020,10 @@ interface IBillingInfoViewTexts {
       label?: string
       customError?: string
     }
-    cartTimer?: {
-      message?: string
-    }
+    ttfPrivacyPolicyRequiredError?: string
+  }
+  cartTimer?: {
+    message?: string
   }
 }
 ```
@@ -753,7 +1056,17 @@ interface IBillingInfoViewStyles {
     }
     input?: IInputStyles
   }
-  checkboxStyles?: ICheckboxStyles
+  
+  checkboxStyles?: {
+    container?: StyleProp<ViewStyle>
+    content?: StyleProp<ViewStyle>
+    indicator?: StyleProp<ViewStyle>
+    indicatorDisabled?: StyleProp<ViewStyle>
+    text?: StyleProp<TextStyle>
+    box?: StyleProp<ViewStyle>
+    icon?: StyleProp<ImageStyle>
+    error?: StyleProp<TextStyle>
+  }
 
   screenTitle?: StyleProp<TextStyle>
   ticketHoldersTitle?: StyleProp<TextStyle>
@@ -784,6 +1097,8 @@ interface IBillingInfoViewStyles {
     message?: StyleProp<TextStyle>
     time?: StyleProp<TextStyle>
   }
+
+  privacyPolicyLinkStyle?: StyleProp<TextStyle>
 }
 ```
 ---
@@ -799,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}
@@ -815,6 +1133,7 @@ Add it to the render function.
 
 ```js
 {
+  ref?: SessionHandleType
   eventId: number
   hash: string
   total: string
@@ -926,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}
 
@@ -978,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: {
@@ -1102,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
@@ -1270,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
@@ -1369,7 +1694,64 @@ import { ResaleTickets } from 'tf-checkout-react-native'
 }
 ```
 
+## Reset Password UI
+
+After opening and URL with the corresponding schema and token, use this component to let the user reset its password.
+
+### Usage
+Import the component from the library.
+```ts
+import { ResetPassword } from 'tf-checkout-react-native'
+```
+
+Then add it to the render function.
 
+```xml
+<ResetPassword
+  styles={myStyles}
+  token={resetToken}
+  onPressResetButton={handleOnPressResetButton}
+  onPressCancelButton={handleOnPressCancelButton}
+  onResetPasswordSuccess={handleOnResetPasswordSuccess}
+  onResetPasswordError={handleOnResetPasswordError}
+/>
+```
+
+### Props
+
+```ts
+{
+  token: string
+  styles?: {
+    rootContainer?: StyleProp<ViewStyle>
+    contentContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    resetButton?: IButtonStyles
+    cancelButton?: IButtonStyles
+    input?: IInputStyles
+    apiError?: StyleProp<TextStyle>
+    apiSuccess?: StyleProp<TextStyle>
+  }
+  texts?: {
+    title?: string
+    resetButton?: string
+    cancelButton?: string
+    newPasswordLabel?: string
+    confirmNewPasswordLabel?: string
+  }
+  onResetPasswordSuccess?: (data: { 
+    message: string
+    status?: number
+    }) => void
+  onResetPasswordError?: (error: {
+    code?: number
+    message: string
+    extraData?: any
+  }) => void
+  onPressResetButton?: () => void
+  onPressCancelButton?: () => void
+}
+```
 
 
 # Core Components
@@ -1393,7 +1775,66 @@ import { ResaleTickets } from 'tf-checkout-react-native'
 [OrderDetailsCore](#orderdetailscore)
 
 [LoginCore](#logincore)
+
+[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
@@ -1409,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.
@@ -1562,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>
   }>
 }
 ```
@@ -1582,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'
 ```
 
@@ -1606,15 +2048,15 @@ Use the reference to access the component methods.
 const handleGetTickets = async () => {
   const res = await ticketsCoreRef.current.getTickets()
 }
-
 ```
+---
 
 ## WaitingListCore
 This component *must* appear after getting the response from **getTickets()** and the property `isInWaitingList` is set to true.
 
 
 Exposes the following functions: 
-```js
+```tsx
 {
   addToWaitingList(
     params: {
@@ -1635,6 +2077,7 @@ Exposes the following functions:
       success: boolean
     }
   }>
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 }
 ```
 **addToWaitingList** Receives params with the following properties:
@@ -1692,6 +2135,7 @@ const handleAddToWaitingList = async (params: IAddToWaitingListCoreParams) => {
   const res = await waitingListCoreRef.current.addToWaitingList(params)
 }
 ```
+---
 
 ## BillingCore
 This component collects user's billing information and checks the order out. If the entered user data is already in the system it will perform checkout, other wise it will perform a registration and then the checkout.
@@ -1706,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.
 
@@ -1792,24 +2236,31 @@ 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>
 }
 
 ```
+---
 
 ## CheckoutCore
 Shows the event conditions, purchase details and process the payment and free registration to an event.
@@ -1833,6 +2284,8 @@ Exposes the following functions:
 
 `paymentSuccess` Payment success.
 
+`refreshAccessToken` Refreshes access token.
+
 
 ```ts
 // Get event conditions for the current event.
@@ -1935,8 +2388,11 @@ freeRegistration(orderHash: string): Promise<{
 
 // Payment success.
 paymentSuccess(orderHash: string): Promise<any>
-```
 
+// Refresh access token.
+refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
+```
+---
 ## PurchaseConfirmationCore
 Shows the purchase confirmation information.
 
@@ -1944,6 +2400,8 @@ It exposes the following functions:
 
 `getPurchaseConfirmation` Get purchase confirmation for the current event.
 
+`refreshAccesstoken` Refreshes access token.
+
 ```ts
 getPurchaseConfirmation(
     orderHash: string
@@ -1981,8 +2439,9 @@ getPurchaseConfirmation(
       }[]
     }
   }>
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 ```
-
+---
 ## MyOrdersCore
 Shows the purchased orders from the user. It can also show the sub-brands if the `ARE_SUB_BRANDS_INCLUDED` was set to true and the `BRAND` was set to an existing brand. 
 
@@ -1992,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: {
@@ -2062,7 +2525,7 @@ getOrderDetails(orderId: string): Promise<{
   }
 }>
 ```
-
+---
 ## OrderDetailsCore
 Allows to re-sale the tickets or to remove them from the re-sale system.
 
@@ -2130,7 +2593,7 @@ resaleTicket(
       }
   }>
 ```
-
+---
 ## LoginCore
 Handles the login and logout process.
 
@@ -2151,7 +2614,7 @@ login(fields?: {
     extraData?: any
   }
 
-  data?: {
+  userProfile?: {
     customerId: string
     firstName: string
     lastName: string
@@ -2165,17 +2628,102 @@ login(fields?: {
     stateId: string
     city: string
   }
+
+  accessTokenData?: {
+    accessToken: string
+    refreshToken: string
+    tokenType: string
+    scope: string
+  }
 }>
 
 logout(): Promise<void>
 ```
+---
+## ResetPasswordCore
+Will allow the user to reset its password.
+
+Exposes the following function: 
 
+`postResetPassword` Sends the reset token and the new password values.
+
+postResetPassword parameters: 
+```
+  token: string,
+  password: string,
+  password_confirmation: string,
+```
+postResetPassword returning data:
+
+```ts
+{
+  data?: {
+    message: string
+    status?: number
+  }
+  error?: {  
+    code?: number
+    message: string
+    extraData?: any
+  }
+}
+```
+
+### Usage
+Import it from the library.
+
+```ts
+import { ResetPasswordCore, ResetPasswordCoreHandle } from 'tf-checkout-react-native'
+```
+Wrap your component with the Core component.
+
+```xml
+<ResetPasswordCore ref={resetPasswordCoreRef}>
+  {yourComponent}
+</ResetPasswordCore>
+```
 
 # Utils
 
 `deleteAllData` asynchronously deletes all the data stored in the local storage. Use this with caution, only in an edge case. 
 
 # 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
+      areTicketsGrouped?: boolean
+    }
+```
+- Updated Tickets styles prop to include Ticket Section Header.
+- Moved `areActivityIndicatorsEnabled` and `areAlertsEnabled` to the `config` prop.
+- Made TTF Privacy Policy mandatory.
+- Added `styles` and `texts` props for TTF Privacy Policy checkbox.
+- Added **Password Protected** event feature.
+
 ## Version 1.0.23
 - Fix Checkout not allowing free registrations