@comparaonline/ci-quote
v1.17.2
Published
![npm](https://img.shields.io/npm/v/@comparaonline/ci-quote.svg?style=flat-square)
Downloads
55
Maintainers
Keywords
Readme
Bricks | Car insurance quote form
This library contains car insurance quote form split in three (3) steps.
Installation
You can install it using:
npm
npm install @comparaonline/ci-quote
yarn
yarn add @comparaonline/ci-quote
or the package manager of your choice
Usage
Simple example, providing a token
and refreshToken
to persist session and fully enable functionality:
import { useEffect, useRef } from 'react';
import CIQuote from '@comparaonline/ci-quote/react';
import '@comparaonline/ci-quote/css';
import './App.css';
const ENVIRONMENT = 'set-your-environment';
export function App() {
const containerRef = useRef(null);
const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
const baseUrl =
environment === 'staging'
? 'https://cotizador-staging.comparaonline.com'
: 'https://cotizador.comparaonline.com';
useEffect(() => {
(async () => {
const res = await fetch(baseUrl + '/octopus-prime/auth/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'not-a-valid-user',
password: 'not-a-valid-password',
}),
});
const data = await res.json();
const brick = new CIQuote({
...data,
styles: { primaryColor: 'orange' },
environment: environment,
});
if (containerRef.current) brick.init(containerRef.current);
})();
}, []);
return <div className="App" id="App" ref={containerRef}></div>;
}
CIQuote instance accepts a configuration
object that has this structure:
export interface CIQuoteConfiguration {
styles?: {
theme?: 'dark' | 'light';
primaryColor?: string;
};
texts?: {
title?: string;
subtitle?: string;
firstStep?: {
buttons?: {
continue?: string;
quoteWithoutPlate?: string;
quoteWithPlate?: string;
};
inputs?: {
plate?: string;
brand?: string;
model?: string;
year?: string;
};
};
secondStep?: {
alerts?: {
commercialAlert?: ReactElement;
};
buttons?: {
continue?: string;
previousStep?: string;
};
inputs?: {
identificationNumber?: string;
firstName?: string;
companyName?: string;
lastName?: string;
birthDate?: string;
commune?: string;
companyCommune?: string;
carUseType?: {
description?: string;
tooltip?: string;
label?: string;
};
};
};
thirdStep?: {
buttons?: {
quote?: string;
previousStep?: string;
};
alerts?: {
cellphoneAlert?: string;
emailAlert?: string;
};
inputs?: {
cellphone?: string;
email?: string;
};
};
success?: {
title?: string;
subtitle?: string;
buttons?: {
seeOffers?: string;
quoteAgain?: string;
};
};
error?: {
title?: string;
subtitle?: string;
};
steps?: {
firstStep: string;
secondStep: string;
thirdStep: string;
};
};
lang?: 'es' | 'pt';
token: string;
environment?: 'staging' | 'production';
refreshToken?: string;
defaultValues?: {
birthdate?: Date; // Ex: new Date('1990/01/01')
brand?: string;
businessName?: string;
carUseType?: 'private' | 'commercial';
county?: string;
email?: string;
firstName?: string;
lastName?: string;
model?: string;
nationalId?: string;
phone?: string;
plate?: string;
year?: number;
};
}
styles
let you define the theme
, also its primaryColor
, while lang
let you pick between spanish
(es) and portuguese
(pt).
predefinedValues
let you set values that you already have to autofill the fields. These values are passed through a validator and if there is a value with an invalid formate this will not be added to the form.