@comparaonline/co-banner-quote v1.12.1

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.