tf-checkout-react-native 1.0.37 → 1.0.39

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,111 @@
+//@ts-nocheck
+
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FlatList,
+  Image,
+  Modal,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+
+import R from '../../res'
+import Separator from '../separator/Separator'
+import DropdownListItem from './DropdownListItem'
+import { DropdownStyles as s } from './styles'
+import { IDropdownItem, IDropdownProps } from './types'
+
+const Dropdown = ({ items, selectedOption, onSelectItem, styles }: IDropdownProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const flatListRef: MutableRefObject<FlatList> = useRef()
+
+  const showModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(true)
+    })
+  }
+  const hideModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(false)
+    })
+  }
+
+  const handleOnSelectItem = (item: IDropdownItem) => {
+    onSelectItem(item)
+    hideModal()
+  }
+
+  useEffect(() => {
+    if (flatListRef?.current) {
+      flatListRef.current.flashScrollIndicators()
+    }
+  }, [isModalVisible])
+
+  const renderItem = useCallback(
+    ({ item }) => (
+      <DropdownListItem
+        item={item}
+        onSelectItem={handleOnSelectItem}
+        selectedOption={selectedOption}
+        styles={styles?.listItem}
+      />
+    ),
+
+    [handleOnSelectItem, selectedOption]
+  )
+
+  const keyExtractor = useCallback((item: IDropdownItem) => item.value.toString(), [])
+
+  const renderSeparator = useCallback(() => <Separator />, [])
+
+  const getItemLayout = useCallback(
+    (data, index) => ({
+      length: 45,
+      offset: 45 * index,
+      index,
+    }),
+    []
+  )
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity onPress={showModal} style={[s.button, styles?.button]}>
+        <Text style={[s.label, styles?.label]}>{selectedOption?.label}</Text>
+        <Image source={R.icons.dropdown} style={[s.icon, styles?.icon]} />
+      </TouchableOpacity>
+      {isModalVisible && items.length > 0 && (
+        <Modal presentationStyle="overFullScreen" transparent={true}>
+          <View style={s.modalContainer}>
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hideModal}
+              style={s.modalBackgroundTouchable}
+            >
+              <TouchableWithoutFeedback>
+                <View style={[s.dialog, styles?.dialog]}>
+                  <FlatList
+                    keyExtractor={keyExtractor}
+                    ref={flatListRef}
+                    indicatorStyle="black"
+                    data={items}
+                    extraData={items}
+                    maxToRenderPerBatch={6}
+                    initialNumToRender={6}
+                    renderItem={renderItem}
+                    ItemSeparatorComponent={renderSeparator}
+                    getItemLayout={getItemLayout}
+                    style={[s.flatListContainer, styles?.flatListContainer]}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </View>
+        </Modal>
+      )}
+    </View>
+  )
+}
+
+export default Dropdown

package/src/components/dropdown/DropdownListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+
+import { DropdownListItemStyles as s } from './styles'
+import { IDropdownListItemProps } from './types'
+
+const DropdownListItem = ({
+  item,
+  onSelectItem,
+  selectedOption,
+  styles,
+}: IDropdownListItemProps) => {
+  const handleOnSelectItem = () => onSelectItem(item)
+  const isSelected = !!selectedOption && selectedOption.value === item.value
+  const selectedStyles = [s.buttonSelected, styles?.buttonSelected]
+
+  const buttonStyles = [s.button, styles?.button]
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity
+        onPress={handleOnSelectItem}
+        style={isSelected ? selectedStyles : buttonStyles}
+      >
+        <Text
+          style={[s.text, isSelected ? styles?.textSelected : styles?.text]}
+          numberOfLines={2}
+        >
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default DropdownListItem

package/src/components/dropdown/styles.ts

@@ -0,0 +1,97 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: sWidth, height: sHeight } = Dimensions.get('window')
+
+const DIALOG = {
+  width: sWidth * 0.8,
+  maxHeight: sHeight * 0.5,
+  minHeight: sHeight * 0.2,
+}
+
+export const DropdownStyles = StyleSheet.create({
+  rootContainer: {
+    width: 50,
+  },
+  button: {
+    width: '100%',
+    borderWidth: 2,
+    height: 45,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    borderColor: R.colors.black,
+  },
+  icon: {
+    height: 14,
+    width: 14,
+    resizeMode: 'contain',
+    tintColor: R.colors.black,
+  },
+  label: {
+    color: R.colors.black,
+    fontSize: 16,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.8)',
+  },
+  modalBackgroundTouchable: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialog: {
+    backgroundColor: R.colors.white,
+    paddingVertical: 16,
+    borderRadius: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: DIALOG.width,
+    maxHeight: DIALOG.maxHeight,
+    minHeight: DIALOG.minHeight,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 3,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
+  flatListContainer: {
+    width: DIALOG.width,
+  },
+})
+
+export const DropdownListItemStyles = StyleSheet.create({
+  rootContainer: {
+    paddingVertical: 4,
+    minWidth: 100,
+    alignItems: 'center',
+  },
+  button: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.white,
+    paddingHorizontal: 8,
+  },
+  buttonSelected: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.tint,
+    paddingHorizontal: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    color: R.colors.black,
+  },
+})

package/src/components/dropdown/types.ts

@@ -0,0 +1,38 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+export interface IDropdownItem {
+  label: string
+  value: string | number
+  [key: string]: string | number
+}
+
+export interface IDropdownListItemStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  buttonSelected?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+  textSelected?: StyleProp<TextStyle>
+}
+
+export interface IDropdownListItemProps {
+  item: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  selectedOption?: IDropdownItem
+  styles?: IDropdownListItemStyles
+}
+
+export interface IDropdownStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  label?: StyleProp<TextStyle>
+  dialog?: StyleProp<ViewStyle>
+  flatListContainer?: StyleProp<ViewStyle>
+  listItem?: IDropdownListItemStyles
+}
+
+export interface IDropdownProps {
+  items: IDropdownItem[]
+  selectedOption?: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  styles?: IDropdownStyles
+}

package/src/components/dropdownMaterial/DropdownMaterial.tsx

@@ -0,0 +1,129 @@
+//@ts-nocheck
+
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FlatList,
+  Image,
+  Modal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+
+import R from '../../res'
+import DropdownListItem from '../dropdown/DropdownListItem'
+import Input from '../input/Input'
+import Separator from '../separator/Separator'
+import { DropdownMaterialStyles as s } from './styles'
+import { IDropdownItem, IDropdownMaterialProps } from './types'
+
+const DropdownMaterial = ({
+  items,
+  selectedOption,
+  onSelectItem,
+  styles,
+  materialInputProps,
+}: IDropdownMaterialProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const flatListRef: MutableRefObject<FlatList> = useRef()
+
+  const showModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(true)
+    })
+  }
+  const hideModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(false)
+    })
+  }
+
+  const handleOnSelectItem = (item: IDropdownItem) => {
+    onSelectItem(item)
+    hideModal()
+  }
+
+  useEffect(() => {
+    if (flatListRef?.current) {
+      flatListRef.current.flashScrollIndicators()
+    }
+  }, [isModalVisible])
+
+  const renderItem = useCallback(
+    ({ item }) => (
+      <DropdownListItem
+        item={item}
+        onSelectItem={handleOnSelectItem}
+        selectedOption={selectedOption}
+        styles={styles?.listItem}
+      />
+    ),
+
+    [handleOnSelectItem, selectedOption]
+  )
+
+  const keyExtractor = useCallback((item: IDropdownItem) => item.value.toString(), [])
+
+  const renderSeparator = useCallback(() => <Separator />, [])
+
+  const getItemLayout = useCallback(
+    (data, index) => ({
+      length: 45,
+      offset: 45 * index,
+      index,
+    }),
+    []
+  )
+
+  const RightComponent = useCallback(
+    () => <Image source={R.icons.dropdown} style={[s.icon, styles?.icon]} />,
+    [styles?.icon]
+  )
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity onPress={showModal} style={s.button}>
+        <Input
+          {...materialInputProps}
+          value={selectedOption?.label}
+          styles={styles?.input}
+          disabled={true}
+          pointerEvents="box-none"
+          disabledLineWidth={1}
+          renderRightAccessory={RightComponent}
+        />
+      </TouchableOpacity>
+      {isModalVisible && items.length > 0 && (
+        <Modal presentationStyle="overFullScreen" transparent={true}>
+          <View style={s.modalContainer}>
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hideModal}
+              style={s.modalBackgroundTouchable}
+            >
+              <TouchableWithoutFeedback>
+                <View style={[s.dialog, styles?.dialog]}>
+                  <FlatList
+                    keyExtractor={keyExtractor}
+                    ref={flatListRef}
+                    indicatorStyle="black"
+                    data={items}
+                    extraData={items}
+                    maxToRenderPerBatch={6}
+                    initialNumToRender={6}
+                    renderItem={renderItem}
+                    ItemSeparatorComponent={renderSeparator}
+                    getItemLayout={getItemLayout}
+                    style={[s.flatListContainer, styles?.flatListContainer]}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </View>
+        </Modal>
+      )}
+    </View>
+  )
+}
+
+export default DropdownMaterial

package/src/components/dropdownMaterial/styles.ts

@@ -0,0 +1,91 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: sWidth, height: sHeight } = Dimensions.get('window')
+
+const DIALOG = {
+  width: sWidth * 0.8,
+  maxHeight: sHeight * 0.5,
+  minHeight: sHeight * 0.2,
+}
+
+export const DropdownMaterialStyles = StyleSheet.create({
+  rootContainer: {
+    width: '100%',
+    height: 45,
+    marginBottom: 32,
+  },
+  button: {
+    height: '120%',
+  },
+  icon: {
+    height: 14,
+    width: 14,
+    resizeMode: 'contain',
+    tintColor: R.colors.white,
+  },
+  label: {
+    color: R.colors.black,
+    fontSize: 16,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.8)',
+  },
+  modalBackgroundTouchable: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialog: {
+    backgroundColor: R.colors.white,
+    paddingVertical: 16,
+    borderRadius: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: DIALOG.width,
+    maxHeight: DIALOG.maxHeight,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 3,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
+  flatListContainer: {
+    width: DIALOG.width,
+  },
+})
+
+export const DropdownListItemStyles = StyleSheet.create({
+  rootContainer: {
+    paddingVertical: 4,
+    minWidth: 100,
+    alignItems: 'center',
+  },
+  button: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.white,
+    paddingHorizontal: 8,
+  },
+  buttonSelected: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.tint,
+    paddingHorizontal: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    color: R.colors.black,
+  },
+})

package/src/components/dropdownMaterial/types.ts

@@ -0,0 +1,24 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IDropdownItem, IDropdownListItemStyles } from '../dropdown/types'
+import { IInputProps, IInputStyles } from '../input/types'
+
+export interface IDropdownMaterialStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  label?: StyleProp<TextStyle>
+  dialog?: StyleProp<ViewStyle>
+  flatListContainer?: StyleProp<ViewStyle>
+  listItem?: IDropdownListItemStyles
+  input?: IInputStyles
+}
+
+export interface IDropdownMaterialProps {
+  items: IDropdownItem[]
+  selectedOption?: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  styles?: IDropdownMaterialStyles
+  isMaterial?: boolean
+  materialInputProps?: IInputProps
+}

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
+}