react-native-fpay 0.1.1

package/src/ui/components/LoadingAnimation/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Modal } from 'react-native';
+import styled from 'styled-components/native';
+import { Animated, Easing } from "react-native";
+import Svg, { Circle, G } from "react-native-svg";
+
+
+type Props = {
+  text?: string;
+};
+
+const Overlay = styled.View`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgba(100, 100, 100, 0.2);
+`;
+
+const IndicatorContainer = styled.View`
+  padding: 12px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  align-items: center;
+`;
+
+const IndicatorText = styled.Text`
+  font-size: 18px;
+  margin-top: 12px;
+  color: #003333;
+`;
+
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+const LoadingAnimation = ({ text = 'Loading...' }: Props) => {
+  const [color, setColor] = useState<'teal' | 'royalblue'>('teal');
+
+  const rotate = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotate, {
+        toValue: 1,
+        duration: 800,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [rotate]);
+
+  const spin = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+
+
+  return (
+    <Modal transparent animationType="none">
+      <Overlay>
+        <IndicatorContainer>
+          <AnimatedSvg
+            width={80}
+            height={80}
+            viewBox="0 0 100 100"
+            style={{ transform: [{ rotate: spin }] }}
+          >
+            <G>
+              <Circle
+                cx="50"
+                cy="50"
+                r="33"
+                stroke="#0a3d2e"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeDasharray="52 52"
+                fill="none"
+              />
+            </G>
+          </AnimatedSvg>
+        </IndicatorContainer>
+      </Overlay>
+    </Modal>
+  );
+};
+
+export default LoadingAnimation;

package/src/ui/components/OtpInput/OTPInputView.tsx

@@ -0,0 +1,243 @@
+import type { InputProps, OTPInputViewState } from './helpers/types';
+import React, { Component } from 'react'
+import { View, TextInput, TouchableWithoutFeedback, Keyboard, Platform, I18nManager, type EmitterSubscription, } from 'react-native'
+import Clipboard from '@react-native-community/clipboard';
+import styles from './helpers/styles'
+import { isAutoFillSupported } from './helpers/device'
+import { codeToArray } from './helpers/codeToArray'
+
+
+type TextInputRef = React.ElementRef<typeof TextInput>;
+
+export default class OTPInputView extends Component<InputProps, OTPInputViewState> {
+
+    private fields: Array<TextInputRef | null> = [];
+
+    private keyboardDidHideListener?: EmitterSubscription;
+    private timer?: NodeJS.Timeout;
+    private hasCheckedClipBoard?: boolean;
+    private clipBoardCode?: string;
+
+    constructor(props: InputProps) {
+        super(props)
+        const { code } = props
+        this.state = {
+            digits: codeToArray(code),
+            selectedIndex: props.autoFocusOnLoad ? 0 : -1,
+        }
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: InputProps) {
+        const { code } = this.props
+        if (nextProps.code !== code) {
+            this.setState({ digits: codeToArray(nextProps.code) })
+        }
+    }
+
+    componentDidMount() {
+        this.copyCodeFromClipBoardOnAndroid()
+        this.bringUpKeyBoardIfNeeded()
+        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide)
+    }
+
+    componentWillUnmount() {
+        if (this.timer) {
+            clearInterval(this.timer)
+        }
+        this.keyboardDidHideListener?.remove()
+    }
+
+    private copyCodeFromClipBoardOnAndroid = () => {
+        if (Platform.OS === "android") {
+            this.checkPinCodeFromClipBoard()
+            this.timer = setInterval(this.checkPinCodeFromClipBoard, 400)
+        }
+    }
+
+    bringUpKeyBoardIfNeeded = () => {
+        const { autoFocusOnLoad, pinCount } = this.props
+        const digits = this.getDigits()
+        const focusIndex = digits.length ? digits.length - 1 : 0
+        if (focusIndex < pinCount && autoFocusOnLoad) {
+            this.focusField(focusIndex)
+        }
+    }
+
+    getDigits = () => {
+        const { digits: innerDigits } = this.state
+        const { code } = this.props
+        return code === undefined ? innerDigits : code.split("")
+    }
+
+    private handleKeyboardDidHide = () => {
+        this.blurAllFields()
+    }
+
+    private notifyCodeChanged = () => {
+        const { digits } = this.state
+        const code = digits.join("")
+        const { onCodeChanged } = this.props
+        if (onCodeChanged) {
+            onCodeChanged(code)
+        }
+    }
+
+    checkPinCodeFromClipBoard = () => {
+        const { pinCount, onCodeFilled } = this.props
+        const regexp = new RegExp(`^\\d{${pinCount}}$`)
+        Clipboard.getString().then(code => {
+            if (this.hasCheckedClipBoard && regexp.test(code) && (this.clipBoardCode !== code)) {
+                this.setState({
+                    digits: code.split(""),
+                }, () => {
+                    this.blurAllFields()
+                    this.notifyCodeChanged()
+                    onCodeFilled && onCodeFilled(code)
+                })
+            }
+            this.clipBoardCode = code
+            this.hasCheckedClipBoard = true
+        }).catch(() => {
+        })
+    }
+
+    private handleChangeText = (index: number, text: string) => {
+        const { onCodeFilled, pinCount } = this.props
+        const digits = this.getDigits()
+        let newdigits: any = digits.slice()
+        const oldTextLength = newdigits[index] ? newdigits[index].length : 0
+        const newTextLength = text.length
+        if (newTextLength - oldTextLength === pinCount) { // user pasted text in.
+            newdigits = text.split("").slice(oldTextLength, newTextLength)
+            this.setState({ digits: newdigits }, this.notifyCodeChanged)
+        } else {
+            if (text.length === 0) {
+                if (newdigits.length > 0) {
+                    newdigits = newdigits.slice(0, newdigits.length - 1)
+                }
+            } else {
+                text.split("").forEach((value) => {
+                    if(index < pinCount) {
+                        newdigits[index] = value;
+                        index += 1;
+                    }
+                })
+                index -= 1
+            }
+            this.setState({ digits: newdigits }, this.notifyCodeChanged)
+        }
+
+        let result = newdigits.join("")
+        if (result.length >= pinCount) {
+            onCodeFilled && onCodeFilled(result)
+            this.focusField(pinCount - 1)
+            this.blurAllFields()
+        } else {
+            if (text.length > 0 && index < pinCount - 1) {
+                this.focusField(index + 1)
+            }
+        }
+    }
+
+    private handleKeyPressTextInput = (index: number, key: string) => {
+        const digits = this.getDigits()
+        if (key === 'Backspace') {
+            if (!digits[index] && index > 0) {
+                this.handleChangeText(index - 1, '')
+                this.focusField(index - 1)
+            }
+        }
+    }
+
+    
+
+    focusField = (index: number) => {
+        if (index < this.fields.length) {
+            this.fields[index]?.focus();
+            this.setState({ selectedIndex: index });
+        }
+    }
+
+    blurAllFields = () => {
+        this.fields.forEach(field => field?.blur());
+        this.setState({ selectedIndex: -1 });
+    }
+
+
+    clearAllFields = () => {
+        const { clearInputs, code } = this.props;
+        if (clearInputs && code === "") {
+            this.setState({ digits: [], selectedIndex: 0 })
+        }
+    }
+
+    renderOneInputField = (_: TextInput, index: number) => {
+        const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance, showSoftInputOnFocus } = this.props
+        const { defaultTextFieldStyle } = styles
+        const { selectedIndex, digits } = this.state
+        const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props
+        const { color: defaultPlaceholderTextColor } = { ...defaultTextFieldStyle, ...codeInputFieldStyle }
+        return (
+            <View pointerEvents="none" key={index + "view"} testID="inputSlotView">
+                <TextInput
+                    testID="textInput"
+                    underlineColorAndroid='rgba(0,0,0,0)'
+                    style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]}
+                    ref={(ref) => {
+                        this.fields[index] = ref;
+                    }}
+                    onChangeText={text => {
+                        this.handleChangeText(index, text)
+                    }}
+                    onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key) }}
+                    value={ !clearInputs ? digits[index]: "" }
+                    keyboardAppearance={keyboardAppearance}
+                    keyboardType={keyboardType}
+                    textContentType={isAutoFillSupported ? "oneTimeCode" : "none"}
+                    key={index}
+                    selectionColor={selectionColor}
+                    secureTextEntry={secureTextEntry}
+                    // showSoftInputOnFocus={showSoftInputOnFocus}
+                    editable={editable}
+                    placeholder={placeholderCharacter}
+                    placeholderTextColor={placeholderTextColor || defaultPlaceholderTextColor}
+                />
+            </View>
+        )
+    }
+
+    renderTextFields = () => {
+        const { pinCount } = this.props
+        const array = new Array(pinCount).fill(0)
+        return array.map(this.renderOneInputField)
+    }
+
+    render() {
+        const { pinCount, style, clearInputs } = this.props
+        const digits = this.getDigits()
+        return (
+            <View
+                testID="OTPInputView"
+                style={style}
+            >
+                <TouchableWithoutFeedback
+                    onPress={() => {
+                        if (!clearInputs) {
+                            let filledPinCount = digits.filter((digit) => { return (digit !== null && digit !== undefined) }).length
+                            this.focusField(Math.min(filledPinCount, pinCount - 1))
+                        } else {
+                            this.clearAllFields();
+                            this.focusField(0)
+                        }
+                    }}
+                >
+                    <View
+                        style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '100%', height: 100 , gap: '10px' }}
+                    >
+                        {this.renderTextFields()}
+                    </View>
+                </TouchableWithoutFeedback>
+            </View>
+        );
+    }
+}

package/src/ui/components/OtpInput/Styles.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components/native";
+
+export const HideInput = styled.TextInput`
+  width: 80%;
+  margin: auto;
+  padding: 14px 8px;
+  border: 1px solid #000;
+  display: none;
+`;
+
+export const Otpinput = styled.View`
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  border: 1px solid #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/src/ui/components/OtpInput/helpers/codeToArray.ts

@@ -0,0 +1,3 @@
+export const codeToArray = (code?: string): string[] => code?.split("") ?? [];
+
+export default { codeToArray }

package/src/ui/components/OtpInput/helpers/device.ts

@@ -0,0 +1,6 @@
+import { Platform } from 'react-native'
+
+const majorVersionIOS = parseInt(String(Platform.Version), 10);
+export const isAutoFillSupported = (Platform.OS === 'ios' && majorVersionIOS >= 12)
+
+export default { isAutoFillSupported }

package/src/ui/components/OtpInput/helpers/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet, type TextStyle, } from 'react-native';
+
+
+const styles = StyleSheet.create<{defaultTextFieldStyle: TextStyle}>({
+    defaultTextFieldStyle : {
+        width : 65, 
+        height : 65, 
+        borderColor : 'rgba(226, 226, 226, 1)', 
+        borderWidth : 1,
+        borderRadius : 2, 
+        textAlign : 'center',
+        color: 'rgba(226, 226, 226, 1)', 
+        marginHorizontal: 3.5
+    },
+});
+
+export default styles;

package/src/ui/components/OtpInput/helpers/types.ts

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import type { TextStyle, ViewStyle } from 'react-native';
+
+type KeyboardType = 'default' | 'email-address' | 'number-pad' | 'phone-pad';
+
+export interface InputProps {
+    /**
+     * Digits of pins in the OTP
+     */
+    pinCount: number;
+    /**
+     * Style of the input fields
+     */
+    codeInputFieldStyle?: TextStyle;
+    /**
+     * Style of highlighted status for input fields
+     */
+    codeInputHighlightStyle?: TextStyle;
+    /**
+     * Callback function
+     * Trigger when all fields of the OTP has been filled
+     *
+     * @param code The verification code
+     */
+    onCodeFilled?: (code: string) => void;
+    /**
+     * Callback function
+     * Trigger when a field of the OTP is changed
+     *
+     * @param code The verification code
+     */
+    onCodeChanged?: (code: string) => void;
+    /**
+     * If keyboard is automatically brought up when OTP is loaded.
+     */
+    autoFocusOnLoad?: boolean;
+    /**
+     * Initial pin code
+     */
+    code?: string;
+    /**
+     * Secure input text
+     */
+    secureTextEntry?: boolean;
+    /**
+     * Set editable for inputs
+     */
+    editable?: boolean;
+    /**
+     * Type of the keyboard
+     */
+    keyboardType?: KeyboardType;
+    /**
+     * Placeholder character to fill all inputs when the OTP is empty
+     */
+    placeholderCharacter?: string;
+    /**
+     * Placeholder text color of inputs
+     */
+    placeholderTextColor?: string;
+    /**
+     * Style of the OTP container view
+     */
+    style?: ViewStyle;
+    /**
+     * The highlight (and cursor on iOS) color of the text input.
+     */
+    selectionColor?: string;
+    /**
+     * If inputs are automatically cleared.
+     */
+    clearInputs?: boolean;
+
+    /**
+     * Keyboard appearance. The value can be 'default', 'dark' or 'light'.
+     */
+    keyboardAppearance?: 'default' | 'dark' | 'light';
+
+    /**
+     * Keyboard auto-appear on focus. The value can be 'false' or 'true'.
+     */
+    showSoftInputOnFocus?: boolean,
+}
+
+export interface OTPInputViewState {
+    digits: string[];
+    selectedIndex: number;
+}

package/src/ui/components/OtpInput/index.tsx

@@ -0,0 +1,51 @@
+import {View, StyleSheet} from 'react-native';
+// import { NumPad } from "frontatish";
+import React from 'react';
+import OTPInputView from './OTPInputView';
+
+type PropT = {
+  callBack: Function;
+  pinvalue?: any;
+  isSecure?: boolean;
+  count?: number;
+};
+
+export default function OTPInputs({
+  callBack,
+  pinvalue = '',
+  isSecure = true,
+  count = 4,
+}: PropT) {
+
+  return (
+      <OTPInputView
+        style={{width: '100%', backgroundColor: 'transparent'}}
+        codeInputFieldStyle={styles.underlineStyleBase}
+        codeInputHighlightStyle={styles.underlineStyleHighLighted}
+        secureTextEntry={isSecure}
+        pinCount={count}
+        autoFocusOnLoad
+        placeholderCharacter={''}
+        onCodeFilled={code => {
+          callBack(code);
+        }}
+      />
+  );
+}
+
+const styles = StyleSheet.create({
+    underlineStyleBase: {
+    width: 60,
+    height: 60,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#ccc',
+    color: '#000',
+    textAlign: 'center',
+    borderRadius: 5,
+  },
+
+  underlineStyleHighLighted: {
+    borderColor: '#032b27',
+  },
+});

package/src/ui/components/PulseAnimation.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import styled from 'styled-components/native';
+
+
+const PulseRing = styled(Animated.View)<{ delay?: number }>`
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border-radius: 100%;
+  border-width: 2px;
+  border-color: #0a3d2e;
+`;
+
+// Pulse Animation Component
+export const PulseAnimation: React.FC = () => {
+  const pulse1 = useRef(new Animated.Value(0)).current;
+  const pulse2 = useRef(new Animated.Value(0)).current;
+  const pulse3 = useRef(new Animated.Value(0)).current;
+  const AnimatedPulseRing = Animated.createAnimatedComponent(PulseRing);
+
+
+  useEffect(() => {
+    const createPulse = (value: Animated.Value, delay: number) => {
+      return Animated.loop(
+        Animated.sequence([
+          Animated.delay(delay),
+          Animated.parallel([
+            Animated.timing(value, {
+              toValue: 1,
+              duration: 2000,
+              easing: Easing.out(Easing.ease),
+              useNativeDriver: true,
+            }),
+          ]),
+          Animated.timing(value, {
+            toValue: 0,
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ])
+      );
+    };
+
+    const animations = Animated.parallel([
+      createPulse(pulse1, 0),
+      createPulse(pulse2, 500),
+      createPulse(pulse3, 1000),
+    ]);
+
+    animations.start();
+
+    return () => animations.stop();
+  }, []);
+
+  const pulseStyle = (animValue: Animated.Value) => ({
+    transform: [
+      {
+        scale: animValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 2],
+        }),
+      },
+    ],
+    opacity: animValue.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [0.5, 0.3, 0],
+    }),
+  });
+
+  return (
+    <>
+      <AnimatedPulseRing style={pulseStyle(pulse1)} />
+      <AnimatedPulseRing style={pulseStyle(pulse2)} />
+      <AnimatedPulseRing style={pulseStyle(pulse3)} />
+    </>
+  );
+};