Bricks | ComparaOnline banner with car insurance quote integration
This library contains ComparaOnline banner with integrated car insurance quote flow in a modal.
Installation
You can install it using:
npm
npm install @comparaonline/co-banner-quote
yarn
yarn add @comparaonline/co-banner-quote
or the package manager of your choice
If you are not using a package manager you could simply include a script tag (index.mjs
for ECMAScript module system or index.js
for CommonJS)
<script
type="module"
src="https://bricks-staging.comparaonline.com/co-banner-quote/index.mjs"
></script>
Usage
Simple example, providing a token
and refreshToken
to persist session and fully enable functionality:
import { useEffect } from 'react';
import COBannerQuote from '@comparaonline/co-banner-quote/react';
import '@comparaonline/co-banner-quote/css';
import './App.css';
const ENVIRONMENT = 'set-your-environment';
export function App() {
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 COBannerQuote({
...data,
styles: { primaryColor: 'orange' },
environment: environment,
});
brick.init('co-banner-quote');
})();
}, []);
return <section id="co-banner-quote" />;
}
You can also simply use COBannerQuote component:
import { COBannerQuote } from '@comparaonline/co-banner/react';
export function App() {
// Logic to retrieve `token` and `refreshToken`
return <COBannerQuote {...coBannerConfig} />;
}
COBannerQuote instance (or component) accepts a configuration
object that has this structure:
export type COBannerQuoteConfig = {
lang?: Language;
styles?: Styles;
recommended?: {
basePrice: string;
fullPrice: string;
premiumPrice: string;
};
onClick?: MouseEventHandler<HTMLElement>;
buttonText?: string;
title?: ReactElement;
className?: string;
children?: ReactElement;
quoteTexts?: {
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;
};
};
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). recommended
let you set an object with base prices for different car insurance coverages.