tf-checkout-react-native 1.0.37 → 1.0.40

package/src/containers/resaleTickets/ResaleTickets.tsx

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

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

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