@comparaonline/recommended-offers v1.16.2

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.