@comparaonline/recommended-offers
v1.16.2
Published
![npm](https://img.shields.io/npm/v/@comparaonline/recommended-offers.svg?style=flat-square)
Downloads
61
Maintainers
Keywords
Readme
Bricks | Car insurance recommended offers
This library contains car insurance recommended offers.
Installation
You can install it using:
npm
npm install @comparaonline/recommended-offers
yarn
yarn add @comparaonline/recommended-offers
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 RecommendedOffers from '@comparaonline/recommended-offers/react';
import '@comparaonline/recommended-offers/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 RecommendedOffers({
...data,
styles: { primaryColor: 'orange' },
environment: environment,
});
if (containerRef.current) brick.init(containerRef.current);
})();
}, []);
return <div className="App" id="App" ref={containerRef}></div>;
}
RecommendedOffers instance accepts a configuration
object that has this structure:
export interface RecommendedOffersConfiguration {
styles?: {
theme?: 'dark' | 'light';
primaryColor?: string;
};
texts?: {
title?: string;
description?: string;
moreOffers?: string;
success?: {
title?: string;
description?: string;
seeOffers?: string;
quoteAgain?: string;
};
error?: {
title?: string;
description?: string;
understand?: 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.