Empower your platform with seamless financial integration using these White Label UI Components. Designed for easy customisation and seamless integration, our UI components offer: Customisation: Tailor the look and feel to match your brand. Modularity: Choose functionalities that fit your needs. Security: Industry-leading standards to protect user data. Scalability: Reliable performance for any user load. Get started today with our developer-friendly APIs and comprehensive documentation!

• Register Finance
• Finance Application Form
• Repayment Modal
• Summary Card
• Loan Details
• Banner
• Loan List
• Profile
• Request Edit

First install the react-native-sdk by running one of these command

yarn add react-native-wlc

Or

npm install react-native-wlc

import React, { useCallback, useEffect, useState } from 'react'
import './App.css'
import { LMSProvider } from 'react-native-wlc'


function App() {
	const [token, setToken] = useState('')

	const fetchToken = useCallback(async () => {
		// generate the token and assign to the setToken hook 
	}, [])

	useEffect(() => {
		fetchToken()
	}, [fetchToken])

	return (
		<LMSProvider
			base_url={/* provide the base url*/}
			token={token}
			info={{
				// Pass one of these information
				email: '',
				contactNumber: '',
				ntn: '',
				external_user_id: ''
			}}
			font={['Poppins']}
		>
			{/* children */}
		</LMSProvider>
	)
}

export default App

Wrap your top level-component with LMSProvider. Note: White label component works inside LMSProvider

| Parameter | Required? | Type | Description | |-----------|:---------:|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | base_url | true | string | Read the doc for the base url or connect with our team ([email protected]) for the base url | | token | true | string | Generate the token and pass it to the LMSProvider. Read the doc to generate the token. | | info | true | InfoType | Pass one of these information email, contactNumber, ntn, external_user_id. If you are new the pass one of these value with empty string like { ntn : '' }. You can set later by using useLMS() hook | | theme | false | light or dark | You can pass theme mode like light or dark | | palette | false | Theme palette | For more info see the theme section | | font | false | string[] | Pass font name. eg: ['Arial']. Remember if you have custom font then integrate in your project and pass the string. |

Now Configuration is done. You are free to use any white label component if you business is already register.

RegisterFinance

import React, { useState } from 'react'
import { RegisterFinance } from 'react-native-wlc'

export const Component = () => {
	return <RegisterFinance onSuccess={(business: IBusiness) => console.log('business', business)} />
}

It will help you to register your business information with us.

| Parameter | Required? | Type | Description | |-----------|:---------:|------------|------------------------------------------------------------------------------------| | onSuccess | false | function | it will return business type object, once you successfully submitted your request. |

FinanceApplicationForm

import React, { useState } from 'react'
import { FinanceApplicationForm } from 'react-native-wlc'

export const Component = () => {
	return <FinanceApplicationForm onSuccess={(loan) => console.log('loan', loan._id)} />
}

You can apply your loan via this component

| Parameter | Required? | Type | Description | |-----------|:---------:|------------|--------------------------------------------------------------------------------| | onSuccess | false | function | it will return loan type object, once you successfully submitted your request. |

RepaymentModal

import React, { useState } from 'react'
import { RepaymentModal } from 'react-native-wlc'

export const Component = () => {
	return <RepaymentModal onSuccess={(loan) => console.log('loan', loan)} />
}

| Parameter | Required? | Type | Description | |-----------|:---------:|------------|--------------------------------------------------------------------------------| | loanId | true | string | once you receive the loan object get the loan id and pass it to this component | | onSuccess | false | function | It will fire, whenever your request successfully saved with us. | | open | true | boolean | It will set the visibility of the modal | | onClose | false | function | It will trigger once user clicks on the close, cancel button |

SummaryCard

import React, { useState } from 'react'
import { SummaryCard } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <SummaryCard
		onClick={() => {
			/* Write your business logic, eg: navigate to the other screen */
		}}
	/>
}

| Parameter | Required? | Type | Description | |-----------|:---------:|------------|---------------------------------------------------------| | onClick | false | function | It will call whenever user click on Apply for financing |

LoanDetails

import React, { useState } from 'react'
import { LoanDetails } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <LoanDetails
		loanId={'65d8c8034a5df5b079172dec'} // pass your loanId 
		onRecordClick={() => {
			// do something
		}}
		isRepayment={false}
	/>
}

| Parameter | Required? | Type | Description | |---------------|:---------:|------------|-------------------------------------------------------------| | loanId | true | string | Pass the loan id to see the loan details | | isRepayment | false | boolean | pass if you want default tab selected to "Repayment" | | onRecordClick | false | function | it will call whenever user clicks on Record payments button |

Banner

import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <Banner
		onClick={() => {

		}}
		onClose={() => {// it will fire whenever user click on the close icon
		}}
	/>
}

| Parameter | Required? | Type | Description | |-----------|:---------:|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | onClick | false | function | it will fire whenever user clicks on the button, it will return type and contractUrl.Available types: REGISTER_FOR_FINANCINGREVIEW_SIGN_CONTRACTREGISTER_AGAINAPPLY_FINANCING | | onClose | false | function | It will call when user click on the close icon |

LoanList

import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
	const { userDetail } = useLMS()

	return <LoanList onRecordPaymentClick={(loan) => {
		// it will return you selected loan
	}}
					 onViewClick={(type, loan) => {
						 // it will return you type : 'LOAN'|'APPLICATION' and selected loan detail
					 }}
					 tableMaxHeight={300}
	/>
}

| Parameter | Required? | Type | Description | |----------------------|:---------:|------------|-----------------------------------------------------------------------------| | onRecordPaymentClick | false | function | It will return you selected loan | | onViewClick | false | function | it will return you type : LOAN or APPLICATION and selected loan | | tableMaxHeight | false | number | Table max height for both Loan and Application |

Profile

import React, { useState } from 'react'
import { Profile } from 'react-native-wlc'

export const Component = () => {
	return <Profile />
}

RequestEdit

import React, { useState } from 'react'
import { RequestEdit } from 'react-native-wlc'

export const Component = () => {
	return <RequestEdit />
}

Hooks

useLMS()

const { TOKEN, BASE_URL, axiosInstance, EMAIL, setEmail, userDetail } = useLMS()

| Name | Description | |---------------|-------------------------------------------------------------------------------------| | TOKEN | It will return current token | | BASE_URL | It will return current base url | | axiosInstance | You can use use axiosInstance, if you wanna call the server directly | | EMAIL | It will return current email | | setEmail | if you wanna change the email you can call this function. setEmail('[email protected]') | | userDetail | it will return IBusiness type object. IBusiness - current user status |

Theme

Default Palette

const palette = {
    colors: {
        primary: "rgb(38, 119, 85)",
        onPrimary: "rgb(255, 255, 255)",
        primaryContainer: "rgb(240, 219, 255)",
        onPrimaryContainer: "rgb(44, 0, 81)",
        secondary: "rgb(102, 90, 111)",
        onSecondary: "rgb(255, 255, 255)",
        secondaryContainer: "rgb(237, 221, 246)",
        onSecondaryContainer: "rgb(33, 24, 42)",
        tertiary: "rgb(128, 81, 88)",
        onTertiary: "rgb(255, 255, 255)",
        tertiaryContainer: "rgb(255, 217, 221)",
        onTertiaryContainer: "rgb(50, 16, 23)",
        error: "rgb(186, 26, 26)",
        onError: "rgb(255, 255, 255)",
        errorContainer: "rgb(255, 218, 214)",
        onErrorContainer: "rgb(65, 0, 2)",
        background: "rgb(255, 251, 255)",
        onBackground: "rgb(29, 27, 30)",
        surface: "rgb(29, 27, 30)",
        onSurface: "rgb(29, 27, 30)",
        surfaceVariant: "rgb(233, 223, 235)",
        onSurfaceVariant: "rgb(74, 69, 78)",
        outline: "rgb(124, 117, 126)",
        outlineVariant: "rgb(204, 196, 206)",
        shadow: "rgb(0, 0, 0)",
        scrim: "rgb(0, 0, 0)",
        inverseSurface: "rgb(50, 47, 51)",
        inverseOnSurface: "rgb(245, 239, 244)",
        inversePrimary: "rgb(220, 184, 255)",
        elevation: {
            level0: "transparent",
            level1: "rgb(248, 242, 251)",
            level2: "rgb(244, 236, 248)",
            level3: "rgb(240, 231, 246)",
            level4: "rgb(239, 229, 245)",
            level5: "rgb(236, 226, 243)",
        },
        surfaceDisabled: "rgba(29, 27, 30, 0.12)",
        onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
        backdrop: "rgba(51, 47, 55, 0.4)",
    },
};