Loan Genie

A React component for loan application with multi-step process and DocuSign integration.

Features

• Multi-step loan application process
• DocuSign document signing integration
• Responsive design optimized for mobile
• TypeScript support
• Configurable API endpoints
• Customizable styling

Installation

npm install loan-genie

Usage

Basic Usage

import React from 'react';
import { LoanBanner } from 'loan-genie';

const App = () => {
  const config = {
    apiBaseUrl: 'https://api.softsmartinc.com/Services/vNew',
    authorizationToken: 'your-auth-token',
    appName: 'YourAppName'
  };

  return (
    <LoanBanner
      email="[email protected]"
      config={config}
      onLoanAccepted={(loanData) => {
        console.log('Loan accepted:', loanData);
      }}
      onError={(error) => {
        console.error('Error:', error);
      }}
      onStepChange={(step) => {
        console.log('Current step:', step);
      }}
    />
  );
};

export default App;

Advanced Usage with Custom Styling

import React from 'react';
import { LoanBanner } from 'loan-genie';

const App = () => {
  const config = {
    apiBaseUrl: 'https://api.softsmartinc.com/Services/vNew',
    authorizationToken: 'your-auth-token',
    appName: 'YourAppName',
    apiTimeout: 30000
  };

  const customStyle = {
    maxWidth: '600px',
    margin: '0 auto'
  };

  return (
    <LoanBanner
      email="[email protected]"
      config={config}
      className="my-loan-banner"
      style={customStyle}
      onLoanAccepted={(loanData) => {
        // Handle loan acceptance
        console.log('Loan accepted:', loanData);
      }}
      onError={(error) => {
        // Handle errors
        console.error('Error:', error);
      }}
      onStepChange={(step) => {
        // Track step changes
        console.log('Current step:', step);
      }}
    />
  );
};

export default App;

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | email | string | Yes | User's email address | | config | LoanBannerConfig | Yes | API configuration object | | onLoanAccepted | (loanData: any) => void | No | Callback when loan is accepted | | onError | (error: Error) => void | No | Callback for error handling | | onStepChange | (step: number) => void | No | Callback when step changes | | className | string | No | Additional CSS class name | | style | React.CSSProperties | No | Inline styles |

Configuration

LoanBannerConfig

interface LoanBannerConfig {
  apiBaseUrl: string;           // Base URL for API calls
  apiTimeout?: number;          // Request timeout in milliseconds (default: 30000)
  authorizationToken: string;   // Bearer token for API authentication
  appName?: string;            // Application name for API headers
}

API Endpoints

The component expects the following API endpoints:

• POST /LoanGenie/GetOffer - Get loan offer data
• POST /DocuSign/Envelopes/Create - Create DocuSign envelope
• POST /DocuSign/Documents/List - List documents in envelope
• POST /DocuSign/Documents/Download - Download signed document
• POST /LoanGenie/SaveOffer - Save loan offer
• POST /LoanGenie/AcceptOffer - Accept loan offer

Styling

The component includes built-in CSS styles. You can customize the appearance by:

1. CSS Classes: Override specific CSS classes
2. Inline Styles: Use the style prop
3. CSS Modules: Import and override styles

Key CSS Classes

• .loan_banner_container - Main container
• .loan-offer - Initial offer step
• .loan-terms - Terms selection step
• .loan-summary-page - Summary step
• .loan-agreement - Document signing step
• .deposit-funds - Account selection step
• .loan-accept - Final acceptance step
• .thank-you - Completion step

Development

Building the Component

npm run build

Development Mode

npm run dev

Dependencies

• React (>=16.8.0)
• React DOM (>=16.8.0)
• Axios (^1.11.0)
• Moment.js (^2.30.1)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Support

For support, email [email protected] or create an issue in the repository.