@comparaonline/cico-quote v1.13.2

Bricks | Car insurance Colombia quote form

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

Installation

You can install it using:

npm

npm install @comparaonline/cico-quote

yarn

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

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

CICOQuote instance accepts a configuration object that has this structure:

export interface CICOQuoteConfiguration {
  stepsDisplay?: boolean;
  theme?: {
    container?: HTMLElement;
    darkContainer?: HTMLElement;
    mode?: 'dark' | 'light';
    primaryColor?: string;
  };
  lang?: 'es' | 'pt';
  token: string;
  environment?: 'staging' | 'production';
  refreshToken?: string;
}

Prop details

Theme details