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

package/src/components/enterPassword/EnterPassword.tsx

@@ -1,50 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Modal, Text, View } from 'react-native'
-
-import Button from '../button/Button'
-import Input from '../input/Input'
-import s from './styles'
-import { IEnterPasswordProps } from './types'
-
-const EnterPassword: FC<IEnterPasswordProps> = ({
-  styles,
-  texts,
-  onSubmit,
-  isLoading,
-  apiError,
-}) => {
-  const [password, setPassword] = useState('')
-
-  const handleOnSubmit = () => {
-    if (password.length > 0) onSubmit?.(password)
-  }
-
-  return (
-    <Modal presentationStyle="overFullScreen" transparent={false}>
-      <View style={styles?.rootContainer || s.rootContainer}>
-        <View style={styles?.contentContainer || s.contentContainer}>
-          <Text style={styles?.title || s.title}>
-            {texts?.title || 'Password is required for this event'}
-          </Text>
-          <Input
-            label={texts?.inputLabel || `Enter the event's password`}
-            value={password}
-            onChangeText={setPassword}
-            styles={styles?.input}
-            autoCapitalize="none"
-          />
-          {!!apiError && <Text style={s.errorText || styles?.error}>{apiError}</Text>}
-          <Button
-            text={texts?.buttonText || 'Submit'}
-            styles={styles?.button}
-            onPress={handleOnSubmit}
-            isLoading={isLoading}
-            isDisabled={isLoading || password.length === 0}
-          />
-        </View>
-      </View>
-    </Modal>
-  )
-}
-
-export default EnterPassword

package/src/components/enterPassword/styles.ts

@@ -1,23 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export default StyleSheet.create({
-  rootContainer: {
-    flex: 1,
-    backgroundColor: R.colors.white,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    marginHorizontal: 32,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '800',
-    marginBottom: 32,
-  },
-  errorText: {
-    color: R.colors.danger,
-  },
-})

package/src/components/enterPassword/types.ts

@@ -1,27 +0,0 @@
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-import { IButtonStyles } from '../button/types'
-import { IInputStyles } from '../input/types'
-
-export interface IEnterPasswordStyles {
-  input?: IInputStyles
-  title?: StyleProp<TextStyle>
-  error?: StyleProp<TextStyle>
-  button?: IButtonStyles
-  rootContainer?: StyleProp<ViewStyle>
-  contentContainer?: StyleProp<ViewStyle>
-}
-
-export interface IEnterPasswordTexts {
-  inputLabel?: string
-  title?: string
-  buttonText?: string
-}
-
-export interface IEnterPasswordProps {
-  onSubmit?: (text: string) => void
-  isLoading?: boolean
-  apiError?: string
-  texts?: IEnterPasswordTexts
-  styles?: IEnterPasswordStyles
-}

package/src/components/formField/FormField.tsx

@@ -1,131 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-
-import Checkbox from '../checkbox/Checkbox'
-import DatePicker from '../datePicker/DatePicker'
-import DropdownMaterial from '../dropdownMaterial/DropdownMaterial'
-import Input from '../input/Input'
-import RadioGroup from '../radioGroup'
-import styles from './styles'
-import { IFormFieldProps } from './types'
-
-const FormField = ({
-  id,
-  fieldType,
-  error,
-  dropdownProps,
-  inputProps,
-  title,
-  checkboxProps,
-  datePickerProps,
-  radioProps,
-  headerStyle,
-  titleStyle,
-  textStyle,
-}: IFormFieldProps) => {
-  switch (fieldType) {
-    case 'input':
-      return (
-        <Input
-          value={inputProps!.value}
-          id={id}
-          onTextChanged={inputProps!.onTextChanged}
-          label={inputProps!.label || 'Label'}
-          error={error}
-          {...inputProps}
-        />
-      )
-
-    case 'dropdown':
-      // Special handling for multi-select dropdown
-      if (dropdownProps?.isMultiSelect && dropdownProps.selectedOptions) {
-        // For multi-select, we create a display string from selected options
-        const selectedText =
-          dropdownProps.selectedOptions.length > 0
-            ? dropdownProps.selectedOptions.map((item) => item.label).join(', ')
-            : `Select ${dropdownProps?.style?.label?.text || 'items'}`
-
-        // Use a fake selectedOption for the display
-        const displayOption = {
-          value: '',
-          label: selectedText,
-        }
-
-        // Return with special multi-select handling
-        return (
-          <DropdownMaterial
-            items={dropdownProps.options}
-            selectedOption={displayOption}
-            onSelectItem={(item) => dropdownProps.onSelectOption(id!, item)}
-            materialInputProps={{
-              label: dropdownProps?.style?.label?.text || 'Select Multiple',
-              error: error,
-            }}
-          />
-        )
-      } else {
-        // Standard single-select dropdown
-        return (
-          <DropdownMaterial
-            items={dropdownProps!.options}
-            selectedOption={dropdownProps?.selectedOption}
-            onSelectItem={(item) => dropdownProps!.onSelectOption(id!, item)}
-            materialInputProps={{
-              label: dropdownProps?.style?.label?.text || 'Select',
-              error: error,
-            }}
-          />
-        )
-      }
-
-    case 'title':
-      return <Text style={[styles.title, titleStyle]}>{title}</Text>
-
-    case 'header':
-      return <Text style={[styles.header, headerStyle]}>{title}</Text>
-
-    case 'text':
-      return <Text style={[styles.text, textStyle]}>{title}</Text>
-
-    case 'checkbox':
-      return (
-        <Checkbox
-          isActive={checkboxProps!.isActive}
-          text={checkboxProps!.text}
-          onPress={() => {
-            checkboxProps!.onPress(id!)
-          }}
-          styles={checkboxProps?.styles}
-          customTextComp={checkboxProps?.customTextComp}
-        />
-      )
-
-    case 'datePicker':
-      return (
-        <DatePicker
-          error={error}
-          onSelectDate={datePickerProps!.onSelectDate}
-          text={datePickerProps?.text || 'Select date'}
-          onCancel={datePickerProps?.onCancel}
-          selectedDate={datePickerProps!.selectedDate}
-        />
-      )
-
-    case 'radio':
-      return (
-        <RadioGroup
-          options={radioProps!.options}
-          selectedValue={radioProps!.selectedValue}
-          onValueChange={(value) => {
-            // Just call the function directly since we're using non-null assertion
-            radioProps!.onValueChange(value)
-          }}
-          label={radioProps?.label}
-          error={error}
-          styles={radioProps?.styles}
-        />
-      )
-  }
-}
-
-export default FormField

package/src/components/formField/styles.ts

@@ -1,37 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export default StyleSheet.create({
-  dropdownContainer: {
-    width: '100%',
-    height: 50,
-    marginBottom: 24,
-  },
-  dropdownButton: {
-    height: 55,
-    borderWidth: 1,
-    borderRadius: 5,
-  },
-  dropdownLabel: {
-    fontSize: 16,
-    color: R.colors.primary,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '700',
-    marginBottom: 16,
-    color: R.colors.primary,
-  },
-  header: {
-    fontSize: 28,
-    fontWeight: '800',
-    marginBottom: 16,
-    color: R.colors.primary,
-  },
-  text: {
-    fontSize: 14,
-    marginBottom: 16,
-    color: R.colors.primary,
-  },
-})

package/src/components/formField/types.ts

@@ -1,60 +0,0 @@
-import { ReactNode } from 'react'
-import { StyleProp, TextStyle } from 'react-native'
-
-import { ICheckboxStyles } from '../checkbox/types'
-import { IDatePickerProps } from '../datePicker/types'
-import { IDropdownItem } from '../dropdown/types'
-import { IInputProps } from '../input/types'
-import { IRadioGroupProps } from '../radioGroup/types'
-
-export type FieldType =
-  | 'input'
-  | 'dropdown'
-  | 'title'
-  | 'checkbox'
-  | 'text'
-  | 'header'
-  | 'datePicker'
-  | 'radio'
-
-export interface IFormField {
-  value: string | number
-  error?: string
-}
-
-export interface IFormFieldProps {
-  id?: string
-  fieldType: FieldType
-  error?: string
-  validation?: () => void
-  inputProps?: IInputProps
-  dropdownProps?: {
-    selectedOption?: IDropdownItem
-    selectedOptions?: IDropdownItem[] // For multi-select support
-    options: IDropdownItem[]
-    onSelectOption: (id: string, item: IDropdownItem) => void
-    isMultiSelect?: boolean // Flag to indicate multi-select mode
-    style?: {
-      label?: {
-        text?: string
-      }
-      container?: any
-      button?: any
-      icon?: any
-    }
-  }
-  checkboxProps?: {
-    isActive: boolean
-    text: string
-    onPress: (id: string) => void
-    styles?: ICheckboxStyles
-    customTextComp?: ReactNode
-  }
-  title?: string
-  datePickerProps?: IDatePickerProps
-  radioProps?: Omit<IRadioGroupProps, 'error'>
-
-  titleStyle?: StyleProp<TextStyle>
-  headerStyle?: StyleProp<TextStyle>
-  textStyle?: StyleProp<TextStyle>
-}

package/src/components/index.ts

@@ -1,20 +0,0 @@
-export { default as BottomSheetModal } from './bottomSheetModal/BottomSheetModal'
-export { default as Button } from './button/Button'
-export { default as CartTimer } from './cartTimer/CartTimer'
-export { default as Checkbox } from './checkbox/Checkbox'
-export { default as DatePicker } from './datePicker/DatePicker'
-export { default as Dropdown } from './dropdown/Dropdown'
-export { default as DropdownMaterial } from './dropdownMaterial/DropdownMaterial'
-export { default as EnterPassword } from './enterPassword/EnterPassword'
-export { default as FormField } from './formField/FormField'
-export { default as Input } from './input/Input'
-export { default as Loading } from './loading/Loading'
-export { default as LoggedIn } from './loggedIn/LoggedIn'
-export { default as Login } from './login/Login'
-export { default as PhoneInput } from './phoneInput/PhoneInput'
-export { default as PromoCode } from './promoCode/PromoCode'
-export { default as RadioButton } from './radioButton/RadioButton'
-export { default as RadioGroup } from './radioGroup'
-export { default as Separator } from './separator/Separator'
-export { default as StripePayment } from './stripePayment/StripePayment'
-export { default as WaitingList } from './waitingList/WaitingList'

package/src/components/input/Input.tsx

@@ -1,77 +0,0 @@
-//@ts-nocheck
-
-import React from 'react'
-import { Image, TouchableOpacity, View } from 'react-native'
-
-import R from '../../res'
-import s from './styles'
-import { IInputProps } from './types'
-import { OutlinedTextField } from '../../packages/rn-material-ui-textfield'
-
-const Input = (props: IInputProps) => {
-  const {
-    id,
-    value,
-    onTextChanged,
-    onChangeText,
-    reference,
-    label,
-    styles,
-    isShowPasswordButtonVisible,
-    showPasswordImages,
-    secureTextEntry,
-  } = props
-  const mainColor = styles?.baseColor ? styles.baseColor : styles?.color || R.colors.black
-
-  const showPasswordImage = showPasswordImages?.show || R.icons.eye
-  const hidePasswordImage = showPasswordImages?.hide || R.icons.eyeOff
-  const [isShowingPassword, setIsShowingPassword] = React.useState(false)
-
-  const handleOnPressShowPassword = () => {
-    setIsShowingPassword(!isShowingPassword)
-  }
-
-  const showPasswordButton = () => {
-    return (
-      isShowPasswordButtonVisible &&
-      secureTextEntry && (
-        <TouchableOpacity onPress={handleOnPressShowPassword} activeOpacity={0.8}>
-          <Image
-            source={isShowingPassword ? hidePasswordImage : showPasswordImage}
-            style={[s.showPasswordIcon, styles?.showPasswordIcon]}
-          />
-        </TouchableOpacity>
-      )
-    )
-  }
-
-  return (
-    <View style={[s.container, styles?.container]}>
-      <OutlinedTextField
-        placeholderTextColor={styles?.placeholderColor}
-        // inputRef={reference}
-        value={value}
-        onChangeText={(text: string) =>
-          id && onTextChanged ? onTextChanged(id, text) : onChangeText
-        }
-        label={label}
-        tintColor={mainColor}
-        containerStyle={[s.fieldWrapper, styles?.fieldWrapper]}
-        baseColor={mainColor}
-        activeLineWidth={styles?.activeLineWidth || 1}
-        lineWidth={styles?.lineWidth || 1}
-        textContentType={props.isSecure ? 'oneTimeCode' : 'none'}
-        autoCorrect={false}
-        style={styles?.input}
-        errorColor={styles?.errorColor}
-        secureTextEntry={secureTextEntry && !isShowingPassword}
-        renderRightAccessory={showPasswordButton}
-        // // 👇 ADDED/MODIFIED LINE: Explicitly set contentInset to ensure alignment
-        // // contentInset={{ left: 12, top: 10, label: 4, input: 8, right: 12 }}
-        {...props}
-      />
-    </View>
-  )
-}
-
-export default Input

package/src/components/input/styles.ts

@@ -1,53 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-const LEFT_ICON_SIZE = 22
-const TEXT_LEFT_MARGIN = LEFT_ICON_SIZE + 10
-const FONT_SIZE = 16
-
-export default StyleSheet.create({
-  container: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  textLabelFocused: {
-    color: R.colors.primary,
-    fontSize: 14,
-  },
-  textLabelFocusedError: {
-    color: R.colors.danger,
-    fontSize: 14,
-  },
-  textLabel: {
-    color: R.colors.primary,
-    fontSize: FONT_SIZE,
-  },
-  textValue: {
-    color: R.colors.white,
-    fontSize: FONT_SIZE,
-    marginLeft: TEXT_LEFT_MARGIN,
-    marginBottom: -2,
-  },
-  textValueWithoutIcon: {
-    color: R.colors.white,
-    fontSize: FONT_SIZE,
-    marginLeft: 0,
-    marginBottom: -2,
-  },
-  fieldWrapper: {
-    flex: 1,
-  },
-  error: {
-    color: R.colors.danger,
-    fontSize: 14,
-    marginTop: -4,
-  },
-  showPasswordIcon: {
-    tintColor: 'black',
-    width: 24,
-    height: 24,
-  },
-})

package/src/components/input/types.ts

@@ -1,38 +0,0 @@
-import { LegacyRef } from 'react'
-import {
-  ColorValue,
-  ImageSourcePropType,
-  ImageStyle,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-  TextInput,
-} from 'react-native'
-import TextField, { TextFieldProps } from '../../packages/rn-material-ui-textfield'
-
-export interface IInputStyles {
-  color?: ColorValue
-  container?: StyleProp<ViewStyle>
-  input?: StyleProp<TextStyle>
-  lineWidth?: number
-  activeLineWidth?: number
-  baseColor?: ColorValue
-  errorColor?: ColorValue
-  fieldWrapper?: StyleProp<ViewStyle>
-  showPasswordIcon?: StyleProp<ImageStyle>
-  placeholderColor?: ColorValue
-}
-
-export interface IInputProps extends TextFieldProps {
-  isSecure?: boolean
-  reference?: LegacyRef<TextField>
-  id?: string
-  onTextChanged?: (key: string, value: string) => void
-
-  styles?: IInputStyles
-  isShowPasswordButtonVisible?: boolean
-  showPasswordImages?: {
-    show: ImageSourcePropType
-    hide: ImageSourcePropType
-  }
-}

package/src/components/loading/Loading.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { ActivityIndicator, Modal, Text, View } from 'react-native'
-
-import R from '../../res'
-import s from './styles'
-import { ILoadingProps } from './types'
-
-const Loading = ({ text = 'Loading...', styles, customComponent }: ILoadingProps) => {
-  return (
-    <Modal presentationStyle="overFullScreen" transparent={true}>
-      <View style={s.rootContainer}>
-        <View style={[s.content, styles?.content]}>
-          {customComponent ? (
-            customComponent
-          ) : (
-            <>
-              <ActivityIndicator
-                size={styles?.animation?.size || 'large'}
-                color={styles?.animation?.color || R.colors.black}
-              />
-              <Text style={[s.text, styles?.text]}>{text}</Text>
-            </>
-          )}
-        </View>
-      </View>
-    </Modal>
-  )
-}
-
-export default Loading

package/src/components/loading/styles.ts

@@ -1,32 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-import R from '../../res'
-
-export default StyleSheet.create({
-  rootContainer: {
-    flex: 1,
-    backgroundColor: R.colors.transparentBlack,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: R.colors.black,
-    marginTop: 16,
-    fontSize: 18,
-  },
-  content: {
-    backgroundColor: R.colors.white,
-    padding: 24,
-    borderRadius: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    elevation: 3,
-    shadowColor: 'black',
-    shadowOpacity: 0.5,
-    shadowRadius: 5,
-    shadowOffset: {
-      height: 5,
-      width: 0,
-    },
-  },
-})

package/src/components/loading/types.ts

@@ -1,16 +0,0 @@
-import { ActivityIndicatorProps, TextStyle, ViewStyle } from 'react-native'
-
-export interface ILoadingStyles {
-  animation?: {
-    color?: ActivityIndicatorProps['color']
-    size?: ActivityIndicatorProps['size']
-  }
-  content?: ViewStyle
-  text?: TextStyle
-}
-
-export interface ILoadingProps {
-  text?: string
-  styles?: ILoadingStyles
-  customComponent?: any
-}

package/src/components/loggedIn/LoggedIn.tsx

@@ -1,60 +0,0 @@
-import React, { FC } from 'react'
-import { Alert, View } from 'react-native'
-
-import { Button } from '..'
-import s from './styles'
-import { ILoggedInProps } from './types'
-
-const LoggedIn: FC<ILoggedInProps> = ({
-  styles,
-  texts,
-  onPressMyOrders,
-  onPressLogout,
-}) => {
-  const { rootContainer, myOrdersButton, logOutButton } = {
-    ...styles,
-  }
-  const { logoutDialog, myOrderButtonText, logOutButtonText } = { ...texts }
-  const handleMyOrdersPress = async () => {
-    if (onPressMyOrders) {
-      onPressMyOrders()
-    }
-  }
-
-  const handleLogOutPress = () => {
-    if (onPressLogout) {
-      Alert.alert(
-        logoutDialog?.title || 'Do you want to log out?',
-        logoutDialog?.message ||
-          'You will lose your selection and you will need to enter your credentials again.',
-        [
-          {
-            text: logoutDialog?.confirmButton || 'Yes',
-            style: 'destructive',
-            onPress: onPressLogout,
-          },
-          {
-            text: logoutDialog?.cancelButton || 'No',
-          },
-        ]
-      )
-    }
-  }
-
-  return (
-    <View style={[s.rootContainer, rootContainer]}>
-      <Button
-        text={myOrderButtonText || 'MY ORDERS'}
-        onPress={handleMyOrdersPress}
-        styles={myOrdersButton}
-      />
-      <Button
-        text={logOutButtonText || 'LOG OUT'}
-        onPress={handleLogOutPress}
-        styles={logOutButton}
-      />
-    </View>
-  )
-}
-
-export default LoggedIn

package/src/components/loggedIn/styles.ts

@@ -1,9 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  rootContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    marginVertical: 24,
-  },
-})