@finspringinnovations/fdsdk 0.0.1

package/src/components/TextFieldWithLabel.tsx

@@ -0,0 +1,502 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image, Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+// Base interface for all text field variants
+export interface BaseTextFieldProps {
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    placeholderColor?: string;
+    editable?: boolean;
+    error?: string;
+    success?: string;
+    required?: boolean;
+    testID?: string;
+    keepWhiteBackground?: boolean; // New prop to keep white background when disabled
+    onFocus?: () => void; // Callback when field receives focus
+    onBlur?: () => void; // Callback when field loses focus
+    textInputRef?: React.RefObject<TextInput>; // Ref to the text input
+}
+
+// Extended interface for different field types
+export interface TextFieldWithLabelProps extends BaseTextFieldProps {
+    variant?: 'text' | 'dropdown' | 'date' | 'numeric' | 'email' | 'phone';
+    maxLength?: number;
+    multiline?: boolean;
+    numberOfLines?: number;
+    secureTextEntry?: boolean;
+    keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+
+    // Dropdown specific props
+    options?: string[];
+    onDropdownSelect?: (option: string) => void;
+    isDropdownOpen?: boolean;
+    onDropdownToggle?: () => void;
+
+    // Date specific props
+    onDatePress?: () => void;
+    dateFormat?: string;
+
+    // Icon props
+    leftIcon?: string;
+    rightIcon?: string;
+    onRightIconPress?: () => void;
+
+    // Styling props
+    containerStyle?: object;
+    inputStyle?: object;
+    labelStyle?: object;
+
+    // Validation props
+    validator?: (value: string) => string | null;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+
+    // Keyboard props
+    returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send' | 'default';
+    onSubmitEditing?: () => void;
+}
+
+const TextFieldWithLabel: React.FC<TextFieldWithLabelProps> = ({
+    label,
+    value,
+    onChangeText,
+    placeholder,
+    placeholderColor,
+    editable = true,
+    error,
+    success,
+    required = false,
+    testID,
+    variant = 'text',
+    maxLength,
+    multiline = false,
+    numberOfLines = 1,
+    secureTextEntry = false,
+    keyboardType = 'default',
+    autoCapitalize = 'sentences',
+    options = [],
+    onDropdownSelect,
+    isDropdownOpen,
+    onDropdownToggle,
+    onDatePress,
+    dateFormat = 'DD/MM/YYYY',
+    leftIcon,
+    rightIcon,
+    onRightIconPress,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    validator,
+    validateOnBlur = false,
+    validateOnChange = false,
+    keepWhiteBackground = false,
+    onFocus,
+    onBlur,
+    textInputRef,
+    returnKeyType,
+    onSubmitEditing,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = React.useMemo(() => createStyles(colors, typography, themeName), [colors, typography, themeName]);
+
+    const [internalDropdownOpen, setInternalDropdownOpen] = useState(false);
+    const isDropdownOpenState = isDropdownOpen !== undefined ? isDropdownOpen : internalDropdownOpen;
+    const [internalError, setInternalError] = useState<string>('');
+    const [isFocused, setIsFocused] = useState(false);
+
+    // Validation logic
+    const validateField = (text: string) => {
+        if (validator) {
+            const validationError = validator(text);
+            setInternalError(validationError || '');
+            return validationError;
+        }
+        return null;
+    };
+
+    // Handle text change with validation
+    const handleTextChange = (text: string) => {
+        onChangeText(text);
+        if (validateOnChange) {
+            validateField(text);
+        }
+    };
+
+    // Handle blur with validation
+    const handleBlur = () => {
+        setIsFocused(false);
+        if (validateOnBlur) {
+            validateField(value);
+        }
+        onBlur?.(); // Call the onBlur callback if provided
+    };
+
+    // Handle focus
+    const handleFocus = () => {
+        setIsFocused(true);
+        setInternalError(''); // Clear internal errors on focus
+        onFocus?.(); // Call the onFocus callback if provided
+    };
+
+    // Determine border styling
+    const getBorderStyle = () => {
+        const displayError = error || internalError;
+        if (displayError) {
+            return { borderColor: colors.error, borderWidth: 1 };
+        }
+        if (success) {
+            return { borderColor: colors.success, borderWidth: 1 };
+        }
+        if (isFocused) {
+            return { borderColor: colors.primary, borderWidth: 1 };
+        }
+        if (themeName === 'dark') {
+            return {
+                borderColor: colors.inputBorder,
+                borderWidth: 1
+            };
+        }
+        return {
+            borderColor: getBorderColor({ colors } as any, 0.36),
+            borderWidth: 0.5
+        };
+    };
+
+    // Render label with required indicator
+    const renderLabel = () => (
+        <Text style={[styles.label, labelStyle]}>
+            {label}
+            {required && <Text style={styles.requiredIndicator}> *</Text>}
+        </Text>
+    );
+
+    // Render validation message
+    const renderValidationMessage = () => {
+        const displayError = error || internalError;
+        const message = displayError || success;
+
+        if (!message) return null;
+
+        const isError = !!displayError;
+        const iconName = isError ? 'warning' : 'checkmark-circle';
+        const iconColor = isError ? colors.error : colors.success;
+        const textColor = isError ? colors.error : colors.success;
+
+        return (
+            <View style={styles.validationContainer}>
+                <Icon name={iconName} size={16} color={iconColor} style={styles.validationIcon} />
+                <Text style={[styles.validationText, { color: textColor }]}>{message}</Text>
+            </View>
+        );
+    };
+
+    // Render text input
+    const renderTextInput = () => (
+        <View style={[
+            styles.inputContainer,
+            getBorderStyle(),
+            !editable && !keepWhiteBackground && styles.disabledInputContainer,
+            containerStyle
+        ]}>
+            {leftIcon && (
+                <Icon name={leftIcon} size={20} color={colors.textLight} style={styles.leftIcon} />
+            )}
+            <TextInput
+                ref={textInputRef}
+                style={[
+                    styles.textInput,
+                    !editable && styles.disabledTextInput,
+                    inputStyle
+                ]}
+                placeholder={placeholder}
+                placeholderTextColor={placeholderColor || (themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)')}
+                value={value}
+                onChangeText={handleTextChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                editable={editable}
+                maxLength={maxLength}
+                multiline={multiline}
+                numberOfLines={numberOfLines}
+                secureTextEntry={secureTextEntry}
+                keyboardType={keyboardType}
+                autoCapitalize={autoCapitalize}
+                testID={testID}
+                textAlignVertical={multiline ? 'top' : 'center'}
+                returnKeyType={returnKeyType || (Platform.OS === 'ios' && (keyboardType === 'numeric' || variant === 'numeric') ? 'done' : 'default')}
+                blurOnSubmit={Platform.OS === 'ios'}
+                onSubmitEditing={onSubmitEditing}
+            />
+            {rightIcon && (
+                <TouchableOpacity onPress={onRightIconPress} style={styles.rightIconContainer}>
+                    <Icon name={rightIcon} size={20} color={colors.textLight} />
+                </TouchableOpacity>
+            )}
+            {success && !error && !internalError && (
+                <View style={styles.successIcon}>
+                    <Icon name="checkmark" size={16} color="white" />
+                </View>
+            )}
+        </View>
+    );
+
+    // Render dropdown
+    const renderDropdown = () => (
+        <View style={[
+            styles.inputContainer,
+            getBorderStyle(),
+            !editable && !keepWhiteBackground && styles.disabledInputContainer,
+            containerStyle
+        ]}>
+            <TouchableOpacity
+                style={styles.dropdownTouchable}
+                onPress={() => {
+                    if (onDropdownToggle) {
+                        onDropdownToggle();
+                    } else {
+                        setInternalDropdownOpen(!internalDropdownOpen);
+                    }
+                }}
+                disabled={!editable}
+            >
+                <Text style={[
+                    styles.dropdownText,
+                    !value && [styles.placeholderText, placeholderColor ? { color: placeholderColor } : null],
+                    !editable && styles.disabledTextInput
+                ]}>
+                    {value || placeholder}
+                </Text>
+                <Image
+                    source={{ uri: base64Images.dropdown }}
+                    style={[styles.icon, isDropdownOpenState ? { transform: [{ rotate: '180deg' }] } : null]}
+                    resizeMode="contain"
+                />
+            </TouchableOpacity>
+            {isDropdownOpenState && !onDropdownToggle && (
+                <View style={styles.dropdownOptions}>
+                    {options.map((option) => (
+                        <TouchableOpacity
+                            key={option}
+                            style={styles.dropdownOption}
+                            onPress={() => {
+                                onDropdownSelect?.(option);
+                                onChangeText(option);
+                                setInternalDropdownOpen(false);
+                            }}
+                        >
+                            <Text style={styles.dropdownOptionText}>{option}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+        </View>
+    );
+
+    // Render date field
+    const renderDateField = () => (
+        <TouchableOpacity
+            style={[
+                styles.inputContainer,
+                getBorderStyle(),
+                !editable && !keepWhiteBackground && styles.disabledInputContainer,
+                containerStyle
+            ]}
+            onPress={onDatePress ? onDatePress : undefined}
+            activeOpacity={onDatePress ? 0.7 : 1}
+            disabled={!onDatePress}
+        >
+            <TextInput
+                ref={textInputRef}
+                style={[
+                    styles.textInput,
+                    !editable && styles.disabledTextInput,
+                    inputStyle
+                ]}
+                placeholder={placeholder || dateFormat}
+                placeholderTextColor={placeholderColor || (themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)')}
+                value={value}
+                onChangeText={handleTextChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                editable={editable}
+                maxLength={10}
+                keyboardType="numeric"
+                testID={testID}
+                returnKeyType={returnKeyType || (Platform.OS === 'ios' ? 'done' : 'default')}
+                blurOnSubmit={Platform.OS === 'ios'}
+                onSubmitEditing={onSubmitEditing}
+                pointerEvents="none"
+            />
+            <View style={styles.dateIconContainer} pointerEvents="none">
+                <Image
+                    source={{ uri: base64Images.calendar }}
+                    style={styles.icon}
+                    resizeMode="contain"
+                />
+            </View>
+        </TouchableOpacity>
+    );
+
+    // Render appropriate input based on variant
+    const renderInput = () => {
+        switch (variant) {
+            case 'dropdown':
+                return renderDropdown();
+            case 'date':
+                return renderDateField();
+            case 'numeric':
+                return renderTextInput();
+            case 'email':
+                return renderTextInput();
+            case 'phone':
+                return renderTextInput();
+            default:
+                return renderTextInput();
+        }
+    };
+
+    return (
+        <View style={styles.fieldContainer}>
+            {renderLabel()}
+            {renderInput()}
+            {renderValidationMessage()}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    fieldContainer: {
+        marginBottom: 26,
+    },
+    label: {
+        fontSize: 12,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        marginBottom: 8,
+        fontWeight: '400',
+    },
+    requiredIndicator: {
+        color: colors.error,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: themeName === 'dark' ? 5 : 25,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white',
+        minHeight: 50,
+        paddingHorizontal: 16,
+        position: 'relative',
+        borderWidth: themeName === 'dark' ? 1 : 0,
+        borderColor: themeName === 'dark' ? colors.inputBorder : 'transparent',
+    },
+    disabledInputContainer: {
+        backgroundColor: '#f5f5f5',
+    },
+    textInput: {
+        fontSize: 14,
+        color: colors.text,
+        fontWeight: '600',
+        flex: 1,
+        paddingVertical: 0,
+        height: '100%',
+    },
+    disabledTextInput: {
+        color: '#000000',
+    },
+    leftIcon: {
+        marginRight: 12,
+    },
+    rightIconContainer: {
+        marginLeft: 12,
+        padding: 4,
+    },
+    icon: {
+        width: 20,
+        height: 20,
+        tintColor: colors.textLight,
+    },
+    successIcon: {
+        position: 'absolute',
+        right: 16,
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        backgroundColor: colors.success,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    dropdownTouchable: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 12,
+    },
+    dropdownText: {
+        fontSize: 14,
+        color: colors.text,
+        fontWeight: 'bold',
+        flex: 1,
+    },
+    placeholderText: {
+        color: themeName === 'dark' ? colors.placeholderColor : 'rgba(0,32,34,0.2)',
+    },
+    dropdownOptions: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'white',
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? '#ffffff' : colors.border,
+        borderRadius: 8,
+        marginTop: 4,
+        zIndex: 1000,
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    dropdownOption: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+    },
+    dropdownOptionText: {
+        fontSize: 14,
+        color: colors.text,
+        fontWeight: 'bold',
+    },
+    dateIconContainer: {
+        marginLeft: 12,
+        padding: 4,
+    },
+    validationContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 8,
+    },
+    validationIcon: {
+        marginRight: 6,
+    },
+    validationText: {
+        ...typography.styles.bodySmall,
+        fontWeight: '500',
+        flex: 1,
+    },
+});
+
+export default TextFieldWithLabel;

package/src/components/TrustBox.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+interface TrustBoxProps {
+    title1: string;
+    title2: string;
+    style?: object;
+}
+
+const TrustBox: React.FC<TrustBoxProps> = ({ title1, title2, style }) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    return (
+        <View style={[styles.container, style]}>
+            {/* <View style={styles.dot} /> */}
+            <View style={styles.textColumn}>
+                <Text style={styles.titleLight}>{title1}</Text>
+                <Text style={styles.title}>{title2}</Text>
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'transparent',
+        padding: 8,
+        borderRadius: 5,
+        borderWidth: 0.5,
+        borderColor: themeName === 'dark' ? colors.inputBorder : getBorderColor({ colors } as any, 0.36),
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    dot: {
+        width: 32,
+        height: 32,
+        borderRadius: 25,
+        backgroundColor: themeName === 'dark' ? colors.background : 'rgba(0,235,180,0.1)',
+        marginRight: 10,
+    },
+    textColumn: {
+        flexDirection: 'column',
+        flex: 1,
+    },
+    titleLight: {
+        ...typography.styles.bodyMedium,
+        color: themeName === 'dark' ? '#C4CDD3' : colors.textLight,
+        marginBottom: 0,
+    },
+    title: {
+        ...typography.styles.bodyMedium,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        marginBottom: 0,
+    },
+});
+
+export default TrustBox;

package/src/components/ValidationErrorAlert.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Alert } from 'react-native';
+
+export interface ValidationErrorAlertProps {
+    errors: string[];
+    onCancel: () => void;
+}
+
+/**
+ * Show validation error alert with option to cancel FD booking
+ */
+export const showValidationErrorAlert = (errors: string[], onCancelFDBooking: () => void) => {
+    const errorMessage = errors.length > 0
+        ? `The following required information is missing from the main app:\n\n${errors.join('\n')}\n\nPlease provide all required user information to proceed with FD booking.`
+        : 'Required user information is missing from the main app.';
+
+    Alert.alert(
+        'Cannot Proceed with FD Booking',
+        errorMessage,
+        [
+            {
+                text: 'Cancel FD Booking',
+                onPress: onCancelFDBooking,
+                style: 'cancel',
+            },
+        ],
+        { cancelable: false }
+    );
+};
+
+/**
+ * Utility function to validate and show error if needed
+ */
+export const validateAndProceed = (
+    appData: any,
+    requiredFields: Array<{ field: string; label: string }>,
+    onCancelFDBooking: () => void
+): boolean => {
+    const missingFields: string[] = [];
+
+    requiredFields.forEach(({ field, label }) => {
+        const value = appData?.[field];
+        if (!value || (typeof value === 'string' && !value.trim())) {
+            missingFields.push(label);
+        }
+    });
+
+    if (missingFields.length > 0) {
+        showValidationErrorAlert(missingFields, onCancelFDBooking);
+        return false;
+    }
+
+    return true;
+};
+
+export default { showValidationErrorAlert, validateAndProceed };
+