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

package/src/containers/myOrderDetails/MyOrderDetailsView.tsx

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

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

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

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

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

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

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

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

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

@@ -1,57 +0,0 @@
-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',
-  },
-})