@comparaonline/ci-full-quote

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.