Recomendación de ofertas

Luego de realizar una cotizacón la API proporciona las mejores ofertas que tiene Compara, el cliente podrá elegir entre esas ofertas o navegar entre más opciones haciendo click en "ver más".

Instalación

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

npm install @comparaonline/recommended-offers

Uso

Ejemplo simple, instanciando el brick con un token y un refreshToken de forma tal de persistir la sesión y habilitar toda la funcionalidad:

simpleExample.tsx

import { useEffect, useRef } from 'react';
import RecommendedOffers from '@comparaonline/recommended-offers/react';
import '@comparaonline/recommended-offers/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 RecommendedOffers({
        ...data,
        environment,
        id: 'c44688ad-ba99-4790-928b-59f76b8e6509',
        styles: { primaryColor: 'orange' },
      });
      if (containerRef.current) brick.init(containerRef.current);
    })();
  }, []);
 
  return <div className="App" id="App" ref={containerRef}></div>;
}

La instancia de RecommendedOffers acepta un objeto de configuración con la siguiente estructura:

export interface RecommendedOffersConfiguration {
  environment: 'staging' | 'production';
  styles?: {
    theme?: 'dark' | 'light';
    primaryColor?: string;
  };
  lang?: 'es' | 'pt';
  token: string;
  refreshToken?: string;
  texts?: {
    title?: string;
    description?: string;
    moreOffers?: string;
    success?: {
      title?: string;
      description?: string;
      seeOffers?: string;
      quoteAgain?: string;
    };
    notFound?: {
      title?: string;
      description?: string;
    };
  };
}

styles permite definir un theme, además de un primaryColor, mientras que lang permite elegir entre portugués y español. environment permite elegir entre entornos de desarrollo.

Otros casos de uso

El módulo de recomendación de ofertas de ComparaBricks 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/recommended-offers/index.mjs"></script>
<link rel="stylesheet" href="https://bricks-staging.comparaonline.com/recommended-offers/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.

legacyExample.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 RecommendedOffers({
  ...data,
  environment,
  id: 'c44688ad-ba99-4790-928b-59f76b8e6509',
  styles: { primaryColor: '#E28743' },
});
brick.init('root');

Demo Configuración