tf-checkout-react-native 1.0.37 → 1.0.39

package/src/components/login/Login.tsx

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

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

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

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

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