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

``bash
npm install loan-genie
`

Usage

$3

`tsx
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 (
email="user@example.com"
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;
`

$3

`tsx
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 (
email="user@example.com"
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

$3

`typescript
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

$3

- .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

$3

`bash
npm run build
`

$3

`bash
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 support@example.com or create an issue in the repository.