tf-checkout-react-native 1.0.37 → 1.0.39

package/src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import {
+  Animated,
+  Dimensions,
+  Image,
+  Modal as RNModal,
+  StyleProp,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+
+import R from '../../res'
+import s from './BottomSheetModalStyles'
+import { IBottomSheetModalProps } from './BottomSheetModalTypes'
+
+const animationDuration = 350
+const { height: screenHeight } = Dimensions.get('window')
+
+export type BottomSheetHandle = {
+  close(): void
+}
+
+const BottomSheetModal = forwardRef<BottomSheetHandle, IBottomSheetModalProps>(
+  ({ onClose, texts, styles, content, contentHeight = screenHeight / 2 }, ref) => {
+    const contentYPosition = useRef(new Animated.Value(contentHeight)).current
+
+    const showContent = () => {
+      Animated.timing(contentYPosition, {
+        toValue: 0,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }).start()
+    }
+
+    const hideContent = () => {
+      Animated.timing(contentYPosition, {
+        toValue: contentHeight,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }).start(onClose)
+    }
+
+    useEffect(() => {
+      showContent()
+    })
+
+    const onCloseHandler = () => {
+      hideContent()
+    }
+
+    const animatedStyle: StyleProp<any> = {
+      height: contentHeight,
+      transform: [
+        {
+          translateY: contentYPosition,
+        },
+      ],
+    }
+
+    useImperativeHandle(ref, () => ({
+      async close() {
+        hideContent()
+      },
+    }))
+
+    const mergedStyle = [s.animatedContent, animatedStyle, styles?.content]
+
+    const title = texts?.title || 'Title'
+
+    return (
+      <RNModal transparent>
+        <View style={[s.rootContainer, styles?.rootContainer]}>
+          <Animated.View style={mergedStyle}>
+            <View style={[s.header, styles?.headerContainer]}>
+              <Text style={[s.title, styles?.title]}>{title}</Text>
+              <TouchableOpacity
+                onPress={onCloseHandler}
+                style={[s.closeButton, styles?.closeButton]}
+              >
+                <Image
+                  style={[s.closeButtonIcon, styles?.closeButtonIcon]}
+                  source={R.icons.error}
+                />
+              </TouchableOpacity>
+            </View>
+            <View style={[s.contentContainer, styles?.contentContainer]}>{content}</View>
+          </Animated.View>
+        </View>
+      </RNModal>
+    )
+  }
+)
+
+export default BottomSheetModal

package/src/components/bottomSheetModal/BottomSheetModalStyles.ts

@@ -0,0 +1,43 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: screenWidth } = Dimensions.get('window')
+
+export default StyleSheet.create({
+  rootContainer: {
+    backgroundColor: R.colors.transparentBlack,
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  animatedContent: {
+    width: screenWidth,
+    borderTopStartRadius: 20,
+    borderTopEndRadius: 20,
+    paddingVertical: 24,
+    backgroundColor: R.colors.listBackground,
+  },
+  closeButton: {
+    padding: 8,
+    justifyContent: 'flex-end',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    paddingHorizontal: 24,
+  },
+  title: {
+    fontSize: 20,
+  },
+  closeButtonIcon: {
+    height: 16,
+    width: 16,
+    resizeMode: 'contain',
+    tintColor: R.colors.white,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+})

package/src/components/bottomSheetModal/BottomSheetModalTypes.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface IBottomSheetModalStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  headerContainer?: StyleProp<ViewStyle>
+  content?: StyleProp<ViewStyle>
+  title?: StyleProp<TextStyle>
+  closeButton?: StyleProp<ViewStyle>
+  closeButtonIcon?: StyleProp<ImageStyle>
+  contentContainer?: StyleProp<ViewStyle>
+}
+
+export interface IBottomSheetModalTexts {
+  title?: string
+}
+
+export interface IBottomSheetModalProps {
+  title?: string
+  onClose: () => void
+  content: ReactNode
+  contentHeight?: number
+
+  styles?: IBottomSheetModalStyles
+  texts?: IBottomSheetModalTexts
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,53 @@
+//@ts-nocheck
+import React from 'react'
+import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native'
+
+import R from '../../res'
+import s from './styles'
+import { IButtonProps } from './types'
+
+const Button = React.forwardRef(
+  (
+    {
+      text = 'Press me',
+      onPress,
+      isUpperCase,
+      isDisabled,
+      isLoading,
+      styles,
+    }: IButtonProps,
+    ref
+  ) => {
+    const formatText = isUpperCase ? text.toUpperCase() : text
+
+    return (
+      <>
+        <View style={[s.container, styles?.container]} ref={ref?.containerView}>
+          <TouchableOpacity
+            ref={ref?.touchableOpacity}
+            onPress={onPress}
+            activeOpacity={0.8}
+            style={[isDisabled ? s.buttonDisabled : s.button, styles?.button]}
+            disabled={isDisabled || isLoading}
+          >
+            {isLoading ? (
+              <View ref={ref?.loadingView}>
+                <ActivityIndicator
+                  color={R.colors.white}
+                  size={'small'}
+                  ref={ref?.activityIndicator}
+                />
+              </View>
+            ) : (
+              <Text style={[s.text, styles?.text]} ref={ref?.loadingText}>
+                {formatText}
+              </Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </>
+    )
+  }
+)
+
+export default Button

package/src/components/button/styles.tsx

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: R.colors.primary,
+    height: 45,
+    width: '100%',
+    paddingHorizontal: 8,
+  },
+  buttonDisabled: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: R.colors.disabled,
+    height: 45,
+    width: '100%',
+  },
+  text: {
+    color: R.colors.white,
+    fontSize: 18,
+    fontWeight: '700',
+  },
+})

package/src/components/button/types.ts

@@ -0,0 +1,16 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface IButtonStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+}
+
+export interface IButtonProps {
+  text: string
+  onPress: () => void
+  styles?: IButtonStyles
+  isUpperCase?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
+}

package/src/components/cartTimer/CartTimer.tsx

@@ -0,0 +1,68 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Image, Pressable, Text, View } from 'react-native'
+
+import R from '../../res'
+import s from './styles'
+import { ICartTimerProps } from './types'
+
+const CartTimer: FC<ICartTimerProps> = ({
+  shouldNotMinimize,
+  texts,
+  styles,
+  secondsLeft,
+}) => {
+  const [isOnlyTimeVisible, setIsOnlyTimeVisible] = useState(false)
+  const hideOtherData = () => {
+    if (!shouldNotMinimize) {
+      setIsOnlyTimeVisible(!isOnlyTimeVisible)
+    }
+  }
+  const [timeRemaining, setTimeRemaining] = useState('')
+
+  const message = texts?.message
+    ? texts.message
+    : 'Please complete your purchase before the timer reaches zero:'
+
+  useEffect(() => {
+    const clockify = () => {
+      //let hours = Math.floor(secondsLeft / 60 / 60)
+      const mins = Math.floor((secondsLeft / 60) % 60)
+      const seconds = Math.floor(secondsLeft % 60)
+      //let displayHours = hours < 10 ? `0${hours}` : hours
+      const displayMins = mins < 10 ? `0${mins}` : mins
+      const displaySecs = seconds < 10 ? `0${seconds}` : seconds
+
+      setTimeRemaining(`${displayMins}:${displaySecs}`)
+    }
+
+    clockify()
+  }, [secondsLeft])
+
+  return (
+    <View
+      style={[
+        s.rootContainer,
+        isOnlyTimeVisible && s.rootContainerSmall,
+        styles?.rootContainer,
+      ]}
+    >
+      <Pressable onPressOut={hideOtherData}>
+        <View style={[s.contentContainer, styles?.contentContainer]}>
+          {!isOnlyTimeVisible && (
+            <Image source={R.icons.clock} style={[s.icon, styles?.icon]} />
+          )}
+          <View style={[s.textsContainer, styles?.textsContainer]}>
+            {!isOnlyTimeVisible && (
+              <Text style={[s.message, styles?.message]}>{message}</Text>
+            )}
+            <Text style={[s.time, isOnlyTimeVisible && s.timeOnlyVisible, styles?.time]}>
+              {timeRemaining}
+            </Text>
+          </View>
+        </View>
+      </Pressable>
+    </View>
+  )
+}
+
+export default CartTimer

package/src/components/cartTimer/styles.ts

@@ -0,0 +1,44 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: sWidth } = Dimensions.get('window')
+
+export default StyleSheet.create({
+  rootContainer: {
+    backgroundColor: R.colors.timerBackground,
+    position: 'absolute',
+    right: 0,
+    top: 40,
+    width: sWidth / 1.5,
+    borderRadius: 2,
+    padding: 8,
+    elevation: 3,
+    shadowOffset: { width: -3, height: 3 },
+    shadowColor: R.colors.black,
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+  },
+  rootContainerSmall: {
+    width: sWidth / 5,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+    resizeMode: 'contain',
+    marginRight: 8,
+  },
+  textsContainer: { flex: 1 },
+  message: { marginBottom: 4 },
+  time: {
+    fontWeight: '800',
+  },
+  timeOnlyVisible: {
+    alignSelf: 'center',
+  },
+})

package/src/components/cartTimer/types.ts

@@ -0,0 +1,22 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface ICartTimerStyles {
+  rootContainer?: StyleProp<ViewStyle>
+  contentContainer?: StyleProp<ViewStyle>
+  textsContainer?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  message?: StyleProp<TextStyle>
+  time?: StyleProp<TextStyle>
+}
+
+export interface ICartTimerTexts {
+  message?: string
+}
+
+export interface ICartTimerProps {
+  styles?: ICartTimerStyles
+  texts?: ICartTimerTexts
+  // Determine if the timer should minimize when user taps on it
+  shouldNotMinimize?: boolean
+  secondsLeft: number
+}

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Image, StyleProp, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+
+import R from '../../res'
+import s from './styles'
+import { ICheckboxProps } from './types'
+
+const Checkbox = ({
+  onPress,
+  text,
+  styles,
+  isActive,
+  customTextComp,
+  error,
+}: ICheckboxProps) => {
+  let indicatorStyles: StyleProp<ViewStyle> = isActive
+    ? [s.indicatorOn, styles?.indicator]
+    : [s.indicator, styles?.indicatorDisabled]
+
+  if (error) {
+    indicatorStyles = [...indicatorStyles, { borderColor: styles?.errorColor }]
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.8}
+      style={[s.container, styles?.container]}
+    >
+      <>
+        <View style={[s.content, styles?.content]}>
+          <View style={indicatorStyles}>
+            {isActive && <Image source={R.icons.check} style={[s.check, styles?.icon]} />}
+          </View>
+          {customTextComp || (
+            <Text
+              style={[
+                s.textContainer,
+                styles?.text,
+                !!error && { color: styles?.errorColor },
+              ]}
+            >
+              {text}
+            </Text>
+          )}
+        </View>
+        {!!error && <Text style={styles?.error}>{error}</Text>}
+      </>
+    </TouchableOpacity>
+  )
+}
+
+export default Checkbox

package/src/components/checkbox/styles.ts

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export default StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  indicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 5,
+    borderWidth: 1,
+    backgroundColor: R.colors.transparent,
+    marginRight: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  indicatorOn: {
+    width: 24,
+    height: 24,
+    borderRadius: 5,
+    borderWidth: 1,
+    backgroundColor: R.colors.primary,
+    marginRight: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  check: {
+    width: '60%',
+    height: '60%',
+    tintColor: R.colors.white,
+  },
+  textContainer: {
+    flex: 1,
+  },
+})

package/src/components/checkbox/types.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react'
+import { ColorValue, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface ICheckboxStyles {
+  container?: StyleProp<ViewStyle>
+  content?: StyleProp<ViewStyle>
+  indicator?: StyleProp<ViewStyle>
+  indicatorDisabled?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+  box?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  error?: StyleProp<TextStyle>
+  errorColor?: ColorValue
+}
+
+export interface ICheckboxProps {
+  onPress: () => void
+  text?: string
+  isActive: boolean
+  styles?: ICheckboxStyles
+  customTextComp?: ReactNode
+  error?: string
+}

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import DateTimePickerModal from 'react-native-modal-datetime-picker'
+
+import Input from '../input/Input'
+import s from './styles'
+import { IDatePickerProps } from './types'
+
+const DatePicker = ({
+  onSelectDate,
+  onCancel,
+  styles,
+  text = 'Select date',
+  selectedDate,
+  placeholder = 'Select date',
+  error,
+}: IDatePickerProps) => {
+  const [isVisible, setIsVisible] = useState(false)
+  const onButtonPress = () => {
+    setIsVisible(true)
+  }
+
+  const handleOnSelectDate = (date: Date) => {
+    if (onSelectDate) {
+      onSelectDate(date)
+    }
+    setIsVisible(false)
+  }
+
+  const handleOnCancel = () => {
+    if (onCancel) {
+      onCancel()
+    }
+    setIsVisible(false)
+  }
+
+  // Format date in a more readable way
+  const formatDate = (date: Date) => {
+    if (!date) return ''
+    // Format as MM/DD/YYYY
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const year = date.getFullYear()
+    return `${month}/${day}/${year}`
+  }
+
+  return (
+    <View style={[styles?.container, s.container]}>
+      <Input
+        label={text}
+        value={selectedDate ? formatDate(selectedDate) : ''}
+        placeholder={placeholder}
+        pointerEvents="none"
+        editable={false} // Prevent keyboard from showing
+        error={error}
+        styles={{
+          container: styles?.inputContainer,
+          input: styles?.input,
+          fieldWrapper: styles?.fieldWrapper,
+          baseColor: styles?.baseColor,
+          errorColor: styles?.errorColor,
+        }}
+      />
+      <Pressable
+        style={StyleSheet.absoluteFill} // covers the whole field
+        onPress={onButtonPress}
+      />
+      <DateTimePickerModal
+        isVisible={isVisible}
+        mode="date"
+        onConfirm={handleOnSelectDate}
+        onCancel={handleOnCancel}
+        date={selectedDate || new Date()}
+        maximumDate={new Date()}
+        pickerComponentStyleIOS={{ height: 200 }}
+      />
+    </View>
+  )
+}
+
+export default DatePicker

package/src/components/datePicker/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const FONT_SIZE = 16
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+  },
+  label: {
+    fontSize: 12,
+    color: R.colors.primary,
+    marginBottom: 4,
+    fontWeight: '400',
+  },
+  button: {
+    width: '100%',
+    borderWidth: 1,
+    height: 56,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    borderColor: '#bdbdbd',
+    borderRadius: 4,
+    backgroundColor: 'transparent',
+  },
+  text: {
+    fontSize: FONT_SIZE,
+    paddingVertical: 8,
+    color: '#000000',
+  },
+  error: {
+    color: R.colors.danger,
+    fontSize: 12,
+    marginTop: 4,
+  },
+})

package/src/components/datePicker/types.ts

@@ -0,0 +1,21 @@
+import { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface IDatePickerStyles {
+  container?: StyleProp<ViewStyle>
+  inputContainer?: StyleProp<ViewStyle>
+  fieldWrapper?: StyleProp<ViewStyle>
+  input?: StyleProp<TextStyle>
+  error?: StyleProp<TextStyle>
+  errorColor?: ColorValue
+  baseColor?: string
+}
+
+export interface IDatePickerProps {
+  onSelectDate: (date: Date) => void
+  onCancel?: () => void
+  text: string
+  selectedDate?: Date
+  styles?: IDatePickerStyles
+  error?: string
+  placeholder?: string
+}