Widget de Medicamentos

En esta sección encontrará una guía de cómo debe de implementarse el Widget de autorización. Si el Payer cuenta con una aplicación web a través de la cuál generan autorizaciones de cara a usuarios internos o externos, este widget le ayudará a recopilar la información de una receta de una forma precisa, de tal manera que el proceso de Osigu pueda realizar los cálculos de producto a despachar (menor desperdicio) y la ejecución del dictamen automático.

Para la implementación del widget en esta modalidad se asume que ya cuentas con la siguiente información:

Nombre	Descripción	Ejemplo
Client ID	Client ID proporcionado al sponsor con la que se realizará la autenticación hacia nuestro servidor de OAuth2 utilizando el mecanimos de Client Credentials.	gt-test-sponsor-application-slug
Client Secret	Llave proporcionado al sponsor con la que se realizará la autenticación hacia nuestro servidor OAuth2 para obtener un access token.	9a1b783b-a5d5-4194-8d10-ba15906e3bb0
Sponsor Slug	Slug generado para el sponsor por Osigu que lo identifica.	gt-test-sponsor
External transaction ID	Este es un ID que haga referencia de lado de la aplicación Host a que transacción se están agregando los elementos. Con este valor el widget no hará ningún trabajo más que retornarlo de vuelta para el uso que mas convenga al sponsor.	ABC12345
Provider slugs	Slugs de los proveedores por los que desea filtrar el resultado de la búsqueda de medicamentos. Solo permitirá escoger aquellos medicamentos que sean manejados por los proveedores indicados. Si este valor no va indicado entonces se mostrarán todos los productos sin ningún filtro de proveedor.	gt-mi-farmacia
Product type slugs	En este caso el arreglo a enviar como parámetros de iniciación para el widget debe de contener un solo valor, `drug`.	drug
Beneficiary form and Inputs	Este inner object contendrá los valores necesarios para identificar al beneficiario de lado de Osigu. Este contenido lleva una definición previa entre Sponsor y Osigu.	{ 'formSlug': 'DNI', 'inputs': { 'policyId': '123456', 'dni': '2515-39842-0202' } }
Primary color	Valor hexadecimal del color que desea usar como color primario para los controles como botones, cajas de texto y chips.	#2fa6ff
Error color	Valor hexadecimal del color que desea utilizar para las alertas de error.	#ee6f6f

Instalación

Para que el Widget de Autorizaciones aparazca en tu sitio debes de realizar los siguientes passos:

1. Incluye la librería JS de Osigu

Primero, debes de incluir la librería JS en la sección de encabezado de tu página.

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://preauthorization.widgets.osigu.com/sandbox/0.1.0/widget.js">
    </script> 
  </BODY>
</HTML>

2. Genera la instancia del Widget

Lo siguiente que debes de hacer es crear una instancia del widget. En el siguiente ejemplo se expone como crear un widget para la solicitud de medicamentos.

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <script type="text/javascript"
    src="https://preauthorization.widgets.osigu.com/sandbox/0.1.0/widget.js">
    </script> 
    <noscript>
      <strong>Lo sentimos pero este sitio no trabaja apropiadamente sin JavaScript. Por favor habilitelo para continuar.</strong>
      <div id="widget_container"></div>
      <script>
        PreAuthorizationWidget.createWidget({
            containerId: "widget_container",
            primaryColor: "#2fa6ff",
            errorColor: "#ee6f6f",
            clientId: "gt-test-sponsor-application-slug",
            clientSecret: "9a1b783b-a5d5-4194-8d10-ba15906e3bb0",
            sponsorSlug: "gt-test-sponsor",
            showBeneficiaryLookupForm: false,
            showDiagnosesForm: false,
            generateAuthorization: false,
            externalTransactionId: 'ABC12345',
            productTypes: ['drug'],
            beneficiaryLookupForm: {
                formSlug: 'DNI',
                inputs: [{
                    slug: "policy_id",
                    value: "123456"
                },
                {
                    slug: "dni",
                    value: "2515-39842-0202"
                }]
            },
            providerSlugs: ['gt-mi-farmacia'],
            productTypes: ['drug']
        });
        const container = document.getElementById('widget_container')
        container.addEventListener("onPreauthorizationItemAdded", function (e) {
            console.log(e.detail); // Prints "Example of an event"
        });
        1
        container.addEventListener("onPreauthorizationItemDeleted", function (e) {
            console.log(e.detail); // Prints "Example of an event"
        });
    </script>
    </noscript>
  </BODY>
</HTML>

La instancia del ejemplo se realizó utilizando los valores de ejemplo que se detallaron al inicio de esta guía, pero para cada Sponsor se deberán utilizar los valores entregados con cada uno.

A continuación platicaremos de algunos atributos importantes.

containerId

Este parámetro es el nombre de la tag de su página WEB en donde desea que el widget sea desplegado.

Puedes tener varias intancias del widget inicializándose en diferentes tags de su página, eso es útil si en tu sitio tienes una sección para medicamentos, otra para laboratorios y otra para procedimientos ambulatorios, por ejemplo.

showBeneficiaryLookupForm

Esta atributo deberá de ir siempre con el valor falso, de lo contrario el widget (en futuras versiones) aparecerá una sección de búsqueda de beneficiario. Este parámetro es funcional si el widget es el encargado de solicitar una autorización.

showDiagnosesForm

Esta atributo deberá de ir siempre con el valor falso, de lo contrario el widget (en futuras versiones) aparecerá una sección de búsqueda de diagnóstico. Este parámetro es funcional si el widget es el encargado de solicitar una autorización.

generateAuthorization

Esta atributo deberá de ir siempre con el valor falso, de lo contrario el widget (en futuras versiones) aparecerá botón con el cuál el widget solicitará una autorización.

externalTransactionId

Este es un identificador de la transacción que esta siendo generada de lado de tu aplicación (Host), será devuelta por el evento disparado por el widget y te puede ser últil para identificar la transacción de tu lado sobre la cuál se esta trabajando.

🚧
Atención
En el ejemplo seguido del dominio se puede observar el nombre del ambiente sandbox, seguido por la versión del widget y el nombre del script. Cuando realice un despliegue a su ambiente productivo la URL del script debe de cambiar a algo como esto:
https://preauthorization.widgets.osigu.com/production/0.1.0/widget.js

Utilización del widget

Una vez instalado e instanciado verás en tu pagina web lo siguiente:

En la imagen anterior ya se visualiza el widget de medicamentos el cuál una acción, la de agregar un medicamento. Al dar clic en el botón con la leyenda + AGREGAR MEDICAMENTO, aparecerá un nuevo cuadro de diálogo que le permitirá al usuario seleccionar un medicamento.

En la anterior imagen se aprecia dos cuadros de texto para la búsqueda del medicamento y selección de presentación, como una sección de notas adicionales que el médico desee agregar.

Cuando el usuario seleccione un medicamento y presentación, este cuadro de diálogo mostrará nuevas opciones dependiendo de la presentación seleccionada para que complete la información del tratamiento como se puede apreciar en la siguiente imagen.

El usuario deberá seleccionar la concentración, dosis, frecuencia y duración para poder guardar el tratamiento. Si el usuario no selecciona uno de estos elementos aparecerá un mensaje en la cabecera del cuadro de diálogo indicando lo que hace falta seleccionar por el usuario como lo vemos a continuación.

Por último, cuando el usuario haya ya agregado el medicamento, en la parte principal del widget se visualizará el nuevo tratamiento agregado con la opción de eliminar el elemento.

Eventos

El widget emitirá dos eventos sobre el componente donde se esta desplegando los componentes. Un evento es emitido cuando se agrega un tratamiento y el segundo evento cuando un tratamiento es eliminado.

En el caso de lo ejemplificado en la sección de generación de instanciat estos eventos son emitidos hacia la tag con id widget_container.

En dicho ejemplo puedes observar las siguientes líneas de código:

const container = document.getElementById('widget_container')
container.addEventListener("onPreauthorizationItemAdded", function (e) {
  console.log(e.detail); // Prints "Example of an event"
});
1
container.addEventListener("onPreauthorizationItemDeleted", function (e) {
  console.log(e.detail); // Prints "Example of an event"
});

En el ejemplo se agregan dos Event Listeners para cada acción y en cada acción se imprime en consola el objeto detail incluído en el evento. Este objeto detail contiene la información detallada en las referencias onPreauthorizationItemAdded y onPreauthorizationItemDeleted .

onPreauthorizationItemAdded

En la referencia de este evento observarás cuatro atributos principales.

beneficiaryId, este es el identificador del beneficiario que Osigu asignó.
externalTransactionId, es el identificador de tu transacción.
treatment, este es un objeto que contiene el detalle del tratamiento, este objeto debes de agregarlo a un arreglo global de treatments que debes de enviar posteriormente al servicio de solicitud de preautorizaciones de Osigu.
product, para el caso de otros tipos de producto diferente al de medicamentos, debes de tener también una colección llamada products donde vayas agregando todos estos productos para posteriormente enviarlo al servicio de solicitud de preautorizaciones de Osigu.

onPreauthorizationItemDeleted

En la referencia de este evento econtrarás los siguientes atributos.

externalTransactionId, es el identificador de tu transacción.
beneficiaryId, este es el identificador del beneficiario que Osigu asignó.
treatmentId, este es el ID del tratamiento que fue eliminado por el usuario, con este valor puedes buscar dentro de tu arreglo global de treatments el tratamiento con este UUID para que puedas eliminarlo de tu colección.
productId, en el caso de que el widget no es para medicamentos es el ID del producto que debes de buscar dentro de tu arreglo global de productos y eliminarlo de tu colección.

📘
Recuerda
Esta configuración del widget no emite ninguna autorización, debes de completar el payload del servicio de solicitud de preautorizaciones de Osigu para poder generar una autorización canjeable.