@finspringinnovations/fdsdk 0.0.1

package/src/components/OTPInput.tsx

@@ -0,0 +1,213 @@
+import React, { useRef, useEffect } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+
+export interface OTPInputProps {
+    length?: number;
+    value: string[];
+    onChangeText: (value: string, index: number) => void;
+    onKeyPress?: (key: string, index: number) => void;
+    instruction?: string;
+    sessionTime?: number;
+    onResend?: () => void;
+    isResendEnabled?: boolean;
+    autoFocus?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+}
+
+const OTPInput: React.FC<OTPInputProps> = ({
+    length = 6,
+    value,
+    onChangeText,
+    onKeyPress,
+    instruction = "Enter the 6-digit OTP that sent to your registered Aadhaar number",
+    sessionTime,
+    onResend,
+    isResendEnabled = false,
+    autoFocus = true,
+    error = false,
+    errorMessage,
+    disabled = false,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+    const inputRefs = useRef<TextInput[]>([]);
+    const [resendCountdown, setResendCountdown] = React.useState<number>(60);
+    const [showTimerText, setShowTimerText] = React.useState<boolean>(true);
+
+    useEffect(() => {
+        if (autoFocus && inputRefs.current[0]) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus]);
+
+    // Start countdown timer for resend OTP
+    useEffect(() => {
+        if (resendCountdown <= 0) return;
+        const timer = setInterval(() => {
+            setResendCountdown((prev) => (prev > 0 ? prev - 1 : 0));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [resendCountdown]);
+
+    // Handle resend button press
+    const handleResendPress = () => {
+        if (onResend && isResendEnabled) {
+            // Call the resend function - parent will handle timer state
+            onResend();
+        }
+    };
+
+    const formatResendTime = (seconds: number): string => {
+        const mm = Math.floor(seconds / 60).toString().padStart(2, '0');
+        const ss = (seconds % 60).toString().padStart(2, '0');
+        return `${mm}:${ss}`;
+    };
+
+    const handleChangeText = (text: string, index: number) => {
+        onChangeText(text, index);
+
+        // Auto-focus next field
+        if (text && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+
+    const handleKeyPress = (key: string, index: number) => {
+        if (onKeyPress) {
+            onKeyPress(key, index);
+        }
+
+        // Auto-focus previous field on backspace
+        if (key === 'Backspace' && !value[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+
+    return (
+        <View>
+            <Text style={styles.instruction}>{instruction}</Text>
+
+            <View style={styles.otpContainer}>
+                {Array.from({ length }, (_, index) => (
+                    <TextInput
+                        key={index}
+                        ref={(ref) => {
+                            if (ref) inputRefs.current[index] = ref;
+                        }}
+                        style={[
+                            styles.otpInput,
+                            error && styles.otpInputError,
+                            disabled && styles.otpInputDisabled
+                        ]}
+                        value={value[index] || ''}
+                        onChangeText={(text) => handleChangeText(text, index)}
+                        onKeyPress={({ nativeEvent }) => handleKeyPress(nativeEvent.key, index)}
+                        keyboardType="numeric"
+                        maxLength={1}
+                        textAlign="center"
+                        editable={!disabled}
+                    />
+                ))}
+            </View>
+
+            {/* Show timer only when sessionTime > 0 and resend is not enabled */}
+            {(sessionTime || 0) > 0 && !isResendEnabled && (
+                <Text style={styles.sessionText}>
+                    Resend OTP in {formatResendTime(sessionTime || 0)}
+                </Text>
+            )}
+
+            {/* Show resend button only when resend is enabled */}
+            {onResend && isResendEnabled && (
+                <View style={styles.resendContainer}>
+                    <Text style={styles.resendText}>Didn't receive any code? </Text>
+                    <TouchableOpacity onPress={handleResendPress} disabled={!isResendEnabled}>
+                        <Text style={[
+                            styles.resendLink,
+                            !isResendEnabled && styles.resendLinkDisabled,
+                        ]}>
+                            Resend code
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    instruction: {
+        ...typography.styles.bodySmall,
+        paddingHorizontal: 40,
+        color: colors.textLight,
+        marginBottom: 24,
+        marginTop: 24,
+        lineHeight: 16,
+        textAlign: 'center',
+    },
+    otpContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 16,
+        gap: 8,
+    },
+    otpInput: {
+        width: 48,
+        height: 48,
+        borderWidth: 1,
+        borderColor: themeName === 'dark' ? colors.inputBorder : colors.primary,
+        borderRadius: 8,
+        ...typography.styles.bodyLarge,
+        color: colors.text,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white',
+    },
+    otpInputError: {
+        borderColor: colors.error,
+        borderWidth: 2,
+    },
+    otpInputDisabled: {
+        backgroundColor: colors.backgroundLight,
+        borderColor: colors.border,
+        opacity: 0.6,
+    },
+    errorText: {
+        ...typography.styles.bodySmall,
+        color: colors.error,
+        textAlign: 'center',
+        marginTop: 8,
+        marginBottom: 8,
+    },
+    sessionText: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginBottom: 3,
+        marginTop: 5,
+        textAlign: 'center',
+    },
+    resendContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 10,
+        justifyContent: 'center',
+    },
+    resendText: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+    },
+    resendLink: {
+        ...typography.styles.bodySmall,
+        color: colors.primary,
+        fontWeight: '500',
+        textDecorationLine: 'underline',
+    },
+    resendLinkDisabled: {
+        color: colors.textLight,
+    },
+});
+
+export default OTPInput;

package/src/components/PaymentDetailsCard.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+export interface PaymentDetailsCardProps {
+    companyName: string;
+    amount: number;
+    fdRate: string;
+    tenure: string;
+    interestPayout: string;
+    showCompanyLine?: boolean;
+    customStyles?: {
+        card?: object;
+        companyName?: object;
+        companyLine?: object;
+        detailsContainer?: object;
+        detailRow?: object;
+        detailLabel?: object;
+        detailValue?: object;
+    };
+}
+
+const PaymentDetailsCard: React.FC<PaymentDetailsCardProps> = ({
+    companyName,
+    amount,
+    fdRate,
+    tenure,
+    interestPayout,
+    showCompanyLine = true,
+    customStyles = {},
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    const formatAmount = (amount: number): string => {
+        return amount.toLocaleString('en-IN');
+    };
+
+    return (
+        <View style={[styles.card, customStyles.card]}>
+            <Text style={[styles.companyName, customStyles.companyName]}>
+                {companyName}
+            </Text>
+
+            {showCompanyLine && (
+                <View style={[styles.companyLine, customStyles.companyLine]} />
+            )}
+
+            <View style={[styles.detailsContainer, customStyles.detailsContainer]}>
+                <View style={[styles.detailRow, customStyles.detailRow]}>
+                    <Text style={[styles.detailLabel, customStyles.detailLabel]}>Amount</Text>
+                    <Text style={[styles.detailValue, customStyles.detailValue]}>
+                        ₹ {formatAmount(amount)}
+                    </Text>
+                </View>
+
+                <View style={[styles.detailRow, customStyles.detailRow]}>
+                    <Text style={[styles.detailLabel, customStyles.detailLabel]}>FD Rate</Text>
+                    <Text style={[styles.detailValue, customStyles.detailValue]}>{fdRate}</Text>
+                </View>
+
+                <View style={[styles.detailRow, customStyles.detailRow]}>
+                    <Text style={[styles.detailLabel, customStyles.detailLabel]}>Tenure</Text>
+                    <Text style={[styles.detailValue, customStyles.detailValue]}>{tenure}</Text>
+                </View>
+
+                <View style={[styles.detailRow, customStyles.detailRow]}>
+                    <Text style={[styles.detailLabel, customStyles.detailLabel]}>Interest Payout</Text>
+                    <Text style={[styles.detailValue, customStyles.detailValue]}>{interestPayout}</Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    card: {
+        backgroundColor: themeName === 'dark' ? '#0B2940' : '#0B2940',
+        borderRadius: 16,
+        padding: 20,
+        alignItems: 'flex-start',
+        marginHorizontal: 16,
+        borderWidth: 1,
+        borderColor: '#1F4C73',
+    },
+    companyName: {
+        ...typography.styles.h3,
+        color: '#FFFFFF',
+        marginBottom: 12,
+    },
+    companyLine: {
+        height: 1,
+        backgroundColor: '#1F4C73',
+        marginBottom: 12,
+        width: '100%',
+    },
+    detailsContainer: {
+        width: '100%',
+    },
+    detailRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    detailLabel: {
+        ...typography.styles.text12Regular,
+        color: '#BFD5F6',
+    },
+    detailValue: {
+        ...typography.styles.text14Medium,
+        color: '#FFFFFF',
+        lineHeight: (typography.styles.text14Medium?.lineHeight ?? typography.styles.text14Medium?.fontSize ?? 14) + 3,
+    },
+});
+
+export default PaymentDetailsCard;

package/src/components/PendingFDBottomSheet.tsx

@@ -0,0 +1,235 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Modal,
+    Dimensions,
+    SafeAreaView,
+    ActivityIndicator,
+    Image,
+    Platform,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import ActiveFDCard from './ActiveFDCard';
+import ActionButton from './ActionButton';
+import { useColors, useTypography, useSpacing, useTheme } from '../theme/ThemeContext';
+import type { ColorScheme } from '../theme';
+import { base64Images } from '../constants/strings/base64Images';
+
+interface PendingFDData {
+    name: string;
+    invested: number;
+    value: number;
+    returns: number;
+    maturityDate: string;
+}
+
+export interface PendingFDBottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    onContinue: () => void;
+    onBookNew: () => void;
+    pendingFDData?: PendingFDData;
+    isBookingNewLoading?: boolean;
+}
+
+const PendingFDBottomSheet: React.FC<PendingFDBottomSheetProps> = ({
+    visible,
+    onClose,
+    onContinue,
+    onBookNew,
+    pendingFDData = {
+        name: 'Shriram Finance Ltd',
+        invested: 5000,
+        value: 5038,
+        returns: 7.53,
+        maturityDate: 'Nov 2024',
+    },
+    isBookingNewLoading = false,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const spacing = useSpacing();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, spacing, themeName);
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="slide"
+            onRequestClose={onClose}
+        >
+            <View style={styles.overlay}>
+                <View style={styles.bottomSheet}>
+                    <SafeAreaView style={styles.safeArea}>
+                        {/* Header */}
+                        <View style={styles.header}>
+                            <View style={styles.headerContent}>
+                                <Text style={styles.title}>
+                                    Please Wait! You also have a pending journey with progress saved:
+                                </Text>
+                                <TouchableOpacity
+                                    style={styles.closeButton}
+                                    onPress={onClose}
+                                >
+                                    <Image
+                                        source={{ uri: base64Images.cross }}
+                                        style={{ width: 14, height: 14 }}
+                                        resizeMode="contain"
+                                    />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+
+                        {/* Pending FDs Section */}
+                        <View style={styles.content}>
+                            <Text style={styles.sectionTitle}>Pending FDs</Text>
+
+                            {/* Active FD Card */}
+                            <ActiveFDCard
+                                name={pendingFDData.name}
+                                invested={pendingFDData.invested}
+                                value={pendingFDData.value}
+                                returns={pendingFDData.returns}
+                                maturityDate={pendingFDData.maturityDate}
+                            />
+
+                            {/* Action Buttons */}
+                            <TouchableOpacity
+                                style={[styles.bookNewButton, isBookingNewLoading && styles.disabledButton]}
+                                onPress={onBookNew}
+                                disabled={isBookingNewLoading}
+                            >
+                                {isBookingNewLoading ? (
+                                    <View style={styles.loadingContainer}>
+                                        <ActivityIndicator size="small" color={colors.primary} />
+                                        <Text style={[styles.bookNewText, { marginLeft: spacing.sm }]}>
+                                            Terminating workflow...
+                                        </Text>
+                                    </View>
+                                ) : (
+                                    <Text style={styles.bookNewText}>
+                                        No, I want to book a new FD
+                                    </Text>
+                                )}
+                            </TouchableOpacity>
+
+                            {themeName === 'dark' ? (
+                                <ActionButton
+                                    title="Continue"
+                                    onPress={onContinue}
+                                    variant="primary"
+                                    style={styles.continueButtonWrapper}
+                                />
+                            ) : (
+                                <TouchableOpacity
+                                    style={styles.continueButton}
+                                    onPress={onContinue}
+                                >
+                                    <Text style={styles.continueButtonText}>Continue</Text>
+                                </TouchableOpacity>
+                            )}
+                        </View>
+                    </SafeAreaView>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeName: string) => StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    bottomSheet: {
+        padding: spacing.sm,
+        backgroundColor: themeName === 'dark' ? colors.background : 'white',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        borderWidth: themeName === 'dark' ? 1 : 0,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
+        maxHeight: Dimensions.get('window').height * 0.8,
+        minHeight: Platform.OS === 'ios' ? 430 : 400,
+    },
+    safeArea: {
+        flex: 1,
+    },
+    header: {
+        paddingHorizontal: spacing.lg,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+    },
+    headerContent: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '500',
+        color: themeName === 'dark' ? colors.labelColor : '#333',
+        flex: 1,
+        marginRight: spacing.md,
+        lineHeight: 24,
+    },
+    closeButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: '#f5f5f5',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: spacing.lg,
+        paddingTop: spacing.lg,
+        paddingBottom: Platform.OS === 'ios' ? 20 : 0,
+    },
+    sectionTitle: {
+        ...typography.styles.h3,
+        color: themeName === 'dark' ? colors.labelColor : '#333',
+        marginBottom: spacing.md,
+    },
+    bookNewButton: {
+        marginTop: spacing.xxxl,
+        marginBottom: spacing.xxxl,
+        alignItems: 'center',
+    },
+    bookNewText: {
+        ...typography.styles.body2,
+        color: themeName === 'dark' ? colors.labelColor : '#000000',
+    },
+    disabledButton: {
+        opacity: 0.6,
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    continueButtonWrapper: {
+        marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+    },
+    continueButton: {
+        height: 50,
+        backgroundColor: '#007AFF',
+        borderRadius: 25,
+        paddingHorizontal: spacing.lg,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+    },
+    continueButtonText: {
+        ...typography.styles.button,
+        color: 'white',
+        fontWeight: '600',
+    },
+});
+
+export default PendingFDBottomSheet;