tf-checkout-react-native 1.0.37 → 1.0.40

package/src/containers/myOrderDetails/types.ts

@@ -0,0 +1,173 @@
+import { ColorValue, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import {
+  IMyOrderDetailsData,
+  IMyOrderDetailsItem,
+  IMyOrderDetailsTicket,
+} from '../../api/types'
+import {
+  IBottomSheetModalStyles,
+  IBottomSheetModalTexts,
+} from '../../components/bottomSheetModal/BottomSheetModalTypes'
+import { IButtonStyles } from '../../components/button/types'
+import { IError } from '../../types'
+import { INotificationIcons } from './components/Notification'
+import {
+  ITicketActionIcons,
+  ITicketActionsStyles,
+  ITicketActionTexts,
+  TicketActionType,
+} from './components/TicketActions/TicketActionsTypes'
+import { IOnPressTicketDownload } from './components/TicketListItem/TicketListItem'
+import {
+  ITicketListItemStyles,
+  ITicketListItemTexts,
+} from './components/TicketListItem/TicketListItemTypes'
+
+export interface IMyOrdersDetailsConfig {
+  areActivityIndicatorsEnabled?: boolean
+  areAlertsEnabled?: boolean
+}
+
+export interface IMyOrderDetailsProps {
+  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?: IMyOrdersDetailsConfig
+  onDownloadStatusChange?: (status?: DownloadStatus) => void
+  downloadStatusIcons?: INotificationIcons
+  onAndroidWritePermission?: (permission?: boolean) => void
+  onLinkCopied?: (copied?: boolean) => void
+
+  moreButtonIcon?: StyleProp<ImageStyle>
+
+  styles?: IMyOrderDetailsStyles
+  texts?: IMyOrderDetailsTexts
+
+  ticketActionsIcons?: ITicketActionIcons
+}
+
+export type DownloadStatus = 'downloading' | 'downloaded' | 'failed'
+
+export interface IMyOrderDetailsViewProps {
+  data: IMyOrderDetailsData
+
+  config?: IMyOrdersDetailsConfig
+
+  isLinkCopied?: boolean
+  onPressCopyLink: () => void
+  onPressTicketDownload: (payload: IOnPressTicketDownload) => void
+
+  // Used to navigate to the Resale Tickets screen
+  onPressResaleTicket: (ticket: IMyOrderDetailsTicket) => void
+  onPressRemoveTicketFromResale: (ticket: IMyOrderDetailsTicket) => void
+
+  downloadStatus?: DownloadStatus
+  isLoading: boolean
+
+  downloadStatusIcons?: INotificationIcons
+
+  styles?: IMyOrderDetailsStyles
+  texts?: IMyOrderDetailsTexts
+
+  moreButtonIcon?: StyleProp<ImageStyle>
+  onTicketSelection: (ticket?: IMyOrderDetailsTicket) => void
+  selectedTicket?: IMyOrderDetailsTicket
+  onActionSelected: (action: TicketActionType) => void
+
+  ticketActionsIcons?: ITicketActionIcons
+
+  bottomSheetModalRef?: any
+}
+
+export interface IOrderDetailsSectionData {
+  id: string
+  item: IMyOrderDetailsItem
+}
+
+export interface IOrderDetailsSectionTickets {
+  id: string
+  item: IMyOrderDetailsTicket
+}
+
+export interface IMyOrderDetailsTexts {
+  title?: string
+  subTitle?: string
+  referralLink?: string
+  referral?: {
+    soFar?: string
+    tickets?: string
+  }
+  listItem?: {
+    title?: string
+    ticketType?: string
+    price?: string
+    quantity?: string
+    total?: string
+  }
+  ticketItem?: ITicketListItemTexts
+  downloadNotification?: {
+    successMessage?: string
+    errorMessage?: string
+  }
+  copyText?: {
+    copy?: string
+    copied?: string
+  }
+  sellTicket?: string
+  removeTicketFromResale?: string
+  ticketsTitle?: string
+
+  bottomSheetModal?: IBottomSheetModalTexts
+  ticketActions?: ITicketActionTexts
+}
+
+export interface IMyOrderDetailsStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  header?: {
+    container?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    subTitle?: StyleProp<TextStyle>
+
+    shareLink?: {
+      container?: StyleProp<ViewStyle>
+      text?: StyleProp<TextStyle>
+      link?: StyleProp<TextStyle>
+      copyContainer?: StyleProp<ViewStyle>
+      copyText?: StyleProp<TextStyle>
+      copyIcon?: StyleProp<ImageStyle>
+      copyIconTint?: ColorValue
+      copyIconTintActive?: ColorValue
+      message?: StyleProp<TextStyle>
+      referrals?: StyleProp<TextStyle>
+      referralValue?: StyleProp<TextStyle>
+    }
+  }
+  section0Footer?: {
+    container?: StyleProp<ViewStyle>
+    label?: StyleProp<TextStyle>
+    value?: StyleProp<TextStyle>
+  }
+  sectionHeader?: StyleProp<TextStyle>
+
+  listItem?: {
+    container?: StyleProp<ViewStyle>
+    innerLeftContainer?: StyleProp<ViewStyle>
+    innerRightContainer?: StyleProp<ViewStyle>
+    rowPlaceholder?: StyleProp<TextStyle>
+    rowValue?: StyleProp<TextStyle>
+  }
+  ticketItem?: ITicketListItemStyles
+  downloadButton?: IButtonStyles
+
+  bottomSheetModal?: IBottomSheetModalStyles
+  ticketActions?: ITicketActionsStyles
+}

package/src/containers/myOrders/MyOrders.tsx

@@ -0,0 +1,340 @@
+import _map from 'lodash/map'
+import _sortBy from 'lodash/sortBy'
+import _uniqBy from 'lodash/uniqBy'
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { Alert } from 'react-native'
+
+import {
+  IFetchAccessTokenResponse,
+  IMyOrdersData,
+  IMyOrdersOrder,
+  IMyOrdersRequestParams,
+  MyOrderRequestFromType,
+} from '../../api/types'
+import { IDropdownItem } from '../../components/dropdown/types'
+import { MyOrdersCore, MyOrdersCoreHandle, SessionHandle } from '../../core'
+import { SessionHandleType } from '../../core/Session/SessionCoreTypes'
+import { IError } from '../../types'
+import MyOrdersView from './MyOrdersView'
+import { IMyOrdersProps } from './types'
+import { logger } from '../../utils/Logger'
+
+const MyOrders = forwardRef<SessionHandleType, IMyOrdersProps>(
+  (
+    {
+      onSelectOrder,
+      onFetchOrderDetailsError,
+      onFetchMyOrdersError,
+      onFetchMyOrdersSuccess,
+      onFetchOrderDetailsSuccess,
+      onLoadingChange,
+      styles,
+      texts,
+      config,
+    },
+    ref
+  ) => {
+    //#region State
+    const [isLoading, setIsLoading] = useState(true)
+    const [isRefreshing, setIsRefreshing] = useState(false)
+    const [isGettingEventDetails, setIsGettingEventDetails] = useState(false)
+    const [myEvents, setMyEvents] = useState<IDropdownItem[]>([])
+    const [selectedEvent, setSelectedEvent] = useState<IDropdownItem>({
+      label: texts?.selectEventPlaceholder || 'Select event',
+      value: '',
+    })
+
+    const [selectedTimeFilter, setSelectedTimeFilter] = useState<IDropdownItem>({
+      label: texts?.selectTimeFilterPlaceholder || 'Select time filter',
+      value: '',
+    })
+    const [myOrders, setMyOrders] = useState<IMyOrdersOrder[]>([])
+    //#endregion
+
+    const timeFilters: IDropdownItem[] = [
+      {
+        label: texts?.timeFilters?.upcoming || 'Upcoming events',
+        value: 'upcoming_events',
+      },
+      {
+        label: texts?.timeFilters?.ongoingAndUpcoming || 'Ongoing and upcoming events',
+        value: 'ongoing_and_upcoming_events',
+      },
+      {
+        label: texts?.timeFilters?.ongoing || 'Ongoing events',
+        value: 'ongoing_events',
+      },
+      {
+        label: texts?.timeFilters?.past || 'Past events',
+        value: 'past_events',
+      },
+    ]
+
+    //#region Refs
+    const currentPage = useRef(1)
+    const myOrdersCoreRef = useRef<MyOrdersCoreHandle>(null)
+    const sessionHandleRef = useRef<SessionHandleType>(null)
+    //#endregion
+
+    const showAlert = (text: string) => {
+      if (config?.areAlertsEnabled) {
+        Alert.alert('', text)
+      }
+    }
+
+    const isMyOrdersCoreRefReady = (): boolean => {
+      if (!myOrdersCoreRef.current) {
+        onFetchMyOrdersError?.({
+          message: 'MyOrdersCore is not initialized',
+        })
+        showAlert('MyOrdersCore is not initialized')
+        return false
+      }
+
+      return true
+    }
+
+    //#region Fetch data
+    const getOrdersAsync = async (): Promise<undefined | IMyOrdersData> => {
+      if (!isMyOrdersCoreRefReady()) {
+        return
+      }
+
+      setIsLoading(true)
+      const validSelectedEvent = selectedEvent.value === '' ? null : selectedEvent
+
+      const myOrdersRequestParams: IMyOrdersRequestParams = {
+        limit: 20,
+        page: currentPage.current,
+        filter:
+          validSelectedEvent?.value.toString() === 'none'
+            ? ''
+            : validSelectedEvent?.value.toString(),
+        from:
+          selectedTimeFilter.value === 'none'
+            ? ''
+            : (selectedTimeFilter.value as MyOrderRequestFromType),
+      }
+
+      const { myOrdersData, myOrdersError } =
+        await myOrdersCoreRef.current!.getMyOrders(myOrdersRequestParams)
+
+      setIsLoading(false)
+
+      if (myOrdersError) {
+        onFetchMyOrdersError?.(myOrdersError)
+        showAlert(myOrdersError.message)
+        return undefined
+      }
+
+      if (!myOrdersData) {
+        const altError: IError = {
+          message: 'My orders returned no data',
+        }
+        onFetchMyOrdersError?.(altError)
+        showAlert(altError.message)
+        return undefined
+      }
+
+      onFetchMyOrdersSuccess?.(myOrdersData)
+
+      const events = _sortBy(
+        _map(myOrdersData.events, (item) => {
+          return {
+            label: item.event_name,
+            value: item.url_name,
+          }
+        }),
+        'value'
+      )
+
+      setMyEvents(events)
+
+      return myOrdersData
+    }
+
+    const getOrders = async () => {
+      const fetchedOrders = await getOrdersAsync()
+      setMyOrders(fetchedOrders?.orders ?? [])
+    }
+
+    const getMoreOrders = async () => {
+      const fetchedOrders = await getOrdersAsync()
+      const uniqOrders = _uniqBy(
+        [...myOrders, ...(fetchedOrders?.orders ?? [])],
+        (item) => item.id
+      )
+      setMyOrders(uniqOrders)
+    }
+    //#endregion Fetch data
+
+    //#region Imperative Handler
+    useImperativeHandle(ref, () => ({
+      async refreshAccessToken(refreshToken: string): Promise<IFetchAccessTokenResponse> {
+        logger.debug('MyOrders', 'refreshAccessToken', { refreshToken })
+        if (!sessionHandleRef.current) {
+          logger.debug('MyOrders', 'refreshAccessToken', {
+            message: 'Session Handle ref is not initialized',
+          })
+          return {
+            accessTokenError: {
+              message: 'Session Handle ref is not initialized',
+            },
+          }
+        }
+
+        const { accessTokenError, accessTokenData } =
+          await sessionHandleRef.current!.refreshAccessToken(refreshToken)
+        logger.debug('MyOrders', 'refreshAccessToken', {
+          accessTokenError,
+          accessTokenData,
+        })
+        if (!accessTokenError && accessTokenData?.accessToken) {
+          logger.debug('MyOrders', 'refreshAccessToken', {
+            message: 'Access token refreshed successfully',
+          })
+          await getOrders()
+        }
+        return {
+          accessTokenData,
+          accessTokenError,
+        }
+      },
+
+      async reloadData() {
+        logger.debug('MyOrders', 'reloadData')
+        await getOrders()
+      },
+    }))
+    //#endregion Imperative Handler
+
+    //#region Handlers
+    const handleOnRefresh = async () => {
+      setIsRefreshing(true)
+      await getOrders()
+      setIsRefreshing(false)
+    }
+
+    const handleOnLoadingChange = useCallback(
+      (loading: boolean) => {
+        onLoadingChange?.(loading)
+      },
+      [onLoadingChange]
+    )
+
+    const handleOnChangeTimeFilter = (item: IDropdownItem) => {
+      setMyOrders([])
+      setSelectedEvent({
+        label: texts?.selectEventPlaceholder || 'Select event',
+        value: '',
+      })
+
+      if (item.value !== selectedTimeFilter.value) {
+        currentPage.current = 1
+        setSelectedTimeFilter(item)
+      }
+    }
+
+    const handleOnChangeEvent = (event: IDropdownItem) => {
+      setMyOrders([])
+
+      if (event.value !== selectedEvent.value || event.value === '') {
+        currentPage.current = 1
+        setSelectedEvent(event)
+      }
+    }
+
+    const handleOnFetchMoreOrders = () => {
+      if (myOrders.length < 8) {
+        return
+      }
+      if (!isLoading) {
+        currentPage.current = currentPage.current + 1
+        getMoreOrders()
+      }
+    }
+
+    const handleOnSelectOrder = async (order: IMyOrdersOrder) => {
+      if (!isMyOrdersCoreRefReady()) {
+        return
+      }
+
+      setIsGettingEventDetails(true)
+
+      const { orderDetailsData, orderDetailsError } =
+        await myOrdersCoreRef.current!.getOrderDetails(order.id)
+
+      setIsGettingEventDetails(false)
+
+      if ((!orderDetailsData || orderDetailsError) && onFetchOrderDetailsError) {
+        showAlert(orderDetailsError?.message ?? 'Error fetching order details')
+        return onFetchOrderDetailsError(
+          orderDetailsError || {
+            message: 'Order details returned no data',
+          }
+        )
+      }
+
+      if (orderDetailsData) {
+        onFetchOrderDetailsSuccess?.(orderDetailsData)
+        onSelectOrder(orderDetailsData)
+      }
+    }
+    //#endregion
+
+    //#region useEffect
+    useEffect(() => {
+      handleOnLoadingChange(isLoading || isGettingEventDetails)
+    }, [handleOnLoadingChange, isLoading, isGettingEventDetails])
+
+    useEffect(() => {
+      const _fetchMyOrders = async () => {
+        await getOrders()
+      }
+      _fetchMyOrders()
+    }, [])
+
+    useEffect(() => {
+      if (selectedEvent.value !== '' || selectedTimeFilter.value !== '') {
+        getOrders()
+      }
+    }, [selectedEvent, selectedTimeFilter])
+    //#endregion useEffect
+
+    //#region Return
+    return (
+      <MyOrdersCore ref={myOrdersCoreRef}>
+        <SessionHandle ref={sessionHandleRef}>
+          <MyOrdersView
+            myEvents={myEvents}
+            selectedEvent={selectedEvent}
+            onChangeEvent={handleOnChangeEvent}
+            myOrders={myOrders}
+            onSelectOrder={handleOnSelectOrder}
+            onRefresh={handleOnRefresh}
+            isLoading={isLoading}
+            isGettingEventDetails={isGettingEventDetails}
+            styles={styles}
+            config={config}
+            onFetchMoreOrders={handleOnFetchMoreOrders}
+            texts={texts}
+            timeFilters={timeFilters}
+            selectedTimeFilter={selectedTimeFilter}
+            onChangeTimeFilter={handleOnChangeTimeFilter}
+            isRefreshing={isRefreshing}
+          />
+        </SessionHandle>
+      </MyOrdersCore>
+    )
+    //#endregion Return
+  }
+)
+
+export default MyOrders

package/src/containers/myOrders/MyOrdersView.tsx

@@ -0,0 +1,182 @@
+import React, { FC, useCallback, useMemo, useRef } from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  RefreshControl,
+  SafeAreaView,
+  StyleProp,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+
+import { IMyOrdersOrder } from '../../api/types'
+import { Dropdown, Loading } from '../../components'
+import { IDropdownStyles } from '../../components/dropdown/types'
+import R from '../../res'
+import OrderListItem from './components/OrderListItem'
+import { MyOrdersViewStyles as s } from './styles'
+import { IMyOrdersViewProps } from './types'
+
+const MyOrdersView: FC<IMyOrdersViewProps> = ({
+  myEvents,
+  onChangeEvent,
+  selectedEvent,
+  myOrders,
+  onSelectOrder,
+  styles,
+  isLoading,
+  onRefresh,
+  isGettingEventDetails,
+  config,
+  onFetchMoreOrders,
+  texts,
+  onChangeTimeFilter,
+  timeFilters,
+  selectedTimeFilter,
+  isRefreshing,
+}) => {
+  const onEndReachedCalledDuringMomentum = useRef(false)
+  //#region Handlers
+  const handleOnSelectOrder = (order: IMyOrdersOrder) => {
+    if (onSelectOrder) {
+      onSelectOrder(order)
+    }
+  }
+
+  const handleOnReachEnd = () => {
+    if (!onEndReachedCalledDuringMomentum.current) {
+      onFetchMoreOrders()
+      onEndReachedCalledDuringMomentum.current = true
+    }
+  }
+
+  const handleOnMomentumScrollBegin = () => {
+    onEndReachedCalledDuringMomentum.current = false
+  }
+  //#endregion Handlers
+
+  //#region Renders
+  const renderOrderListItem = useCallback(
+    ({ item }: { item: any }) => (
+      <OrderListItem
+        order={item}
+        onSelectOrder={handleOnSelectOrder}
+        styles={styles?.orderListItem}
+      />
+    ),
+
+    [handleOnSelectOrder]
+  )
+
+  const renderRefreshControl = (
+    <RefreshControl
+      enabled={false}
+      tintColor={styles?.refreshControlColor || R.colors.primary}
+      refreshing={!!isLoading}
+      onRefresh={onRefresh}
+    />
+  )
+
+  const dropdownStyles = useMemo<IDropdownStyles>(
+    () => ({
+      container: s.eventsDropdownContainer,
+      button: s.eventsDropdownButton,
+      label: {
+        maxWidth: '100%',
+        ...styles?.eventsDropdown?.label,
+      },
+      icon: {},
+      dialog: {},
+      flatListContainer: {},
+    }),
+    []
+  )
+
+  const onClearSelectedEvent = () =>
+    onChangeEvent({
+      label: texts?.selectEventPlaceholder || 'Select event',
+      value: 'none',
+    })
+
+  const onClearSelectedTimeFilter = () =>
+    onChangeTimeFilter({
+      label: texts?.selectTimeFilterPlaceholder || 'Select time filter',
+      value: 'none',
+    })
+
+  const eventsDropdown = (
+    <View style={[s.eventsContainer, styles?.eventsContainer]}>
+      <View style={[s.eventsSelectionContainer, styles?.eventsSelectionContainer]}>
+        <Dropdown
+          items={myEvents}
+          onSelectItem={onChangeEvent}
+          selectedOption={selectedEvent}
+          styles={dropdownStyles}
+        />
+        <TouchableOpacity onPress={onClearSelectedEvent}>
+          <Image
+            source={R.icons.error}
+            style={[s.clearEventSelectionIcon, styles?.clearEventSelectionIcon]}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+
+  const timeFilterDropdown = (
+    <View style={[s.eventsContainer, styles?.timeFilters?.container]}>
+      <View style={[s.eventsSelectionContainer, styles?.timeFilters?.selectionContainer]}>
+        <Dropdown
+          items={timeFilters}
+          onSelectItem={onChangeTimeFilter}
+          selectedOption={selectedTimeFilter}
+          styles={dropdownStyles}
+        />
+        <TouchableOpacity onPress={onClearSelectedTimeFilter}>
+          <Image
+            source={R.icons.error}
+            style={[s.clearEventSelectionIcon, styles?.timeFilters?.clearSelectionIcon]}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+  //#endregion Renders
+
+  //#region Return
+  return (
+    <View style={[s.rootContainer, styles?.rootContainer]}>
+      <SafeAreaView style={[s.safeArea, styles?.safeArea]}>
+        <Text style={[s.eventsTitle, styles?.eventsTitle]}>
+          {texts?.title || 'Events'}
+        </Text>
+        {!config?.isTimeFilterDropdownHidden && timeFilterDropdown}
+        {!config?.isEventsDropdownHidden && eventsDropdown}
+        <View style={[s.listContainer, styles?.listContainer]}>
+          <FlatList
+            data={myOrders}
+            renderItem={renderOrderListItem}
+            refreshControl={renderRefreshControl}
+            onEndReached={handleOnReachEnd}
+            onMomentumScrollBegin={handleOnMomentumScrollBegin}
+            onEndReachedThreshold={0.2}
+            extraData={myOrders}
+          />
+          {isLoading && myOrders.length > 8 && !isRefreshing && (
+            <ActivityIndicator
+              size={'large'}
+              color={styles?.refreshControlColor || R.colors.primary}
+            />
+          )}
+        </View>
+        {config?.areActivityIndicatorsEnabled && isGettingEventDetails && <Loading />}
+      </SafeAreaView>
+    </View>
+  )
+  //#endregion Return
+}
+
+export default MyOrdersView