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. |