@comparaonline/ci-full-quote v1.12.0
Bricks | Car insurance full quote
This library contains car insurance full quote flow.
Installation
You can install it using:
npm
npm install @comparaonline/ci-full-quote
yarn
yarn add @comparaonline/ci-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/ci-full-quote/react';
import '@comparaonline/ci-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({
styles: { primaryColor: 'orange' },
environment: environment,
token: data.accessToken,
refreshToken: data.refreshToken,
});
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;
contactMe?: 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.
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
7 months ago
9 months ago
10 months ago
8 months ago
9 months ago
10 months ago
8 months ago
9 months ago
11 months ago
9 months ago
11 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
6 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago