tf-checkout-react-native 1.0.37 → 1.0.40

package/src/components/login/types.ts

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

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

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

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

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

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

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

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

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

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