tf-checkout-react-native 1.0.37 → 1.0.40

package/src/components/radioGroup/RadioGroup.tsx

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

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

package/src/components/radioGroup/types.ts

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

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

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

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

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

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

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

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

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

package/src/components/stripePayment/types.ts

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

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

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

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