Biblioteca de Formularios de Producto

Hay muchos productos disponibles en la plataforma Avant2. La mayoría define un conjunto de opciones específicas que deben proporcionarse para completar la calificación del riesgo cubierto por el seguro. Estas opciones las definen los propios proveedores y varían considerablemente de un proveedor a otro, e incluso, en ocasiones, entre productos del mismo proveedor.

Recopilar estas opciones en una aplicación front-end y mantener estos formularios cada vez que el proveedor introduce cambios en el producto resultaría muy engorroso y costoso para los usuarios de esta API.

Para evitar esta carga, se proporciona una biblioteca JavaScript que se integra fácilmente en aplicaciones front-end para representar cualquier formulario de producto dentro de un iframe y permitir que los usuarios interactúen con él para seleccionar las opciones adecuadas para el seguro.

Al utilizar la biblioteca JavaScript de Afinaciones, los usuarios podrán introducir las opciones específicas de cada producto y obtener el resultado como un objeto JSON que puede utilizarse para:

• Pre emitir una oferta
• Finalizar una oferta
• Recalificar una oferta de seguro

Esta biblioteca se actualizará periódicamente para reflejar los cambios en los productos, de modo que siempre esté sincronizada con los requisitos del proveedor.

Cargar la librería

<script async src="https://product-form.avant.codeoscopic.io/js.js"></script>

Contenedores requeridos en el frontend

En el frontend se deben tener identificados dos contenedores:

• alert-error
• product-options

En ellos se mostrarán los errores del iframe y el JSON con el resultado de los valores escogidos.

<div class="panel-body" style="background: #fff">
  <div id="product-form-wrapper" style="display: none">
    <div class="px-4">
      <div class="card" id="product-form-card">
        <div class="card-body">
          <div id="product-form-iframe"></div>
        </div>
      </div>
    </div>
    <div class="px-4 pt-2 pb-5">
      <div id="alert-error" class="alert alert-danger" style="display: none" ></div>
    </div>
  </div>
</div>
<input type=”hidden” id=”product-options” name=”product-options” value=””>

Tipos de formulario

• ReRating (pre emisión)
• PolicyApplication (emisión de póliza)

Ejemplo de inicialización

const alertErrorEl = document.getElementById("alert-error");
const productOptionsViewerEl = document.getElementById(
    "product-options"
);
let productOptionsEditor;

async function getProductFormOptions() {
    alertErrorEl.style.display = "none";
    let values;

    try {
        values = await productForm.getProductOptions(
    } catch (error) {
        alertErrorEl.innerHTML = "There are some validation errors.";
        alertErrorEl.style.display = "block";
        return false;
    }

    productOptionsViewerEl.value = JSON.stringify(values);
    return true;
}

async function renderProductForm() {
    const formTypeEl = 'ReRating'; /Tipo de formulario
    const productFormCardEl = document.getElementById("product-form-card");
    const productFormWrapperEl = document.getElementById(
        "product-form-wrapper"
    );

    try {
        productFormWrapperEl.style.display = "block";

        alertErrorEl.style.display = "none";
        productFormCardEl.style.display = "block";

        const quote = JSON.parse('{"id":"Q1714312775"}');
        console.log("Using quote object:", quote);

        // Call render method with quote object
        await productForm.render(quote, formTypeEl);
        //getOptionsBtn.disabled = false;
    } catch (error) {
        alertErrorEl.innerHTML = `Error: ${error}`;
        alertErrorEl.style.display = "block";
        productFormCardEl.style.display = "none";
    } finally {
        //renderProductFormBtn.disabled = false;
    }
}

let productForm, quoteEditor;

window.avantProductFormInit = () => {

    productForm = new AvantProductForm(
        "product-form-iframe",
        (request) => {
            return fetch("https://apiersm.net/ersmtarificador/polizas/product-form", {
                method: "POST",
                body: '{"method":"POST","path":"/product-form/init-data","quote":"Q1714312775","formType":"ReRating","avant2User":"usuario@ersm.net"}',
                headers: {
                    "Content-Type": "application/json",
                    "Accept-Version": "1.0",
                    "Authorization": "Bearer {api_login_bearer}"
                }
            }).then(async (res) => {
                const response = await res.json();

                if (res.status === 200) {
                    return response;
                }

                throw new Error(String(response.message || response.error));
            });
        }
    );
};

El formulario dibujará las opciones específicas del producto seleccionado.

El JSON obtenido en el objeto product-options es el que debe enviarse en el campo options dentro de:

• pre emisión
• solicitud de póliza

Ejemplo de datos enviados

{
  "method": "POST",
  "path": "/product-form/init-data",
  "quote": "Q1714312775",
  "formType": "ReRating",
  "avant2User": "usuario@ersm.net"
}

Ejemplo visual del formulario de afinaciones