tf-checkout-react-native 1.0.37 → 1.0.40

package/src/containers/tickets/components/TicketListItem.tsx

@@ -0,0 +1,124 @@
+import _maxBy from 'lodash/maxBy'
+import React from 'react'
+import { Text, View } from 'react-native'
+
+import { Dropdown } from '../../../components'
+import { IDropdownItem } from '../../../components/dropdown/types'
+import { priceWithCurrency } from '../../../helpers/StringsHelper'
+import { CartListItemStyles as s } from './styles'
+import { ITicketListItemProps } from './types'
+
+const TicketListItem = ({
+  ticket,
+  ticketNumber,
+  onSelectTicketItem,
+  selectedTicket,
+  styles,
+  texts,
+}: ITicketListItemProps) => {
+  const soldOutText = texts?.soldOut || 'SOLD OUT'
+  const salesNotStartedText = texts?.salesNotStarted || 'Sales not started'
+  const salesEnded = texts?.salesEnded || 'Sales ended'
+  const feesIncludedText = texts?.inclFees || '(incl. Fees)'
+  const feesExcludedText = texts?.exclFees || '(excl. Fees)'
+  const freeText = texts?.free || 'Free'
+  const ticketText = texts?.ticket || 'Ticket'
+  const isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+  const isSalesClosed = !ticket.salesStarted || ticket.salesEnded
+  const customSoldOutMessage = texts?.soldOut || 'SOLD OUT'
+  const soldOutMessage = ticket.soldOutMessage
+    ? `${ticket.soldOutMessage}`.toUpperCase()
+    : customSoldOutMessage
+
+  const ticketsClosedMessage = !ticket.salesStarted ? salesNotStartedText : salesEnded
+
+  const getSelectOptions = (
+    maxCount: number = 10,
+    minCount: number = 1,
+    multiplier: number = 1
+  ) => {
+    const options = [{ label: '0', value: 0 }]
+    for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
+      options.push({ label: i.toString(), value: i })
+    }
+    return options
+  }
+
+  const dropdownOptions = getSelectOptions(
+    ticket.maxQuantity,
+    ticket.minQuantity,
+    ticket.multiplier
+  )
+
+  const handleOnSelectItem = (item: IDropdownItem) => {
+    onSelectTicketItem({ ...ticket, selectedOption: item })
+  }
+
+  const selectedOption: IDropdownItem =
+    selectedTicket && ticket.id === selectedTicket.id && selectedTicket.selectedOption
+      ? selectedTicket.selectedOption
+      : { label: '0', value: 0 }
+
+  const feesIncluded = ticket.feeIncluded ? feesIncludedText : feesExcludedText
+  const showOldPrice = ticket.price !== ticket.oldPrice
+  const isTicketFree = +ticket.price === 0
+  const ticketPrice = isSoldOut
+    ? soldOutText
+    : isTicketFree
+      ? freeText
+      : priceWithCurrency(ticket.price.toFixed(2).toString(), ticket.priceSymbol)
+
+  const maximumOption = _maxBy(dropdownOptions, (o) => o.value)?.value
+
+  let rightContent = <></>
+
+  if (ticket.soldOut || ticket.sold_out || !ticket.displayTicket) {
+    rightContent = <Text>{soldOutMessage}</Text>
+  }
+  if (ticket.displayTicket) {
+    rightContent = isSalesClosed ? (
+      <Text>{ticketsClosedMessage}</Text>
+    ) : maximumOption && maximumOption > 0 ? (
+      <Dropdown
+        items={dropdownOptions}
+        selectedOption={selectedOption}
+        onSelectItem={handleOnSelectItem}
+        styles={styles?.dropdown}
+      />
+    ) : (
+      <></>
+    )
+  }
+
+  return (
+    <View style={[s.container, styles?.container]}>
+      <View style={s.leftContainer}>
+        <Text style={[s.ticketNumber, styles?.ticketName]} numberOfLines={2}>
+          {ticket.displayName.toUpperCase() || `${ticketText} ${ticketNumber}`}
+        </Text>
+        {isSoldOut ? (
+          <View style={[s.soldOutContainer, styles?.soldOutContainer]}>
+            <Text style={[s.soldOut, styles?.soldOutText]}>{soldOutMessage}</Text>
+          </View>
+        ) : (
+          <>
+            <View style={styles?.pricesContainer}>
+              {showOldPrice && (
+                <Text style={[s.oldPrice, styles?.oldPrice]}>
+                  {priceWithCurrency(ticket.oldPrice?.toString(), ticket.priceSymbol)}
+                </Text>
+              )}
+              <Text style={[s.price, styles?.price]}>{ticketPrice}</Text>
+            </View>
+            <Text style={[s.tax, styles?.fees]}>{feesIncluded.toUpperCase()}</Text>
+          </>
+        )}
+      </View>
+      {!isSalesClosed && !isSoldOut && (
+        <View style={s.rightContainer}>{rightContent}</View>
+      )}
+    </View>
+  )
+}
+
+export default TicketListItem

package/src/containers/tickets/components/styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../../res'
+
+export const CartListItemStyles = StyleSheet.create({
+  container: {
+    width: '100%',
+    paddingVertical: 16,
+    flexDirection: 'row',
+  },
+  ticketNumber: {
+    fontWeight: '600',
+    fontSize: 16,
+    marginBottom: 4,
+    color: R.colors.primary,
+  },
+  price: {
+    fontWeight: '800',
+    fontSize: 18,
+    color: R.colors.primary,
+  },
+  soldOut: {
+    fontWeight: '800',
+    fontSize: 20,
+    color: R.colors.primary,
+  },
+  leftContainer: {
+    flex: 7,
+  },
+  rightContainer: {
+    flex: 3,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  tax: {
+    marginTop: 4,
+    fontWeight: '600',
+    color: R.colors.primary,
+  },
+  soldOutContainer: {
+    borderRadius: 2,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    marginTop: 8,
+    borderColor: R.colors.primary,
+  },
+  oldPrice: {
+    fontSize: 16,
+    color: R.colors.danger,
+    textDecorationLine: 'line-through',
+  },
+})

package/src/containers/tickets/components/types.ts

@@ -0,0 +1,47 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IDropdownStyles } from '../../../components/dropdown/types'
+import { ISelectedTicket, ITicket } from '../../../types'
+
+export interface ITicketListItemStyles {
+  container?: ViewStyle
+  ticketName?: TextStyle
+  price?: TextStyle
+  oldPrice?: TextStyle
+  fees?: TextStyle
+  soldOutText?: TextStyle
+  soldOutContainer?: ViewStyle
+  dropdown?: IDropdownStyles
+  pricesContainer?: StyleProp<ViewStyle>
+}
+
+export interface ITicketListItemTexts {
+  soldOut?: string
+  salesNotStarted?: string
+  salesEnded?: string
+  inclFees?: string
+  exclFees?: string
+  free?: string
+  ticket?: string
+}
+
+export interface ITicketListItemProps extends ITicket {
+  ticket: ISelectedTicket
+  ticketNumber: number
+  onSelectTicketItem: (selectedTicket: ISelectedTicket) => void
+  selectedTicket?: ISelectedTicket
+  styles?: ITicketListItemStyles
+  texts?: ITicketListItemTexts
+}
+
+//#region TicketGroupListHeader
+export interface ITicketGroupListHeaderStyles {
+  container?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+}
+
+export interface ITicketGroupListHeaderProps {
+  styles?: ITicketGroupListHeaderStyles
+  text?: string
+}
+//#endregion

package/src/containers/tickets/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    paddingVertical: 16,
+  },
+  headerText: {
+    fontSize: 22,
+    color: R.colors.primary,
+    fontWeight: '800',
+  },
+  headerTextBold: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: R.colors.primary,
+  },
+})

package/src/containers/tickets/types.ts

@@ -0,0 +1,158 @@
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+
+import { IEventData } from '../../api/types'
+import { IButtonStyles } from '../../components/button/types'
+import {
+  IEnterPasswordStyles,
+  IEnterPasswordTexts,
+} from '../../components/enterPassword/types'
+import { ILoadingStyles } from '../../components/loading/types'
+import { ILoggedInStyles, ILoggedInTexts } from '../../components/loggedIn/types'
+import { IPromoCodeStyles, IPromoCodeTexts } from '../../components/promoCode/types'
+import { IWaitingListStyles, IWaitingListTexts } from '../../components/waitingList/types'
+import { IGroupedTickets } from '../../core/TicketsCore/TicketsCoreTypes'
+import {
+  IEvent,
+  IOnFetchTicketsSuccess,
+  ISelectedTicket,
+  ITicket,
+  ITicketsResponseData,
+} from '../../types'
+import { IError } from '../../types/IError'
+import { ITicketListItemStyles, ITicketListItemTexts } from './components/types'
+
+export interface ITicketsViewProps {
+  isGettingTickets?: boolean
+  isBookingTickets?: boolean
+  isGettingEvent?: boolean
+  tickets: ITicket[]
+  groupedTickets: IGroupedTickets[]
+  areTicketsGroupsShown?: boolean
+  styles?: ITicketsViewStyles
+  onPressGetTickets: () => void
+  onPressApplyPromoCode: (promoCode: string) => void
+  promoCodeValidationMessage?: string
+  isPromoCodeValid?: boolean | number
+  onSelectTicketOption: (selectedTicket: ISelectedTicket) => void
+  selectedTicket?: ISelectedTicket
+  texts?: ITicketsViewTexts
+  event?: IEvent
+  isWaitingListVisible?: boolean
+  isGetTicketsButtonVisible?: boolean
+  isPromoEnabled?: boolean
+  isAccessCodeEnabled?: boolean
+  isUserLogged?: boolean
+  isCheckingCurrentSession?: boolean
+  onPressMyOrders: () => void
+  onPressLogout: () => void
+
+  areLoadingIndicatorsEnabled?: boolean
+  areAlertsEnabled?: boolean
+
+  // Callbacks for Waiting list
+  onAddToWaitingListSuccess?: () => void
+  onAddToWaitingListError?: (error: IError) => void
+  onLoadingChange?: (isLoading: boolean) => void
+  promoCodeCloseIcon?: ImageSourcePropType
+
+  // Event password protected
+  onPressSubmitEventPassword?: (password: string) => void
+  passwordProtectedEventData?: IPasswordProtectedEventData
+}
+
+export interface ITicketListStyles {
+  listContainer?: ViewStyle
+  item?: ITicketListItemStyles
+  sectionHeader?: {
+    container?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+  }
+}
+
+export interface ITicketsViewStyles {
+  rootContainer?: ViewStyle
+  container?: ViewStyle
+  title?: TextStyle
+  getTicketsButtonDisabled?: IButtonStyles
+  getTicketsButtonActive?: IButtonStyles
+  promoCode?: IPromoCodeStyles
+  ticketList?: ITicketListStyles
+  loading?: ILoadingStyles
+  waitingList?: IWaitingListStyles
+  loggedIn?: ILoggedInStyles
+  enterPassword?: IEnterPasswordStyles
+  showPasswordIcon?: StyleProp<ImageStyle>
+}
+
+export interface ITicketsViewTexts {
+  promoCode?: IPromoCodeTexts
+  getTicketsButton?: string
+  title?: string
+  item?: ITicketListItemTexts
+  loggedInTexts?: ILoggedInTexts
+  listItem?: ITicketListItemTexts
+  waitingList?: IWaitingListTexts
+  enterPassword?: IEnterPasswordTexts
+}
+
+export interface ITicketsConfig {
+  areActivityIndicatorsEnabled?: boolean
+  areAlertsEnabled?: boolean
+  areTicketsSortedBySoldOut?: boolean
+  areTicketsGrouped?: boolean
+}
+
+export interface ITicketsProps {
+  // Callbacks for when user taps on GET Tickets button
+  onAddToCartSuccess: (data: ITicketsResponseData) => void
+  onAddToCartError?: (error: IError) => void
+
+  // Callbacks for fetching the tickets
+  onFetchTicketsSuccess?: (data: IOnFetchTicketsSuccess) => void
+  onFetchTicketsError?: (error: IError) => void
+
+  // Callbacks for fetching the Event
+  onFetchEventError?: (error: IError) => void
+  onFetchEventSuccess?: (data: IEventData) => void
+
+  // Callbacks for fetching Password Protected Event
+  onUnlockPasswordProtectedEventError?: (error: IError) => void
+  onUnlockPasswordProtectedEventSuccess?: (data: IEventData) => void
+
+  // Callbacks for Waiting list
+  onAddToWaitingListSuccess?: () => void
+  onAddToWaitingListError?: (error: IError) => void
+
+  styles?: ITicketsViewStyles
+  texts?: ITicketsViewTexts
+
+  isPromoEnabled?: boolean
+  isAccessCodeEnabled?: boolean
+
+  referrerId?: string
+
+  onPressMyOrders: () => void
+  onPressLogout?: () => void
+
+  onLoadingChange?: (isLoading: boolean) => void
+  promoCodeCloseIcon?: ImageSourcePropType
+
+  config?: ITicketsConfig
+
+  isCheckingCurrentSession?: boolean
+
+  debugMode?: boolean
+}
+
+export interface IPasswordProtectedEventData {
+  isPasswordProtected?: boolean
+  message?: string
+  apiError?: string
+  isLoading?: boolean
+}

package/src/core/BillingCore/BillingCore.tsx

@@ -0,0 +1,129 @@
+/**
+ * @deprecated This component is deprecated and will be removed in a future release.
+ * Please use the hooks from 'src/features/checkout-v2/hooks' instead.
+ * See README.md in this directory for migration guide.
+ */
+import React, { useCallback, useEffect, useState } from 'react'
+import { forwardRef, useImperativeHandle } from 'react'
+
+import {
+  checkoutOrder,
+  fetchCart,
+  fetchCountries,
+  fetchStates,
+  fetchUserProfile,
+  registerNewUser,
+} from '../../api/ApiClient'
+import {
+  ICartResponse,
+  ICheckoutBody,
+  ICountriesResponse,
+  IFetchAccessTokenResponse,
+  IRegisterNewUserResponse,
+  IStatesResponse,
+  IUserProfileResponse,
+} from '../../api/types'
+import { refreshAccessToken as refreshAccessTokenAsync } from '../../helpers/RefreshAccessToken'
+import {
+  BillingCoreHandle,
+  IBillingCoreProps,
+  ICheckoutResponse,
+} from './BillingCoreTypes'
+import BackgroundTimer from 'react-native-background-timer'
+
+/**
+ * @deprecated Use the hooks from 'src/features/checkout-v2/hooks' instead
+ */
+const BillingCore = forwardRef<BillingCoreHandle, IBillingCoreProps>((props, ref) => {
+  const [secondsLeft, setSecondsLeft] = useState(420)
+  const [timerOn, setTimerOn] = useState(false)
+
+  const handleStopTimer = useCallback(() => {
+    BackgroundTimer.stop()
+    BackgroundTimer.stopBackgroundTimer()
+  }, [])
+
+  const handleStartTimer = useCallback(() => {
+    BackgroundTimer.runBackgroundTimer(() => {
+      setSecondsLeft((secs) => {
+        if (secs > 0) {
+          return secs - 1
+        } else {
+          return 0
+        }
+      })
+    }, 1000)
+  }, [])
+
+  const handleTimeIsUp = () => {
+    BackgroundTimer.stopBackgroundTimer()
+    props.onCartExpired?.()
+  }
+
+  useEffect(() => {
+    if (secondsLeft === 0) {
+      handleTimeIsUp()
+    }
+    props.onSecondsLeftChange?.(secondsLeft)
+  }, [secondsLeft])
+
+  useEffect(() => {
+    if (timerOn) {
+      handleStartTimer()
+    } else {
+      BackgroundTimer.stopBackgroundTimer()
+    }
+    return () => {
+      BackgroundTimer.stopBackgroundTimer()
+    }
+  }, [handleStartTimer, timerOn])
+
+  useImperativeHandle(ref, () => ({
+    async checkoutOrder(body: ICheckoutBody): Promise<ICheckoutResponse> {
+      const checkout = await checkoutOrder(body)
+      if (!checkout.error) {
+        BackgroundTimer.stopBackgroundTimer()
+      }
+      return checkout
+    },
+
+    async getCart(): Promise<ICartResponse> {
+      const cart = await fetchCart()
+
+      if (cart.cartData?.expiresAt) {
+        setSecondsLeft(cart.cartData.expiresAt)
+        setTimerOn(true)
+      }
+
+      return cart
+    },
+
+    async getCountries(): Promise<ICountriesResponse> {
+      return await fetchCountries()
+    },
+
+    async getStates(countryId: string): Promise<IStatesResponse> {
+      return await fetchStates(countryId)
+    },
+
+    async getUserProfile(): Promise<IUserProfileResponse> {
+      return await fetchUserProfile()
+    },
+
+    async registerNewUser(data: FormData): Promise<IRegisterNewUserResponse> {
+      return await registerNewUser(data)
+    },
+
+    async refreshAccessToken(refreshToken?: string): Promise<IFetchAccessTokenResponse> {
+      return await refreshAccessTokenAsync(refreshToken)
+    },
+
+    stopCartTimer() {
+      return handleStopTimer()
+    },
+  }))
+
+  return <>{props.children}</>
+})
+
+export default BillingCore

package/src/core/BillingCore/BillingCoreTypes.ts

@@ -0,0 +1,34 @@
+import {
+  ICartResponse,
+  ICheckoutBody,
+  ICountriesResponse,
+  IRegisterNewUserResponse,
+  IStatesResponse,
+  IUserProfileResponse,
+} from '../../api/types'
+import { IOnCheckoutSuccess } from '../../containers/billingInfo/types'
+import { IError } from '../../types'
+import { ICoreProps } from '../CoreProps'
+import { SessionCoreHandleType } from '../Session/SessionCoreTypes'
+
+export interface ICheckoutResponse {
+  error?: IError
+  data?: IOnCheckoutSuccess
+}
+
+export type BillingCoreHandleType = {
+  checkoutOrder(body: ICheckoutBody): Promise<ICheckoutResponse>
+  getCart(): Promise<ICartResponse>
+  getCountries(): Promise<ICountriesResponse>
+  getStates(countryId: string): Promise<IStatesResponse>
+  getUserProfile(): Promise<IUserProfileResponse>
+  registerNewUser(data: FormData): Promise<IRegisterNewUserResponse>
+  stopCartTimer(): void
+}
+
+export type BillingCoreHandle = BillingCoreHandleType & SessionCoreHandleType
+
+export interface IBillingCoreProps extends ICoreProps {
+  onCartExpired: () => void
+  onSecondsLeftChange?: (secondsLeft: number) => void
+}

package/src/core/BillingCore/README.md

@@ -0,0 +1,22 @@
+# BillingCore (Deprecated)
+
+> ⚠️ **DEPRECATED**: This component is deprecated and will be removed in a future release.
+
+## Migration Guide
+
+Please use the hooks directly from the package, which are all exported from the root.
+
+See the [Migration Guide](../MIGRATION.md) for detailed instructions on how to replace BillingCore functions with the new hooks-based implementation.
+
+## Function Replacements
+
+| BillingCore Function    | Replacement Hook                                       |
+| ----------------------- | ------------------------------------------------------ |
+| `getCart()`             | `useCart()` from `tf-checkout-react-native`            |
+| `getCountries()`        | `useCountries()` from `tf-checkout-react-native`       |
+| `getStates(countryId)`  | `useStates(countryId)` from `tf-checkout-react-native` |
+| `getUserProfile()`      | `useUserProfile()` from `tf-checkout-react-native`     |
+| `registerNewUser(data)` | `useRegisterUser()` from `tf-checkout-react-native`    |
+| `checkoutOrder(body)`   | `useCheckout()` from `tf-checkout-react-native`        |
+
+For a comprehensive checkout experience, use `useCheckoutFlow()` from `tf-checkout-react-native`.