Cotizador

El cotizador de seguro de viajes es una API que permite a los clientes obtener una cotización de seguro de viaje en función de diferentes parámetros, como el destino, su edad, entre otros. La API utiliza los datos proporcionados por el cliente para calcular los mejores seguros de viaje para dicho cliente.

Paso a paso

El cotizador de seguro de viajes consta de un pequeño formulario con ciertos campos en donde se pide que el cliente proporcione información. Se requiere la información de origen, destino, número telefónico, edades de los viajeros y correo electrónico. La API utiliza el método HTTP POST para recibir los parámetros de entrada y devuelve las mejores ofertas para los datos proporcionados.

Instalación

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

npm install @comparaonline/travel-quote

Uso

Ejemplo simple

simpleExample.tsx

import { useEffect, useRef } from 'react';
import TravelQuote from '@comparaonline/travel-quote/react';
import '@comparaonline/travel-quote/css';
import './App.css';
 
const ENVIRONMENT = 'set-your-environment';
 
export function App() {
  const containerRef = useRef(null);
  const environment = ENVIRONMENT === 'staging' ? 'staging' : 'production';
  const authUrl =
    environment === 'staging'
      ? `https://ms-staging.comparaonline.com/travel-funnel-bff/public/cl/auth/login`
      : `https://ms.comparaonline.com/travel-funnel-bff/public/cl/auth/login`;
 
  const [travelProps, setTravelProps] = useState<TravelQuoteFormProps>({
    country: 'CL',
    environment,
    styles: {
      theme: 'light',
      primaryColor: 'red',
    },
  });
 
  useEffect(() => {
    (async () => {
      const res = await fetch(authUrl, {
        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();
 
      setTravelProps((prevConfig) => ({
        ...prevConfig,
        ...data,
      }));
    })();
 
    const brick = new TravelQuote(travelProps);
 
    if (containerRef.current) brick.init(containerRef.current);
  }, [authUrl]);
 
  return <div className="App" id="App" ref={containerRef}></div>;
}

Otros casos de uso

El módulo de cotización de ComparaOnline Bricks puede ser incluído agregando el script correspondiente, (index.mjs equivale a ECMASCript module system , mientras que index.js equivale a CommonJS)

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

Para inicializar 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 donde queremos pegar el módulo, o una referencia a un elemento.

legacyExample.tsx

const ENVIRONMENT = 'set-your-environment';
 
const authUrl =
  environment === 'staging'
    ? `https://ms-staging.comparaonline.com/travel-funnel-bff/public/cl/auth/login`
    : `https://ms.comparaonline.com/travel-funnel-bff/public/cl/auth/login`;
 
const res = await fetch(authUrl, {
  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 exampleConfig = {
  country: 'CL',
  environment,
  styles: {
    theme: 'light',
    primaryColor: 'orange',
  },
};
 
const brick = new TravelQuote({
  ...exampleConfig,
  ...data,
});
brick.init('root');

Demo Configuración