Front-End
- Elizabeth Rivera Lazcano (Unlicensed)
Esta sección presenta un mapeo de pantallas y fuentes de datos dinámicas a fin de ilustrar los contenidos y la lógica en los distintos puntos del proceso de compra de tarjetas de regalo:
Home (1)
La pantalla de Home de Tarjetas de regalo utiliza tres diferentes APIs para cada una de sus secciones.
La sección de Mis tarjetas favoritos puede mostrar hasta 7 servicios seleccionados por el usuario y usa el API /mobile/giftcard-service/users/favorite-providers.
La sección de Búsqueda usa el API /mobile/giftcard-service/providers y abre un modal con un listado de todos los proveedores, donde el usuario podrá ingresar el valor de búsqueda en la entrada de texto.
A continuación se muestran los primeros 10 proveedores, seguidos del botón “Ver todas”/”Ver Menos”, para mostrar u ocultar la lista completa.
La sección de Mis compras usa el API de /mobile/giftcard-service/giftcards/transactions. La llamada GET a la API obtiene todas las compras realizadas por el usuario.
Cada ítem de compra realizada muestra el nombre del proveedor, el monto de compra y la fecha y hora de la compra.
Si el usuario tiene más de tres compras realizadas, se muestra el botón de “Ver todos” para mostrar el listado completo de compras realizadas.
Selección de producto (2)
La pantalla de Selección de producto de la sección de Tarjetas de regalo usa el API /mobile/giftcard-service/providers/{providerId}. La llamada GET a la API obtiene el detalle del proveedor elegido incluyendo su nombre, logo y productos asociados.
En el dropdown de Selección de producto se listan los productos asociados al proveedor elegido.
En algunos productos, existe la posibilidad de elegir la opción de “Otro monto”, y se habilita una entrada de texto para ingresar el monto personalizado.
Debajo de la entrada de texto del monto, se muestra el rango de valores aceptados para cada proveedor.
El botón “Continuar” guarda la elección del usuario y navega hacia la siguiente pantalla.
Cada producto muestra su información de canje y términos y condiciones.
Cada proveedor muestra su texto de facturación y soporte.
Resumen (3)
La pantalla de resumen realiza una petición POST al endpoint /mobile/transaction-inquiry-service/pricing. Esta petición se realiza para obtener el price Id y la comisión.
El price Id es un identificador que se utiliza al momento de procesar la transacción para identificar el monto a cobrar al usuario.
Además de realizar esta petición, la pantalla hace una validación para verificar que la cantidad a pagar no sea mayor al saldo disponible en la cuenta del usuario.
Verificación de PIN (4)
La pantalla de verificación de PIN contiene un componente que valida que el PIN sea correcto. Una vez validado, se realiza una petición POST al endpoint /mobile/giftcard-service/giftcards/transactions para realizar la compra de la tarjeta de regalo elegida.
En esta petición se envían datos referentes al proveedor del producto y al producto elegido por el usuario, además del valor price Id obtenido en la pantalla de resumen (Pantalla 3) y los datos de autenticación del usuario.
Procesado de la operación (5)
La pantalla de carga espera una respuesta de la petición POST a /mobile/giftcard-service/giftcards/transactions.
Si la respuesta es exitosa y retorna un status 200, se redirigirá a la pantalla de éxito (Pantalla 6). De lo contrario, si la petición retorna un status de error o el usuario pierde la conexión a la red, se redirigirá a la pantalla de error (Pantalla 7).
Pantalla de éxito (6)
La pantalla de éxito muestra el código de redención de la tarjeta de regalo adquirida con la opción de compartirlo o copiarlo, además de la información del proveedor, producto y monto elegido.
También puede ir directamente a realizar el canje si selecciona el botón Canjear
El producto muestra su información de canje y términos y condiciones.
El proveedor muestra su texto de facturación y soporte.
Pantalla de error (7)
La pantalla de error notifica cuando la petición ha devuelto un status de error retornando un mensaje de error genérico. Por otro lado, si se tratara de un error por tema de límite de UMAs, el mensaje de error sería más específico.
Comprobante de pago (8)
En la pantalla de comprobante de pago, se muestra el resumen de la compra realizada con la opción de compartir dicha información a través de una imagen.
O buscar ayuda sobre la compra.