tf-checkout-react-native 1.0.37 → 1.0.40

package/src/components/enterPassword/EnterPassword.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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