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
• Review Finance
• Finance Application Form
• Repayment Modal
• Summary Card
• Loan Details
• Banner
• Loan List
• Profile
• Request Edit

First install the React js sdk by running one of these command

yarn add @creditbook/wlc-react-sdk

Or

npm install @creditbook/wlc-react-sdk

import React, { useCallback, useEffect, useState } from 'react';
import './App.css';
import { LMSProvider } from '@creditbook/wlc-react-sdk';
// Custom font
import Poppins from './font/Poppins.json';

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
• ReviewFinance

RegisterFinance

NOTE : When navigating to the Review Finance screen, users have the opportunity to modify any relevant information before submitting it within the Review Finance component. This ensures that all details are accurate and up-to-date prior to final submission.

import React, { useState } from 'react';
import { RegisterFinance } from '@creditbook/wlc-react-sdk';

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

| Parameter | Required? | Type | Description | | -------------- | :-------: | ---------- | ------------------------------------------------------------------------------ | | isBankRequired | false | boolean | If you want bank information mandatory you can pass isBankRequired={true} | | onBackPress | false | function | it will call whenever user press back button from the navbar | | onReview | false | function | it will return business type object, once you successfully pass the validation |

ReviewFinance

import React, { useState } from 'react';
import { ReviewFinance } from '@creditbook/wlc-react-sdk';

export const Component = () => {
  const initialData; // you will receive initial data from register finance component. When onReview callback called.
  return (
    <ReviewFinance
      initialData={initialData}
      onSuccess={(val) => console.log('value', val)}
    />
  );
};

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

| Parameter | Required? | Type | Description | | -------------- | :-------: | ---------- | ----------------------------------------------------------------------------------------- | | initialData | true | object | You will receive initial data from register finance component. | | onSuccess | false | function | it will call once user successfully register the user and it will return IBusiness object | | isBankRequired | false | function | If you want bank information mandatory you can pass isBankRequired={true} | | onFinish | false | function | it will call at the last stage of the registration |

FinanceApplicationForm

import React, { useState } from 'react';
import { FinanceApplicationForm } from '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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 '@creditbook/wlc-react-sdk';

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

RequestEdit

import React, { useState } from 'react';
import { RequestEdit } from '@creditbook/wlc-react-sdk';

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 = {
  primary: {
    '50': '#EBF5FF',
    '100': '#CCE5FF',
    '200': '#99CCFF',
    '300': '#66B2FF',
    '400': '#3399FF',
    '500': '#007FFF',
    '600': '#0066CC',
    '700': '#004C99',
    '800': '#004C99',
    '900': '#003A75',
    main: '#007FFF',
    light: '#66B2FF',
    dark: '#004C99',
    contrastText: '#fff',
  },
  secondary: {
    '50': '#F3F6F9',
    '100': '#E5EAF2',
    '200': '#DAE2ED',
    '300': '#C7D0DD',
    '400': '#B0B8C4',
    '500': '#9DA8B7',
    '600': '#6B7A90',
    '700': '#434D5B',
    '800': '#303740',
    '900': '#1C2025',
    main: '#DAE0E7',
    contrastText: '#2F3A46',
    light: 'rgb(225, 230, 235)',
    dark: 'rgb(152, 156, 161)',
  },
  divider: '#E5EAF2',
  primaryDark: {
    '50': '#EAEDF1',
    '100': '#DAE0E7',
    '200': '#ACBAC8',
    '300': '#7B91A7',
    '400': '#4B5E71',
    '500': '#3B4A59',
    '600': '#2F3A46',
    '700': '#1F262E',
    '800': '#141A1F',
    '900': '#101418',
    main: '#7B91A7',
  },
  common: { black: '#0B0D0E', white: '#fff' },
  text: {
    primary: '#1C2025',
    secondary: '#434D5B',
    tertiary: '#6B7A90',
    disabled: 'rgba(0, 0, 0, 0.38)',
  },
  grey: {
    '50': '#F3F6F9',
    '100': '#E5EAF2',
    '200': '#DAE2ED',
    '300': '#C7D0DD',
    '400': '#B0B8C4',
    '500': '#9DA8B7',
    '600': '#6B7A90',
    '700': '#434D5B',
    '800': '#303740',
    '900': '#1C2025',
    main: '#E5EAF2',
    contrastText: '#6B7A90',
    A100: '#f5f5f5',
    A200: '#eeeeee',
    A400: '#bdbdbd',
    A700: '#616161',
  },
  error: {
    '50': '#FFF0F1',
    '100': '#FFDBDE',
    '200': '#FFBDC2',
    '300': '#FF99A2',
    '400': '#FF7A86',
    '500': '#FF505F',
    '600': '#EB0014',
    '700': '#C70011',
    '800': '#94000D',
    '900': '#570007',
    main: '#EB0014',
    light: '#FF99A2',
    dark: '#C70011',
    contrastText: '#fff',
  },
  success: {
    '50': '#E9FBF0',
    '100': '#C6F6D9',
    '200': '#9AEFBC',
    '300': '#6AE79C',
    '400': '#3EE07F',
    '500': '#21CC66',
    '600': '#1DB45A',
    '700': '#1AA251',
    '800': '#178D46',
    '900': '#0F5C2E',
    main: '#1AA251',
    light: '#6AE79C',
    dark: '#1AA251',
    contrastText: '#fff',
  },
  warning: {
    '50': '#FFF9EB',
    '100': '#FFF3C1',
    '200': '#FFECA1',
    '300': '#FFDC48',
    '400': '#F4C000',
    '500': '#DEA500',
    '600': '#D18E00',
    '700': '#AB6800',
    '800': '#8C5800',
    '900': '#5A3600',
    main: '#DEA500',
    light: '#FFDC48',
    dark: '#AB6800',
    contrastText: 'rgba(0, 0, 0, 0.87)',
  },
  gradients: {
    lightGrayRadio:
      'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)',
    stylizedRadio:
      'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)',
    linearSubtle:
      'linear-gradient(to top right, rgba(235, 245, 255, 0.3) 40%, rgba(243, 246, 249, 0.2) 100%)',
  },
  info: {
    main: '#0288d1',
    light: '#03a9f4',
    dark: '#01579b',
    contrastText: '#fff',
  },
  contrastThreshold: 3,
  tonalOffset: 0.2,
  background: { paper: '#fff', default: '#fff' },
  action: {
    active: 'rgba(0, 0, 0, 0.54)',
    hover: 'rgba(0, 0, 0, 0.04)',
    hoverOpacity: 0.04,
    selected: 'rgba(0, 0, 0, 0.08)',
    selectedOpacity: 0.08,
    disabled: 'rgba(0, 0, 0, 0.26)',
    disabledBackground: 'rgba(0, 0, 0, 0.12)',
    disabledOpacity: 0.38,
    focus: 'rgba(0, 0, 0, 0.12)',
    focusOpacity: 0.12,
    activatedOpacity: 0.12,
  },
};