tf-checkout-react-native 1.0.37 → 1.0.40

package/src/core/ResetPasswordCore/ResetPasswordCoreTypes.ts

@@ -0,0 +1,5 @@
+import { IResetPasswordRequestData, IResetPasswordResponse } from '../../api/types'
+
+export type ResetPasswordCoreHandle = {
+  postResetPassword(data: IResetPasswordRequestData): Promise<IResetPasswordResponse>
+}

package/src/core/Session/SessionCoreTypes.ts

@@ -0,0 +1,10 @@
+import { IFetchAccessTokenResponse } from '../../api/types'
+
+export type SessionHandleType = {
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
+  reloadData(): void
+}
+
+export type SessionCoreHandleType = {
+  refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse>
+}

package/src/core/Session/SessionHandle.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { forwardRef, useImperativeHandle } from 'react'
+
+import { IFetchAccessTokenResponse } from '../../api/types'
+import { refreshAccessToken as refreshAccessTokenAsync } from '../../helpers/RefreshAccessToken'
+import { ICoreProps } from '../CoreProps'
+import { SessionHandleType } from './SessionCoreTypes'
+
+const SessionHandle = forwardRef<SessionHandleType, ICoreProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    async refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse> {
+      return await refreshAccessTokenAsync(refreshToken)
+    },
+
+    async reloadData() {
+      return null
+    },
+  }))
+
+  return <>{props.children}</>
+})
+
+export default SessionHandle

package/src/core/TicketsCore/TicketsCore.tsx

@@ -0,0 +1,216 @@
+import { jwtDecode } from 'jwt-decode'
+import _find from 'lodash/find'
+import _groupBy from 'lodash/groupBy'
+import _map from 'lodash/map'
+import _mapKeys from 'lodash/mapKeys'
+import _sortBy from 'lodash/sortBy'
+import React, { forwardRef, useImperativeHandle } from 'react'
+
+import {
+  addToCart,
+  closeSession,
+  fetchAccountTickets,
+  fetchEvent,
+  fetchTickets,
+  postReferralVisit,
+  unlockPasswordProtectedEvent,
+} from '../../api/ApiClient'
+import {
+  IAddToCartParams,
+  ICloseSessionResponse,
+  IEventResponse,
+  IFetchAccessTokenResponse,
+  IMyOrdersRequestParams,
+  IPostReferralResponse,
+} from '../../api/types'
+import { Config } from '../../helpers/Config'
+import { deleteData, getData, LocalStorageKeys } from '../../helpers/LocalStorage'
+import { refreshAccessToken as refreshAccessTokenAsync } from '../../helpers/RefreshAccessToken'
+import { IAccountTicketsResponse, IAddToCartResponse, ITicket } from '../../types'
+import { ICoreProps } from '../CoreProps'
+import {
+  IBookTicketsOptions,
+  IGetTicketsOptions,
+  IGetTicketsPayload,
+  IGroupedTickets,
+  TicketsCoreHandle,
+} from './TicketsCoreTypes'
+
+const TicketsCore = forwardRef<TicketsCoreHandle, ICoreProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    async getTickets({
+      promoCode,
+      areTicketsSortedBySoldOut,
+      areTicketsGrouped,
+      referredId,
+    }: IGetTicketsOptions): Promise<IGetTicketsPayload> {
+      const groupTickets = (tickets: ITicket[]) => {
+        // Create an array of tickets with the GroupName set
+        const ticketsWithGroupName = _map(tickets, (ticket) => {
+          return {
+            ...ticket,
+            groupName: ticket.groupName || '',
+          }
+        })
+        const groupedTickets = _groupBy(ticketsWithGroupName, 'groupName')
+        const ticketsSections: IGroupedTickets[] = []
+        _mapKeys(groupedTickets, (val, key) => {
+          ticketsSections.push({
+            title: key,
+            data: val,
+          })
+        })
+
+        return ticketsSections
+      }
+      // PromoCode higher priority than ReferredId
+
+      const ticketsResponse = await fetchTickets({
+        promoCode: promoCode,
+        referredId: referredId,
+      })
+
+      if (ticketsResponse.error || !ticketsResponse.tickets) {
+        return ticketsResponse
+      }
+
+      const sortedTickets = areTicketsSortedBySoldOut
+        ? _sortBy(_sortBy(ticketsResponse.tickets, 'sortOrder'), 'soldOut')
+        : _sortBy(ticketsResponse.tickets, 'sortOrder')
+
+      const areGroupsShown = !!_find(sortedTickets, (ticket) => ticket.groupName)
+
+      if (!areTicketsSortedBySoldOut) {
+        if (!areTicketsGrouped) {
+          return {
+            ...ticketsResponse,
+            tickets: sortedTickets,
+            areGroupsShown: false,
+          }
+        }
+        if (areGroupsShown) {
+          return {
+            ...ticketsResponse,
+            tickets: groupTickets(sortedTickets),
+            areGroupsShown: areGroupsShown,
+          }
+        } else {
+          return {
+            ...ticketsResponse,
+            tickets: sortedTickets,
+            areGroupsShown: areGroupsShown,
+          }
+        }
+      } else {
+        // Sort tickets by sold out
+        if (!areTicketsGrouped) {
+          return {
+            ...ticketsResponse,
+            tickets: sortedTickets,
+            areGroupsShown: false,
+          }
+        } else {
+          if (areGroupsShown) {
+            return {
+              ...ticketsResponse,
+              tickets: groupTickets(sortedTickets),
+              areGroupsShown: areGroupsShown,
+            }
+          }
+          return {
+            ...ticketsResponse,
+            tickets: sortedTickets,
+            areGroupsShown: areGroupsShown,
+          }
+        }
+      }
+    },
+
+    async getEvent(): Promise<IEventResponse> {
+      return await fetchEvent()
+    },
+
+    async unlockPasswordProtectedEvent(password: string): Promise<IEventResponse> {
+      return await unlockPasswordProtectedEvent(password)
+    },
+
+    async addToCart({
+      quantity,
+      optionName,
+      ticketId,
+      price,
+    }: IBookTicketsOptions): Promise<IAddToCartResponse> {
+      if (!Config.EVENT_ID) {
+        return {
+          error: {
+            message: 'Event ID is not configured',
+          },
+        }
+      }
+      const parsedEventId =
+        typeof Config.EVENT_ID === 'string'
+          ? parseInt(Config.EVENT_ID, 10)
+          : Config.EVENT_ID
+
+      const data: IAddToCartParams = {
+        attributes: {
+          alternative_view_id: null,
+          product_cart_quantity: quantity,
+          product_options: {
+            [optionName]: ticketId,
+          },
+          product_id: parsedEventId,
+          ticket_types: {
+            [ticketId]: {
+              product_options: {
+                [optionName]: ticketId,
+                ticket_price: price,
+              },
+              quantity: quantity,
+            },
+          },
+        },
+      }
+      return await addToCart(data)
+    },
+
+    async getIsUserLoggedIn(): Promise<boolean> {
+      const token = await getData(LocalStorageKeys.ACCESS_TOKEN)
+
+      if (!token) {
+        return false
+      }
+
+      const decodedToken = jwtDecode<{ exp: number }>(token)
+      if (decodedToken && decodedToken.exp < Date.now() / 1000) {
+        await deleteData(LocalStorageKeys.ACCESS_TOKEN)
+        await deleteData(LocalStorageKeys.USER_DATA)
+        return false
+      }
+
+      return true
+    },
+
+    async logout(): Promise<ICloseSessionResponse> {
+      return await closeSession()
+    },
+
+    async postReferralVisit(referralId: string): Promise<IPostReferralResponse> {
+      return await postReferralVisit(referralId)
+    },
+
+    async refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse> {
+      return await refreshAccessTokenAsync(refreshToken)
+    },
+
+    async getAccountTickets(
+      params: IMyOrdersRequestParams
+    ): Promise<IAccountTicketsResponse> {
+      return await fetchAccountTickets(params)
+    },
+  }))
+
+  return <>{props.children}</>
+})
+
+export default TicketsCore

package/src/core/TicketsCore/TicketsCoreTypes.ts

@@ -0,0 +1,52 @@
+import {
+  ICloseSessionResponse,
+  IEventResponse,
+  IMyOrdersRequestParams,
+  IPostReferralResponse,
+  IPromoCodeResponse,
+} from '../../api/types'
+import { IAccountTicketsResponse, IAddToCartResponse, IError, ITicket } from '../../types'
+import { SessionCoreHandleType } from '../Session/SessionCoreTypes'
+
+export interface IBookTicketsOptions {
+  optionName: string
+  ticketId: string
+  quantity: number
+  price: number
+}
+
+export interface IGetTicketsOptions {
+  areTicketsSortedBySoldOut?: boolean
+  areTicketsGrouped?: boolean
+  promoCode?: string
+  referredId?: string
+}
+
+export interface IGroupedTickets {
+  title: string
+  data: ITicket[]
+}
+
+export type TicketsType = ITicket[] | IGroupedTickets[]
+
+export interface IGetTicketsPayload {
+  areGroupsShown?: boolean
+  tickets?: TicketsType
+  error?: IError
+  promoCodeResult?: IPromoCodeResponse
+  isInWaitingList?: boolean
+  isAccessCodeRequired?: boolean
+}
+
+export type TicketsCoreHandleType = {
+  getTickets(options?: IGetTicketsOptions): Promise<IGetTicketsPayload>
+  getEvent(): Promise<IEventResponse>
+  addToCart(options: IBookTicketsOptions): Promise<IAddToCartResponse>
+  getIsUserLoggedIn(): Promise<boolean>
+  logout(): Promise<ICloseSessionResponse>
+  postReferralVisit(referralId: string): Promise<IPostReferralResponse>
+  unlockPasswordProtectedEvent(password: string): Promise<IEventResponse>
+  getAccountTickets(params: IMyOrdersRequestParams): Promise<IAccountTicketsResponse>
+}
+
+export type TicketsCoreHandle = TicketsCoreHandleType & SessionCoreHandleType

package/src/core/WaitingListCore/WaitingListCore.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+
+import { addToWaitingList } from '../../api/ApiClient'
+import { IAddToWaitingListResponse, IFetchAccessTokenResponse } from '../../api/types'
+import { IWaitingListFields } from '../../components/waitingList/types'
+import { refreshAccessToken as refreshAccessTokenAsync } from '../../helpers/RefreshAccessToken'
+import { ICoreProps } from '../CoreProps'
+import {
+  IAddToWaitingListCoreParams,
+  WaitingListCoreHandle,
+} from './WaitingListCoreTypes'
+
+const WaitingListCore = forwardRef<WaitingListCoreHandle, ICoreProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    async addToWaitingList(
+      params: IAddToWaitingListCoreParams
+    ): Promise<IAddToWaitingListResponse> {
+      const fields: IWaitingListFields = {
+        ticketTypeId: '',
+        quantity: '',
+        ...params,
+      }
+
+      return await addToWaitingList(fields)
+    },
+
+    async refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse> {
+      return await refreshAccessTokenAsync(refreshToken)
+    },
+  }))
+
+  return <>{props.children}</>
+})
+
+export default WaitingListCore

package/src/core/WaitingListCore/WaitingListCoreTypes.ts

@@ -0,0 +1,16 @@
+import { IAddToWaitingListResponse } from '../../api/types'
+import { SessionCoreHandleType } from '../Session/SessionCoreTypes'
+
+export interface IAddToWaitingListCoreParams {
+  firstName: string
+  lastName: string
+  email: string
+}
+
+export type WaitingListCoreHandleType = {
+  addToWaitingList(
+    params: IAddToWaitingListCoreParams
+  ): Promise<IAddToWaitingListResponse>
+}
+
+export type WaitingListCoreHandle = WaitingListCoreHandleType & SessionCoreHandleType

package/src/core/index.ts

@@ -0,0 +1,20 @@
+export { default as BillingCore } from './BillingCore/BillingCore'
+export { BillingCoreHandle } from './BillingCore/BillingCoreTypes'
+export { default as CheckoutCore } from './CheckoutCore/CheckoutCore'
+export { CheckoutCoreHandle } from './CheckoutCore/CheckoutCoreTypes'
+export { default as LoginCore } from './LoginCore/LoginCore'
+export { LoginCoreHandle } from './LoginCore/LoginCoreTypes'
+export { default as MyOrdersCore } from './MyOrdersCore/MyOrdersCore'
+export { MyOrdersCoreHandle } from './MyOrdersCore/MyOrdersCoreTypes'
+export { default as OrderDetailsCore } from './OrderDetailsCore/OrderDetailsCore'
+export { OrderDetailsCoreHandle } from './OrderDetailsCore/OrderDetailsCoreTypes'
+export { default as PurchaseConfirmationCore } from './PurchaseConfirmationCore/PurchaseConfirmationCore'
+export { PurchaseConfirmationCoreHandle } from './PurchaseConfirmationCore/PurchaseConfirmationCoreTypes'
+export { default as ResetPasswordCore } from './ResetPasswordCore/ResetPasswordCore'
+export { ResetPasswordCoreHandle } from './ResetPasswordCore/ResetPasswordCoreTypes'
+export { SessionCoreHandleType, SessionHandleType } from './Session/SessionCoreTypes'
+export { default as SessionHandle } from './Session/SessionHandle'
+export { default as TicketsCore } from './TicketsCore/TicketsCore'
+export { TicketsCoreHandle } from './TicketsCore/TicketsCoreTypes'
+export { default as WaitingListCore } from './WaitingListCore/WaitingListCore'
+export { WaitingListCoreHandle } from './WaitingListCore/WaitingListCoreTypes'

package/src/features/auth/api-hooks.ts

@@ -0,0 +1,61 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+import { useCallback, useEffect, useState } from 'react'
+
+import { ApiResponse } from '../../api/api.types'
+import { Client } from '../../api/ApiClient'
+import { QueryOpts } from '../../common/query.types'
+import { isStoredTokenValid } from '../../helpers/LocalStorage'
+import { CustomerProfileResponse, IRegisterUserResponse } from './types'
+
+/*
+ * Hook to register new user
+ */
+export const useRegisterUser = () => {
+  return useMutation<ApiResponse<IRegisterUserResponse>, AxiosError, FormData>({
+    mutationFn: (userData) =>
+      Client.post<ApiResponse<IRegisterUserResponse>>(
+        'v1/oauth/register-rn',
+        userData
+      ).then((response) => response.data),
+  })
+}
+
+/**
+ * Hook to fetch user profile
+ */
+export const useUserProfile = (
+  options?: QueryOpts<ApiResponse<CustomerProfileResponse>, AxiosError>
+) => {
+  const queryClient = useQueryClient()
+  const [enabled, setEnabled] = useState(false)
+
+  useEffect(() => {
+    isStoredTokenValid().then((isValid) => setEnabled(isValid))
+  }, [])
+
+  const invalidate = useCallback(async () => {
+    const isValid = await isStoredTokenValid()
+    setEnabled(isValid)
+    queryClient.invalidateQueries({ queryKey: ['userProfile'] })
+
+    if (!isValid) {
+      queryClient.cancelQueries({ queryKey: ['userProfile'] })
+      queryClient.removeQueries({ queryKey: ['userProfile'] })
+      queryClient.setQueryData(['userProfile'], undefined)
+    }
+  }, [queryClient])
+
+  const query = useQuery<ApiResponse<CustomerProfileResponse>, AxiosError>({
+    queryKey: ['userProfile'],
+    queryFn: () =>
+      Client.get<ApiResponse<CustomerProfileResponse>>(`customer/profile/`).then(
+        (response) => response.data
+      ),
+    retry: false,
+    enabled,
+    ...options,
+  })
+
+  return { ...query, invalidate }
+}

package/src/features/auth/types.ts

@@ -0,0 +1,54 @@
+export interface IRegisterUserResponse {
+  attributes: IAuthAttributes
+}
+
+export interface IAuthUserData {
+  first_name: string
+  last_name: string
+  email: string
+  date_of_birth: string | null
+  phone: string | null
+}
+
+export interface IAuthAttributes {
+  access_token: string
+  refresh_token: string
+  token_type: string
+  scope: string
+  user_profile: IAuthUserData
+}
+
+/**
+ * Customer profile related types
+ */
+export interface TicketHolder {
+  firstName: string
+  lastName: string
+  phone: string | null
+  email: string
+}
+
+export interface CustomerProfileResponse {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  phone: string | null
+  streetAddress: string
+  zipCode: string
+  countryId: string
+  company: string | null
+  stateId: string
+  city: string
+  username: string
+  screenName: string | null
+  bio: string | null
+  shortBio: string | null
+  region: string | null
+  image: string | null
+  recommendedEvents: any[]
+  rnRoles: any[]
+  hasDashboardAccess: boolean
+  ticketHolders: TicketHolder[]
+  dateOfBirth: string | null
+}

package/src/features/auth/utils.ts

@@ -0,0 +1,27 @@
+import { setAccessTokenHandler } from '../../api/ApiClient'
+import { LocalStorageKeys, storeData } from '../../helpers/LocalStorage'
+import { IAuthAttributes } from './types'
+
+// Helper to store authentication tokens
+export const storeAuthTokens = async (attributes: IAuthAttributes): Promise<void> => {
+  const accessToken = attributes.access_token
+  const refreshToken = attributes.refresh_token
+  const tokenType = attributes.token_type
+  const scope = attributes.scope
+
+  if (!accessToken) return
+
+  await setAccessTokenHandler(accessToken)
+
+  if (refreshToken) {
+    await storeData(LocalStorageKeys.REFRESH_TOKEN, refreshToken)
+  }
+
+  if (tokenType) {
+    await storeData(LocalStorageKeys.TOKEN_TYPE, tokenType)
+  }
+
+  if (scope) {
+    await storeData(LocalStorageKeys.AUTH_SCOPE, scope)
+  }
+}

package/src/features/checkout-v2/components/AddonsContainer.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback } from 'react'
+import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native'
+
+import { IDropdownMaterialStyles } from '../../../components/dropdownMaterial/types'
+import { AddonItem } from '../types'
+import { getFieldType, priceWithCurrency } from '../utils'
+import { CheckoutFormProps, CheckoutFormValues } from '../form/types'
+import { FormikField, FormikFieldComponentStyles } from '../../form'
+import { DropdownMaterial } from '../../../components'
+
+export interface AddonsContainerStyles {
+  container?: StyleProp<ViewStyle>
+  title?: StyleProp<TextStyle>
+  addonRow?: StyleProp<ViewStyle>
+  addonList?: StyleProp<ViewStyle>
+  addonItem?: StyleProp<ViewStyle>
+  addonInfo?: StyleProp<ViewStyle>
+  addonName?: StyleProp<TextStyle>
+  addonPrice?: StyleProp<TextStyle>
+  addonPriceWithFees?: StyleProp<TextStyle>
+
+  addonDescription?: StyleProp<TextStyle>
+  addonSelectContainer?: StyleProp<ViewStyle>
+  dropdownMaterial?: IDropdownMaterialStyles
+  fieldComponentStyles?: FormikFieldComponentStyles
+}
+
+interface AddonsContainerProps {
+  addons: CheckoutFormValues['addons']
+  availableAddons: AddonItem[]
+  onAddonChange: (addonId: string, quantity: number) => void
+  currency?: string
+  styles?: AddonsContainerStyles
+  texts?: {
+    title?: string
+    quantityLabel?: string
+    priceWithFeesSuffix?: string
+  }
+  addonCustomFields?: CheckoutFormProps['addonCustomFields']
+}
+
+const AddonsContainer: React.FC<AddonsContainerProps> = ({
+  addons = {},
+  availableAddons = [],
+  onAddonChange,
+  currency,
+  styles: customStyles,
+  texts,
+  addonCustomFields,
+}) => {
+  // Generate quantity options for the dropdown
+  const generateAddonQuantityOptions = useCallback((addon: AddonItem['attributes']) => {
+    const options = []
+    // Check different possible locations for max quantity
+    const maxQty = addon.maxQuantity || '1'
+    const maxQtyNum = parseInt(maxQty, 10)
+
+    for (let i = 0; i <= maxQtyNum; i++) {
+      options.push({
+        value: i.toString(),
+        label: i.toString(),
+      })
+    }
+
+    return options
+  }, [])
+
+  // Don't render if no addons available
+  if (!availableAddons || availableAddons.length === 0) {
+    return null
+  }
+
+  return (
+    <View style={[customStyles?.container]}>
+      <Text style={[customStyles?.title]}>{texts?.title || 'Available Add-ons'}</Text>
+
+      <View style={[customStyles?.addonList]}>
+        {availableAddons.map((addon) => {
+          // Extract addon data from the API structure
+          const addonData = addon.attributes
+          const addonId = addon.id || addonData.id
+
+          // Get price (could be in different locations based on API structure)
+          const priceWithFees = addonData.price || 0
+          const addonCurrency = addonData.currency || currency
+          const isAddonFree = Number(priceWithFees) === 0
+
+          const basePriceFormatted = isAddonFree
+            ? 'FREE'
+            : priceWithCurrency((priceWithFees / 100).toString(), addonCurrency)
+
+          return (
+            <View key={addonId} style={[customStyles?.addonItem]}>
+              <View style={[customStyles?.addonRow]}>
+                <View style={[customStyles?.addonInfo]}>
+                  <Text style={[customStyles?.addonName]}>
+                    {addonData.name || 'Add-on'}
+                  </Text>
+                  <Text style={[customStyles?.addonPrice]}>
+                    {basePriceFormatted}
+                    {!isAddonFree && (
+                      <Text style={[customStyles?.addonPriceWithFees]}>
+                        {texts?.priceWithFeesSuffix || ' (with fees)'}
+                      </Text>
+                    )}
+                  </Text>
+                  {addonData.description && (
+                    <Text style={[customStyles?.addonDescription]}>
+                      {addonData.description}
+                    </Text>
+                  )}
+                </View>
+                <View style={[customStyles?.addonSelectContainer]}>
+                  <DropdownMaterial
+                    items={generateAddonQuantityOptions(addonData)}
+                    onSelectItem={(item) => {
+                      onAddonChange(
+                        addonId.toString(),
+                        parseInt(item.value.toString(), 10)
+                      )
+                    }}
+                    selectedOption={{
+                      value: (addons[addonId]?.quantity || 0).toString(),
+                      label: (addons[addonId]?.quantity || 0).toString(),
+                    }}
+                    materialInputProps={{
+                      label: texts?.quantityLabel || 'Qty',
+                    }}
+                    styles={customStyles?.fieldComponentStyles?.select}
+                  />
+                </View>
+              </View>
+              {(addons[addonId]?.quantity ?? 0) > 0 &&
+                addonCustomFields.map((field) => (
+                  <FormikField
+                    key={`${addonId}-${field.name}`}
+                    field={{
+                      name: `addons.${addonId}.customFields.${field.name}`,
+                      type: getFieldType(field.type),
+                      label: field.label,
+                      required: field.required,
+                      placeholder: field.description || `Enter ${field.label}`,
+                      options: field.options?.map((o) => ({
+                        value: o.value,
+                        label: o.name,
+                      })),
+                    }}
+                    styles={customStyles?.fieldComponentStyles}
+                  />
+                ))}
+            </View>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+export default AddonsContainer