@finspringinnovations/fdsdk 0.0.1

package/lib/screens/AddBankAccount.js

@@ -0,0 +1,381 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const SafeAreaWrapper_1 = __importDefault(require("../components/SafeAreaWrapper"));
+const components_1 = require("../components");
+const ActionButton_1 = __importDefault(require("../components/ActionButton"));
+const TextFieldWithLabel_1 = __importDefault(require("../components/TextFieldWithLabel"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const MasterDataProvider_1 = require("../providers/MasterDataProvider");
+const fdApi_1 = require("../api/fdApi");
+const store_1 = require("../store");
+const appDataConfig_1 = require("../config/appDataConfig");
+const helpers_1 = require("../navigation/helpers");
+const bank_1 = require("../constants/strings/bank");
+const common_1 = require("../constants/strings/common");
+const base64Images_1 = require("../constants/strings/base64Images");
+const defaultAccountTypeOptions = ['Saving', 'Current'];
+const AddBankAccount = ({ onGoBack, onContinue, onFindIFSC, initialData, selectedIFSC }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, themeName);
+    const workflowInstanceId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.workflowInstanceId; });
+    const applicationId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.applicationId; });
+    const customerId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.customerId; });
+    const { masterData } = (0, MasterDataProvider_1.useMasterData)();
+    // Get providerId from app data or use default
+    const defaultProviderId = (0, store_1.useAppSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.onboarding) === null || _a === void 0 ? void 0 : _a.providerId; }); // Default Shriram provider ID
+    // FD Bank Account API
+    const [fdBankAccount, { data: fdBankAccountResponse, error: fdBankAccountError, isLoading: isLoadingFDBankAccount, }] = (0, fdApi_1.useFdBankAccountMutation)();
+    // Normalize helper for arrays or CSV strings
+    const normalizeOptions = (raw, fallback) => {
+        if (Array.isArray(raw))
+            return raw.map((v) => String(v)).filter(Boolean);
+        if (typeof raw === 'string' && raw.trim().length)
+            return raw.split(',').map((v) => v.trim()).filter(Boolean);
+        return fallback;
+    };
+    // Prefer nested data if present, memoized to avoid re-creation on each render
+    const mdRoot = react_1.default.useMemo(() => {
+        return (masterData === null || masterData === void 0 ? void 0 : masterData.data) || masterData || {};
+    }, [masterData]);
+    // Get account type options from master data with fallback, memoized
+    const accountTypeOptions = react_1.default.useMemo(() => {
+        const raw = (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.bankAccountType) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.accountTypeOptions) || (mdRoot === null || mdRoot === void 0 ? void 0 : mdRoot.accountTypes);
+        return normalizeOptions(raw, defaultAccountTypeOptions);
+    }, [mdRoot]);
+    const [form, setForm] = (0, react_1.useState)({
+        accountType: (initialData === null || initialData === void 0 ? void 0 : initialData.accountType) || '',
+        accountNumber: (initialData === null || initialData === void 0 ? void 0 : initialData.accountNumber) || '',
+    });
+    // Keep account type valid if options change after load
+    react_1.default.useEffect(() => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { accountType: accountTypeOptions.includes(prev.accountType) ? prev.accountType : '' })));
+    }, [accountTypeOptions]);
+    // Track which fields have been touched by the user
+    const [touchedFields, setTouchedFields] = (0, react_1.useState)({
+        accountType: false,
+        accountNumber: false,
+    });
+    // Show errors only for touched fields
+    react_1.default.useEffect(() => {
+        // Validate account type only if it has been touched
+        if (touchedFields.accountType && !form.accountType.trim()) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountType: bank_1.BANK_STRINGS.ACCOUNT_TYPE_REQUIRED })));
+        }
+        else if (touchedFields.accountType && form.accountType.trim()) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountType: undefined })));
+        }
+        // Validate account number if it has content and has been touched
+        if (touchedFields.accountNumber && form.accountNumber.trim() && !isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountNumber: bank_1.BANK_STRINGS.INVALID_ACCOUNT_NUMBER })));
+        }
+        else if (touchedFields.accountNumber && form.accountNumber.trim() && isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountNumber: undefined })));
+        }
+    }, [form.accountType, form.accountNumber, touchedFields]);
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [openMenus, setOpenMenus] = (0, react_1.useState)({
+        accountType: false,
+    });
+    // Ref for account number text input to blur when dropdown is opened
+    const accountNumberRef = (0, react_1.useRef)(null);
+    // Ref for ScrollView to enable auto-scroll when input is focused
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const updateField = (field, value) => {
+        setForm(prev => (Object.assign(Object.assign({}, prev), { [field]: value })));
+        // Mark field as touched when user interacts with it
+        setTouchedFields(prev => (Object.assign(Object.assign({}, prev), { [field]: true })));
+    };
+    const toggleMenu = (key) => {
+        var _a;
+        // Remove focus from account number field when dropdown is opened
+        (_a = accountNumberRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        // Mark field as touched when user opens dropdown
+        if (key === 'accountType') {
+            setTouchedFields(prev => (Object.assign(Object.assign({}, prev), { accountType: true })));
+        }
+        setOpenMenus(prev => ({
+            accountType: key === 'accountType' ? !prev.accountType : false,
+        }));
+    };
+    const closeAllMenus = () => setOpenMenus({ accountType: false });
+    // FD bank account API status monitored
+    // Pure validation (does not update state)
+    const isAccountNumberValid = (accountNumber) => {
+        const cleaned = accountNumber.replace(/\s/g, '');
+        if (!cleaned)
+            return false;
+        if (!/^\d{9,18}$/.test(cleaned))
+            return false;
+        return true;
+    };
+    // Validation and set error
+    const validateAccountNumber = (accountNumber) => {
+        const valid = isAccountNumberValid(accountNumber);
+        if (!valid) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountNumber: bank_1.BANK_STRINGS.INVALID_ACCOUNT_NUMBER })));
+        }
+        else {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountNumber: undefined })));
+        }
+        return valid;
+    };
+    const handleAccountNumberBlur = () => {
+        if (form.accountNumber) {
+            validateAccountNumber(form.accountNumber);
+        }
+    };
+    const renderDropdown = (label, value, field, options, menuKey) => (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(TextFieldWithLabel_1.default, { label: label, value: value, onChangeText: (text) => updateField(field, text), variant: "dropdown", options: options, isDropdownOpen: openMenus[menuKey], onDropdownToggle: () => toggleMenu(menuKey), onDropdownSelect: (option) => {
+                closeAllMenus();
+                updateField(field, option);
+                setOpenMenus(prev => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+            }, placeholder: bank_1.BANK_STRINGS.ACCOUNT_TYPE_PLACEHOLDER }),
+        errors[field] && !openMenus[menuKey] && (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
+            react_native_1.Platform.OS === 'android' && (react_1.default.createElement(Ionicons_1.default, { name: "warning", size: 16, color: colors.error || '#FF0000', style: styles.errorIcon })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, errors[field]))),
+        openMenus[menuKey] && (react_1.default.createElement(react_native_1.View, { style: styles.inlineMenu }, options.map((option) => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: option, style: styles.modalOption, onPress: () => {
+                closeAllMenus();
+                updateField(field, option);
+                setOpenMenus(prev => (Object.assign(Object.assign({}, prev), { [menuKey]: false })));
+            } },
+            react_1.default.createElement(react_native_1.Text, { style: styles.modalOptionText }, option))))))));
+    // Validation function to check if all required fields are filled (pure, no setErrors)
+    const isFormValid = () => {
+        const isAccountTypeValid = !!form.accountType;
+        const isAccountNumberValidVal = isAccountNumberValid(form.accountNumber);
+        const isIFSCSelected = !!selectedIFSC;
+        return isAccountTypeValid && isAccountNumberValidVal && isIFSCSelected;
+    };
+    const handleContinue = async () => {
+        // Mark all fields as touched when validating form
+        setTouchedFields({
+            accountType: true,
+            accountNumber: true,
+        });
+        // Validate all fields and set errors if needed
+        let valid = true;
+        if (!form.accountType) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountType: bank_1.BANK_STRINGS.ACCOUNT_TYPE_REQUIRED })));
+            valid = false;
+        }
+        if (!isAccountNumberValid(form.accountNumber)) {
+            setErrors(prev => (Object.assign(Object.assign({}, prev), { accountNumber: bank_1.BANK_STRINGS.INVALID_ACCOUNT_NUMBER })));
+            valid = false;
+        }
+        if (!valid) {
+            react_native_1.Alert.alert(common_1.COMMON_STRINGS.REQUIRED_FIELD, common_1.COMMON_STRINGS.FILL_REQUIRED_FIELDS);
+            return;
+        }
+        // Check if IFSC data is available
+        if (!selectedIFSC) {
+            react_native_1.Alert.alert(common_1.COMMON_STRINGS.REQUIRED_FIELD, bank_1.BANK_STRINGS.IFSC_CODE_REQUIRED);
+            return;
+        }
+        try {
+            // Get user info from app data
+            const userInfo = (0, appDataConfig_1.getUserInfoForAPI)();
+            if (!customerId) {
+                react_native_1.Alert.alert(common_1.COMMON_STRINGS.ERROR, 'Customer ID not found. Please try again.');
+                return;
+            }
+            // Prepare FD bank account request data with required parameters
+            const fdBankAccountRequest = {
+                providerId: defaultProviderId,
+                workflowInstanceId: workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                accountType: form.accountType,
+                accountNumber: form.accountNumber,
+                ifscCode: selectedIFSC.ifscCode,
+                bankName: selectedIFSC.bankName,
+                branchName: selectedIFSC.branchName,
+                customerId: customerId,
+            };
+            const response = await fdBankAccount(fdBankAccountRequest).unwrap();
+            // Navigate to PayNow screen after successful API call
+            (0, helpers_1.navigate)('PayNow');
+        }
+        catch (error) {
+            // Show error message to user and stay on current screen
+            react_native_1.Alert.alert(common_1.COMMON_STRINGS.ERROR, bank_1.BANK_STRINGS.BANK_ACCOUNT_ADDED_FAILED);
+        }
+    };
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = () => {
+        (0, helpers_1.navigate)('BankDetail');
+    };
+    // Handle Android hardware back button
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android')
+            return;
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+        const backHandler = react_native_1.BackHandler.addEventListener('hardwareBackPress', onHardwareBackPress);
+        return () => backHandler.remove();
+    }, []);
+    return (react_1.default.createElement(SafeAreaWrapper_1.default, { includeTop: false, bottomPadding: 25, statusBarColor: "#000000", statusBarStyle: "light-content" },
+        react_1.default.createElement(components_1.Header, { title: bank_1.BANK_STRINGS.ADD_BANK_ACCOUNT_TITLE, onBackPress: handleBackPress, backgroundColor: colors.primary }),
+        react_1.default.createElement(react_native_1.KeyboardAvoidingView, { style: { flex: 1 }, behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: react_native_1.Platform.OS === 'ios' ? 0 : 0 },
+            react_1.default.createElement(react_native_1.ScrollView, { ref: scrollViewRef, style: styles.scrollContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", onScrollBeginDrag: closeAllMenus, contentContainerStyle: styles.scrollContentContainer, scrollEnabled: !isLoadingFDBankAccount },
+                react_1.default.createElement(react_native_1.TouchableWithoutFeedback, { onPress: isLoadingFDBankAccount ? undefined : closeAllMenus },
+                    react_1.default.createElement(react_native_1.View, null,
+                        renderDropdown(bank_1.BANK_STRINGS.ACCOUNT_TYPE_LABEL, form.accountType, 'accountType', accountTypeOptions, 'accountType'),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(TextFieldWithLabel_1.default, { label: bank_1.BANK_STRINGS.ACCOUNT_NUMBER_LABEL, value: form.accountNumber, onChangeText: (text) => {
+                                    // Allow only numbers
+                                    const cleaned = text.replace(/\D/g, '');
+                                    updateField('accountNumber', cleaned);
+                                }, onFocus: () => {
+                                    closeAllMenus();
+                                    setTouchedFields(prev => (Object.assign(Object.assign({}, prev), { accountNumber: true })));
+                                    // Scroll to input when focused to keep it visible above keyboard
+                                    setTimeout(() => {
+                                        var _a;
+                                        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: true });
+                                    }, 300);
+                                }, textInputRef: accountNumberRef, placeholder: bank_1.BANK_STRINGS.ACCOUNT_NUMBER_PLACEHOLDER, variant: "numeric", keyboardType: "numeric", maxLength: 18 }),
+                            errors.accountNumber && (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
+                                react_native_1.Platform.OS === 'android' && (react_1.default.createElement(Ionicons_1.default, { name: "warning", size: 16, color: colors.error || '#FF0000', style: styles.errorIcon })),
+                                react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, errors.accountNumber)))),
+                        react_1.default.createElement(react_native_1.View, null,
+                            react_1.default.createElement(react_native_1.Text, { style: styles.ifscLabel },
+                                bank_1.BANK_STRINGS.IFSC_CODE_LABEL,
+                                " (Required)"),
+                            (() => {
+                                return null;
+                            })(),
+                            selectedIFSC ? (react_1.default.createElement(components_1.IFSCSearchResultCard, { bankName: selectedIFSC.bankName, branchName: selectedIFSC.branchName, ifscCode: selectedIFSC.ifscCode, bankShortDesc: selectedIFSC.bankShortDesc, bankCode: selectedIFSC.bankCode, onSelect: onFindIFSC || (() => { }), buttonTitle: "Change" })) : (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.findIFSCButton, onPress: () => { closeAllMenus(); onFindIFSC === null || onFindIFSC === void 0 ? void 0 : onFindIFSC(); } },
+                                react_1.default.createElement(react_native_1.View, { style: styles.findIFSCContainer },
+                                    react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.search }, style: styles.searchIcon }),
+                                    react_1.default.createElement(react_native_1.Text, { style: styles.findIFSCText }, bank_1.BANK_STRINGS.FIND_IFSC_BUTTON))))))))),
+        react_1.default.createElement(react_native_1.View, { style: styles.footer },
+            react_1.default.createElement(ActionButton_1.default, { title: common_1.COMMON_STRINGS.CONTINUE, onPress: handleContinue, disabled: isLoadingFDBankAccount || !isFormValid(), loading: isLoadingFDBankAccount })),
+        isLoadingFDBankAccount && (react_1.default.createElement(react_native_1.View, { style: styles.loadingOverlay, pointerEvents: "auto" }))));
+};
+const createStyles = (colors, typography, themeName) => react_native_1.StyleSheet.create({
+    scrollContent: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    scrollContentContainer: {
+        flexGrow: 1,
+        paddingBottom: 200,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: colors.background,
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 25,
+    },
+    inlineMenu: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)',
+        borderRadius: 8,
+        marginTop: -20,
+        marginBottom: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    modalOption: {
+        paddingVertical: 14,
+    },
+    modalOptionText: Object.assign(Object.assign({}, typography.styles.bodyLarge), { color: colors.text }),
+    ifscLabel: Object.assign(Object.assign({}, typography.styles.bodySmall), { color: colors.textLight, marginBottom: 8 }),
+    findIFSCButton: {
+        marginBottom: 10,
+    },
+    findIFSCContainer: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+    },
+    searchIcon: {
+        width: 14,
+        height: 14,
+        marginRight: 4,
+        marginTop: 2,
+        tintColor: colors.primary,
+    },
+    findIFSCText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.primary }),
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    debugButtonText: Object.assign(Object.assign({}, typography.styles.bodyMedium), { fontWeight: '600' }),
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: -20,
+        marginBottom: 20,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 12,
+        color: colors.error || '#FF0000',
+        flex: 1,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        zIndex: 1000,
+    },
+});
+exports.default = AddBankAccount;

package/lib/screens/BankDetail.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface BankDetailProps {
+    onGoBack?: () => void;
+    onContinue?: (data: BankData) => void;
+    onAddAccount?: () => void;
+    initialData?: Partial<BankData>;
+}
+export interface BankData {
+    accountType: string;
+    accountNumber: string;
+    ifscCode: string;
+    bankName: string;
+    branchName: string;
+}
+declare const BankDetail: React.FC<BankDetailProps>;
+export default BankDetail;