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

package/src/containers/resaleTickets/ResaleTickets.tsx

@@ -1,234 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { Alert } from 'react-native'
-
-import { IFetchAccessTokenResponse } from '../../api/types'
-import { OrderDetailsCore, OrderDetailsCoreHandle, SessionHandle } from '../../core'
-import { SessionHandleType } from '../../core/Session/SessionCoreTypes'
-import { useDebounced } from '../../helpers/Debounced'
-import { validateEmail, validateEmpty } from '../../helpers/Validators'
-import ResaleTicketsView from './ResaleTicketsView'
-import { IResaleTicketsProps, IResaleToWhomData, ResaleToWhomFieldIdEnum } from './types'
-
-const sellToWhomInitialData: IResaleToWhomData = {
-  toWhom: undefined,
-  someoneData: {
-    firstName: '',
-    lastName: '',
-    email: '',
-    emailConfirm: '',
-  },
-  isTermsAgreed: false,
-}
-
-const ResaleTickets = forwardRef<SessionHandleType, IResaleTicketsProps>(
-  (
-    {
-      styles,
-      ticket,
-      onResaleTicketsSuccess,
-      onResaleTicketsError,
-      config = {
-        areActivityIndicatorsEnabled: true,
-        areAlertsEnabled: true,
-      },
-      isTicketTypeActive,
-    },
-    ref
-  ) => {
-    //#region refs
-    const orderDetailsCoreRef = useRef<OrderDetailsCoreHandle>(null)
-    const sessionHandleRef = useRef<SessionHandleType>(null)
-    //#endregion
-
-    //#region state
-    const [isLoading, setIsLoading] = useState(false)
-    const [sellToWhomData, setSellToWhomData] =
-      useState<IResaleToWhomData>(sellToWhomInitialData)
-
-    const {
-      someoneData: { firstName, lastName, email, emailConfirm },
-      isTermsAgreed,
-      toWhom,
-    } = sellToWhomData
-
-    const firstNameError = useDebounced(firstName, validateEmpty)
-    const lastNameError = useDebounced(lastName, validateEmpty)
-    const emailError = useDebounced(email, () => validateEmail(email, emailConfirm))
-    const emailConfirmError = useDebounced(emailConfirm, () =>
-      validateEmail(emailConfirm, email)
-    )
-    //#endregion
-
-    const showAlert = (message: string) => {
-      if (config?.areAlertsEnabled) {
-        Alert.alert('', message)
-      }
-    }
-
-    //#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)
-
-        return {
-          accessTokenData,
-          accessTokenError,
-        }
-      },
-
-      async reloadData() {},
-    }))
-    //#endregion Imperative Handler
-
-    //#region handlers
-    const handleOnPressSellTickets = async () => {
-      if (!orderDetailsCoreRef.current) {
-        showAlert('ResaleTicketsCoreRef is not initialized')
-      }
-
-      setIsLoading(true)
-      const formData = new FormData()
-      formData.append('to', toWhom)
-      formData.append('first_name', firstName)
-      formData.append('last_name', lastName)
-      formData.append('email', email)
-      formData.append('confirm_email', emailConfirm)
-      formData.append('confirm', String(isTermsAgreed))
-
-      const { resaleTicketData, resaleTicketError } =
-        await orderDetailsCoreRef.current!.resaleTicket(formData, ticket.hash)
-
-      setIsLoading(false)
-
-      if (resaleTicketError || !resaleTicketData) {
-        onResaleTicketsError?.(resaleTicketError!)
-        return showAlert(resaleTicketError!.message)
-      }
-
-      showAlert(resaleTicketData.message)
-
-      return onResaleTicketsSuccess(resaleTicketData, {
-        ...ticket,
-        isOnSale: true,
-        isSellable: false,
-      })
-    }
-
-    const handleSellToWhomDataChange = (
-      id: ResaleToWhomFieldIdEnum,
-      value?: string | number
-    ) => {
-      switch (id) {
-        case ResaleToWhomFieldIdEnum.terms:
-          setSellToWhomData({
-            ...sellToWhomData,
-            isTermsAgreed: !isTermsAgreed,
-          })
-          break
-        case ResaleToWhomFieldIdEnum.radioIndex:
-          setSellToWhomData({
-            ...sellToWhomData,
-            toWhom: value === 0 ? 'friend' : 'anyone',
-          })
-          break
-        case ResaleToWhomFieldIdEnum.firstName:
-          setSellToWhomData({
-            ...sellToWhomData,
-            someoneData: {
-              ...sellToWhomData.someoneData,
-              firstName: value as string,
-            },
-          })
-          break
-        case ResaleToWhomFieldIdEnum.lastName:
-          setSellToWhomData({
-            ...sellToWhomData,
-            someoneData: {
-              ...sellToWhomData.someoneData,
-              lastName: value as string,
-            },
-          })
-          break
-        case ResaleToWhomFieldIdEnum.email:
-          setSellToWhomData({
-            ...sellToWhomData,
-            someoneData: {
-              ...sellToWhomData.someoneData,
-              email: value as string,
-            },
-          })
-          break
-        case ResaleToWhomFieldIdEnum.emailConfirm:
-          setSellToWhomData({
-            ...sellToWhomData,
-            someoneData: {
-              ...sellToWhomData.someoneData,
-              emailConfirm: value as string,
-            },
-          })
-          break
-      }
-    }
-    //#endregion
-
-    //#region data validation
-    const isDataValid = () => {
-      if (toWhom === 'anyone' && isTermsAgreed) {
-        return true
-      }
-      if (
-        toWhom === 'friend' &&
-        firstName &&
-        lastName &&
-        email &&
-        emailConfirm &&
-        !emailConfirmError &&
-        !emailError &&
-        !firstNameError &&
-        !lastNameError &&
-        isTermsAgreed
-      ) {
-        return true
-      }
-
-      return false
-    }
-    //#endregion
-
-    //#region render
-    return (
-      <OrderDetailsCore ref={orderDetailsCoreRef}>
-        <SessionHandle ref={sessionHandleRef}>
-          <ResaleTicketsView
-            styles={styles}
-            isLoading={isLoading}
-            resaleToWhomData={sellToWhomData}
-            someoneDataErrors={{
-              firstNameError: firstNameError,
-              lastNameError: lastNameError,
-              emailError: emailError,
-              emailConfirmError: emailConfirmError,
-            }}
-            isDataValid={isDataValid()}
-            onResaleToWhomDataChanged={handleSellToWhomDataChange}
-            onPressResaleTickets={handleOnPressSellTickets}
-            ticket={ticket}
-            isTicketsTypeActive={isTicketTypeActive}
-          />
-        </SessionHandle>
-      </OrderDetailsCore>
-    )
-    //#endregion
-  }
-)
-
-export default ResaleTickets

package/src/containers/resaleTickets/ResaleTicketsView.tsx

@@ -1,314 +0,0 @@
-import React, { FC, useEffect, useMemo, useRef } from 'react'
-import { Text, View } from 'react-native'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-import { TextField } from '../../packages/rn-material-ui-textfield'
-
-import { Button, Checkbox, Input, RadioButton } from '../../components'
-import {
-  IResaleTicketsViewProps,
-  IResaleTicketsViewTexts,
-  ResaleToWhomFieldIdEnum,
-} from './types'
-
-const ResaleTicketsView: FC<IResaleTicketsViewProps> = ({
-  styles,
-  isDataValid,
-  resaleToWhomData,
-  onResaleToWhomDataChanged,
-  someoneDataErrors,
-  onPressResaleTickets,
-  ticket,
-  isLoading,
-  texts,
-  isTicketsTypeActive,
-}) => {
-  //#region Texts
-  const txt: IResaleTicketsViewTexts = {
-    title: texts?.title || 'Resale tickets',
-    orderDetails: {
-      title: texts?.orderDetails?.title || 'Order details',
-      eventName: texts?.orderDetails?.eventName || 'Event',
-      orderedBy: texts?.orderDetails?.orderedBy || 'Ordered By',
-      orderId: texts?.orderDetails?.orderId || 'Order ID',
-    },
-    sellToWhom: {
-      title: texts?.sellToWhom?.title || 'Sell to whom?',
-      anyone:
-        texts?.sellToWhom?.anyone ||
-        'I will sell my ticket to anyone who wants to buy it',
-      friend: texts?.sellToWhom?.friend || 'I will sell my ticket to someone I know',
-    },
-    terms: {
-      title: texts?.terms?.title || 'Terms of resale',
-      paragraph1:
-        texts?.terms?.paragraph1 ||
-        'I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back. \n',
-      paragraph2_1:
-        texts?.terms?.paragraph2_1 ||
-        'I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to',
-      paragraph2_2: texts?.terms?.paragraph2_2 || 'and I will not receive any refund.',
-      paragraph3_1:
-        texts?.terms?.paragraph3_1 ||
-        'If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of',
-      paragraph3_2:
-        texts?.terms?.paragraph3_2 ||
-        ', and that any existing refunds due to me for referring sales for this event are no longer valid.',
-    },
-    agree: texts?.agree || 'I agree',
-    friendForm: {
-      firstName: texts?.friendForm?.firstName || 'First Name',
-      lastName: texts?.friendForm?.lastName || 'Last Name',
-      email: texts?.friendForm?.email || 'Email Address',
-      emailConfirm: texts?.friendForm?.emailConfirm || 'Confirm Email Address',
-    },
-    resaleTicketsButton: texts?.resaleTicketsButton || 'Resale Ticket',
-  }
-  //#endregion
-
-  //#region Refs
-  const firstNameRef = useRef<TextField>(null)
-  const lastNameRef = useRef(null)
-  const emailRef = useRef(null)
-  const confirmEmailRef = useRef(null)
-  //#endregion
-
-  //#region Styles
-  const ticketBuyerFormStyles = styles?.ticketBuyerForm
-  const ticketOrderDetailsStyles = styles?.ticketOrderDetails
-  const termsStyles = styles?.terms
-  const buttonStyles = !isDataValid
-    ? styles?.resaleTicketsButtonDisabled
-    : styles?.resaleTicketsButton
-  //#endregion
-
-  const {
-    someoneData: { firstName, lastName, email, emailConfirm },
-    toWhom,
-    isTermsAgreed,
-  } = resaleToWhomData
-
-  const { firstNameError, lastNameError, emailError, emailConfirmError } =
-    someoneDataErrors
-
-  const Terms = useMemo(
-    () => (
-      <View style={termsStyles?.rootContainer}>
-        <Text style={termsStyles?.title}>{txt.terms?.title}</Text>
-        <Text style={termsStyles?.item}>{txt.terms?.paragraph1}</Text>
-
-        <Text style={termsStyles?.item}>
-          {txt.terms?.paragraph2_1}{' '}
-          <Text style={termsStyles?.itemBold}>{ticket.eventName}</Text>{' '}
-          {txt.terms?.paragraph2_2}
-          {'\n'}
-        </Text>
-        <Text style={termsStyles?.item}>
-          {txt.terms?.paragraph3_1}{' '}
-          <Text style={termsStyles?.itemBold}>
-            {ticket.currency} {ticket.resaleFeeAmount}
-          </Text>
-          {txt.terms?.paragraph3_2}
-        </Text>
-
-        <Checkbox
-          onPress={() => onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.terms)}
-          isActive={isTermsAgreed}
-          styles={styles?.termsCheckbox}
-          text={txt.agree}
-        />
-      </View>
-    ),
-    [
-      isTermsAgreed,
-      onResaleToWhomDataChanged,
-      styles?.termsCheckbox,
-      termsStyles?.item,
-      termsStyles?.itemBold,
-      termsStyles?.rootContainer,
-      termsStyles?.title,
-      ticket.currency,
-      ticket.eventName,
-      ticket.resaleFeeAmount,
-      txt.agree,
-      txt.terms?.paragraph1,
-      txt.terms?.paragraph2_1,
-      txt.terms?.paragraph2_2,
-      txt.terms?.paragraph3_1,
-      txt.terms?.paragraph3_2,
-      txt.terms?.title,
-    ]
-  )
-
-  const OrderDetails = useMemo(
-    () => (
-      <View style={ticketOrderDetailsStyles?.rootContainer}>
-        <Text style={ticketOrderDetailsStyles?.title}>{txt.orderDetails?.title}</Text>
-        <Text style={ticketOrderDetailsStyles?.label}>{txt.orderDetails?.eventName}</Text>
-        <Text style={ticketOrderDetailsStyles?.value}>{ticket.eventName}</Text>
-        <Text style={ticketOrderDetailsStyles?.label}>{txt.orderDetails?.orderedBy}</Text>
-        <Text style={ticketOrderDetailsStyles?.value}>{ticket.holderName}</Text>
-        <Text style={ticketOrderDetailsStyles?.label}>{txt.orderDetails?.orderId}</Text>
-        <Text style={ticketOrderDetailsStyles?.value}>{ticket.hash}</Text>
-      </View>
-    ),
-    [
-      ticket.eventName,
-      ticket.hash,
-      ticket.holderName,
-      ticketOrderDetailsStyles?.label,
-      ticketOrderDetailsStyles?.rootContainer,
-      ticketOrderDetailsStyles?.title,
-      ticketOrderDetailsStyles?.value,
-      txt.orderDetails?.eventName,
-      txt.orderDetails?.orderId,
-      txt.orderDetails?.orderedBy,
-      txt.orderDetails?.title,
-    ]
-  )
-
-  const TicketBuyerForm = useMemo(
-    () => (
-      <View style={ticketBuyerFormStyles?.rootContainer}>
-        <Text style={ticketBuyerFormStyles?.title}>{txt.sellToWhom?.title}</Text>
-        {isTicketsTypeActive && (
-          <RadioButton
-            styles={ticketBuyerFormStyles?.radioButtons}
-            index={0}
-            text={txt.sellToWhom!.friend!}
-            value={toWhom === 'friend'}
-            onValueChange={() =>
-              onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.radioIndex, 0)
-            }
-          />
-        )}
-        {toWhom === 'friend' && (
-          <View style={ticketBuyerFormStyles?.formContainer}>
-            <Input
-              reference={firstNameRef}
-              label={txt.friendForm!.firstName!}
-              value={firstName}
-              onChangeText={(text) =>
-                onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.firstName, text)
-              }
-              styles={ticketBuyerFormStyles?.inputs}
-              error={firstNameError}
-              blurOnSubmit={false}
-              //@ts-ignore
-              onSubmitEditing={lastNameRef.current?.focus}
-              returnKeyType="next"
-            />
-            <Input
-              reference={lastNameRef}
-              label={txt.friendForm!.lastName!}
-              value={lastName}
-              onChangeText={(text) =>
-                onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.lastName, text)
-              }
-              styles={ticketBuyerFormStyles?.inputs}
-              error={lastNameError}
-              blurOnSubmit={false}
-              onSubmitEditing={() => {
-                if (emailRef.current) {
-                  //@ts-ignore
-                  emailRef.current.focus()
-                }
-              }}
-              returnKeyType="next"
-            />
-            <Input
-              reference={emailRef}
-              label={txt.friendForm!.email!}
-              autoCapitalize="none"
-              keyboardType="email-address"
-              value={email}
-              onChangeText={(text) =>
-                onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.email, text)
-              }
-              styles={ticketBuyerFormStyles?.inputs}
-              error={emailError}
-              blurOnSubmit={false}
-              onSubmitEditing={() => {
-                if (confirmEmailRef.current) {
-                  //@ts-ignore
-                  confirmEmailRef.current.focus()
-                }
-              }}
-              returnKeyType="next"
-            />
-            <Input
-              reference={confirmEmailRef}
-              label={txt.friendForm!.emailConfirm!}
-              autoCapitalize="none"
-              keyboardType="email-address"
-              value={emailConfirm}
-              onChangeText={(text) =>
-                onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.emailConfirm, text)
-              }
-              styles={ticketBuyerFormStyles?.inputs}
-              error={emailConfirmError}
-              blurOnSubmit={true}
-              returnKeyType="go"
-            />
-          </View>
-        )}
-        {isTicketsTypeActive && (
-          <RadioButton
-            styles={ticketBuyerFormStyles?.radioButtons}
-            index={1}
-            text={txt.sellToWhom!.anyone!}
-            value={toWhom === 'anyone'}
-            onValueChange={() =>
-              onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.radioIndex, 1)
-            }
-          />
-        )}
-      </View>
-    ),
-    [
-      email,
-      emailConfirm,
-      emailConfirmError,
-      emailError,
-      firstName,
-      firstNameError,
-      isTicketsTypeActive,
-      lastName,
-      lastNameError,
-      onResaleToWhomDataChanged,
-      ticketBuyerFormStyles?.formContainer,
-      ticketBuyerFormStyles?.inputs,
-      ticketBuyerFormStyles?.radioButtons,
-      ticketBuyerFormStyles?.rootContainer,
-      ticketBuyerFormStyles?.title,
-      toWhom,
-      txt.friendForm,
-      txt.sellToWhom,
-    ]
-  )
-
-  useEffect(() => {
-    if (!isTicketsTypeActive) {
-      onResaleToWhomDataChanged(ResaleToWhomFieldIdEnum.radioIndex, 0)
-    }
-  }, [])
-
-  return (
-    <KeyboardAwareScrollView extraScrollHeight={32}>
-      <View style={styles?.rootContainer}>
-        <Text style={styles?.title}>{txt.title}</Text>
-        {OrderDetails}
-        {TicketBuyerForm}
-        {Terms}
-        <Button
-          styles={buttonStyles}
-          text={txt.resaleTicketsButton!}
-          onPress={onPressResaleTickets}
-          isDisabled={!isDataValid}
-          isLoading={isLoading}
-        />
-      </View>
-    </KeyboardAwareScrollView>
-  )
-}
-
-export default ResaleTicketsView

package/src/containers/resaleTickets/types.ts

@@ -1,154 +0,0 @@
-import { StyleProp, Text, TextStyle, ViewStyle } from 'react-native'
-
-import { IMyOrderDetailsTicket, IResaleTicketData } from '../../api/types'
-import { IButtonStyles } from '../../components/button/types'
-import { ICheckboxStyles } from '../../components/checkbox/types'
-import { IInputStyles } from '../../components/input/types'
-import { IRadioButtonStyles } from '../../components/radioButton/types'
-import { IError } from '../../types'
-
-//#region Order Details
-export interface ITicketOrderDetailsStyles {
-  title?: StyleProp<TextStyle>
-  label?: StyleProp<TextStyle>
-  value?: StyleProp<TextStyle>
-  rootContainer?: StyleProp<ViewStyle>
-}
-
-export interface ITicketOrderDetailsProps {
-  styles?: ITicketOrderDetailsStyles
-}
-//#endregion
-
-//#region Ticket Buyer Form
-export interface ITicketBuyerFormStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  radioButtons?: IRadioButtonStyles
-  inputs?: IInputStyles
-  title?: StyleProp<TextStyle>
-  formContainer?: StyleProp<ViewStyle>
-}
-
-export interface IResaleTicketsFormData {
-  firstName: string
-  lastName: string
-  email: string
-  emailConfirm: string
-}
-
-export interface IResaleTicketsFormDataErrors {
-  firstNameError?: string
-  lastNameError?: string
-  emailError?: string
-  emailConfirmError?: string
-}
-
-export interface IResaleToWhomData {
-  toWhom: 'friend' | 'anyone' | undefined
-  someoneData: IResaleTicketsFormData
-  isTermsAgreed: boolean
-}
-export interface ITicketBuyerFormProps {
-  isDataValid?: boolean
-  styles?: ITicketBuyerFormStyles
-}
-//#endregion
-
-//#region Resale Terms
-export interface IResaleTermsStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  title?: StyleProp<TextStyle>
-  item?: StyleProp<TextStyle>
-  itemBold?: StyleProp<TextStyle>
-}
-
-export interface IResaleTermsProps {
-  styles?: IResaleTermsStyles
-  terms: string[] | Text[]
-}
-//#endregion
-
-export interface IResaleTicketsStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  title?: StyleProp<TextStyle>
-  terms?: IResaleTermsStyles
-  resaleTicketsButton?: IButtonStyles
-  resaleTicketsButtonDisabled?: IButtonStyles
-  resaleTicketsButtonLoading?: IButtonStyles
-  ticketOrderDetails?: ITicketOrderDetailsStyles
-  ticketBuyerForm?: ITicketBuyerFormStyles
-  termsCheckbox?: ICheckboxStyles
-}
-
-export interface IResaleTicketsProps {
-  ticket: IMyOrderDetailsTicket
-  isTicketTypeActive?: boolean
-  styles?: IResaleTicketsStyles
-  onResaleTicketsSuccess: (
-    resaleTicketData: IResaleTicketData,
-    ticket: IMyOrderDetailsTicket
-  ) => void
-  onResaleTicketsError?: (error: IError) => void
-  config?: {
-    areAlertsEnabled?: boolean
-    areActivityIndicatorsEnabled?: boolean
-  }
-  texts?: IResaleTicketsViewTexts
-}
-
-export interface IResaleTicketsViewTexts {
-  title?: string
-  orderDetails?: {
-    title?: string
-    eventName?: string
-    orderedBy?: string
-    orderId?: string
-  }
-  sellToWhom?: {
-    title?: string
-    friend?: string
-    anyone?: string
-  }
-  friendForm?: {
-    firstName?: string
-    lastName?: string
-    email?: string
-    emailConfirm?: string
-  }
-  terms?: {
-    title?: string
-    paragraph1?: string
-    paragraph2_1?: string
-    paragraph2_2?: string
-    paragraph3_1?: string
-    paragraph3_2?: string
-  }
-  agree?: string
-  resaleTicketsButton?: string
-}
-
-export enum ResaleToWhomFieldIdEnum {
-  firstName,
-  lastName,
-  email,
-  emailConfirm,
-  radioIndex,
-  terms,
-}
-
-export interface IResaleTicketsViewProps {
-  isLoading?: boolean
-  someoneDataErrors: IResaleTicketsFormDataErrors
-  resaleToWhomData: IResaleToWhomData
-  onResaleToWhomDataChanged: (
-    id: ResaleToWhomFieldIdEnum,
-    value?: string | number
-  ) => void
-  isDataValid?: boolean
-  isSomeoneDataValid?: boolean
-  styles?: IResaleTicketsStyles
-  texts?: IResaleTicketsViewTexts
-  onPressResaleTickets: () => void
-  ticket: IMyOrderDetailsTicket
-  isTicketsTypeActive?: boolean
-}