tf-checkout-react-native 1.0.45 → 2.0.0-beta.0

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

@@ -1,124 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,129 +0,0 @@
-/**
- * @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

@@ -1,34 +0,0 @@
-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

@@ -1,22 +0,0 @@
-# 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`.