@comparaonline/cico-quote

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

Prop	Description
stepsDisplay	Allows you to define the form display, it can be 3 steps form or single form.
theme	See theme config details
lang	Let you pick between spanish(es) and portuguese(pt).
environment	Let you pick between developing enviroments overwriting react env variable
	can be staging for testing purposes and the default is production.

Theme details

Prop	Description
container	By default all css variables and the id this component needs are loaded to a div element within this component, that act like the parent element for the rest of elements. You can pass any html element to load this properties ex: document.documentElement.
darkContainer	By default the dark class and the color scheme this component needs to work with the dark mode are loaded to a div element within this component. Important this element must be a child of the container, preferably a direct child
mode	Let you pick between dark or light mode. The default value is light
primaryColor	Let you override the primary color value. Warning: This changes the css variable value, Since this package utilize TailwindCSS also change the value of the primary color. Possible affected class: primary-100, primary-200.