tf-checkout-react-native 1.0.20 → 1.0.22

package/README.md

@@ -95,27 +95,28 @@ Set appropriate style in your styles.xml file.
 
 Import the function from the library.
 
-```js
+```ts
 import { setConfig } from 'tf-checkout-react-native'
 ```
 
 Use it in your initial useEffect function:
 
-```js
+```ts
 useEffect(() => {
   setConfig({
     EVENT_ID: '4344',
-    DOMAIN: 'https://yourdomain.mx',
+    CLIENT: 'ttf',
+    ENV: 'STAG'
   })
 }, [])
 ```
 
 `setConfig` set your event's configuration, with the following options:
 
-````js
+````ts
 {
   EVENT_ID: string,
-  DOMAIN?: string,
+  CLIENT?: string,
   ENV?: 'PROD' | 'DEV' | 'STAG',
   CLIENT_ID?: string,
   CLIENT_SECRET?: string,
@@ -128,7 +129,7 @@ useEffect(() => {
 | Property | Description |
 | -------- | ----------- |
 | EVENT_ID | Specify the event's ID. |
-| DOMAIN | Specify your domains name example: `https://google.com` this is important to maintain cart session active and prevent it from expiring when user login in the BillingInfo component. |
+| 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. |
@@ -182,9 +183,13 @@ Will show the purchased orders for the logged user.
 
 Will show the details for the selected Order, it also allows the user to download the Ticket PDF.
 
+### Tickets Resale
+
+Let the user to resale their tickets. They can choose between selling them to a friend or to any other user.
+
 # Component styling
 ### Button
-```js
+```ts
 interface IButtonStyles {
   container?: StyleProp<ViewStyle>
   button?: StyleProp<ViewStyle>
@@ -192,7 +197,7 @@ interface IButtonStyles {
 }
 ```
 ### Input
-```js
+```ts
 interface IInputStyles {
   color?: ColorValue
   container?: StyleProp<ViewStyle>
@@ -203,6 +208,22 @@ interface IInputStyles {
   errorColor?: ColorValue
 }
 ```
+
+### Checkbox
+
+```ts
+interface ICheckboxStyles {
+  container?: StyleProp<ViewStyle>
+  content?: StyleProp<ViewStyle>
+  indicator?: StyleProp<ViewStyle>
+  indicatorDisabled?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+  box?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+}
+```
+
+
 # Exported components
 Depending on your needs, you can use the UI Components or the Core Components.
 
@@ -211,17 +232,35 @@ Depending on your needs, you can use the UI Components or the Core Components.
 [Core Components](#core-components) are wrappers that don't include any UI neither validation logics, they only act as a Middleware to retrieve and send data from the server and return it to your implementation components. They are useful when your design cannot be achieved by the UI components. You will need to use references to access their exposed functions.
 
 # UI Components
-## Login
+
+[Login](#login-ui)
+
+[Tickets](#tickets-ui)
+
+[BillingInfo](#billinginfo-ui)
+
+[Checkout](#checkout-ui)
+
+[Purchase Confirmation](#purchase-confirmation-ui)
+
+[My Orders](#my-orders-ui)
+
+[My Order Details](#myorder-details-ui)
+
+[Resale](#resale-tickets-ui)
+
+---
+## Login UI
 
 Import the component from the library
 
-```js
+```tsx
 import { Login } from 'tf-checkout-react-native'
 ```
 
 Then add it to the render function.
 
-```js
+```tsx
 <Login
   onLoginSuccessful: (userProfile: IUserProfile, accessToken: string) => void
   onLoginError?: (error: IError) => void
@@ -339,7 +378,7 @@ interface ILoginViewStyles {
 
 ```
 ---
-## Tickets
+## Tickets UI 
 
 Import the component from the library
 
@@ -550,7 +589,7 @@ You can then call the `BillingInfo` component and pass them as props in the `car
 }
 ```
 ---
-## BillingInfo
+## BillingInfo UI
 
 Import the component from the library
 
@@ -679,6 +718,9 @@ interface IBillingInfoViewTexts {
       label?: string
       customError?: string
     }
+    cartTimer?: {
+      message?: string
+    }
   }
 }
 ```
@@ -733,11 +775,20 @@ interface IBillingInfoViewStyles {
     }
     input?: IInputStyles
   }
+
+  cartTimer?:  {
+    rootContainer?: StyleProp<ViewStyle>
+    contentContainer?: StyleProp<ViewStyle>
+    textsContainer?: StyleProp<ViewStyle>
+    icon?: StyleProp<ImageStyle>
+    message?: StyleProp<TextStyle>
+    time?: StyleProp<TextStyle>
+  }
 }
 ```
 ---
 
-## Checkout
+## Checkout UI
 
 Import the component from the library
 
@@ -799,6 +850,9 @@ Add it to the render function.
       price?: string
       total?: string
     }
+    cartTimer?: {
+      message?: string
+    }
   }
 
   styles?: ICheckoutStyles
@@ -846,6 +900,14 @@ Add it to the render function.
     button?: IButtonStyles
     buttonDisabled?: IButtonStyles
   }
+  cartTimer?: {
+    rootContainer?: StyleProp<ViewStyle>
+    contentContainer?: StyleProp<ViewStyle>
+    textsContainer?: StyleProp<ViewStyle>
+    icon?: StyleProp<ImageStyle>
+    message?: StyleProp<TextStyle>
+    time?: StyleProp<TextStyle>
+  }
 }
 ```
 
@@ -859,7 +921,7 @@ 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
+## Purchase Confirmation UI
 
 Import the component from the library
 
@@ -910,7 +972,7 @@ Add it to the render function.
 
 
 ---
-## My Orders
+## 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.
@@ -1033,7 +1095,7 @@ import { MyOrders } from 'tf-checkout-react-native'
 
 ---
 
-## MyOrder Details
+## MyOrder Details UI
 
 When user selects an order from the `MyOrders` component, will show it details.
 
@@ -1045,9 +1107,21 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
 
 ### Props
 
-```js
+```tsx
 {
   data: IMyOrderDetailsData
+
+  // Used to navigate to the Resale Tickets screen
+  onPressResaleTicket: (
+    ticket: IMyOrderDetailsTicket,
+    isTicketTypeActive: boolean
+  ) => void
+
+  onRemoveTicketFromResaleSuccess: (message: string) => void
+
+  onRemoveTicketFromResaleError?: (error: IError) => void
+
+
   config?: {
     areActivityIndicatorsEnabled?: boolean
     areAlertsEnabled?: boolean
@@ -1063,6 +1137,16 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
   }
   onAndroidWritePermission?: (permission?: boolean) => void
   onLinkCopied?: (copied?: boolean) => void
+
+  moreButtonIcon?: StyleProp<ImageStyle>
+
+  ticketActionsIcons?: {
+    downloadPdf?: ImageSourcePropType
+    sell?: ImageSourcePropType
+    removeFromSale?: ImageSourcePropType
+    refund?: ImageSourcePropType
+  }
+
   styles?: {
     rootContainer?: StyleProp<ViewStyle>
     header?: {
@@ -1099,13 +1183,35 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
       rowValue?: StyleProp<TextStyle>
     }
     ticketItem?: {
-      container?: StyleProp<ViewStyle>
-      innerLeftContainer?: StyleProp<ViewStyle>
-      innerRightContainer?: StyleProp<ViewStyle>
+      rootContainer?: StyleProp<ViewStyle>
+      leftContent?: StyleProp<ViewStyle>
+      rightContent?: StyleProp<ViewStyle>
       rowPlaceholder?: StyleProp<TextStyle>
       rowValue?: StyleProp<TextStyle>
+      downloadButton?: IButtonStyles
+      moreButton?: StyleProp<ViewStyle>
+      moreButtonIcon?: StyleProp<ImageStyle>
+    }
+    downloadButton?: {
+      container?: StyleProp<ViewStyle>
+      button?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
     }
-    downloadButton?: IButtonStyles
+    bottomSheetModal?: {
+      rootContainer?: StyleProp<ViewStyle>
+      headerContainer?: StyleProp<ViewStyle>
+      content?: StyleProp<ViewStyle>
+      title?: StyleProp<TextStyle>
+      closeButton?: StyleProp<ViewStyle>
+      closeButtonIcon?: StyleProp<ImageStyle>
+      contentContainer?: StyleProp<ViewStyle>
+    }
+  ticketActions?: {
+    rootScrollViewContainer?: StyleProp<ViewStyle>
+    buttonContainer?: StyleProp<ViewStyle>
+    buttonContent?: StyleProp<ViewStyle>
+    icon?: StyleProp<ImageStyle>
+    text?: StyleProp<TextStyle>
   }
   texts?: {
     title?: string
@@ -1123,12 +1229,13 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
       total?: string
     }
     ticketItem?: {
-      title?: string
-      ticketId?: string
-      ticketType?: string
-      ticketHolder?: string
-      status?: string
-      download?: string
+      ticketType: string
+      holderName: string
+      ticketId: string
+      status: string
+      download: string
+      sellTicket: string
+      removeTicketFromResale: string
     }
     downloadNotification?: {
       successMessage?: string
@@ -1138,10 +1245,133 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
       copy?: string
       copied?: string
     }
+    sellTicket?: string
+    removeTicketFromResale?: string
+    ticketsTitle?: string
+
+    bottomSheetModal?:  {
+      title?: string
+    }
+    ticketActions?: {
+      downloadPdf?: string
+      sell?: string
+      removeFromSale?: string
+      refund?: string
+    }
   }
 }
 ```
 
+## Resale Tickets UI
+
+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
+import { ResaleTickets } from 'tf-checkout-react-native'
+```
+
+### Props
+
+```ts
+{
+  ticket: {
+    currency: string
+    description: string
+    descriptionPlain?: string
+    eventName: string
+    hash: string
+    holderEmail?: string
+    holderName: string
+    holderPhone?: string
+    isOnSale: boolean
+    isSellable: boolean
+    pdfLink: string
+    qrData: string
+    resaleFeeAmount: number
+    status: string
+    ticketType: string
+  }
+  styles?: {
+    rootContainer?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    terms?: IResaleTermsStyles
+    resaleTicketsButton?: IButtonStyles
+    resaleTicketsButtonDisabled?: IButtonStyles
+    resaleTicketsButtonLoading?: IButtonStyles
+    ticketOrderDetails?: ITicketOrderDetailsStyles
+    ticketBuyerForm?: ITicketBuyerFormStyles
+    termsCheckbox?: ICheckboxStyles
+  }
+  onResaleTicketsSuccess: (
+    resaleTicketData: {
+      message: string
+    },
+    ticket: {
+      currency: string
+      description: string
+      descriptionPlain?: string
+      eventName: string
+      hash: string
+      holderEmail?: string
+      holderName: string
+      holderPhone?: string
+      isOnSale: boolean
+      isSellable: boolean
+      pdfLink: string
+      qrData: string
+      resaleFeeAmount: number
+      status: string
+      ticketType: string
+    }
+  ) => void
+  onResaleTicketsError?: (error: {
+    code?: number
+    message: string
+    extraData?: any
+  }) => void
+  config?: {
+    areAlertsEnabled?: boolean
+    areActivityIndicatorsEnabled?: boolean
+  }
+  texts?: {
+    title?: string
+    orderDetails?: {
+      title?: string
+      eventName?: string
+      orderedBy?: string
+      orderId?: string
+    }
+    sellToWhom?: {
+      title?: string
+      friend?: string
+      anyone?: string
+    }
+    friendForm?: {
+      firstName?: string
+      lastName?: string
+      email?: string
+      emailConfirm?: string
+    }
+    terms?: {
+      title?: string
+      paragraph1?: string
+      paragraph2_1?: string
+      paragraph2_2?: string
+      paragraph3_1?: string
+      paragraph3_2?: string
+    }
+    agree?: string
+    resaleTicketsButton?: string
+  }
+}
+```
+
+
+
+
 # Core Components
 **⚠️ Remember that you first need to set your configuration using the [setConfig](#set-your-configuration)
  function. ⚠️**
@@ -1160,6 +1390,8 @@ import { MyOrderDetails } from 'tf-checkout-react-native'
 
 [MyOrdersCore](#myorderscore)
 
+[OrderDetailsCore](#orderdetailscore)
+
 [LoginCore](#logincore)
  
 ---
@@ -1175,6 +1407,8 @@ Exposes the following functions:
 
 `addToCart` Adds the selected tickets to the cart.
 
+`postReferralVisit` Posts a referral visit to the server.
+
 ```js
 {
   // Fetches the tickets from the event set in the config function. It receives a promoCode parameter to apply to the tickets.
@@ -1326,6 +1560,18 @@ Exposes the following functions:
       minimumAge?: number
       isNameRequired?: boolean
     }
+
+    postReferralVisit(referralId: string): Promise<
+    postReferralError?: {
+      code?: number
+      message: string
+      extraData?: any
+    }
+    postReferralData?: {
+    message: string
+    status: number
+  }
+    >
   }>
 }
 ```
@@ -1817,6 +2063,74 @@ getOrderDetails(orderId: string): Promise<{
 }>
 ```
 
+## 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';
+```
+
+Create a ref
+
+```ts
+const myOrderDetailsCoreRef = useRef<OrderDetailsCoreHandle>(null)
+```
+
+Assign the ref to the wrapper component.
+
+```tsx
+ <OrderDetailsCore ref={myOrderDetailsCoreRef}>
+```
+
+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)) 
+*/
+
+    data: FormData,
+    orderHash: string
+  ): Promise<{
+    {
+      resaleTicketError?: {
+        code?: number
+        message: string
+        extraData?: any
+      }
+      resaleTicketData?: {
+        message: string
+      }
+    }
+  }>
+```
+
+```ts
+  removeTicketFromResale(
+    orderHash: string
+  ): Promise<{
+      removeTicketFromResaleError?: {
+        code?: number
+        message: string
+        extraData?: any
+      }
+      removeTicketFromResaleData?: {
+        message: string
+      }
+  }>
+```
+
 ## LoginCore
 Handles the login and logout process.
 
@@ -1861,3 +2175,12 @@ logout(): Promise<void>
 
 `deleteAllData` asynchronously deletes all the data stored in the local storage. Use this with caution, only in an edge case. 
 
+# Changelog
+## 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` 
+- Added a three dot button to my orders to show the possible actions.
+
+
+
+

package/lib/api/ApiClient.d.ts

@@ -1,7 +1,7 @@
 import { IWaitingListFields } from '../components/waitingList/types';
 import { IError } from '../types';
 import { IAddToCartResponse } from '../types/ITicket';
-import { IAddToCartParams, IAddToWaitingListResponse, IAuthorizeResponse, ICartResponse, ICheckoutBody, ICheckoutResponse, IClientRequest, ICountriesResponse, IEventResponse, IFetchTicketsResponse, IFreeRegistrationResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IPurchaseConfirmationResponse, IRegisterNewUserResponse, IStatesResponse, IUserProfileResponse } from './types';
+import { IAddToCartParams, IAddToWaitingListResponse, IAuthorizeResponse, ICartResponse, ICheckoutBody, ICheckoutResponse, IClientRequest, ICloseSessionResponse, ICountriesResponse, IEventResponse, IFetchTicketsResponse, IFreeRegistrationResponse, IMyOrderDetailsResponse, IMyOrdersResponse, IOrderReviewResponse, IPostReferralResponse, IPurchaseConfirmationResponse, IRegisterNewUserResponse, IRemoveTicketFromResaleResponse, IResaleTicketResponse, IStatesResponse, IUserProfileResponse } from './types';
 export declare const Client: IClientRequest;
 export declare const setCustomHeader: (response: any) => void;
 export declare const setAccessTokenHandler: (accessToken: string) => Promise<void>;
@@ -18,6 +18,7 @@ export declare const fetchOrderDetails: (orderId: string) => Promise<IMyOrderDet
 export declare const fetchTickets: (promoCode?: string | undefined) => Promise<IFetchTicketsResponse>;
 export declare const addToCart: (data: IAddToCartParams) => Promise<IAddToCartResponse>;
 export declare const fetchEvent: () => Promise<IEventResponse>;
+export declare const postReferralVisit: (referralId: string) => Promise<IPostReferralResponse>;
 export declare const fetchCountries: () => Promise<ICountriesResponse>;
 export declare const fetchStates: (countryId: string) => Promise<IStatesResponse>;
 export declare const fetchCart: () => Promise<ICartResponse>;
@@ -33,3 +34,6 @@ export declare const postOnPaymentSuccess: (orderHash: string) => Promise<{
 }>;
 export declare const postOnFreeRegistration: (orderHash: string) => Promise<IFreeRegistrationResponse>;
 export declare const fetchPurchaseConfirmation: (orderHash: string) => Promise<IPurchaseConfirmationResponse>;
+export declare const resaleTicket: (data: FormData, orderHash: string) => Promise<IResaleTicketResponse>;
+export declare const removeTicketFromResale: (orderHash: string) => Promise<IRemoveTicketFromResaleResponse>;
+export declare const closeSession: () => Promise<ICloseSessionResponse>;