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

package/src/components/loggedIn/types.ts

@@ -1,27 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native'
-
-import { IButtonStyles } from '../button/types'
-
-export interface ILoggedInTexts {
-  logoutDialog?: {
-    title?: string
-    message?: string
-    confirmButton?: string
-    cancelButton?: string
-  }
-  myOrderButtonText?: string
-  logOutButtonText?: string
-}
-
-export interface ILoggedInStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  myOrdersButton?: IButtonStyles
-  logOutButton?: IButtonStyles
-}
-
-export interface ILoggedInProps {
-  styles?: ILoggedInStyles
-  onPressMyOrders?: () => void
-  onPressLogout?: () => void
-  texts?: ILoggedInTexts
-}

package/src/components/login/Login.tsx

@@ -1,161 +0,0 @@
-import React, { FC, useRef, useState } from 'react'
-import { Keyboard } from 'react-native'
-
-import { LoginCore, LoginCoreHandle } from '../../core'
-import { IUserProfilePublic } from '../../types'
-import LoginView from './LoginView'
-import { ILoginFields, ILoginProps, LoginContentType } from './types'
-
-const Login: FC<ILoginProps> = ({
-  onLoginSuccessful,
-  onLoginError,
-  isLoginDialogVisible,
-  showLoginDialog,
-  hideLoginDialog,
-  userFirstName,
-  onLogoutSuccess,
-  onLogoutError,
-  texts,
-  styles,
-  refs,
-  brandImages,
-  isShowPasswordButtonVisible,
-  onRestorePasswordError,
-  onRestorePasswordSuccess,
-}) => {
-  //#region State
-  const [isLoading, setIsLoading] = useState(false)
-  const [loginApiError, setLoginApiError] = useState('')
-  const [restorePasswordApiError, setRestorePasswordApiError] = useState('')
-  const [restorePasswordSuccessMessage, setRestorePasswordSuccessMessage] = useState('')
-  const [userProfileData, setUserProfileData] = useState<IUserProfilePublic>()
-  const [loginContentType, setLoginContentType] = useState<LoginContentType>('login')
-  const [isRestorePasswordLoading, setIsRestorePasswordLoading] = useState(false)
-  //#endregion State
-
-  const loginCoreRef = useRef<LoginCoreHandle>(null)
-
-  //#region Handlers
-  const handleOnPressForgotPassword = () => setLoginContentType('restorePassword')
-
-  const handleOnPressLogin = async (fields: ILoginFields) => {
-    if (loginApiError) {
-      setLoginApiError('')
-    }
-
-    if (!loginCoreRef.current?.login) {
-      return onLoginError?.({
-        message: 'LoginCoreRef is not initialized',
-      })
-    }
-
-    setIsLoading(true)
-    const {
-      userProfile,
-      error: authorizationError,
-      accessTokenData,
-    } = await loginCoreRef.current.login(fields)
-
-    if (authorizationError || !userProfile) {
-      setIsLoading(false)
-      setLoginApiError(authorizationError?.message || 'Auth error')
-      return onLoginError?.(authorizationError!)
-    }
-
-    Keyboard.dismiss()
-    setUserProfileData(userProfile)
-    onLoginSuccessful({
-      userProfile,
-      accessTokenData,
-    })
-    setIsLoading(false)
-    hideLoginDialog()
-  }
-
-  const handleOnPressLogout = async () => {
-    if (!loginCoreRef.current?.logout) {
-      return onLogoutError?.({ message: 'LoginCoreRef is not initialized' })
-    }
-
-    await loginCoreRef.current.logout()
-
-    setUserProfileData(undefined)
-    onLogoutSuccess?.()
-  }
-
-  const handleOnPressCancelRestorePasswordButton = () => setLoginContentType('login')
-
-  const handleOnPressRestorePasswordButton = async (email: string) => {
-    if (!loginCoreRef.current?.restorePassword) {
-      return onRestorePasswordError?.({
-        message: 'LoginCoreRef is not initialized',
-      })
-    }
-
-    setIsRestorePasswordLoading(true)
-    const { data: restorePasswordSuccessData, error: restorePassError } =
-      await loginCoreRef.current.restorePassword(email)
-    setIsRestorePasswordLoading(false)
-
-    if (restorePassError || !restorePasswordSuccessData) {
-      setRestorePasswordApiError(
-        restorePassError?.message || 'Restore password unknown error'
-      )
-      setIsRestorePasswordLoading(false)
-      onRestorePasswordError?.(restorePassError!)
-      return
-    }
-
-    setLoginContentType('restorePasswordSuccess')
-
-    setRestorePasswordSuccessMessage(restorePasswordSuccessData.message)
-    onRestorePasswordSuccess?.()
-  }
-
-  const handleOnPressRestorePasswordSuccessButton = () => {
-    handleHideDialog()
-  }
-
-  const handleHideDialog = () => {
-    setLoginContentType('login')
-    hideLoginDialog()
-  }
-  //#endregion
-
-  //#region Render Main Content
-  return (
-    <LoginCore ref={loginCoreRef}>
-      <LoginView
-        showDialog={showLoginDialog}
-        hideDialog={handleHideDialog}
-        isDialogVisible={isLoginDialogVisible}
-        onPressLogin={handleOnPressLogin}
-        isLoading={isLoading}
-        userProfile={userProfileData}
-        onPressLogout={handleOnPressLogout}
-        texts={texts}
-        styles={styles}
-        userFirstName={userFirstName}
-        loginApiError={loginApiError}
-        refs={refs}
-        brandImages={brandImages}
-        isShowPasswordButtonVisible={isShowPasswordButtonVisible}
-        content={loginContentType}
-        onPressForgotPassword={handleOnPressForgotPassword}
-        restorePasswordProps={{
-          apiError: restorePasswordApiError,
-          onPressRestorePasswordButton: handleOnPressRestorePasswordButton,
-          isLoading: isRestorePasswordLoading,
-          onPressCancelButton: handleOnPressCancelRestorePasswordButton,
-        }}
-        resultDialogPropsProps={{
-          message: restorePasswordSuccessMessage,
-          onPressButton: handleOnPressRestorePasswordSuccessButton,
-        }}
-      />
-    </LoginCore>
-  )
-  //#endregion Render Main Content
-}
-
-export default Login

package/src/components/login/LoginView.tsx

@@ -1,259 +0,0 @@
-import React, { FC, useMemo, useState } from 'react'
-import { Alert, Image, Modal, Text, TouchableOpacity, View } from 'react-native'
-
-import { useDebounced } from '../../helpers/Debounced'
-import { validateEmail, validateMinLength } from '../../helpers/Validators'
-import R from '../../res'
-import Button from '../button/Button'
-import RestorePassword from '../restorePassword/RestorePassword'
-import ResultDialog from '../restorePassword/ResultDialog'
-import LoginForm from './components/LoginForm'
-import s from './styles'
-import { ILoginViewProps, ILoginViewState } from './types'
-
-const initialState: ILoginViewState = {
-  loginEmail: '',
-  loginPassword: '',
-}
-
-const LoginView: FC<ILoginViewProps> = ({
-  showDialog,
-  hideDialog,
-  isDialogVisible,
-  onPressLogin,
-  isLoading,
-  onPressLogout,
-  styles,
-  texts,
-  userFirstName,
-  loginApiError,
-  brandImages,
-  isShowPasswordButtonVisible,
-  content,
-  onPressForgotPassword,
-  restorePasswordProps,
-  resultDialogPropsProps,
-}) => {
-  const [data, setData] = useState<ILoginViewState>(initialState)
-  const { loginEmail, loginPassword } = data
-
-  const loginEmailError = useDebounced(loginEmail, validateEmail)
-  const loginPasswordError = useDebounced(loginPassword, (value: string) =>
-    validateMinLength(value, 6, 'Password')
-  )
-
-  const handleOnPressLogin = () => {
-    onPressLogin({
-      email: loginEmail,
-      password: loginPassword,
-    })
-  }
-
-  const logoutTitle = texts?.logoutDialog?.title
-    ? texts.logoutDialog.title
-    : 'Are you sure that you want to logout?'
-
-  const logoutMessage = texts?.logoutDialog?.message
-    ? texts.logoutDialog.message
-    : 'You will need to enter your login data again to place the order.'
-
-  const logoutConfirm = texts?.logoutDialog?.confirm
-    ? texts.logoutDialog.confirm
-    : 'Yes, logout'
-
-  const logoutCancel = texts?.logoutDialog?.cancel ? texts.logoutDialog.cancel : 'No'
-
-  const line1 = texts?.line1 || 'Got a TICKETFAIRY account?'
-
-  const line2 = texts?.line2 || 'Login & skip ahead:'
-
-  const handleLogout = () => {
-    setData(initialState)
-    if (onPressLogout) {
-      onPressLogout()
-    }
-  }
-
-  const checkIsLoginDataValid = (): boolean => {
-    if (loginEmailError) {
-      return false
-    }
-    if (loginPasswordError) {
-      return false
-    }
-    return true
-  }
-
-  const LoggedComponent = () => (
-    <View style={styles?.loggedIn?.container}>
-      <Text style={styles?.loggedIn?.placeholder}>
-        {texts?.loggedIn?.loggedAs || 'Logged in as:'}{' '}
-        <Text style={styles?.loggedIn?.value}>{userFirstName}</Text>
-      </Text>
-      <Text style={styles?.loggedIn?.message}>
-        {texts?.loggedIn?.notYou || 'Not you?'}
-      </Text>
-      <Button
-        text={texts?.logoutButton || 'LOGOUT'}
-        onPress={handleOnPressLogout}
-        styles={{ container: s.button, ...styles?.loggedIn?.button }}
-      />
-    </View>
-  )
-
-  const GuestComponent = () => (
-    <>
-      {texts?.message ? (
-        <Text style={styles?.guest?.message}>{texts?.message}</Text>
-      ) : (
-        <View style={styles?.guest?.linesContainer}>
-          <Text style={styles?.guest?.line1}>{line1}</Text>
-          <Text style={styles?.guest?.line2}>{line2}</Text>
-        </View>
-      )}
-      <Button
-        styles={{ container: s.button, ...styles?.guest?.loginButton }}
-        text={texts?.loginButton || 'LOGIN'}
-        onPress={showDialog}
-      />
-    </>
-  )
-
-  const BrandImages = useMemo(
-    () => (
-      <View style={brandImages?.containerStyle}>
-        <Image
-          source={brandImages?.image1 || R.images.brand}
-          style={[s.brand, brandImages?.image1Style]}
-        />
-
-        {brandImages?.image2 && (
-          <Image source={brandImages.image2} style={brandImages?.image2Style} />
-        )}
-      </View>
-    ),
-    [
-      brandImages?.containerStyle,
-      brandImages?.image1,
-      brandImages?.image1Style,
-      brandImages?.image2,
-      brandImages?.image2Style,
-    ]
-  )
-
-  //#region Button Press
-  const handleOnPressLogout = () => {
-    Alert.alert(logoutTitle, logoutMessage, [
-      {
-        text: logoutConfirm,
-        onPress: handleLogout,
-        style: 'destructive',
-      },
-      {
-        text: logoutCancel,
-      },
-    ])
-  }
-  //#endregion Button Press
-
-  //#region Text Changed
-  const handleOnLoginEmailChanged = (text: string) =>
-    setData({ ...data, loginEmail: text })
-
-  const handleOnLoginPasswordChanged = (text: string) =>
-    setData({ ...data, loginPassword: text })
-  //#endregion Text Changed
-
-  const renderContent = (): React.ReactElement => {
-    switch (content) {
-      case 'login':
-        return (
-          <LoginForm
-            email={loginEmail}
-            emailError={loginEmailError}
-            onEmailChanged={handleOnLoginEmailChanged}
-            password={loginPassword}
-            passwordError={loginPasswordError}
-            onPasswordChanged={handleOnLoginPasswordChanged}
-            onPressLoginButton={handleOnPressLogin}
-            onPressForgotPassword={onPressForgotPassword}
-            viewProps={{
-              styles: styles,
-              texts: texts,
-            }}
-            loginApiError={loginApiError}
-            isLoginButtonDisabled={!checkIsLoginDataValid()}
-            isLoading={isLoading}
-            brandImages={BrandImages}
-            isShowPasswordButtonVisible={isShowPasswordButtonVisible}
-          />
-        )
-
-      case 'restorePassword':
-        return (
-          <RestorePassword
-            onPressRestorePasswordButton={
-              restorePasswordProps.onPressRestorePasswordButton
-            }
-            onPressCancelButton={restorePasswordProps.onPressCancelButton}
-            styles={styles?.restorePassword}
-            texts={texts?.restorePassword}
-            isLoading={restorePasswordProps.isLoading}
-          />
-        )
-
-      case 'restorePasswordSuccess':
-        return (
-          <ResultDialog
-            onPressButton={() => {
-              resultDialogPropsProps?.onPressButton()
-            }}
-            message={resultDialogPropsProps?.message}
-          />
-        )
-
-      default:
-        return (
-          <LoginForm
-            email={loginEmail}
-            emailError={loginEmailError}
-            onEmailChanged={handleOnLoginEmailChanged}
-            password={loginPassword}
-            passwordError={loginPasswordError}
-            onPasswordChanged={handleOnLoginPasswordChanged}
-            onPressLoginButton={handleOnPressLogin}
-            onPressForgotPassword={onPressForgotPassword}
-            viewProps={{
-              styles: styles,
-              texts: texts,
-            }}
-            loginApiError={loginApiError}
-            isLoginButtonDisabled={!checkIsLoginDataValid()}
-            isLoading={isLoading}
-            brandImages={BrandImages}
-            isShowPasswordButtonVisible={isShowPasswordButtonVisible}
-          />
-        )
-    }
-  }
-
-  //#region Render main component
-  return (
-    <View style={s.rootContainer}>
-      {userFirstName ? LoggedComponent() : GuestComponent()}
-
-      {isDialogVisible && (
-        <Modal transparent={true} presentationStyle="overFullScreen">
-          <View style={s.touchableContainer}>
-            <TouchableOpacity style={s.dismissibleArea} onPress={hideDialog}>
-              <TouchableOpacity>{renderContent()}</TouchableOpacity>
-            </TouchableOpacity>
-          </View>
-        </Modal>
-      )}
-    </View>
-  )
-  //#endregion Render main component
-}
-
-export default LoginView

package/src/components/login/components/LoginForm.tsx

@@ -1,92 +0,0 @@
-import React, { FC } from 'react'
-import { Text, View } from 'react-native'
-
-import Button from '../../button/Button'
-import Input from '../../input/Input'
-import s from '../styles'
-import { ILoginFormProps } from './types'
-
-const LoginForm: FC<ILoginFormProps> = ({
-  viewProps,
-  email,
-  emailError,
-  onEmailChanged,
-  password,
-  passwordError,
-  onPasswordChanged,
-  loginApiError,
-  isShowPasswordButtonVisible,
-  onPressForgotPassword,
-  isLoginButtonDisabled,
-  isLoading,
-  onPressLoginButton,
-  brandImages,
-}) => {
-  const { styles, texts } = viewProps || {}
-
-  return (
-    <View style={[s.dialog, styles?.dialog?.container]}>
-      <Text style={[s.dialogTitle, styles?.dialog?.title]}>
-        {texts?.dialog?.title || 'Login'}
-      </Text>
-
-      {brandImages}
-
-      {!!texts?.dialog?.message && (
-        <Text style={[s.message, styles?.dialog?.message]}>{texts.dialog.message}</Text>
-      )}
-
-      <Input
-        label={texts?.dialog?.emailLabel || 'Email'}
-        error={emailError}
-        keyboardType="email-address"
-        value={email}
-        onChangeText={onEmailChanged}
-        autoCapitalize="none"
-        styles={styles?.dialog?.input}
-      />
-      <Input
-        label={texts?.dialog?.passwordLabel || 'Password'}
-        error={passwordError}
-        keyboardType="default"
-        value={password}
-        onChangeText={onPasswordChanged}
-        autoCapitalize="none"
-        secureTextEntry={true}
-        isShowPasswordButtonVisible={isShowPasswordButtonVisible}
-        styles={styles?.dialog?.input}
-      />
-
-      {!!loginApiError && (
-        <Text style={[s.error, styles?.dialog?.apiError]}>{loginApiError}</Text>
-      )}
-
-      <Text
-        onPress={onPressForgotPassword}
-        style={[s.forgotPassword, styles?.dialog?.forgotPassword]}
-      >
-        {texts?.dialog?.forgotPassword || 'Forgot Password'}
-      </Text>
-
-      <Button
-        styles={
-          isLoginButtonDisabled
-            ? {
-                container: [s.loginButton],
-                ...styles?.dialog?.loginButtonDisabled,
-              }
-            : {
-                container: [s.loginButton],
-                ...styles?.dialog?.loginButton,
-              }
-        }
-        text={texts?.dialog?.loginButton || 'LOGIN'}
-        onPress={onPressLoginButton}
-        isLoading={isLoading}
-        isDisabled={isLoginButtonDisabled}
-      />
-    </View>
-  )
-}
-
-export default LoginForm

package/src/components/login/components/types.ts

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { ILoginDialogViewProps } from '../types'
-
-//#region LoginForm
-export interface ILoginFormProps {
-  viewProps?: ILoginDialogViewProps
-  email: string
-  emailError?: string
-  onEmailChanged: (text: string) => void
-  password: string
-  passwordError?: string
-  onPasswordChanged: (text: string) => void
-  loginApiError?: string
-  onPressLoginButton: () => void
-  isLoading?: boolean
-  isShowPasswordButtonVisible?: boolean
-  onPressForgotPassword: () => void
-  isLoginButtonDisabled?: boolean
-  brandImages?: React.ReactNode
-}
-//#endregion LoginForm

package/src/components/login/styles.ts

@@ -1,63 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-export default StyleSheet.create({
-  rootContainer: {
-    paddingVertical: 16,
-  },
-  title: {
-    fontWeight: '800',
-  },
-  button: {
-    marginVertical: 16,
-  },
-  touchableContainer: {
-    flex: 1,
-  },
-  dismissibleArea: {
-    flex: 1,
-    backgroundColor: R.colors.transparentBlack,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  dialog: {
-    paddingVertical: 32,
-    width: '80%',
-    backgroundColor: R.colors.white,
-    borderRadius: 2,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-  },
-  dialogTitle: {
-    color: R.colors.black,
-    fontSize: 18,
-    fontWeight: '800',
-  },
-  emailInput: {
-    marginBottom: 16,
-  },
-  loginButton: {
-    height: 45,
-    width: '100%',
-    marginTop: 16,
-  },
-  brand: {
-    width: 200,
-    height: 50,
-    resizeMode: 'contain',
-    marginBottom: 16,
-    tintColor: R.colors.white,
-  },
-  message: {
-    color: R.colors.black,
-    marginBottom: 24,
-    marginTop: -8,
-  },
-  error: {
-    color: R.colors.danger,
-    fontWeight: '600',
-  },
-  forgotPassword: {
-    color: R.colors.black,
-  },
-})