@comparaonline/ci-quote

Bricks | Car insurance quote form

This library contains car insurance quote form split in three (3) steps.

Installation

You can install it using:

npm

npm install @comparaonline/ci-quote

yarn

yarn add @comparaonline/ci-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 CIQuote from '@comparaonline/ci-quote/react';
import '@comparaonline/ci-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 CIQuote({
        ...data,
        styles: { primaryColor: 'orange' },
        environment: environment,
      });
      if (containerRef.current) brick.init(containerRef.current);
    })();
  }, []);

  return <div className="App" id="App" ref={containerRef}></div>;
}

CIQuote instance accepts a configuration object that has this structure:

export interface CIQuoteConfiguration {
  styles?: {
    theme?: 'dark' | 'light';
    primaryColor?: string;
  };
  texts?: {
    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;
  defaultValues?: {
    birthdate?: Date; // Ex: new Date('1990/01/01')
    brand?: string;
    businessName?: string;
    carUseType?: 'private' | 'commercial';
    county?: string;
    email?: string;
    firstName?: string;
    lastName?: string;
    model?: string;
    nationalId?: string;
    phone?: string;
    plate?: string;
    year?: number;
  };
}

styles let you define the theme, also its primaryColor, while lang let you pick between spanish(es) and portuguese(pt).

predefinedValues let you set values that you already have to autofill the fields. These values are passed through a validator and if there is a value with an invalid formate this will not be added to the form.