tf-checkout-react-native 1.0.37 → 1.0.40

package/README.md

@@ -10,10 +10,10 @@ Configure [ReactNative environment](https://reactnative.dev/docs/environment-set
 
 ### React Native
 
-- Suggested ReactNative version `0.66.3`
-- Suggested Flipper version `0.99.0`
-- React version `0.17.1`
-- Node version `16.10.0`
+- React Native version `0.81.4`
+- React version `19.1.0`
+- Node version `20.18.3` or later
+
 ### Android
 
 - Android 5.0 (API level 21) and above
@@ -47,25 +47,75 @@ To download the PDFs, add the following flags to `Info.plist` file:
 
 # Installation
 
-```sh
-yarn add tf-checkout-react-native
-```
+🔗 Required peer dependencies
+This package relies on several React Native native modules. You need to install them in your app for the SDK to work properly:
+If you are running on bare React Native, you will need to install the following dependencies:
 
-or
+```sh
+# Using pnpm
+pnpm add tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  @react-native-community/datetimepicker@^8.0.0 \
+  react-native-background-timer@^2.4.1 \
+  react-native-device-country@^1.1.1 \
+  react-native-fs@^2.18.0 \
+  @stripe/stripe-react-native@^0.54.0
+
+# Using yarn
+yarn add tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  @react-native-community/datetimepicker@^8.0.0 \
+  react-native-background-timer@^2.4.1 \
+  react-native-device-country@^1.1.1 \
+  react-native-fs@^2.18.0 \
+  @stripe/stripe-react-native@^0.54.0
+
+# Using npm
+npm install tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  @react-native-community/datetimepicker@^8.0.0 \
+  react-native-background-timer@^2.4.1 \
+  react-native-device-country@^1.1.1 \
+  react-native-fs@^2.18.0 \
+  @stripe/stripe-react-native@^0.54.0
+```
+
+If you are running on expo, you will need to install the following dependencies:
 
 ```sh
-npm install tf-checkout-react-native
+# Using pnpm
+pnpm add tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  react-native-background-timer@^2.4.1
+
+# Using yarn
+yarn add tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  react-native-background-timer@^2.4.1
+
+# Using npm
+npm install tf-checkout-react-native \
+  @react-native-async-storage/async-storage@^2.0.0 \
+  @react-native-clipboard/clipboard@^1.14.0 \
+  react-native-background-timer@^2.4.1
 ```
 
 Make sure to install all the required dependencies in your project.
 
 ### Metro
+
 Add the following to your `metro.config.js` in the resolver property:
 
 `sourceExts: ['jsx', 'js', 'ts', 'tsx']`
 
-Result: 
-````js
+Result:
+
+```js
 module.exports = {
   watchFolders: [moduleRoot],
   resolver: {
@@ -73,9 +123,8 @@ module.exports = {
     extraNodeModules: {
       react: path.resolve(__dirname,
     }
-    .... 
-````
-
+    ....
+```
 
 ### Required for Android
 
@@ -132,15 +181,15 @@ const YourComponent: FC () => {
     initConfig()
   }, [])
 
-  return <Tickets 
-    isCheckingCurrentSession 
+  return <Tickets
+    isCheckingCurrentSession
   />
 }
 ```
 
 `setConfig` set your event's configuration, with the following options:
 
-````ts
+```ts
 {
   EVENT_ID?: string | number,
   CLIENT?: string,
@@ -157,19 +206,21 @@ const YourComponent: FC () => {
     SCOPE: string
   }
 }
-````
+```
+
 ### Props
-| Property | Description |
-| -------- | ----------- |
-| EVENT_ID | Specify the event's ID. |
-| CLIENT | Specify your client designated name example `ttf`. |
-| ENV | Sets the environment to any of the following environments: Production, Staging or Development. Receives the following values: `PROD`, `DEV`, `STAG`. Defaults to `PROD`.|
-| 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`. |
-| AUTH | Object that receives data for Single Sign On (SSO).|
+
+| Property                | Description                                                                                                                                                              |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| EVENT_ID                |  Specify the event's ID.                                                                                                                                                 |
+| CLIENT                  | Specify your client designated name example `ttf`.                                                                                                                       |
+| ENV                     | Sets the environment to any of the following environments: Production, Staging or Development. Receives the following values: `PROD`, `DEV`, `STAG`. Defaults to `PROD`. |
+| 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`.                                                                                                |
+| AUTH                    | Object that receives data for Single Sign On (SSO).                                                                                                                      |
 
 # Run the example app
 
@@ -231,8 +282,106 @@ After opening and URL with the corresponding schema, use this component to let t
 
 - refreshAccessToken: Let refresh the expired access token.
 
+# React Hooks API
+
+As of the latest version, we're introducing a new hooks-based API that provides a more modern and flexible approach to implementing the checkout flow. The hooks-based implementation replaces the Core components (`BillingCore` and `CheckoutCore`) which are now deprecated.
+
+## Available Hooks
+
+### Checkout Hooks
+
+Wrapping with CheckoutProvider
+
+All checkout components & hooks (CheckoutV2, CustomCheckout, or your own flow) must be wrapped in CheckoutProvider to work correctly.
+
+| Hook                   | Description                                                                        |
+| ---------------------- | ---------------------------------------------------------------------------------- |
+| `useCheckoutFlow()`    | Complete checkout flow with form management, data fetching, and payment processing |
+| `useCart()`            | Fetch cart data with automatic expiration countdown                                |
+| `useCheckout()`        | Process checkout with payment information                                          |
+| `useAddToCart()`       | Add items to cart                                                                  |
+| `useTickets()`         | Fetch available tickets for an event                                               |
+| `useEventInfo()`       | Fetch event information                                                            |
+| `usePaymentData()`     | Get payment data for an order                                                      |
+| `usePaymentSuccess()`  | Process payment success                                                            |
+| `useEventConditions()` | Fetch event conditions                                                             |
+| `useAddons()`          | Fetch and manage event add-ons                                                     |
+| `useUpdateCheckout()`  | Update checkout with add-ons                                                       |
+
+### Location Hooks
+
+| Hook                   | Description                         |
+| ---------------------- | ----------------------------------- |
+| `useCountries()`       | Fetch countries list                |
+| `useStates(countryId)` | Fetch states for a specific country |
+
+### Auth Hooks
+
+| Hook                | Description                      |
+| ------------------- | -------------------------------- |
+| `useUserProfile()`  | Fetch authenticated user profile |
+| `useRegisterUser()` | Register a new user              |
+
+## Migration from Core Components
+
+If you're currently using `BillingCore` or `CheckoutCore` components, please refer to the [Migration Guide](./src/core/MIGRATION.md) for detailed instructions on how to update your code to use the new hooks-based API.
+
+## Example Usage
+
+```tsx
+import { useCheckoutFlow, CheckoutForm, CheckoutProvider } from 'tf-checkout-react-native'
+
+const CheckoutScreen = () => {
+  const {
+    onSubmit,
+    initialValues,
+    countries,
+    states,
+    orderItems,
+    secondsLeft,
+    isSubmitting,
+    isInitialLoading
+  } = useCheckoutFlow({
+    onCartExpired: () => navigation.navigate('ExpiredScreen'),
+    onCheckoutSuccess: ({ hash, total, values }) => {
+      // Handle checkout success
+    },
+    onPaymentSuccess: (result) => {
+      // Handle payment success
+    }
+  })
+
+  if (isInitialLoading) {
+    return <LoadingIndicator />
+  }
+
+  return (
+    <CheckoutForm
+      onSubmit={onSubmit}
+      initialValues={initialValues}
+      countries={countries}
+      states={states}
+      orderItems={orderItems}
+      secondsLeft={secondsLeft}
+      isSubmitting={isSubmitting}
+    />
+  )
+}
+
+export default MyCustomCheckout() => {
+  return (
+    <CheckoutProvider>
+      <CheckoutScreen />
+    </CheckoutProvider>
+  )
+}
+
+```
+
 # Component styling
+
 ### Button
+
 ```ts
 interface IButtonStyles {
   container?: StyleProp<ViewStyle>
@@ -240,7 +389,9 @@ interface IButtonStyles {
   text?: StyleProp<TextStyle>
 }
 ```
+
 ### Input
+
 ```ts
 interface IInputStyles {
   color?: ColorValue
@@ -268,7 +419,9 @@ interface ICheckboxStyles {
 ```
 
 # Exported functions
+
 ## setConfig
+
 Set the configuration for the library.
 
 ```ts
@@ -291,6 +444,7 @@ export interface IConfig {
   }
 }
 ```
+
 ## 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.
@@ -315,16 +469,20 @@ accessTokenData?: {
 ```
 
 # 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: 
+Example:
 
 In your parent component
-```ts 
+
+```ts
 const sessionHandleRef = useRef<SessionHandleType>(null)
 
 // Call the refreshAccessToken function by using
@@ -332,6 +490,7 @@ await sessionHandleRef.current?.refreshAccessToken()
 ```
 
 # Exported components
+
 Depending on your needs, you can use the UI Components or the Core Components.
 
 [UI Components](#ui-components) use the Core Components at their core but also exposes an UI that you can configure with your own styles. There is no need to create any kind of logic with them, only setConfig and implement the callbacks to get their data.
@@ -348,6 +507,8 @@ Depending on your needs, you can use the UI Components or the Core Components.
 
 [Checkout](#checkout-ui)
 
+[CheckoutSP](#checkoutsp-ui)
+
 [Purchase Confirmation](#purchase-confirmation-ui)
 
 [My Orders](#my-orders-ui)
@@ -359,6 +520,7 @@ 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:
@@ -367,6 +529,7 @@ In all components with the exception of Login and Reset Password, you can pass a
 `reloadData` It will re-fetch component's data from server.
 
 ---
+
 ## Login UI
 
 Import the component from the library
@@ -380,7 +543,7 @@ Then add it to the render function.
 ```tsx
 <Login
   onLoginSuccessful: (
-    userProfile: IUserProfile, 
+    userProfile: IUserProfile,
     accessTokenData?: IFetchAccessTokenData
   ) => void
   onLoginError?: (error: IError) => void
@@ -390,7 +553,7 @@ Then add it to the render function.
 
   onFetchAccessTokenError?: (error: IError) => void
   onFetchAccessTokenSuccess?: () => void
-  
+
   isLoginDialogVisible: boolean
   showLoginDialog: () => void
   hideLoginDialog: () => void
@@ -431,7 +594,9 @@ Then add it to the render function.
 ```
 
 ### Data Types
+
 #### IUserProfile
+
 ```ts
 {
   customerId: string
@@ -450,6 +615,7 @@ Then add it to the render function.
 ```
 
 #### IFetchAccessTokenData
+
 ```ts
 {
   accessToken: string
@@ -458,24 +624,26 @@ Then add it to the render function.
   scope: string
 }
 ```
+
 ### 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. |
-| onRestorePasswordError?: (error: string) | When restore password fails will return the error received. |
-| onRestorePasswordSuccess? | Called when restore password request was successful |
+
+| 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.                                                                                                                        |
+| onRestorePasswordError?: (error: string)                             | When restore password fails will return the error received.                                                                                                                                              |
+| onRestorePasswordSuccess?                                            | Called when restore password request was successful                                                                                                                                                      |
 
 ### styles
 
@@ -536,6 +704,7 @@ interface ILoginViewStyles {
 \*Note: Logos images styles are passed from the `brandImages` prop.
 
 ### texts
+
 ```js
 {
   loginButton?: string
@@ -572,10 +741,12 @@ interface ILoginViewStyles {
   }
 }
 ```
+
 ---
-## Tickets UI 
 
-This component will first fetch for the Event's data, if data is ok, then will fetch the tickets for this event. 
+## Tickets UI
+
+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
 
@@ -592,7 +763,7 @@ Then add it to the render function.
 ```js
 const sessionHandleRef = useRef<SessionHandleType>(null)
 
-<Tickets 
+<Tickets
   ref={sessionHandleRef}
   onAddToCartSuccess={handleOnAddToCartSuccess} />
 ```
@@ -617,14 +788,14 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
     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[]
@@ -658,7 +829,7 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
   onPressMyOrders: () => void
   onPressLogout?: () => void
 
-  onLoadingChange?: (isLoading: boolean) => void 
+  onLoadingChange?: (isLoading: boolean) => void
   promoCodeCloseIcon?: ImageSourcePropType
 
   // Event password protected
@@ -700,7 +871,9 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
 ```
 
 ### config prop
-Configure the component's behavior 
+
+Configure the component's behavior
+
 ```ts
 config: {
   // Whether or not show the loading indicators.
@@ -719,6 +892,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
+
 ```js
 {
   rootContainer?: ViewStyle
@@ -798,6 +972,7 @@ You can then call the `BillingInfo` component and pass them as props in the `car
 ```
 
 ### texts
+
 ```js
 {
   promoCode?: {
@@ -845,7 +1020,9 @@ You can then call the `BillingInfo` component and pass them as props in the `car
   }
 }
 ```
+
 ---
+
 ## BillingInfo UI
 
 Import the component from the library
@@ -862,7 +1039,7 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
 
 <BillingInfo
   ref={sessionHandleRef}
-  cartProps: { 
+  cartProps: {
     isBillingRequired: boolean
     isNameRequired: boolean
     isAgeRequired: boolean
@@ -883,13 +1060,13 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
         email: string
       }
     }) => void
-  onRegisterError?: (error: { 
+  onRegisterError?: (error: {
     isAlreadyRegistered?: boolean
     message?: string
     raw?: any
   }) => void
 
-  onCheckoutSuccess: (data: {   
+  onCheckoutSuccess: (data: {
     id: string
     hash: string
     total: string
@@ -956,12 +1133,13 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
 
   config?: {
     isCheckoutAlwaysButtonEnabled?: boolean
-    shouldHideTicketHolderSectionOnSingleTicket?: boolean 
+    shouldHideTicketHolderSectionOnSingleTicket?: boolean
   }
 />
 ```
 
 ### DataTypes
+
 ILoginSuccessData
 
 ```ts
@@ -990,14 +1168,16 @@ interface ILoginSuccessData {
 ```
 
 ### 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 |
+
+| 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
@@ -1069,7 +1249,7 @@ interface IBillingInfoViewStyles {
     }
     input?: IInputStyles
   }
-  
+
   checkboxStyles?: {
     container?: StyleProp<ViewStyle>
     content?: StyleProp<ViewStyle>
@@ -1089,10 +1269,10 @@ interface IBillingInfoViewStyles {
   customCheckbox?: ICheckboxStyles
 
   datePicker?: IDatePickerStyles
-  
+
   privacyPolicyLinkStyle?: StyleProp<TextStyle>
 
-  phoneInput?: {
+  phoneInputStyles?: {
     rootContainer?: StyleProp<ViewStyle>
     errorColor?: ColorValue
     country?: {
@@ -1114,6 +1294,7 @@ interface IBillingInfoViewStyles {
   privacyPolicyLinkStyle?: StyleProp<TextStyle>
 }
 ```
+
 ---
 
 ## Checkout UI
@@ -1197,15 +1378,16 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
   areLoadingIndicatorsEnabled?: boolean
 }
 ```
-| Property | Description |
-|----------|-------------|
-| 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.*
+| Property                    | Description                                                                     |
+| --------------------------- | ------------------------------------------------------------------------------- |
+| 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
 
@@ -1249,7 +1431,6 @@ Currently, Stripe card is not customizable. Please see the open issues in their
 
 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).
 
----
 ## Purchase Confirmation UI
 
 Import the component from the library
@@ -1294,17 +1475,20 @@ const sessionHandleRef = useRef<SessionHandleType>(null)
   }
 />
 ```
+
 ### 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  |
 
+| 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                                                                                              |
 
 ---
+
 ## My Orders UI
+
 If there is a valid session, there will appear a button to access `MyOrders` in the `Tickets` component.
 
 Import the component from the library.
@@ -1313,7 +1497,6 @@ Import the component from the library.
 import { MyOrders, SessionHandleType } from 'tf-checkout-react-native'
 ```
 
-
 ### Props
 
 ```ts
@@ -1428,7 +1611,9 @@ import { MyOrders, SessionHandleType } from 'tf-checkout-react-native'
   }
 }
 ```
+
 IMyOrdersData
+
 ```ts
 {
   events: {
@@ -1474,7 +1659,9 @@ IMyOrdersData
   }
 }
 ```
+
 IMyOrderDetailsData
+
 ```ts
 {
   header: {
@@ -1543,6 +1730,7 @@ IMyOrderDetailsData
 ```
 
 ### styles
+
 ```js
 {
   orderListItem?: {
@@ -1624,9 +1812,9 @@ import { MyOrderDetails, SessionHandleType } from 'tf-checkout-react-native'
     areActivityIndicatorsEnabled?: boolean
     areAlertsEnabled?: boolean
   }
-  onDownloadStatusChange?: (status?: 
-    'downloading' | 
-    'downloaded' | 
+  onDownloadStatusChange?: (status?:
+    'downloading' |
+    'downloaded' |
     'failed'
   ) => void
   downloadStatusIcons?: {
@@ -1764,7 +1952,6 @@ import { MyOrderDetails, SessionHandleType } from 'tf-checkout-react-native'
 
 Allows the user to resale the tickets they bought. They can decide wether sell it to a friend or to any other user.
 
-
 Import the component from the library.
 
 ```js
@@ -1873,7 +2060,9 @@ import { ResaleTickets, SessionHandleType } from 'tf-checkout-react-native'
 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'
 ```
@@ -1913,7 +2102,7 @@ Then add it to the render function.
     newPasswordLabel?: string
     confirmNewPasswordLabel?: string
   }
-  onResetPasswordSuccess?: (data: { 
+  onResetPasswordSuccess?: (data: {
     message: string
     status?: number
     }) => void
@@ -1927,12 +2116,12 @@ Then add it to the render function.
 }
 ```
 
-
 # Core Components
+
 **⚠️ Remember that you first need to set your configuration using the [setConfig](#set-your-configuration)
- function. ⚠️**
+function. ⚠️**
 
- ### Index
+### Index
 
 [TicketsCore](#ticketscore)
 
@@ -1951,13 +2140,14 @@ Then add it to the render function.
 [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: 
+It returns the `IFetchAccessTokenResponse` object:
 
 ```ts
 IFetchAccessTokenResponse {
@@ -1975,14 +2165,13 @@ IFetchAccessTokenResponse {
 }
 ```
 
-
 ### Example:
 
 Import the component from the library
 
 ```js
-import { 
-  TicketsCore 
+import {
+  TicketsCore
   TicketsCoreHandle // You can import the Handle to use it as type in the useRef hook
 } from 'tf-checkout-react-native'
 ```
@@ -1990,7 +2179,7 @@ import {
 Declare a reference to pass it to the component.
 
 ```js
-const ticketsCoreRef = useRef<TicketsCoreHandle>(null)
+const ticketsCoreRef = useRef < TicketsCoreHandle > null
 ```
 
 Then add it to the render function and assign the reference to the corresponding component.
@@ -2012,9 +2201,10 @@ const handleGetTickets = async () => {
 ---
 
 ## TicketsCore
+
 This is the initial component to show. It will retrieve the tickets, event, present My Orders and Logout buttons if the user is logged in, and will add the selected tickets to the cart.
 
-Exposes the following functions: 
+Exposes the following functions:
 
 `getTickets` Fetches the tickets from the event set in the config function. It receives a promoCode and referrerId parameters to apply to the tickets. PromoCode is higher priority than referrerId
 
@@ -2176,7 +2366,7 @@ Exposes the following functions:
 
   // Adds selected tickets to the cart.
   addToCart(
-    options: {  
+    options: {
       optionName: string
       ticketId: string
       quantity: number
@@ -2277,13 +2467,14 @@ Exposes the following functions:
         }
         relationships: any[]
         type: string
-      },  
+      },
       error?: IError>
   }>
 }
 ```
 
 ## MyOrderRequestFromType
+
 ```
 MyOrderRequestFromType =
   | 'upcoming_events'
@@ -2296,8 +2487,8 @@ MyOrderRequestFromType =
 Import the component from the library
 
 ```js
-import { 
-  TicketsCore 
+import {
+  TicketsCore
   TicketsCoreHandle // You can import the Handle to use it as type in the useRef hook
 } from 'tf-checkout-react-native'
 ```
@@ -2305,7 +2496,7 @@ import {
 Declare a reference to pass it to the component.
 
 ```js
-const ticketsCoreRef = useRef<TicketsCoreHandle>(null)
+const ticketsCoreRef = useRef < TicketsCoreHandle > null
 ```
 
 Then add it to the render function and assign the reference to the corresponding component.
@@ -2323,13 +2514,15 @@ 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.
 
+This component _must_ appear after getting the response from **getTickets()** and the property `isInWaitingList` is set to true.
+
+Exposes the following functions:
 
-Exposes the following functions: 
 ```tsx
 {
   addToWaitingList(
@@ -2354,14 +2547,16 @@ Exposes the following functions:
   refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 }
 ```
+
 **addToWaitingList** Receives params with the following properties:
+
 ```js
 firstName: string
-lastName: string 
+lastName: string
 email: string
 ```
 
-And returns a Promise with the following object: 
+And returns a Promise with the following object:
 
 ```js
 {
@@ -2382,8 +2577,8 @@ And returns a Promise with the following object:
 Import the component from the library
 
 ```js
-import { 
-  WaitingListCore 
+import {
+  WaitingListCore
   WaitingListCoreHandle // You can import the Handle to use as type it in the useRef hook
 } from 'tf-checkout-react-native'
 ```
@@ -2391,7 +2586,7 @@ import {
 Declare a reference to pass it to the component.
 
 ```js
-const waitingListCoreRef = useRef<WaitingListCoreHandle>(null)
+const waitingListCoreRef = useRef < WaitingListCoreHandle > null
 ```
 
 Then add it to the render function and assign the reference to the corresponding component.
@@ -2409,12 +2604,16 @@ const handleAddToWaitingList = async (params: IAddToWaitingListCoreParams) => {
   const res = await waitingListCoreRef.current.addToWaitingList(params)
 }
 ```
+
 ---
 
-## BillingCore
+## BillingCore ⚠️ Deprecated
+
+> This component is deprecated. Please migrate to hooks. See [Migration Guide](./MIGRATION.md).
+
 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.
 
-Exposes the following functions: 
+Exposes the following functions:
 
 `getCart` Fetches the current cart information, needed to know how many ticket holders data is needed.
 
@@ -2428,7 +2627,6 @@ Exposes the following functions:
 
 `checkoutOrder` Performs the checkout.
 
-
 ```ts
 {
   // Fetches the current cart information, needed to know how many ticket holders data is needed.
@@ -2536,25 +2734,28 @@ Exposes the following functions:
 }
 
 ```
+
 ---
 
-## CheckoutCore
+## CheckoutCore ⚠️ Deprecated
+
+> This component is deprecated. Please migrate to hooks. See [Migration Guide](./MIGRATION.md).
+
 Shows the event conditions, purchase details and process the payment and free registration to an event.
 
-You will need to install and use the [ReactNative Stripe SDK](https://github.com/stripe/stripe-react-native) (we recommend version 0.2.3). Follow their documentation to implement it. Our backend is already prepared to process the payments. 
+You will need to install and use the [ReactNative Stripe SDK](https://github.com/stripe/stripe-react-native) (we recommend version 0.2.3). Follow their documentation to implement it. Our backend is already prepared to process the payments.
 
-Remember that you will need the `publishableKey`. 
+Remember that you will need the `publishableKey`.
 
 After you collect the card information and call the `confirmPayment` function, you will need to call the `paymentSuccess` function to complete the payment.
 
-
 Exposes the following functions:
 
 `getEventConditions` Get event conditions for the current event.
 
 `getPurchaseOrderDetails` Get purchase order details for the current event.
 
-`getOrderReview`  Get order review for the current event.
+`getOrderReview` Get order review for the current event.
 
 `freeRegistration` Free registration to an event.
 
@@ -2562,7 +2763,6 @@ Exposes the following functions:
 
 `refreshAccessToken` Refreshes access token.
 
-
 ```ts
 // Get event conditions for the Event Id set on the setConfig.
 getEventConditions(): Promise<any>
@@ -2668,8 +2868,11 @@ paymentSuccess(orderHash: string): Promise<any>
 // Refresh access token.
 refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
 ```
+
 ---
+
 ## PurchaseConfirmationCore
+
 Shows the purchase confirmation information.
 
 It exposes the following functions:
@@ -2689,10 +2892,10 @@ getPurchaseConfirmation(
     }
     purchaseConfirmationData?: {
       conversionPixels?: any
-      currency: { 
-        currency: string; 
-        decimalPlaces: number; 
-        symbol: string 
+      currency: {
+        currency: string;
+        decimalPlaces: number;
+        symbol: string
       }
       customConfirmationPageText?: string
       customerId: string
@@ -2717,9 +2920,12 @@ 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. 
+
+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.
 
 Exposes the following functions:
 
@@ -2834,7 +3040,7 @@ getMyOrders(page: number, filter: string): Promise<{
         }
         relationships: any[]
         type: string
-      },  
+      },
       error?: IError>
 }>
 
@@ -2883,6 +3089,7 @@ getOrderDetails(orderId: string): Promise<{
 ```
 
 ## MyOrderRequestFromType
+
 ```
 MyOrderRequestFromType =
   | 'upcoming_events'
@@ -2893,12 +3100,15 @@ MyOrderRequestFromType =
 ```
 
 ---
+
 ## OrderDetailsCore
+
 Allows to re-sale the tickets or to remove them from the re-sale system.
 
 Import it from the library.
+
 ```ts
-import { OrderDetailsCore, OrderDetailsCoreHandle } from 'tf-checkout-react-native';
+import { OrderDetailsCore, OrderDetailsCoreHandle } from 'tf-checkout-react-native'
 ```
 
 Create a ref
@@ -2914,20 +3124,20 @@ Assign the ref to the wrapper component.
 ```
 
 Access the exposed function through the current value.
+
 ```ts
 await myOrderDetailsCoreRef.current.removeTicketFromResale(ticket.hash)
 ```
 
-
 ```ts
 resaleTicket(
-/*  
+/*
     formData.append('to', toWhom)
     formData.append('first_name', firstName)
     formData.append('last_name', lastName)
     formData.append('email', email)
     formData.append('confirm_email', emailConfirm)
-    formData.append('confirm', String(isTermsAgreed)) 
+    formData.append('confirm', String(isTermsAgreed))
 */
 
     data: FormData,
@@ -2960,8 +3170,11 @@ resaleTicket(
       }
   }>
 ```
+
 ---
+
 ## LoginCore
+
 Handles the login and logout process.
 
 Exposes the following functions:
@@ -3006,20 +3219,25 @@ login(fields?: {
 
 logout(): Promise<void>
 ```
+
 ---
+
 ## ResetPasswordCore
+
 Will allow the user to reset its password.
 
-Exposes the following function: 
+Exposes the following function:
 
 `postResetPassword` Sends the reset token and the new password values.
 
-postResetPassword parameters: 
+postResetPassword parameters:
+
 ```
   token: string,
   password: string,
   password_confirmation: string,
 ```
+
 postResetPassword returning data:
 
 ```ts
@@ -3028,7 +3246,7 @@ postResetPassword returning data:
     message: string
     status?: number
   }
-  error?: {  
+  error?: {
     code?: number
     message: string
     extraData?: any
@@ -3037,11 +3255,13 @@ postResetPassword returning data:
 ```
 
 ### Usage
+
 Import it from the library.
 
 ```ts
 import { ResetPasswordCore, ResetPasswordCoreHandle } from 'tf-checkout-react-native'
 ```
+
 Wrap your component with the Core component.
 
 ```xml
@@ -3052,44 +3272,48 @@ Wrap your component with the Core component.
 
 # Utils
 
-`deleteAllData` asynchronously deletes all the data stored in the local storage. Use this with caution, only in an edge case. 
+`deleteAllData` asynchronously deletes all the data stored in the local storage. Use this with caution, only in an edge case.
 
+# Changelog
 
+## Version 1.0.38
 
-# Changelog
-## Version 1.0.32
+- Add `CheckoutV2` – new recommended checkout component combining hooks and UI pieces.
+- Add `Custom Checkout with Hooks` example in docs.
+- Add `MIGRATION.md` – detailed migration guide for moving from Core components to hooks.
 
-- Add `referredId` property to Tickets component and getTickets method. This will apply special prices fo the passed `refferentId` property.
+- Documentation updated to reflect `CheckoutV2` as the default recommended approach.
+- `BillingCore` and `CheckoutCore` marked as **⚠️ Deprecated**.
 
+## Version 1.0.32
 
+- Add `referredId` property to Tickets component and getTickets method. This will apply special prices fo the passed `refferentId` property.
 
 ## Version 1.0.31
 
 - Add missing styles to LoginForm.
 
-
-
 ## Version 1.0.30
 
 - Show errors in Billing UI form fields.
-- Add config prop to Billing UI component, includes 2 configuration flags. 
+- Add config prop to Billing UI component, includes 2 configuration flags.
+
 ```
   config?: {
     isCheckoutAlwaysButtonEnabled?: boolean
-    shouldHideTicketHolderSectionOnSingleTicket?: boolean 
+    shouldHideTicketHolderSectionOnSingleTicket?: boolean
   }
 ```
 
 - Replacing `"rn-material-ui-textfield": "1.0.5"` library with `"rn-material-ui-textfield": "jorgtz/rn-material-ui-textfield"`, make sure to replace it in all the package.json files.
 
-
-
 ## Version 1.0.29
 
 - Update Stripe SDK to version 0.26.0.
-  - Minimum iOS Deployment version  = `13`.
-- Expose styles to customize Stripe Card Form: 
+  - Minimum iOS Deployment version = `13`.
+- Expose styles to customize Stripe Card Form:
   - cardStyle?: CardFormView.Styles
+
 ```
 {
     backgroundColor?: string;
@@ -3104,10 +3328,8 @@ Wrap your component with the Core component.
     fontFamily?: string;
 }
 ```
-  - cardContainer?: StyleProp<ViewStyle>
-
-
 
+- cardContainer?: StyleProp<ViewStyle>
 
 ## Version 1.0.28
 
@@ -3115,15 +3337,13 @@ Wrap your component with the Core component.
 - Add filter to `getMyOrders` request in `MyOrdersCore` component, to filter by time frame by passing the following string:
 
 ```ts
-'upcoming_events' | 'ongoing_and_upcoming_events' | 'ongoing_events' | 'past_events'
+;'upcoming_events' | 'ongoing_and_upcoming_events' | 'ongoing_events' | 'past_events'
 ```
 
 - Add more data to the `getMyOrders` success response.
 - Add more data to the `getOrderDetails` success response.
 - Add `ticketsSold` prop to Event's object in fetchEvent success data.
 
-
-
 ## Version 1.0.27
 
 - Make `EVENT_ID` optional in the `setConfig` function. An error will be returned when `EVENT_ID` is not set and trying to make a request that requires it.
@@ -3134,8 +3354,6 @@ Wrap your component with the Core component.
 
 - Add missing success data in `onFetchOrderDetailsSuccess` response.
 
-
-
 ## Version 1.0.26
 
 - Add the possibility to remove all of the following Billing/Street Address fields from free tickets:
@@ -3145,13 +3363,12 @@ Wrap your component with the Core component.
   - Post Code/Zip
   - Country
 
-- Update `addToCart` success response to include: 
-```  
+- Update `addToCart` success response to include:
+
+```
 isTicketFree?: boolean
 isPhoneHidden?: boolean
-  ```
-
-
+```
 
 ## Version 1.0.25
 
@@ -3169,8 +3386,6 @@ isPhoneHidden?: boolean
   - Export function `refreshAccessToken`
 - Add `reloadData` to re-fetch servers data in UI components.
 
-
-
 ## Version 1.0.24
 
 - Add **SingleSignOn** feature.
@@ -3186,28 +3401,19 @@ isPhoneHidden?: 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
 
-
-
 ## Version 1.0.22
 
 - Added cartTimer component, that will show the cart's remaining expiration time in the Billing screen.
-- setConfig not longer receives the `DOMAIN` prop, instead it receives the `CLIENT` 
+- setConfig not longer receives the `DOMAIN` prop, instead it receives the `CLIENT`
 - Added a three dot button to my orders to show the possible actions.
-
-
-
-
-
-