tf-checkout-react-native 1.0.37 → 1.0.40

package/src/containers/myOrders/components/OrderListItem.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
+
+import R from '../../../res'
+import { OrderListItemStyles as s } from './styles'
+import { IOrderListItemProps } from './types'
+
+const OrderListItem: FC<IOrderListItemProps> = ({ order, onSelectOrder, styles }) => {
+  return (
+    <View style={[s.rootContainer, styles?.rootContainer]}>
+      <TouchableOpacity
+        onPress={() => {
+          onSelectOrder(order)
+        }}
+      >
+        <View style={[s.contentContainer, styles?.contentContainer]}>
+          {/* Left side of the item */}
+          <View style={[s.infoRootContainer, styles?.infoRootContainer]}>
+            {/* Image content */}
+            <View style={[s.imageContainer, styles?.imageContainer]}>
+              <Image source={{ uri: order.image }} style={[s.image, styles?.image]} />
+            </View>
+            {/* Info content */}
+            <View style={[s.infoContainer, styles?.infoContainer]}>
+              <View style={[s.infoTopContainer, styles?.infoTopContainer]}>
+                <Text style={styles?.orderId}>{order.id}</Text>
+                <Text style={styles?.orderDate}>{order.date}</Text>
+              </View>
+              <View style={[s.infoBottomContainer, styles?.infoBottomContainer]}>
+                <Text style={[s.eventName, styles?.eventName]} numberOfLines={2}>
+                  {order.eventName}
+                </Text>
+                <View style={[s.priceContainer, styles?.priceContainer]}>
+                  <Text style={styles?.currency}>{order.currency} </Text>
+                  <Text style={styles?.price}>{order.amount}</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          {/* Right side of the item */}
+          <View style={[s.iconNextContainer, styles?.iconNextContainer]}>
+            <Image style={[s.iconNext, styles?.iconNext]} source={R.icons.next} />
+          </View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default OrderListItem

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

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../../res'
+
+export const OrderListItemStyles = StyleSheet.create({
+  rootContainer: {
+    backgroundColor: R.colors.listBackground,
+    marginVertical: 8,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  imageContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  image: { height: 60, width: 60, resizeMode: 'contain' },
+  infoRootContainer: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+  infoContainer: {
+    flex: 1,
+  },
+  infoTopContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 8,
+  },
+  infoBottomContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 8,
+    alignItems: 'flex-end',
+  },
+  iconNext: {
+    height: 24,
+    width: 24,
+    resizeMode: 'contain',
+  },
+  iconNextContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    paddingRight: 0,
+  },
+  priceContainer: {
+    flexDirection: 'row',
+  },
+  eventName: {
+    width: '65%',
+  },
+})

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

@@ -0,0 +1,28 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IMyOrdersOrder } from '../../../api/types'
+
+export interface IOrderListItemStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  contentContainer?: StyleProp<ViewStyle>
+  infoContainer?: StyleProp<ViewStyle>
+  infoTopContainer?: StyleProp<ViewStyle>
+  infoBottomContainer?: StyleProp<ViewStyle>
+  imageContainer?: StyleProp<ViewStyle>
+  image?: StyleProp<ImageStyle>
+  infoRootContainer?: StyleProp<ViewStyle>
+  iconNextContainer?: StyleProp<ViewStyle>
+  iconNext?: StyleProp<ImageStyle>
+  orderId?: StyleProp<TextStyle>
+  orderDate?: StyleProp<TextStyle>
+  eventName?: StyleProp<TextStyle>
+  priceContainer?: StyleProp<ViewStyle>
+  price?: StyleProp<TextStyle>
+  currency?: StyleProp<TextStyle>
+}
+
+export interface IOrderListItemProps {
+  onSelectOrder: (order: IMyOrdersOrder) => void
+  order: IMyOrdersOrder
+  styles?: IOrderListItemStyles
+}

package/src/containers/myOrders/styles.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export const MyOrdersViewStyles = StyleSheet.create({
+  eventsContainer: {
+    marginVertical: 16,
+  },
+  eventsTitle: {
+    marginBottom: 8,
+  },
+  eventsDropdownContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+  eventsDropdownButton: {
+    marginBottom: 0,
+  },
+  safeArea: {
+    flex: 1,
+  },
+  listContainer: {
+    //flex: 1,
+  },
+  backButtonContainer: {
+    marginBottom: 24,
+  },
+  rootContainer: {
+    flex: 1,
+  },
+  eventsSelectionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: 'space-between',
+  },
+  clearEventSelectionIcon: {
+    tintColor: R.colors.white,
+    width: 20,
+    height: 20,
+  },
+})

package/src/containers/myOrders/types.ts

@@ -0,0 +1,84 @@
+import { ColorValue, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IMyOrderDetailsData, IMyOrdersData, IMyOrdersOrder } from '../../api/types'
+import { IDropdownItem, IDropdownStyles } from '../../components/dropdown/types'
+import { IError } from '../../types'
+import { IOrderListItemStyles } from './components/types'
+
+export interface IMyOrdersConfig {
+  isEventsDropdownHidden?: boolean
+  areActivityIndicatorsEnabled?: boolean
+  areAlertsEnabled?: boolean
+  isTimeFilterDropdownHidden?: boolean
+}
+
+export interface IMyOrdersStyles {
+  orderListItem?: IOrderListItemStyles
+  safeArea?: StyleProp<ViewStyle>
+  listContainer?: StyleProp<ViewStyle>
+  eventsContainer?: StyleProp<ViewStyle>
+  eventsTitle?: StyleProp<TextStyle>
+  refreshControlColor?: ColorValue
+  eventsDropdown?: IDropdownStyles
+  rootContainer?: StyleProp<ViewStyle>
+  eventsSelectionContainer?: StyleProp<ViewStyle>
+  clearEventSelectionIcon?: StyleProp<ImageStyle>
+  timeFilters?: {
+    label?: StyleProp<TextStyle>
+    container?: StyleProp<ViewStyle>
+    dropdown?: IDropdownStyles
+    selectionContainer?: StyleProp<ViewStyle>
+    clearSelectionIcon?: StyleProp<ImageStyle>
+  }
+}
+
+export interface IMyOrdersTexts {
+  selectEventPlaceholder?: string
+  selectTimeFilterPlaceholder?: string
+  title?: string
+  timeFilters?: {
+    upcoming?: string
+    ongoingAndUpcoming?: string
+    ongoing?: string
+    past?: string
+  }
+}
+
+export interface IMyOrdersProps {
+  onSelectOrder: (order: IMyOrderDetailsData) => void
+
+  onFetchMyOrdersSuccess?: (data: IMyOrdersData) => void
+  onFetchMyOrdersError?: (error: IError) => void
+
+  onFetchOrderDetailsSuccess?: (data: IMyOrderDetailsData) => void
+  onFetchOrderDetailsError?: (error: IError) => void
+
+  onRemoveTicketFromResaleSuccess?: (orderHash: string) => void
+  onRemoveTicketFromResaleError?: (orderHash: string) => void
+
+  onLoadingChange?: (isLoading: boolean) => void
+
+  styles?: IMyOrdersStyles
+  config?: IMyOrdersConfig
+  texts?: IMyOrdersTexts
+}
+
+export interface IMyOrdersViewProps {
+  myEvents: IDropdownItem[]
+  selectedEvent?: IDropdownItem
+  onChangeEvent: (event: IDropdownItem) => void
+  myOrders: IMyOrdersOrder[]
+  onSelectOrder: (order: IMyOrdersOrder) => void
+  isGettingEventDetails?: boolean
+  isLoading?: boolean
+  isRefreshing?: boolean
+  styles?: IMyOrdersStyles
+  onRefresh?: () => void
+  config?: IMyOrdersConfig
+  onFetchMoreOrders: () => void
+  texts?: IMyOrdersTexts
+
+  timeFilters: IDropdownItem[]
+  selectedTimeFilter?: IDropdownItem
+  onChangeTimeFilter: (event: IDropdownItem) => void
+}

package/src/containers/purchaseConfirmation/PurchaseConfirmation.tsx

@@ -0,0 +1,145 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { Alert } from 'react-native'
+
+import { IFetchAccessTokenResponse } from '../../api/types'
+import {
+  PurchaseConfirmationCore,
+  PurchaseConfirmationCoreHandle,
+  SessionHandle,
+} from '../../core'
+import { SessionHandleType } from '../../core/Session/SessionCoreTypes'
+import PurchaseConfirmationView from './PurchaseConfirmationView'
+import { IPurchaseConfirmationProps } from './types'
+
+const PurchaseConfirmation = forwardRef<SessionHandleType, IPurchaseConfirmationProps>(
+  (
+    {
+      orderHash,
+      onComplete,
+      styles,
+      texts,
+      onFetchPurchaseConfirmationError,
+      onFetchPurchaseConfirmationSuccess,
+      onLoadingChange,
+      areActivityIndicatorsEnabled,
+      areAlertsEnabled,
+    },
+    ref
+  ) => {
+    //#region State
+    const [isLoading, setIsLoading] = useState(false)
+    //#endregion State
+
+    const showAlert = (text: string) => {
+      areAlertsEnabled && Alert.alert(text)
+    }
+
+    const isPurchaseConfirmationCoreRefReady = (): boolean => {
+      if (!purchaseConfirmationCoreRef.current) {
+        onFetchPurchaseConfirmationError?.({
+          message: 'PurchaseConfirmationCore is not initialized',
+        })
+        showAlert('PurchaseConfirmationCore is not initialized')
+        return false
+      }
+
+      return true
+    }
+
+    //#region Fetch data
+    const getInitialData = async () => {
+      if (!isPurchaseConfirmationCoreRefReady()) {
+        return
+      }
+
+      purchaseConfirmationCoreRef.current?.stopCartTimer()
+      setIsLoading(true)
+      const { purchaseConfirmationError } =
+        await purchaseConfirmationCoreRef.current!.getPurchaseConfirmation(orderHash)
+      setIsLoading(false)
+
+      if (purchaseConfirmationError) {
+        onFetchPurchaseConfirmationError?.(purchaseConfirmationError)
+        return showAlert(purchaseConfirmationError.message)
+      }
+
+      onFetchPurchaseConfirmationSuccess?.()
+    }
+    //#endregion Fetch data
+
+    //#region Ref
+    const purchaseConfirmationCoreRef = useRef<PurchaseConfirmationCoreHandle>(null)
+    const sessionHandleRef = useRef<SessionHandleType>(null)
+    //#endregion Ref
+
+    const handleOnLoadingChange = useCallback(
+      (loading: boolean) => {
+        onLoadingChange?.(loading)
+      },
+      [onLoadingChange]
+    )
+
+    //#region Imperative Handler
+    useImperativeHandle(ref, () => ({
+      async refreshAccessToken(refreshToken: string): Promise<IFetchAccessTokenResponse> {
+        if (!sessionHandleRef.current) {
+          return {
+            accessTokenError: {
+              message: 'Session Handle ref is not initialized',
+            },
+          }
+        }
+
+        const { accessTokenError, accessTokenData } =
+          await sessionHandleRef.current!.refreshAccessToken(refreshToken)
+        if (!accessTokenError && accessTokenData?.accessToken) {
+          await getInitialData()
+        }
+        return {
+          accessTokenData,
+          accessTokenError,
+        }
+      },
+
+      async reloadData() {
+        await getInitialData()
+      },
+    }))
+    //#endregion Imperative Handler
+
+    //#region useEffect
+    useEffect(() => {
+      handleOnLoadingChange(isLoading)
+    }, [handleOnLoadingChange, isLoading])
+
+    useEffect(() => {
+      getInitialData()
+    }, [])
+    //#endregion useEffect
+
+    //#region RENDER
+    return (
+      <PurchaseConfirmationCore ref={purchaseConfirmationCoreRef}>
+        <SessionHandle ref={sessionHandleRef}>
+          <PurchaseConfirmationView
+            orderHash={orderHash}
+            onComplete={onComplete}
+            styles={styles}
+            texts={texts}
+            areActivityIndicatorsEnabled={areActivityIndicatorsEnabled}
+          />
+        </SessionHandle>
+      </PurchaseConfirmationCore>
+    )
+    //#endregion RENDER
+  }
+)
+
+export default PurchaseConfirmation

package/src/containers/purchaseConfirmation/PurchaseConfirmationView.tsx

@@ -0,0 +1,82 @@
+import React, { FC } from 'react'
+import { Text, View } from 'react-native'
+
+import { Button, Loading } from '../../components'
+import s from './styles'
+import { IPurchaseConfirmationViewProps } from './types'
+
+const PurchaseConfirmationView: FC<IPurchaseConfirmationViewProps> = ({
+  texts,
+  styles,
+  onComplete,
+  areActivityIndicatorsEnabled,
+  isLoading,
+}) => (
+  <View style={[s.rootContainer, styles?.rootContainer]}>
+    <Text style={[s.title, styles?.title]}>
+      {texts?.title || 'Your Tickets are Confirmed!'}
+    </Text>
+
+    <View style={[s.messagesContainer, styles?.message?.container]}>
+      <Text style={styles?.message?.line1}>
+        {texts?.message?.line1 || 'YOUR TICKETS HAVE BEEN EMAILED TO YOU \n'}
+      </Text>
+      <Text style={styles?.message?.line2}>
+        {texts?.message?.line2 || 'PLEASE BRING THEM WITH YOU TO THE EVENT'}
+      </Text>
+    </View>
+    {/* 
+    <View style={[s.promoContainer, styles?.promo?.container]}>
+      <Text style={[s.promoTitle, styles?.promo?.title]}>
+        Your ticket can become{' '}
+        <Text style={[s.promoTitleKeyword, styles?.promo?.titleKeyword]}>
+          cheaper
+        </Text>{' '}
+        or even{' '}
+        <Text style={[s.promoTitleKeyword, styles?.promo?.titleKeyword]}>
+          FREE!
+        </Text>
+      </Text>
+
+      <Text style={[s.promoMessage, styles?.promo?.message]}>
+        <Text style={[s.promoMessageKeyword, styles?.promo?.messageKeyword]}>
+          Invite friends
+        </Text>{' '}
+        and we'll refund up to{' '}
+        <Text style={[s.promoDiscount, styles?.promo?.discount]}>
+          {texts?.promo?.discount || '100%'}
+        </Text>{' '}
+        of your ticket money, if they buy tickets as well!
+      </Text>
+    </View>
+
+    <View style={[s.inviteContainer, styles?.invite?.container]}>
+      <Text style={[s.inviteTitle, styles?.invite?.title]}>
+        {texts?.invite?.title || 'How do you invite your friends?'}
+      </Text>
+      <Text style={[s.inviteMessage, styles?.invite?.message]}>
+        {texts?.invite?.message || 'Send them this link:'}
+      </Text>
+
+      <View style={[s.inviteLinkContainer, styles?.invite?.linkContainer]}>
+        <Text style={[s.inviteLink, styles?.invite?.link]}>
+          {referralLink || 'http://www.theticketfairy.com'}
+        </Text>
+        <TouchableOpacity style={[s.copyButton, styles?.invite?.copyButton]}>
+          <Image
+            source={R.icons.copy}
+            style={[s.copyIcon, styles?.invite?.copyIcon]}
+          />
+        </TouchableOpacity>
+      </View>
+    </View> */}
+    <Button
+      text={texts?.exitButton || 'Exit'}
+      styles={styles?.exitButton}
+      onPress={onComplete}
+    />
+    {areActivityIndicatorsEnabled && isLoading && <Loading />}
+  </View>
+)
+
+export default PurchaseConfirmationView

package/src/containers/purchaseConfirmation/styles.ts

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export default StyleSheet.create({
+  rootContainer: {
+    backgroundColor: R.colors.white,
+    padding: 24,
+    flex: 1,
+  },
+  messagesContainer: {
+    marginVertical: 24,
+    padding: 12,
+    backgroundColor: 'gainsboro',
+  },
+  title: {
+    fontWeight: '700',
+    color: R.colors.black,
+    fontSize: 22,
+  },
+
+  promoContainer: {
+    marginVertical: 24,
+  },
+  promoTitleKeyword: {
+    fontWeight: '800',
+    color: R.colors.danger,
+  },
+  promoTitle: {
+    fontSize: 25,
+  },
+  promoMessage: {
+    fontSize: 18,
+    marginTop: 8,
+  },
+  promoMessageKeyword: {
+    fontWeight: '600',
+  },
+  promoDiscount: {
+    fontWeight: '700',
+    color: R.colors.danger,
+  },
+
+  inviteContainer: {
+    marginVertical: 24,
+  },
+  inviteTitle: {
+    fontSize: 18,
+    fontWeight: '500',
+    marginBottom: 16,
+  },
+  inviteMessage: {
+    fontSize: 18,
+  },
+
+  inviteLinkContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  inviteLink: {
+    padding: 8,
+    backgroundColor: R.colors.black,
+    color: R.colors.white,
+  },
+  copyButton: {
+    backgroundColor: R.colors.black,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 16,
+    padding: 4,
+  },
+  copyIcon: {
+    width: 28,
+    height: 28,
+    resizeMode: 'contain',
+    tintColor: R.colors.white,
+  },
+})

package/src/containers/purchaseConfirmation/types.ts

@@ -0,0 +1,77 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IButtonStyles } from '../../components/button/types'
+import { IError } from '../../types'
+
+export interface IPurchaseConfirmationProps {
+  orderHash: string
+  onComplete: () => void
+  styles?: IPurchaseConfirmationStyles
+  texts?: IPurchaseConfirmationTexts
+
+  onFetchPurchaseConfirmationError?: (error: IError) => void
+  onFetchPurchaseConfirmationSuccess?: () => void
+
+  areActivityIndicatorsEnabled?: boolean
+  areAlertsEnabled?: boolean
+  onLoadingChange?: (isLoading: boolean) => void
+}
+
+export interface IPurchaseConfirmationTexts {
+  title?: string
+  message?: {
+    line1?: string
+    line2?: string
+  }
+
+  promo?: {
+    discount?: string
+  }
+
+  invite?: {
+    title?: string
+    message?: string
+  }
+  exitButton?: string
+}
+
+export interface IPurchaseConfirmationStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  title?: StyleProp<TextStyle>
+
+  message?: {
+    container?: StyleProp<ViewStyle>
+    line1?: StyleProp<TextStyle>
+    line2?: StyleProp<TextStyle>
+  }
+
+  promo?: {
+    container?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    titleKeyword?: StyleProp<TextStyle>
+    message?: StyleProp<TextStyle>
+    messageKeyword?: StyleProp<TextStyle>
+    discount?: StyleProp<TextStyle>
+  }
+
+  invite?: {
+    container?: StyleProp<ViewStyle>
+    title?: StyleProp<TextStyle>
+    message?: StyleProp<TextStyle>
+    link?: StyleProp<TextStyle>
+    linkContainer?: StyleProp<ViewStyle>
+    copyIcon?: StyleProp<ImageStyle>
+    copyButton?: StyleProp<ViewStyle>
+  }
+  exitButton?: IButtonStyles
+}
+
+export interface IPurchaseConfirmationViewProps {
+  texts?: IPurchaseConfirmationTexts
+  styles?: IPurchaseConfirmationStyles
+  referralLink?: string
+  onComplete: () => void
+  orderHash: string
+  areActivityIndicatorsEnabled?: boolean
+  isLoading?: boolean
+}