Banner

Permite a los usuarios embeber un banner totalmente customizable que invita a quien lo vea a cotizar mediante ComparaOnline su seguro de auto (o otro tipo de seguro).

Instalación

La forma más simple de integrar el Banner es mediante la instalación del paquete del registro de npm en donde está publicado:

npm install @comparaonline/co-banner

Uso

Ejemplo simple para Seguro de Auto (utilizando la clase provista en el paquete, está pensada para utilizarse en cualquier tipo de proyecto):

simpleExample.tsx

import { useEffect, useRef } from 'react';
/*
 * Como el proyecto host es un proyecto que utiliza React,
 * importamos desde la subcarpeta react.
 * Si utilizaramos otra tecnología, deberíamos realizar,
 * este import desde la raíz (@comparaonline/co-banner)
 */
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/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',
          'Requesting-App': 'brick',
        },
        body: JSON.stringify({
          username: 'not-a-valid-user',
          password: 'not-a-valid-password',
        }),
      });
      const data = await res.json();
 
      const brick = new COBanner({
        ...data,
        environment,
        company: 'compara',
        businessUnit: 'car-insurance',
        countryCode: 'CL',
      });
      if (containerRef.current) brick.init(containerRef.current);
    })();
  }, []);
 
  return <section id="banner" ref={containerRef} />;
}

Ejemplo simple para Seguro de Viaje (utilizando la clase provista en el paquete, está pensada para utilizarse en cualquier tipo de proyecto):

simpleExample.tsx

import { useEffect, useRef } from 'react';
/*
 * Como el proyecto host es un proyecto que utiliza React,
 * importamos desde la subcarpeta react.
 * Si utilizaramos otra tecnología, deberíamos realizar,
 * este import desde la raíz (@comparaonline/co-banner)
 */
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/css';
import './App.css';
 
const ENVIRONMENT = 'set-your-environment';
 
export function App() {
  const containerRef = useRef(null);
  const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
 
  useEffect(() => {
    (async () => {
      const brick = new COBanner({
        environment,
        company: 'compara',
        businessUnit: 'travel-insurance',
        countryCode: 'CL',
      });
      if (containerRef.current) brick.init(containerRef.current);
    })();
  }, []);
 
  return <section id="banner" ref={containerRef} />;
}

Otra forma de uso más simple, si el proyecto en el que se integra utiliza React es con el componente provisto en el paquete, COBanner para Seguro de Auto:

componentExample.tsx

import { useEffect, useRef } from 'react';
/*
 * Como el proyecto host es un proyecto que utiliza React,
 * importamos desde la subcarpeta react.
 * Si utilizaramos otra tecnología, deberíamos realizar,
 * este import desde la raíz (@comparaonline/co-banner)
 */
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/css';
import './App.css';
 
const ENVIRONMENT = 'set-your-environment';
 
export function App() {
  const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
  const baseUrl =
    environment === 'staging'
      ? 'https://cotizador-staging.comparaonline.com'
      : 'https://cotizador.comparaonline.com';
  const [coBannerConfig, setCOBannerConfig] = useState({
    company: 'compara',
    environment,
    businessUnit: 'car-insurance',
    countryCode: 'CL',
  });
 
  useEffect(() => {
    (async () => {
      const res = await fetch(baseUrl + '/octopus-prime/auth/login', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          'Requesting-App': 'brick',
        },
        body: JSON.stringify({
          username: 'not-a-valid-user',
          password: 'not-a-valid-password',
        }),
      });
      const data = await res.json();
 
      setCOBannerConfig((prevConfig) => ({
        ...prevConfig,
        ...data,
      }));
    })();
  }, []);
 
  return <COBanner {...coBannerConfig} />;
}

Otra forma de uso más simple, si el proyecto en el que se integra utiliza React es con el componente provisto en el paquete, COBanner para Seguro de Viaje:

defaultValuesExample.tsx

import { useEffect, useRef } from 'react';
/*
 * Como el proyecto host es un proyecto que utiliza React,
 * importamos desde la subcarpeta react.
 * Si utilizaramos otra tecnología, deberíamos realizar,
 * este import desde la raíz (@comparaonline/co-banner)
 */
import COBanner from '@comparaonline/co-banner/react';
import '@comparaonline/co-banner/css';
import './App.css';
 
const ENVIRONMENT = 'set-your-environment';
 
export function App() {
  const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
  const [coBannerConfig, setCOBannerConfig] = useState({
    company: 'compara',
    environment,
    businessUnit: 'travel-insurance',
    countryCode: 'CL',
  });
 
  return <COBanner {...coBannerConfig} />;
}

Otros casos de uso

Este módulo de ComparaOnline Bricks puede ser incluído incluyendo el script correspondiente, (index.mjs corresponde a ECMASCript module system, mientras que index.js corresponde a CommonJS)

<script type="module" src="https://bricks-staging.comparaonline.com/co-banner/index.mjs"></script>
<link rel="stylesheet" href="https://bricks-staging.comparaonline.com/co-banner/style.css" />

Para inicilizar la instancia debemos incluir estas líneas en nuestro código, donde el parámetro que le debemos pasar a la función init es el ID del contenedor en dónde queremos pegar el módulo, o una referencia a un elemento.

otherUseCases.tsx

const ENVIRONMENT = 'set-your-environment';
const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
const baseUrl =
  environment === 'staging'
    ? 'https://cotizador-staging.comparaonline.com'
    : 'https://cotizador.comparaonline.com';
 
const res = await fetch(baseUrl + '/octopus-prime/auth/login', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Requesting-App': 'brick',
  },
  body: JSON.stringify({
    username: 'not-a-valid-user',
    password: 'not-a-valid-password',
  }),
});
const data = await res.json();
 
const brick = new COBanner({
  ...data,
  environment,
  businessUnit: 'car-insurance',
  countryCode: 'CL',
});
brick.init('root');

Demo Configuración