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

package/src/components/login/types.ts

@@ -1,189 +0,0 @@
-import { ImageSourcePropType, ImageStyle } from 'react-native'
-import { TextStyle } from 'react-native'
-import { StyleProp, ViewStyle } from 'react-native'
-
-import { IFetchAccessTokenData } from '../../api/types'
-import { IError, IUserProfilePublic } from '../../types'
-import { IButtonStyles } from '../button/types'
-import { IInputStyles } from '../input/types'
-import {
-  IRestorePasswordCoreProps,
-  IRestorePasswordStyles,
-  IRestorePasswordTexts,
-  IResultDialogCoreProps,
-  IResultDialogStyles,
-  IResultDialogTexts,
-} from '../restorePassword/types'
-
-export interface ILoginRefs {
-  inputs?: {
-    email?: any
-    password?: any
-    restorePasswordEmail?: any
-  }
-  button?: {
-    containerView?: any
-    touchableOpacity?: any
-    loadingView?: any
-    activityIndicator?: any
-    loadingText?: any
-  }
-}
-
-export interface ILoginBrandImages {
-  containerStyle?: StyleProp<ViewStyle>
-  image1?: ImageSourcePropType
-  image1Style?: StyleProp<ImageStyle>
-  image2?: ImageSourcePropType
-  image2Style?: StyleProp<ImageStyle>
-  showPassword?: ImageSourcePropType
-  hidePassword?: ImageSourcePropType
-  showPasswordStyle?: StyleProp<ImageStyle>
-  hidePasswordStyle?: StyleProp<ImageStyle>
-}
-
-// Exported component
-
-export interface ILoginSuccessData {
-  userProfile: IUserProfilePublic
-  accessTokenData?: IFetchAccessTokenData
-}
-
-export interface ILoginProps {
-  onLoginSuccessful: (data: ILoginSuccessData) => void
-  onLoginError?: (error: IError) => void
-
-  isLoginDialogVisible: boolean
-  showLoginDialog: () => void
-  hideLoginDialog: () => void
-
-  //Logout
-  onLogoutSuccess?: () => void
-  onLogoutError?: (error: IError) => void
-
-  styles?: ILoginViewStyles
-  texts?: ILoginViewTexts
-
-  userFirstName?: string
-  refs?: ILoginRefs
-
-  brandImages?: ILoginBrandImages
-  isShowPasswordButtonVisible?: boolean
-
-  //Restore password
-  onRestorePasswordError?: (error: IError) => void
-  onRestorePasswordSuccess?: () => void
-}
-
-export interface ILoginViewStyles {
-  guest?: {
-    loginButton?: IButtonStyles
-    linesContainer?: StyleProp<ViewStyle>
-    line1?: StyleProp<TextStyle>
-    line2?: StyleProp<TextStyle>
-    message?: StyleProp<TextStyle>
-  }
-  dialog?: {
-    container?: StyleProp<ViewStyle>
-    loginButton?: IButtonStyles
-    loginButtonDisabled?: IButtonStyles
-    input?: IInputStyles
-    title?: StyleProp<TextStyle>
-    message?: StyleProp<TextStyle>
-    showPasswordIcon?: StyleProp<ImageStyle>
-    forgotPassword?: StyleProp<TextStyle>
-    apiError?: StyleProp<TextStyle>
-  }
-  loggedIn?: {
-    container?: StyleProp<ViewStyle>
-    placeholder?: StyleProp<TextStyle>
-    value?: StyleProp<TextStyle>
-    button?: IButtonStyles
-    message?: StyleProp<TextStyle>
-  }
-  restorePassword?: IRestorePasswordStyles
-  restorePasswordSuccess?: IResultDialogStyles
-}
-
-export interface ILoginViewTexts {
-  loginButton?: string
-  logoutButton?: string
-  line1?: string
-  line2?: string
-  message?: string
-  dialog?: {
-    loginButton?: string
-    message?: string
-    emailLabel?: string
-    passwordLabel?: string
-    title?: string
-    forgotPassword?: string
-  }
-  logoutDialog?: {
-    title?: string
-    message?: string
-    confirm?: string
-    cancel?: string
-  }
-  loggedIn?: {
-    loggedAs?: string
-    notYou?: string
-  }
-  restorePassword?: IRestorePasswordTexts
-  restorePasswordSuccess?: IResultDialogTexts
-}
-
-//#region Login
-export interface ILoginDialogViewProps {
-  styles?: ILoginViewStyles
-  texts?: ILoginViewTexts
-}
-//#endregion
-
-export type LoginContentType =
-  | 'login'
-  | 'restorePassword'
-  | 'restorePasswordSuccess'
-  | 'resetPassword'
-
-export interface ILoginViewProps {
-  showDialog: () => void
-  hideDialog: () => void
-  isDialogVisible: boolean
-  onPressLogin: (fields: ILoginFields) => void
-  isLoading: boolean
-  userProfile?: IUserProfilePublic
-
-  onPressLogout: () => void
-
-  styles?: ILoginViewStyles
-  texts?: ILoginViewTexts
-
-  loginApiError?: string
-  userFirstName?: string
-
-  refs?: ILoginRefs
-
-  brandImages?: ILoginBrandImages
-
-  isShowPasswordButtonVisible?: boolean
-
-  content: LoginContentType
-
-  // Used to start the Forgot Password flow
-  onPressForgotPassword: () => void
-
-  // Used to send the Restore password request to the server
-  restorePasswordProps: IRestorePasswordCoreProps
-  resultDialogPropsProps?: IResultDialogCoreProps
-}
-
-export interface ILoginFields {
-  email: string
-  password: string
-}
-
-export interface ILoginViewState {
-  loginEmail: string
-  loginPassword: string
-}

package/src/components/phoneInput/PhoneInput.tsx

@@ -1,72 +0,0 @@
-import InputPhone from '@sesamsolutions/phone-input'
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { Platform, View } from 'react-native'
-
-import Input from '../input/Input'
-import s from './/styles'
-import { IOnChangePhoneNumberPayload, IPhoneInputProps } from './types'
-
-const PhoneInput: FC<IPhoneInputProps> = ({
-  phoneNumber,
-  onChangePhoneNumber,
-  onBlur,
-  styles,
-  error,
-  texts,
-  country = 'US',
-}) => {
-  const [localValue, setLocalValue] = useState('')
-  const isUserInitiatedRef = useRef(false)
-
-  useEffect(() => {
-    if (!isUserInitiatedRef.current) {
-      setLocalValue(phoneNumber)
-    }
-    isUserInitiatedRef.current = false
-  }, [phoneNumber])
-
-  const handleOnChangeInputPhone = useCallback(
-    (payload: IOnChangePhoneNumberPayload) => {
-      isUserInitiatedRef.current = true
-      setLocalValue(payload.input)
-      onChangePhoneNumber(payload)
-    },
-    [onChangePhoneNumber]
-  )
-
-  return (
-    <View style={[s.rootContainer, styles?.rootContainer]}>
-      <Input
-        onChangeText={(text) => {
-          isUserInitiatedRef.current = true
-          setLocalValue(text)
-        }}
-        onBlur={onBlur}
-        label={texts?.label || 'Phone number'}
-        keyboardType="phone-pad"
-        value={localValue}
-        styles={{
-          container: s.phoneInputContainer,
-          ...styles?.input,
-          color: error ? styles?.input?.errorColor : styles?.input?.baseColor,
-        }}
-        labelOffset={{ x1: -32 }}
-        renderLeftAccessory={() => (
-          <View style={(s.countryContainer, styles?.country?.container)}>
-            <InputPhone
-              initialCountry={country}
-              onChange={handleOnChangeInputPhone}
-              style={s.countryButton}
-              textStyle={s.textInput}
-              value={localValue}
-              dismissKeyboard={false}
-            />
-          </View>
-        )}
-        error={error}
-      />
-    </View>
-  )
-}
-
-export default PhoneInput

package/src/components/phoneInput/styles.ts

@@ -1,31 +0,0 @@
-import { Platform, StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export default StyleSheet.create({
-  rootContainer: {
-    flexDirection: 'row',
-    width: '100%',
-  },
-  countryContainer: {
-    marginBottom: 0,
-    paddingBottom: 0,
-    width: Platform.OS === 'ios' ? 32 : 16,
-  },
-  countryButton: {
-    width: Platform.OS === 'ios' ? 32 : 32,
-    overflow: 'hidden',
-    marginBottom: -8,
-    paddingBottom: 0,
-    borderBottomWidth: 0,
-    borderBottomColor: R.colors.transparent,
-    zIndex: 4,
-  },
-  phoneInputContainer: {
-    flex: 1,
-  },
-  textInput: {
-    width: 0,
-    borderBottomWidth: 0,
-  },
-})

package/src/components/phoneInput/types.ts

@@ -1,35 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native'
-
-import { IInputStyles } from '../input/types'
-
-export interface IOnChangePhoneNumberPayload {
-  countryCode: string
-  dialCode: string
-  e164: string
-  input: string
-  isValid: boolean
-}
-
-export interface IPhoneInputProps {
-  phoneNumber: string
-  onChangePhoneNumber: (payload: IOnChangePhoneNumberPayload) => void
-  onBlur?: () => void
-  styles?: IPhoneInputStyles
-  error?: string
-  texts?: IPhoneInputTexts
-  country?: string
-}
-
-export interface IPhoneInputTexts {
-  label?: string
-  customError?: string
-}
-
-export interface IPhoneInputStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  country?: {
-    container?: StyleProp<ViewStyle>
-    button?: StyleProp<ViewStyle>
-  }
-  input?: IInputStyles
-}

package/src/components/promoCode/PromoCode.tsx

@@ -1,111 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
-
-import R from '../../res'
-import Button from '../button/Button'
-import s from './styles'
-import { IPromoCodeProps } from './types'
-
-const PromoCode: FC<IPromoCodeProps> = ({
-  onPressApply,
-  promoCodeValidationMessage,
-  isPromoCodeValid,
-  styles,
-  texts,
-  isAccessCodeEnabled,
-  closeButtonIcon,
-}) => {
-  const [isActive, setIsActive] = useState(false)
-  const [promoCode, setPromoCode] = useState('')
-
-  const activate = () => setIsActive(true)
-  const deactivate = (): string => {
-    const code = promoCode
-    setIsActive(false)
-    setPromoCode('')
-    return code
-  }
-
-  const handleOnPressPromoCode = () => {
-    activate()
-  }
-
-  const handleOnPressApply = () => {
-    onPressApply(promoCode)
-  }
-
-  const isCodeValid = () => {
-    if (typeof isPromoCodeValid === 'boolean') {
-      return isPromoCodeValid
-    } else if (typeof isPromoCodeValid === 'number') {
-      return isPromoCodeValid > 0
-    }
-  }
-
-  const isApplyButtonDisabled = promoCode.length === 0
-  const submitButton = texts?.apply
-    ? texts.apply
-    : isAccessCodeEnabled
-      ? 'ENTER'
-      : 'APPLY'
-
-  const resultMessageValidStyle = [s.validMessage, styles?.validMessage]
-  const resultMessageErrorStyle = [s.errorMessage, styles?.errorMessage]
-  const resultMessageStyle = isCodeValid()
-    ? resultMessageValidStyle
-    : resultMessageErrorStyle
-  const resultMessage = isCodeValid()
-    ? texts?.validMessage || 'Valid promo code'
-    : texts?.errorMessage || promoCodeValidationMessage
-
-  return (
-    <View style={[{}, styles?.rootContainer]}>
-      {isActive || isAccessCodeEnabled ? (
-        <View style={styles?.contentWrapper}>
-          <View style={[s.content, styles?.content]}>
-            <TextInput
-              placeholder={texts?.inputPlaceHolder || 'Enter promo code'}
-              placeholderTextColor={styles?.inputPlaceholderColor || R.colors.disabled}
-              value={promoCode}
-              style={[s.input, styles?.input]}
-              onChangeText={(text) => setPromoCode(text)}
-              autoCapitalize="none"
-              underlineColorAndroid={R.colors.transparent}
-            />
-
-            <TouchableOpacity
-              style={[s.cancelButton, styles?.cancelButton]}
-              onPress={deactivate}
-            >
-              <Image
-                source={closeButtonIcon || R.icons.error}
-                style={[s.cancelIcon, styles?.cancelIcon]}
-              />
-            </TouchableOpacity>
-            <Button
-              text={texts?.apply || submitButton}
-              styles={
-                isApplyButtonDisabled ? styles?.applyDisabledButton : styles?.applyButton
-              }
-              onPress={handleOnPressApply}
-              isDisabled={isApplyButtonDisabled}
-            />
-          </View>
-          {!!resultMessage && <Text style={resultMessageStyle}>{resultMessage}</Text>}
-        </View>
-      ) : (
-        <Button
-          text={texts?.mainButton || 'Got a promo code? Click here'}
-          onPress={handleOnPressPromoCode}
-          styles={{
-            text: [s.mainButtonText, styles?.mainButton?.text],
-            container: [s.mainButtonContainer, styles?.mainButton?.container],
-            button: styles?.mainButton?.button,
-          }}
-        />
-      )}
-    </View>
-  )
-}
-
-export default PromoCode

package/src/components/promoCode/styles.ts

@@ -1,63 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export default StyleSheet.create({
-  content: {
-    flexDirection: 'row',
-    width: '100%',
-    alignItems: 'center',
-    backgroundColor: R.colors.listBackground,
-  },
-  input: {
-    paddingHorizontal: 8,
-    minWidth: 100,
-    flex: 0.8,
-    borderColor: R.colors.black,
-    color: R.colors.black,
-    height: 45,
-    fontSize: 16,
-  },
-  applyButton: {
-    backgroundColor: R.colors.primary,
-    paddingHorizontal: 8,
-    flex: 0.4,
-  },
-  applyText: {
-    fontWeight: '400',
-    fontSize: 14,
-    color: R.colors.white,
-  },
-  cancelButton: {
-    padding: 4,
-    flex: 0.2,
-    marginLeft: 4,
-  },
-  cancelIcon: {
-    width: 20,
-    height: 20,
-    tintColor: R.colors.white,
-  },
-  errorMessage: {
-    color: R.colors.danger,
-  },
-  validMessage: {
-    color: R.colors.validGreen,
-  },
-  mainButtonContainer: {},
-  mainButtonText: {
-    fontWeight: '400',
-    fontSize: 14,
-    textAlign: 'center',
-    color: R.colors.white,
-  },
-  messageContainer: {
-    padding: 8,
-    backgroundColor: 'gainsboro',
-    alignItems: 'center',
-  },
-  title: {
-    marginVertical: 16,
-    fontWeight: '600',
-  },
-})

package/src/components/promoCode/types.ts

@@ -1,43 +0,0 @@
-import { ImageSourcePropType, ImageStyle, StyleProp, TextStyle } from 'react-native'
-import { TextInputProps, ViewStyle } from 'react-native'
-
-import { IButtonStyles } from '../button/types'
-
-export interface IPromoCodeStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  contentWrapper?: StyleProp<ViewStyle>
-  content?: StyleProp<ViewStyle>
-  input?: TextInputProps['style']
-  inputPlaceholderColor?: string
-
-  mainButton?: IButtonStyles
-  applyButton?: IButtonStyles
-  applyDisabledButton?: IButtonStyles
-
-  errorMessage?: StyleProp<TextStyle>
-  validMessage?: StyleProp<TextStyle>
-
-  cancelButton?: StyleProp<ViewStyle>
-  cancelIcon?: StyleProp<ImageStyle>
-}
-
-export interface IPromoCodeTexts {
-  promoCodeButton?: string
-  inputPlaceHolder?: string
-  apply?: string
-  cancel?: string
-  mainButton?: string
-
-  errorMessage?: string
-  validMessage?: string
-}
-
-export interface IPromoCodeProps {
-  onPressApply: (promoCode: string) => void
-  promoCodeValidationMessage?: string
-  isPromoCodeValid?: boolean | number
-  styles?: IPromoCodeStyles
-  texts?: IPromoCodeTexts
-  isAccessCodeEnabled?: boolean
-  closeButtonIcon?: ImageSourcePropType
-}

package/src/components/radioButton/RadioButton.tsx

@@ -1,26 +0,0 @@
-import React, { FC } from 'react'
-import { Text, TouchableOpacity, View } from 'react-native'
-
-import s from './styles'
-import { IRadioButtonProps } from './types'
-
-const RadioButton: FC<IRadioButtonProps> = ({
-  styles,
-  text = 'Radio button',
-  value = true,
-  onValueChange,
-}) => (
-  <TouchableOpacity
-    onPress={onValueChange}
-    style={[s.rootContainer, styles?.rootContainer]}
-  >
-    <View style={[s.contentContainer, styles?.contentContainer]}>
-      <View style={[s.radio, styles?.radio]}>
-        {value && <View style={[s.indicator, styles?.indicator]} />}
-      </View>
-      <Text style={styles?.text}>{text}</Text>
-    </View>
-  </TouchableOpacity>
-)
-
-export default RadioButton

package/src/components/radioButton/styles.ts

@@ -1,32 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-const RADIO_SIZE = 20
-const RADIO_RADIUS = RADIO_SIZE / 2
-const INDICATOR_SIZE = RADIO_SIZE * 0.6
-const INDICATOR_RADIUS = INDICATOR_SIZE / 2
-
-export default StyleSheet.create({
-  rootContainer: {
-    marginVertical: 4,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-  },
-  radio: {
-    height: RADIO_SIZE,
-    width: RADIO_SIZE,
-    borderRadius: RADIO_RADIUS,
-    borderWidth: 1,
-    marginRight: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  indicator: {
-    width: INDICATOR_SIZE,
-    height: INDICATOR_SIZE,
-    borderRadius: INDICATOR_RADIUS,
-    backgroundColor: R.colors.black,
-  },
-})

package/src/components/radioButton/types.ts

@@ -1,17 +0,0 @@
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-export interface IRadioButtonStyles {
-  rootContainer?: StyleProp<ViewStyle>
-  contentContainer?: StyleProp<ViewStyle>
-  radio?: StyleProp<ViewStyle>
-  indicator?: StyleProp<ViewStyle>
-  text?: StyleProp<TextStyle>
-}
-
-export interface IRadioButtonProps {
-  index?: number
-  styles?: IRadioButtonStyles
-  text: string
-  value: boolean
-  onValueChange: () => void
-}