1.4.3 • Published 2 months ago
@comparaonline/cicl-full-quote v1.4.3
Bricks | Car insurance full quote
This library contains car insurance full quote flow.
Installation
You can install it using:
npm
npm install @comparaonline/cicl-full-quote
yarn
yarn add @comparaonline/cicl-full-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 CIFullQuote from '@comparaonline/cicl-full-quote/react';
import '@comparaonline/cicl-full-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 CIFullQuote({
...data
styles: { primaryColor: 'orange' },
environment: environment,
});
if (containerRef.current) brick.init(containerRef.current);
})();
}, []);
return <div className="App" id="App" ref={containerRef}></div>;
}
CIFullQuote instance accepts a configuration
object that has this structure:
export interface CIFullQuoteConfiguration {
styles?: {
theme?: 'dark' | 'light';
primaryColor?: string;
};
texts?: {
recommendedOffers: {
title?: string;
description?: string;
moreOffers?: string;
success?: {
title?: string;
description?: string;
seeOffers?: string;
quoteAgain?: string;
};
error?: {
title?: string;
description?: string;
understand?: string;
};
};
ciQuote: {
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;
}
styles
let you define the theme
, also its primaryColor
, while lang
let you pick between spanish
(es) and portuguese
(pt), and texts lets you define custom title, captions, button texts and others.