tf-checkout-react-native 1.0.37 → 1.0.39

package/src/containers/myOrderDetails/MyOrderDetailsView.tsx

@@ -0,0 +1,269 @@
+import Clipboard from '@react-native-clipboard/clipboard'
+import _map from 'lodash/map'
+import React, { FC } from 'react'
+import { Image, SectionList, Text, TouchableOpacity, View } from 'react-native'
+
+import { IMyOrderDetailsItem, IMyOrderDetailsTicket } from '../../api/types'
+import { BottomSheetModal, Loading } from '../../components'
+import R from '../../res'
+import Notification from './components/Notification'
+import TicketActions from './components/TicketActions/TicketActions'
+import { TicketActionType } from './components/TicketActions/TicketActionsTypes'
+import TicketListItem from './components/TicketListItem/TicketListItem'
+import s from './styles'
+import { IMyOrderDetailsViewProps, IOrderDetailsSectionData } from './types'
+
+const MyOrderDetailsView: FC<IMyOrderDetailsViewProps> = ({
+  data: { header, items, tickets },
+  styles,
+  texts,
+  isLinkCopied,
+  onPressCopyLink,
+  downloadStatus,
+  config = {
+    areActivityIndicatorsEnabled: true,
+    areAlertsEnabled: true,
+  },
+  isLoading,
+
+  onTicketSelection,
+  selectedTicket,
+  onActionSelected,
+  ticketActionsIcons,
+  bottomSheetModalRef,
+  moreButtonIcon,
+}) => {
+  //#region Handlers
+  const onCopyLinkHandler = () => {
+    if (isLinkCopied) {
+      return
+    }
+    Clipboard.setString(header.shareLink)
+    onPressCopyLink()
+  }
+
+  const handleOnTicketSelection = (ticket: IMyOrderDetailsTicket) => {
+    onTicketSelection(ticket)
+  }
+
+  const handleHideActionsModal = () => {
+    onTicketSelection(undefined)
+  }
+
+  const handleOnActionSelected = (actionType: TicketActionType) => {
+    onActionSelected(actionType)
+  }
+  //#endregion
+
+  const copyIconTint = styles?.header?.shareLink?.copyIconTint || R.colors.black
+  const copyIconTintActive =
+    styles?.header?.shareLink?.copyIconTintActive || R.colors.validGreen
+  const title = texts?.title || 'ORDER DETAILS'
+  const subTitle = texts?.subTitle || 'ORDER SUMMARY'
+  const referralLink =
+    texts?.referralLink || 'Your personal share link for this event is:'
+  const itemsTotal = texts?.listItem?.total || 'Total'
+  const itemsTicketType = texts?.listItem?.ticketType || 'Ticket Type: '
+  const itemsPrice = texts?.listItem?.price || 'Price: '
+  const itemsQuantity = texts?.listItem?.quantity || 'Quantity: '
+
+  const ticketsTitle = texts?.ticketsTitle || 'Your Tickets: '
+  const ticketsId = texts?.ticketItem?.ticketId || 'Ticket ID: '
+  const ticketsType = texts?.ticketItem?.ticketType || 'Ticket Type: '
+  const ticketsHolderName = texts?.ticketItem?.holderName || 'Ticket Holder Name: '
+  const ticketsStatus = texts?.ticketItem?.status || 'Status: '
+  const copyText = texts?.copyText?.copy || 'Copy'
+  const copiedText = texts?.copyText?.copied || 'Copied'
+
+  const soFarText = texts?.referral?.soFar || `So far, you've referred`
+  const ticketsText = texts?.referral?.tickets || `tickets.`
+  const sellTicket = texts?.sellTicket || 'Sell Ticket'
+  const removeTicketFromResale = texts?.removeTicketFromResale || 'Remove from resale'
+  const download = texts?.ticketItem?.download || `Download`
+
+  const renderShareLink = () => (
+    <View style={[s.shareLinkContainer, styles?.header?.shareLink?.container]}>
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="head"
+        style={styles?.header?.shareLink?.link}
+      >
+        {header.shareLink}
+      </Text>
+      <TouchableOpacity
+        style={[s.copyContainer, styles?.header?.shareLink?.copyContainer]}
+        onPress={onCopyLinkHandler}
+      >
+        <Text style={[s.copyText, styles?.header?.shareLink?.copyText]}>
+          {isLinkCopied ? copiedText : copyText}
+        </Text>
+        <Image
+          source={isLinkCopied ? R.icons.check : R.icons.copy}
+          style={[
+            s.copyIcon,
+            styles?.header?.shareLink?.copyIcon,
+            {
+              tintColor: isLinkCopied ? copyIconTintActive : copyIconTint,
+            },
+          ]}
+        />
+      </TouchableOpacity>
+    </View>
+  )
+
+  const renderHeader = () => (
+    <View style={styles?.header?.container}>
+      <Text style={styles?.header?.title}>{title}</Text>
+      <Text style={styles?.header?.subTitle}>{subTitle}</Text>
+      <Text style={styles?.header?.shareLink?.message}>{referralLink} </Text>
+      {header?.shareLink && renderShareLink()}
+      <Text style={styles?.header?.shareLink?.referrals}>
+        {soFarText}{' '}
+        <Text style={styles?.header?.shareLink?.referralValue}>
+          {header.salesReferred}
+        </Text>{' '}
+        {ticketsText}
+      </Text>
+    </View>
+  )
+
+  const parsedItems: IOrderDetailsSectionData[] | undefined = items
+    ? _map(items, (item) => {
+        return {
+          id: `${item.name}.${item.price}`,
+          item: item,
+        }
+      })
+    : undefined
+
+  const parsedTickets = _map(tickets, (item) => {
+    return {
+      id: `${item.hash}`,
+      item: item,
+    }
+  })
+
+  const itemsData = [
+    {
+      title: items ? texts?.listItem?.title || 'Items' : '',
+      data: parsedItems || [],
+      renderItem: ({ item }: any) => renderItemComp(item),
+      id: 0,
+    },
+    {
+      title: ticketsTitle,
+      data: parsedTickets,
+      renderItem: ({ item }: any) => _renderTicket(item),
+      id: 1,
+    },
+  ]
+
+  const renderItemComp = ({ item }: { item: IMyOrderDetailsItem }) =>
+    item ? (
+      <View style={[s.listItemContainer, styles?.listItem?.container]}>
+        <View style={styles?.listItem?.innerLeftContainer}>
+          <Text style={styles?.listItem?.rowPlaceholder}>
+            {itemsTicketType} <Text style={styles?.listItem?.rowValue}>{item.name}</Text>
+          </Text>
+          <View style={s.rowContainer}>
+            <Text style={styles?.listItem?.rowPlaceholder}>{itemsPrice}</Text>
+            <Text style={styles?.listItem?.rowValue}>
+              {item.currency}
+              {item.price}
+            </Text>
+          </View>
+          <View style={s.rowContainer}>
+            <Text style={styles?.listItem?.rowPlaceholder}>{itemsQuantity}</Text>
+            <Text style={styles?.listItem?.rowValue}>{item.quantity}</Text>
+          </View>
+        </View>
+        <View
+          style={[s.listItemInnerRightContainer, styles?.listItem?.innerRightContainer]}
+        >
+          <Text style={styles?.listItem?.rowPlaceholder}>{itemsTotal}</Text>
+          <Text style={styles?.listItem?.rowValue}>
+            {item.currency}
+            {item.total}
+          </Text>
+        </View>
+      </View>
+    ) : null
+
+  const _renderTicket = ({ item }: { item: IMyOrderDetailsTicket }) => (
+    <TicketListItem
+      data={item}
+      styles={styles?.ticketItem}
+      texts={{
+        ticketType: ticketsType,
+        holderName: ticketsHolderName,
+        ticketId: ticketsId,
+        status: ticketsStatus,
+        download: download,
+        sellTicket: sellTicket,
+        removeTicketFromResale: removeTicketFromResale,
+      }}
+      onPressActionsButton={handleOnTicketSelection}
+      moreButtonIcon={moreButtonIcon || R.icons.more}
+    />
+  )
+
+  return (
+    <View style={[s.rootContainer, styles?.rootContainer]}>
+      <SectionList
+        ListHeaderComponent={renderHeader}
+        //@ts-ignore
+        sections={[...itemsData]}
+        renderSectionHeader={({ section }) => {
+          if (section.id === 0) {
+            if (!items) {
+              return null
+            }
+          }
+          return <Text style={styles?.sectionHeader}>{section.title}</Text>
+        }}
+        renderSectionFooter={({ section }) => {
+          if (section.id === 0 && parsedItems) {
+            return (
+              <View style={[s.sectionFooterContainer, styles?.section0Footer?.container]}>
+                <Text style={styles?.section0Footer?.label}>{itemsTotal}</Text>
+                <Text style={styles?.section0Footer?.value}>
+                  {parsedItems ? parsedItems[0].item.currency : ''} {header.total}
+                </Text>
+              </View>
+            )
+          }
+          return null
+        }}
+      />
+      {config?.areAlertsEnabled &&
+        (downloadStatus === 'downloaded' || downloadStatus === 'failed') && (
+          <Notification
+            isSuccess={downloadStatus === 'downloaded'}
+            textSuccess={texts?.downloadNotification?.successMessage}
+            textError={texts?.downloadNotification?.errorMessage}
+          />
+        )}
+      {isLoading && <Loading />}
+
+      {selectedTicket && (
+        <BottomSheetModal
+          onClose={handleHideActionsModal}
+          styles={styles?.bottomSheetModal}
+          texts={texts?.bottomSheetModal}
+          ref={bottomSheetModalRef}
+          content={
+            <TicketActions
+              onSelectAction={handleOnActionSelected}
+              ticket={selectedTicket}
+              styles={styles?.ticketActions}
+              texts={texts?.ticketActions}
+              icons={ticketActionsIcons}
+            />
+          }
+        />
+      )}
+    </View>
+  )
+}
+
+export default MyOrderDetailsView

package/src/containers/myOrderDetails/components/Notification.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+import { Image, ImageSourcePropType, Text, View } from 'react-native'
+
+import R from '../../../res'
+import { NotificationStyles as s } from './styles'
+
+export interface INotificationIcons {
+  success?: ImageSourcePropType
+  error?: ImageSourcePropType
+}
+
+export interface INotificationProps {
+  isSuccess: boolean
+  textSuccess?: string
+  textError?: string
+
+  icons?: INotificationIcons
+}
+
+const Notification: FC<INotificationProps> = ({
+  isSuccess,
+  textSuccess = 'File downloaded successfully',
+  textError = 'There was an error downloading the file',
+  icons,
+}) => {
+  const textToShow = isSuccess ? textSuccess : textError
+  const successIcon = icons?.success || R.icons.check
+  const errorIcon = icons?.error || R.icons.error
+  return (
+    <View style={s.rootContainer}>
+      <Text style={s.text}>{textToShow}</Text>
+      <Image
+        source={isSuccess ? successIcon : errorIcon}
+        style={isSuccess ? s.iconSuccess : s.iconError}
+      />
+    </View>
+  )
+}
+
+export default Notification

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+const OrderListItem = () => {
+  return (
+    <View>
+      <Text>OrderListItem</Text>
+    </View>
+  )
+}
+
+export default OrderListItem

package/src/containers/myOrderDetails/components/TicketActions/TicketActions.tsx

@@ -0,0 +1,68 @@
+import React, { FC } from 'react'
+import {
+  Image,
+  ImageSourcePropType,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+
+import { ITicketActionsProps } from './TicketActionsTypes'
+
+const TicketActions: FC<ITicketActionsProps> = ({
+  onSelectAction,
+  ticket,
+  icons,
+  texts,
+  styles,
+}) => {
+  const handleOnPressDownload = () => onSelectAction('download-pdf')
+  const handleOnPressSell = () => onSelectAction('sell')
+  const handleOnPressRemoveFromSale = () => onSelectAction('remove-from-sale')
+
+  const renderButton = (
+    onPress: () => void,
+    text: string,
+    icon?: ImageSourcePropType
+  ) => (
+    <TouchableOpacity onPress={onPress} style={styles?.buttonContainer}>
+      <View style={styles?.buttonContent}>
+        {!!icon && <Image source={icon} style={styles?.icon} />}
+        <Text style={styles?.text}>{text}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+
+  const downloadPdf =
+    ticket.pdfLink &&
+    renderButton(
+      handleOnPressDownload,
+      texts?.downloadPdf || 'Download PDF',
+      icons?.downloadPdf
+    )
+
+  const sellTicket =
+    ticket.isSellable &&
+    !ticket.isOnSale &&
+    renderButton(handleOnPressSell, texts?.sell || 'Sell Ticket', icons?.sell)
+
+  const removeFromResale =
+    !ticket.isSellable &&
+    ticket.isOnSale &&
+    renderButton(
+      handleOnPressRemoveFromSale,
+      texts?.removeFromSale || 'Remove from resale',
+      icons?.removeFromSale
+    )
+
+  return (
+    <ScrollView style={[styles?.rootScrollViewContainer]}>
+      {downloadPdf}
+      {sellTicket}
+      {removeFromResale}
+    </ScrollView>
+  )
+}
+
+export default TicketActions

package/src/containers/myOrderDetails/components/TicketActions/TicketActionsTypes.ts

@@ -0,0 +1,41 @@
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+
+import { IMyOrderDetailsTicket } from '../../../../api/types'
+
+export type TicketActionType = 'download-pdf' | 'sell' | 'remove-from-sale' | 'refund'
+
+export interface ITicketActionIcons {
+  downloadPdf?: ImageSourcePropType
+  sell?: ImageSourcePropType
+  removeFromSale?: ImageSourcePropType
+  refund?: ImageSourcePropType
+}
+
+export interface ITicketActionTexts {
+  downloadPdf?: string
+  sell?: string
+  removeFromSale?: string
+  refund?: string
+}
+
+export interface ITicketActionsStyles {
+  rootScrollViewContainer?: StyleProp<ViewStyle>
+  buttonContainer?: StyleProp<ViewStyle>
+  buttonContent?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  text?: StyleProp<TextStyle>
+}
+
+export interface ITicketActionsProps {
+  onSelectAction: (action: TicketActionType) => void
+  ticket: IMyOrderDetailsTicket
+  icons?: ITicketActionIcons
+  texts?: ITicketActionTexts
+  styles?: ITicketActionsStyles
+}

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
+
+import R from '../../../../res'
+import s from './TicketListItemStyles'
+import { ITicketListItemProps } from './TicketListItemTypes'
+
+export interface IOnPressTicketDownload {
+  pdfLink?: string
+  hash: string
+}
+
+const TicketListItem = ({
+  styles,
+  texts,
+  data,
+  moreButtonIcon,
+  onPressActionsButton,
+}: ITicketListItemProps) => {
+  const handleOnPressActionsButton = () => {
+    onPressActionsButton(data)
+  }
+
+  return (
+    <View>
+      <View style={[s.rootContainer, styles?.rootContainer]}>
+        <View style={styles?.leftContent}>
+          <View style={s.rowContainer}>
+            <Text style={styles?.rowPlaceholder}>{texts.ticketId}</Text>
+            <Text style={styles?.rowValue}>{data.hash}</Text>
+          </View>
+          <View style={s.rowContainer}>
+            <Text style={styles?.rowPlaceholder}>{texts.ticketType}</Text>
+            <Text style={styles?.rowValue}>{data.ticketType}</Text>
+          </View>
+          <View style={s.rowContainer}>
+            <Text style={styles?.rowPlaceholder}>{texts.holderName}</Text>
+            <Text style={styles?.rowValue}>{data.holderName}</Text>
+          </View>
+        </View>
+
+        <View style={[s.rightContent, styles?.rightContent]}>
+          <Text style={styles?.rowPlaceholder}>
+            {texts.status}
+            <Text style={styles?.rowValue}>{data.status}</Text>
+          </Text>
+
+          <TouchableOpacity
+            style={[s.moreButton, styles?.moreButton]}
+            onPress={handleOnPressActionsButton}
+          >
+            <Image
+              source={moreButtonIcon || R.icons.more}
+              style={[s.moreButtonIcon, styles?.moreButtonIcon]}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default TicketListItem

package/src/containers/myOrderDetails/components/TicketListItem/TicketListItemStyles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  rootContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderWidth: 2,
+    marginVertical: 8,
+  },
+  rightContent: {
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
+  rowContainer: {
+    flexDirection: 'row',
+  },
+  downloadButtonText: {
+    fontSize: 12,
+  },
+  downloadButton: {
+    height: 30,
+    marginVertical: 8,
+  },
+  moreButton: {
+    marginRight: 4,
+    marginBottom: 4,
+  },
+  moreButtonIcon: {
+    height: 25,
+    width: 30,
+    resizeMode: 'contain',
+  },
+})

package/src/containers/myOrderDetails/components/TicketListItem/TicketListItemTypes.ts

@@ -0,0 +1,39 @@
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+
+import { IMyOrderDetailsTicket } from '../../../../api/types'
+import { IButtonStyles } from '../../../../components/button/types'
+
+export interface ITicketListItemTexts {
+  ticketType: string
+  holderName: string
+  ticketId: string
+  status: string
+  download: string
+  sellTicket: string
+  removeTicketFromResale: string
+}
+
+export interface ITicketListItemStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  leftContent?: StyleProp<ViewStyle>
+  rightContent?: StyleProp<ViewStyle>
+  rowPlaceholder?: StyleProp<TextStyle>
+  rowValue?: StyleProp<TextStyle>
+  downloadButton?: IButtonStyles
+  moreButton?: StyleProp<ViewStyle>
+  moreButtonIcon?: StyleProp<ImageStyle>
+}
+
+export interface ITicketListItemProps {
+  onPressActionsButton: (ticket: IMyOrderDetailsTicket) => void
+  data: IMyOrderDetailsTicket
+  styles?: ITicketListItemStyles
+  texts: ITicketListItemTexts
+  moreButtonIcon?: ImageSourcePropType
+}

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

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../../res'
+
+export const NotificationStyles = StyleSheet.create({
+  rootContainer: {
+    padding: 24,
+    backgroundColor: R.colors.white,
+    position: 'absolute',
+    bottom: 48,
+    left: 24,
+    right: 24,
+    borderRadius: 2,
+    elevation: 5,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 1,
+      height: 5,
+    },
+    shadowRadius: 2,
+    shadowOpacity: 0.2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  text: {
+    fontSize: 16,
+    color: R.colors.black,
+  },
+  iconSuccess: {
+    tintColor: R.colors.validGreen,
+    height: 16,
+    width: 16,
+    resizeMode: 'contain',
+  },
+  iconError: {
+    tintColor: R.colors.danger,
+    height: 16,
+    width: 16,
+    resizeMode: 'contain',
+  },
+})

package/src/containers/myOrderDetails/styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+  },
+  shareLinkContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  copyContainer: {
+    alignItems: 'center',
+    borderWidth: 1,
+    padding: 4,
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  copyText: {
+    fontSize: 11,
+  },
+  copyIcon: {
+    height: 16,
+    width: 16,
+    marginLeft: 4,
+    resizeMode: 'contain',
+  },
+  sectionFooterContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+
+  listItemContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderWidth: 2,
+    marginVertical: 8,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+  },
+  listItemInnerRightContainer: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+
+  ticketItemContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderWidth: 2,
+    marginVertical: 8,
+  },
+  ticketItemInnerRightContainer: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+})