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

package/src/components/radioGroup/RadioGroup.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import { Text, TouchableOpacity, View } from 'react-native'
-
-import { IRadioGroupProps } from './types'
-
-const RadioGroup = ({
-  options,
-  selectedValue,
-  onValueChange,
-  label,
-  error,
-  styles,
-}: IRadioGroupProps) => {
-  return (
-    <View style={[{ marginBottom: 16 }, styles?.container]}>
-      {label && (
-        <Text
-          style={[
-            { fontSize: 16, fontWeight: '500', marginBottom: 8 },
-            styles?.labelText,
-          ]}
-        >
-          {label}
-        </Text>
-      )}
-      {options.map((option) => {
-        const isSelected = selectedValue === option.value
-        return (
-          <TouchableOpacity
-            key={option.value}
-            style={[
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingVertical: 10,
-              },
-              styles?.optionContainer,
-            ]}
-            onPress={() => {
-              onValueChange(option.value)
-            }}
-          >
-            <View
-              style={[
-                {
-                  height: 20,
-                  width: 20,
-                  borderRadius: 10,
-                  borderWidth: 2,
-                  borderColor: isSelected ? '#007BFF' : '#C4C4C4',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  marginRight: 10,
-                },
-                styles?.radioOuter,
-                isSelected && styles?.radioOuterSelected,
-              ]}
-            >
-              {isSelected && (
-                <View
-                  style={[
-                    {
-                      height: 10,
-                      width: 10,
-                      borderRadius: 5,
-                      backgroundColor: '#007BFF',
-                    },
-                    styles?.radioInner,
-                  ]}
-                />
-              )}
-            </View>
-            <Text style={[{}, styles?.optionText]}>{option.label}</Text>
-          </TouchableOpacity>
-        )
-      })}
-      {error && (
-        <Text style={[{ color: 'red', fontSize: 12, marginTop: 5 }, styles?.errorText]}>
-          {error}
-        </Text>
-      )}
-    </View>
-  )
-}
-
-export default RadioGroup

package/src/components/radioGroup/index.ts

@@ -1,4 +0,0 @@
-import RadioGroup from './RadioGroup'
-
-export default RadioGroup
-export * from './types'

package/src/components/radioGroup/types.ts

@@ -1,26 +0,0 @@
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-export interface IRadioOption {
-  value: string
-  label: string
-}
-
-export interface IRadioGroupStyles {
-  container?: StyleProp<ViewStyle>
-  labelText?: StyleProp<TextStyle>
-  errorText?: StyleProp<TextStyle>
-  optionContainer?: StyleProp<ViewStyle>
-  optionText?: StyleProp<TextStyle>
-  radioOuter?: StyleProp<ViewStyle>
-  radioOuterSelected?: StyleProp<ViewStyle>
-  radioInner?: StyleProp<ViewStyle>
-}
-
-export interface IRadioGroupProps {
-  options: IRadioOption[]
-  selectedValue?: string
-  onValueChange: (value: string) => void
-  label?: string
-  error?: string
-  styles?: IRadioGroupStyles
-}

package/src/components/restorePassword/RestorePassword.tsx

@@ -1,63 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Text, View } from 'react-native'
-
-import { useDebounced } from '../../helpers/Debounced'
-import { validateEmail } from '../../helpers/Validators'
-import Button from '../button/Button'
-import Input from '../input/Input'
-import { restorePasswordStyles as s } from './styles'
-import { IRestorePasswordProps } from './types'
-
-const RestorePassword: FC<IRestorePasswordProps> = ({
-  styles,
-  texts,
-  isLoading,
-  onPressRestorePasswordButton,
-  onPressCancelButton,
-  apiError,
-}) => {
-  const [email, setEmail] = useState('')
-  const emailError = useDebounced(email, validateEmail)
-
-  const handleOnPressRestoreButton = () => {
-    onPressRestorePasswordButton(email)
-  }
-
-  return (
-    <View style={[s.rootContainer, styles?.rootContainer]}>
-      <Text style={[s.title, styles?.title]}>
-        {texts?.title || 'Enter your email to restore your password'}
-      </Text>
-
-      <Input
-        label={texts?.inputLabel || 'Email'}
-        error={emailError}
-        keyboardType="email-address"
-        value={email}
-        onChangeText={setEmail}
-        autoCapitalize="none"
-        styles={styles?.input}
-      />
-
-      {!!apiError && <Text style={styles?.apiError}>{apiError}</Text>}
-
-      <Button
-        text={texts?.restorePasswordButton || 'RESTORE PASSWORD'}
-        onPress={handleOnPressRestoreButton}
-        isLoading={isLoading}
-        isDisabled={isLoading || !!emailError || email.length === 0}
-        styles={styles?.restorePasswordButton}
-      />
-
-      {!isLoading && (
-        <Button
-          text={texts?.cancelButton || 'CANCEL'}
-          onPress={onPressCancelButton}
-          styles={styles?.cancelRestorePasswordButton}
-        />
-      )}
-    </View>
-  )
-}
-
-export default RestorePassword

package/src/components/restorePassword/ResultDialog.tsx

@@ -1,26 +0,0 @@
-import React, { FC } from 'react'
-import { Text, View } from 'react-native'
-
-import Button from '../button/Button'
-import { restorePasswordSuccessStyles as s } from './styles'
-import { IResultDialogProps } from './types'
-
-const ResultDialog: FC<IResultDialogProps> = ({
-  styles,
-  texts,
-  message,
-  onPressButton,
-}) => (
-  <View style={[s.rootContainer, styles?.rootContainer]}>
-    <Text style={[s.title, styles?.title]}>{texts?.title || 'Email Sent!'}</Text>
-
-    {!!texts?.message && (
-      <Text style={[s.message, styles?.message]}>{texts.message}</Text>
-    )}
-    {!!message && <Text>{message}</Text>}
-
-    <Button text={texts?.button || 'OK'} onPress={onPressButton!} />
-  </View>
-)
-
-export default ResultDialog

package/src/components/restorePassword/styles.ts

@@ -1,38 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export const restorePasswordStyles = StyleSheet.create({
-  rootContainer: {
-    paddingVertical: 32,
-    width: '80%',
-    backgroundColor: R.colors.white,
-    borderRadius: 2,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-  },
-  title: {
-    color: R.colors.black,
-    fontSize: 18,
-    fontWeight: '800',
-  },
-})
-
-export const restorePasswordSuccessStyles = StyleSheet.create({
-  rootContainer: {
-    paddingVertical: 32,
-    width: '80%',
-    backgroundColor: R.colors.white,
-    borderRadius: 2,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-  },
-  title: {
-    color: R.colors.black,
-    fontSize: 18,
-    fontWeight: '800',
-  },
-  message: {
-    color: R.colors.black,
-  },
-})

package/src/components/restorePassword/types.ts

@@ -1,61 +0,0 @@
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-import { IButtonStyles } from '../button/types'
-import { IInputStyles } from '../input/types'
-
-//#region RestorePassword
-export interface IRestorePasswordTexts {
-  restorePasswordButton?: string
-  cancelButton?: string
-  message?: string
-  inputLabel?: string
-  title?: string
-}
-
-export interface IRestorePasswordStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  restorePasswordButton?: IButtonStyles
-  cancelRestorePasswordButton?: IButtonStyles
-  input?: IInputStyles
-  title?: StyleProp<TextStyle>
-  message?: StyleProp<TextStyle>
-  apiError?: StyleProp<TextStyle>
-}
-
-export interface IRestorePasswordCoreProps {
-  apiError?: string
-  onPressRestorePasswordButton: (email: string) => void
-  onPressCancelButton: () => void
-  isLoading?: boolean
-}
-
-export interface IRestorePasswordProps extends IRestorePasswordCoreProps {
-  styles?: IRestorePasswordStyles
-  texts?: IRestorePasswordTexts
-}
-//#endregion RestorePasswordForm
-
-//#region RestorePasswordSuccess
-export interface IResultDialogStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  title?: StyleProp<TextStyle>
-  message?: StyleProp<TextStyle>
-  button?: IButtonStyles
-}
-
-export interface IResultDialogTexts {
-  title?: string
-  message?: string
-  button?: string
-}
-
-export interface IResultDialogCoreProps {
-  message?: string
-  onPressButton: () => void
-}
-
-export interface IResultDialogProps extends IResultDialogCoreProps {
-  styles?: IResultDialogStyles
-  texts?: IResultDialogTexts
-}
-//#endregion

package/src/components/separator/Separator.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-
-import { ISeparatorProps } from './types'
-
-const Separator = ({
-  color,
-  height,
-  width,
-  marginLeft,
-  marginVertical,
-}: ISeparatorProps) => {
-  return (
-    <View
-      style={{
-        height: height || 1,
-        backgroundColor: color || '#DEDEDE',
-        width: width || '99%',
-        marginLeft: marginLeft || '0.5%',
-        marginVertical: marginVertical,
-      }}
-    />
-  )
-}
-
-export default Separator

package/src/components/separator/types.ts

@@ -1,9 +0,0 @@
-import { ViewStyle } from 'react-native'
-
-export interface ISeparatorProps {
-  color?: string
-  height?: number
-  width?: ViewStyle['width']
-  marginLeft?: ViewStyle['marginLeft']
-  marginVertical?: ViewStyle['marginVertical']
-}

package/src/components/stripePayment/StripePayment.tsx

@@ -1,51 +0,0 @@
-import {
-  CardForm,
-  initStripe,
-  InitStripeParams,
-  PaymentIntent,
-  useConfirmPayment,
-} from '@stripe/stripe-react-native'
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle } from 'react'
-
-import styles from './styles'
-import { IStripePaymentProps, StripePaymentHandle } from './types'
-
-const StripePayment = forwardRef<StripePaymentHandle, IStripePaymentProps>(
-  (props, ref) => {
-    const { confirmPayment, loading } = useConfirmPayment()
-
-    const handleOnChangeConfirmPaymentLoading = useCallback(
-      (isLoading: boolean) => {
-        props.onChangeConfirmPaymentLoading?.(isLoading)
-      },
-      [props]
-    )
-
-    useEffect(() => {
-      handleOnChangeConfirmPaymentLoading(loading)
-    }, [handleOnChangeConfirmPaymentLoading, loading])
-
-    useImperativeHandle(ref, () => ({
-      async initStripe(params: InitStripeParams): Promise<any> {
-        return await initStripe(params)
-      },
-
-      async confirmPayment(
-        stripeClientSecret: string,
-        params: PaymentIntent.ConfirmParams
-      ): Promise<any> {
-        return await confirmPayment(stripeClientSecret, params)
-      },
-    }))
-
-    return (
-      <CardForm
-        onFormComplete={props.onChangePaymentInfo}
-        style={[styles.cardForm, props.style]}
-        cardStyle={props.cardStyle}
-      />
-    )
-  }
-)
-
-export default StripePayment

package/src/components/stripePayment/styles.ts

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  cardForm: {
-    height: 300,
-  },
-})

package/src/components/stripePayment/types.ts

@@ -1,22 +0,0 @@
-import {
-  CardFormView,
-  InitStripeParams,
-  PaymentIntent,
-} from '@stripe/stripe-react-native'
-import { StyleProp, ViewStyle } from 'react-native'
-
-export interface IStripePaymentProps {
-  onChangePaymentInfo: (paymentInfo: CardFormView.Details) => void
-  onChangeConfirmPaymentLoading?: (loading: boolean) => void
-  style?: StyleProp<ViewStyle>
-  cardStyle?: CardFormView.Styles
-  rootContainer?: any
-}
-
-export type StripePaymentHandle = {
-  initStripe(params: InitStripeParams): Promise<any>
-  confirmPayment(
-    stripeClientSecret: string,
-    params: PaymentIntent.ConfirmParams
-  ): Promise<any>
-}

package/src/components/waitingList/WaitingList.tsx

@@ -1,147 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-import { Alert } from 'react-native'
-
-import { IFetchAccessTokenResponse } from '../../api/types'
-import { WaitingListCore, WaitingListCoreHandle } from '../../core'
-import { SessionCoreHandleType } from '../../core/Session/SessionCoreTypes'
-import { IAddToWaitingListCoreParams } from '../../core/WaitingListCore/WaitingListCoreTypes'
-import { useDebounced } from '../../helpers/Debounced'
-import { validateEmail, validateEmpty } from '../../helpers/Validators'
-import { IWaitingListProps } from './types'
-import WaitingListView from './WaitingListView'
-
-const WaitingList = forwardRef<SessionCoreHandleType, IWaitingListProps>(
-  (
-    {
-      styles,
-      texts,
-      onAddToWaitingListError,
-      onAddToWaitingListSuccess,
-      onLoadingChange,
-      areAlertsEnabled,
-    },
-    ref
-  ) => {
-    //#region State
-    const [isSuccess, setIsSuccess] = useState<boolean | undefined>(undefined)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [firstName, setFirstName] = useState('')
-    const [lastName, setLastName] = useState('')
-    const [email, setEmail] = useState('')
-
-    const firstNameError = useDebounced(firstName, validateEmpty)
-    const lastNameError = useDebounced(lastName, validateEmpty)
-    const emailError = useDebounced(email, validateEmail)
-    //#endregion State
-
-    const handleSetFirstName = (val: string) => setFirstName(val)
-    const handleSetLastName = (val: string) => setLastName(val)
-    const handleSetEmail = (val: string) => setEmail(val)
-
-    //#region Ref
-    const waitingListCoreRef = useRef<WaitingListCoreHandle>(null)
-    //#endregion Ref
-
-    const showAlert = (message: string) => {
-      if (areAlertsEnabled) {
-        Alert.alert('', message)
-      }
-    }
-
-    //#region Imperative Handler
-    useImperativeHandle(ref, () => ({
-      async refreshAccessToken(refreshToken: string): Promise<IFetchAccessTokenResponse> {
-        const { accessTokenError, accessTokenData } =
-          await waitingListCoreRef.current!.refreshAccessToken(refreshToken)
-
-        return {
-          accessTokenData,
-          accessTokenError,
-        }
-      },
-
-      async reloadData() {},
-    }))
-    //#endregion Imperative Handler
-
-    //#region Handlers
-    const handleOnPressButton = async () => {
-      if (!waitingListCoreRef.current) {
-        showAlert('WaitingListCore is not initialized')
-        return onAddToWaitingListError?.({
-          message: 'WaitingListCore is not initialized',
-        })
-      }
-
-      const values: IAddToWaitingListCoreParams = {
-        firstName: firstName,
-        lastName: lastName,
-        email: email,
-      }
-
-      setIsLoading(true)
-
-      const { addToWaitingListData, addToWaitingListError } =
-        await waitingListCoreRef.current.addToWaitingList(values)
-
-      setIsLoading(false)
-      if (addToWaitingListError) {
-        setIsSuccess(false)
-        showAlert(addToWaitingListError.message)
-        onAddToWaitingListError?.(addToWaitingListError)
-        return
-      }
-
-      if (addToWaitingListData) {
-        onAddToWaitingListSuccess?.()
-        setIsSuccess(true)
-      }
-    }
-
-    const onLoadingChangeCallback = useCallback(
-      (loading: boolean) => {
-        onLoadingChange?.(loading)
-      },
-      [onLoadingChange]
-    )
-    //#endregion Handlers
-
-    useEffect(() => {
-      onLoadingChangeCallback(isLoading)
-    }, [isLoading, onLoadingChangeCallback])
-
-    //#region RENDER
-    return (
-      <WaitingListCore ref={waitingListCoreRef}>
-        <WaitingListView
-          data={{
-            firstName: firstName,
-            lastName: lastName,
-            email: email,
-            firstNameError: firstNameError,
-            lastNameError: lastNameError,
-            emailError: emailError,
-            onChangeEmail: handleSetEmail,
-            onChangeFirstName: handleSetFirstName,
-            onChangeLastName: handleSetLastName,
-          }}
-          onPressButton={handleOnPressButton}
-          isSuccess={isSuccess}
-          styles={styles}
-          texts={texts}
-          isLoading={isLoading}
-        />
-      </WaitingListCore>
-    )
-    //#endregion RENDER
-  }
-)
-
-export default WaitingList

package/src/components/waitingList/WaitingListView.tsx

@@ -1,94 +0,0 @@
-import React, { FC } from 'react'
-import { Text, View } from 'react-native'
-
-import { Button, Input } from '..'
-import s from './styles'
-import { IWaitingListViewProps } from './types'
-
-const WaitingListView: FC<IWaitingListViewProps> = ({
-  styles,
-  texts,
-  onPressButton,
-  data,
-  isSuccess,
-  isLoading,
-}) => {
-  const {
-    firstName,
-    lastName,
-    email,
-    emailError,
-    lastNameError,
-    firstNameError,
-    onChangeEmail,
-    onChangeFirstName,
-    onChangeLastName,
-  } = data
-
-  const getIsDataValid = () =>
-    firstName.length > 0 &&
-    lastName.length > 0 &&
-    email.length > 0 &&
-    !emailError &&
-    !lastNameError &&
-    !firstNameError
-
-  const isDataValid = getIsDataValid()
-
-  const buttonStyle = isDataValid
-    ? styles?.button
-    : styles?.buttonDisabled
-      ? styles?.buttonDisabled
-      : styles?.button
-
-  return (
-    <View style={styles?.rootContainer}>
-      {isSuccess ? (
-        <View style={styles?.success?.container}>
-          <Text style={styles?.success?.title}>
-            {texts?.successTitle || `You've been added to the waiting list!`}
-          </Text>
-          <Text style={styles?.success?.message}>
-            {texts?.successMessage || `You'll be notified if tickets become available.`}
-          </Text>
-        </View>
-      ) : (
-        <>
-          <Text style={[s.title, styles?.title]}>{texts?.title || 'Waiting list'}</Text>
-          <Input
-            label={texts?.firstName || 'First name'}
-            value={firstName}
-            onChangeText={onChangeFirstName}
-            error={firstNameError}
-            styles={styles?.input}
-          />
-          <Input
-            label={texts?.lastName || 'Last name'}
-            value={lastName}
-            onChangeText={onChangeLastName}
-            error={lastNameError}
-            styles={styles?.input}
-          />
-          <Input
-            label={texts?.email || 'Email'}
-            keyboardType="email-address"
-            autoCapitalize="none"
-            value={email}
-            onChangeText={onChangeEmail}
-            error={emailError}
-            styles={styles?.input}
-          />
-          <Button
-            onPress={onPressButton}
-            text={texts?.button || 'ADD TO WAITING LIST'}
-            styles={buttonStyle}
-            isDisabled={!isDataValid}
-            isLoading={isLoading}
-          />
-        </>
-      )}
-    </View>
-  )
-}
-
-export default WaitingListView

package/src/components/waitingList/styles.ts

@@ -1,9 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  title: {
-    fontSize: 20,
-    fontWeight: '800',
-    marginBottom: 24,
-  },
-})