# Componentes UI de Smart Access Layer Esta guía detalla cada componente que devuelve la **Capa de Acceso Inteligente (SAL)** en modo compra. Cada componente incluye su estructura JSON completa con explicaciones línea por línea. La respuesta de SAL contiene una colección de componentes preconfigurados que tu plataforma debe renderizar. Cada componente viene con toda la información necesaria para su visualización: textos, imágenes, colores, CTAs y reglas de visibilidad. --- {% conditionaltabs id="tabs-1767366632924" %} {% tab label="Banner" %} # Banner {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Componente visual destacado que se muestra en la página del evento para indicar disponibilidad de tickets de reventa, mensajes promocionales o estados del marketplace. {% /column %} {% column width="0.4" valign="top" %} ![Banner](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-3.png) {% /column %} {% /columns %} --- ## Estructura JSON {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifica que el tipo de componente es un `banner`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifica un subtipo de componente. En este caso es un `banner` de tipo `compra` o `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`title`**: Título principal del banner. Texto destacado que aparece en la parte superior. {% /codeannotation %} {% codeannotation highlight-lines="6" %} **`description`**: Descripción o subtítulo del banner. Proporciona información adicional sobre el mensaje principal. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`image`**: URL de la imagen de fondo o imagen principal del banner. Opcional según la configuración. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`visible`**: Indica si el banner debe mostrarse. Si es `false`, no debe renderizarse. {% /codeannotation %} {% codeannotation highlight-lines="9:12" %} **`colors`**: Paleta de colores del banner: - **`background`**: Color de fondo en formato hexadecimal - **`text`**: Color del texto en formato hexadecimal {% /codeannotation %} {% codeannotation highlight-lines="13:17" %} **`callToAction`**: Botón o enlace de acción del banner: - **`text`**: Texto del botón o enlace - **`url`**: URL de redirección al hacer clic - **`enabled`**: Si es `false`, el botón debe mostrarse deshabilitado {% /codeannotation %} **Nota importante** Si `visible` es `false`, debes omitir completamente el renderizado de este componente, independientemente de los demás valores. {% /column %} {% column width="1" valign="center" %} ```json { "type": "banner", "class": "buyBanner", "buyBanner": { "title": "Buy Tickets Now", "description": "Best seats available", "image": "https://cdn.example.com/sal/banner.png", "visible": true, "colors": { "background": "#0A1F44", "text": "#FFFFFF" }, "callToAction": { "text": "View options", "url": "http://event.mentatickets.com", "enabled": true } } } ``` {% /column %} {% /columns %} {% /tab %} {% tab label="Modal" %} # Modal {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Ventana emergente que aparece sobre el contenido de la página para guiar al usuario hacia el flujo de compra de reventa. Se utiliza para captar la atención en momentos clave del recorrido. {% /column %} {% column width="0.4" valign="top" %} {% /column %} {% /columns %} --- ## Estructura JSON {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifica que el tipo de componente es un `modal`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifica un subtipo de componente. En este caso es un `modal` de tipo `compra` o `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`title`**: Título principal del modal. Texto destacado que aparece en la parte superior de la ventana emergente. {% /codeannotation %} {% codeannotation highlight-lines="6" %} **`description`**: Descripción o cuerpo del mensaje del modal. Proporciona información adicional sobre la acción promovida. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`image`**: URL de la imagen que se muestra dentro del modal. Opcional según la configuración. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`visible`**: Indica si el modal debe mostrarse. Si es `false`, no debe renderizarse ni activarse. {% /codeannotation %} {% codeannotation highlight-lines="9:13" %} **`callToAction`**: Botón de acción principal del modal: - **`text`**: Texto del botón - **`url`**: URL de redirección al hacer clic - **`enabled`**: Si es `false`, el botón debe mostrarse deshabilitado {% /codeannotation %} **Notas de implementación** - Debes implementar la funcionalidad de cierre del modal (botón X, clic fuera del modal, tecla ESC) - El modal debe incluir un overlay semitransparente que oscurezca el contenido de fondo - Si `visible` es `false`, el modal no debe mostrarse ni activarse automáticamente - Puedes decidir cuándo mostrar el modal basándote en `visible: true` y tus propias reglas de UX {% /column %} {% column width="1" valign="center" %} ```json { "type": "modal", "class": "buyModal", "buyModal": { "title": "Complete Your Purchase", "description": "Secure checkout in seconds", "image": "https://cdn.example.com/sal/modal.png", "visible": true, "callToAction": { "text": "Continue", "url": "http://event.mentatickets.com", "enabled": true } } } ``` {% /column %} {% /columns %} {% /tab %} {% tab label="Botón de Compra" %} # Botón de Compra {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Componente CTA que permite acceder directamente al flujo de compra de reventa. Aparece cuando hay inventario disponible y su estado refleja la disponibilidad actual del marketplace. {% /column %} {% column width="0.4" valign="top" %} ![Botón de Compra](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-4.png) {% /column %} {% /columns %} --- ## Estructura JSON {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifica que el tipo de componente es un `button`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifica un subtipo de componente. En este caso es un `button` de tipo `compra` o `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`visible`**: Indica si el botón debe mostrarse. Si es `false`, no debe renderizarse. {% /codeannotation %} {% codeannotation highlight-lines="6:15" %} **`callToAction`**: Comportamiento y apariencia del botón: - **`text`**: Texto del botón (ej: "Buy Tickets", "Ver opciones") - **`url`**: URL de redirección al hacer clic - **`enabled`**: Si es `false`, el botón debe mostrarse deshabilitado - **`colors`**: Colores del botón: - **`background`**: Color de fondo en hexadecimal - **`text`**: Color del texto en hexadecimal {% /codeannotation %} {% codeannotation highlight-lines="16:19" %} **`colors`**: Paleta de colores del botón. Si `callToAction.colors` está presente, tiene prioridad. - **`background`**: Color de fondo - **`text`**: Color del texto {% /codeannotation %} **Notas de implementación** - Si `visible` es `false`, el botón no debe renderizarse - Si `callToAction.enabled` es `false`, el botón debe mostrarse visualmente deshabilitado (opacidad reducida, cursor not-allowed) - El botón debe ser responsive y adaptarse a diferentes tamaños de pantalla - Puedes agregar efectos hover y active según tus estándares de diseño - El `url` del CTA típicamente apunta al flujo de compra de reventa en menta {% /column %} {% column width="1" valign="center" %} ```json { "type": "button", "class": "buyButton", "buyButton": { "visible": true, "callToAction": { "text": "Buy Tickets", "url": "http://event.mentatickets.com", "enabled": true, "colors": { "background": "#F25C54", "text": "#FFFFFF" } }, "colors": { "background": "#F25C54", "text": "#FFFFFF" } } } ``` {% /column %} {% /columns %} {% /tab %} {% tab label="Lista de Categorias" %} # Lista de Categorías {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Muestra todas las categorías de tickets disponibles para reventa con información de disponibilidad, precios piso y CTAs específicos por categoría. Cada categoría incluye su propio estado de visibilidad y disponibilidad. {% /column %} {% column width="0.4" valign="top" %} ![Lista de Categorías](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-1.png) {% /column %} {% /columns %} --- ## Estructura JSON {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifica que el tipo de componente es una `list`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifica un subtipo de componente. En este caso es una `list` de tipo `categorías` o `categories`. {% /codeannotation %} {% codeannotation highlight-lines="4" %} **`categoriesList`**: Objeto contenedor que agrupa todas las categorías disponibles para reventa. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`categories`**: Array con todas las categorías de tickets disponibles. Cada elemento representa una categoría con su información de disponibilidad, precios y CTAs. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`ticketOptionId`**: Identificador único de la opción de ticket (categoría) en el sistema del partner. Permite mapear cada categoría con su equivalente en el sistema primario. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`quantityForSale`**: Cantidad de tickets disponibles para reventa en esta categoría. Se actualiza en tiempo real. Si es `0`, no hay tickets disponibles. {% /codeannotation %} {% codeannotation highlight-lines="9" %} **`floorPrice`**: Precio mínimo (precio piso) disponible para esta categoría. Si es `0`, puede indicar que no hay inventario o que el precio aún no se ha determinado. {% /codeannotation %} {% codeannotation highlight-lines="10" %} **`visible`**: Indica si esta categoría debe mostrarse. Si es `false`, debe omitirse del renderizado. {% /codeannotation %} {% codeannotation highlight-lines="11:19" %} **`callToAction`**: Botón o enlace de acción específico para esta categoría: - **`text`**: Texto del botón (ej: "Check availability", "Ver opciones") - **`url`**: URL de redirección, típicamente incluye parámetros de la categoría - **`enabled`**: Si es `false`, el botón debe mostrarse deshabilitado - **`colors`**: Colores del botón: - **`background`**: Color de fondo - **`text`**: Color del texto {% /codeannotation %} {% codeannotation highlight-lines="20:23" %} **`colors`**: Paleta de colores para el elemento de categoría (fondo del card, borde, etc.): - **`background`**: Color de fondo - **`text`**: Color del texto principal {% /codeannotation %} **Notas de implementación** - Debes iterar sobre el array `categories` y renderizar cada categoría que tenga `visible: true` - Cada categoría debe mostrar claramente: nombre (si está disponible), `quantityForSale`, `floorPrice` y el CTA - Si `quantityForSale` es `0`, puedes mostrar "Sin disponibilidad" o un mensaje similar - Si `floorPrice` es `0` y `quantityForSale > 0`, puede indicar que el precio se está calculando - El `ticketOptionId` debe usarse para mapear la categoría con el sistema primario si es necesario - Las categorías con `visible: false` deben omitirse completamente del renderizado - Puedes ordenar las categorías según tus propias reglas de UX, pero debes respetar la visibilidad {% /column %} {% column width="1" valign="center" %} ```json { "type": "list", "class": "categoriesList", "categoriesList": { "categories": [ { "ticketOptionId": "17635820544251", "quantityForSale": 0, "floorPrice": 0, "visible": true, "callToAction": { "text": "Check availability", "url": "http://event.mentatickets.com", "enabled": true, "colors": { "background": "#FFFFFF", "text": "#0A1F44" } }, "colors": { "background": "#FFFFFF", "text": "#0A1F44" } }, { "ticketOptionId": "17635820544252", "quantityForSale": 0, "floorPrice": 0, "visible": true, "callToAction": { "text": "Check availability", "url": "http://event.mentatickets.com", "enabled": true, "colors": { "background": "#FFFFFF", "text": "#0A1F44" } }, "colors": { "background": "#FFFFFF", "text": "#0A1F44" } } ] } } ``` {% /column %} {% /columns %} {% /tab %} {% tab label="Mapa Integrado" %} # Mapa Integrado {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Mapa interactivo del venue que muestra la distribución de tickets de reventa disponibles por zona/sección. Permite visualizar la disponibilidad geográfica del inventario y seleccionar tickets directamente desde el mapa. Solo se habilita cuando el evento tiene seating configurado y hay inventario distribuido. {% /column %} {% column width="0.4" valign="top" %} ![Mapa Integrado](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-2.png) {% /column %} {% /columns %} --- ## Estructura JSON {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifica que el tipo de componente es un `map`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifica un subtipo de componente. En este caso es un `map` de tipo `integrado` o `integrated`. {% /codeannotation %} {% codeannotation highlight-lines="4" %} **`integratedMap`**: Objeto contenedor que agrupa toda la información relacionada con el mapa integrado. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`map`**: Objeto principal que contiene la configuración y datos del mapa. {% /codeannotation %} {% codeannotation highlight-lines="6:8" %} **`config`**: Configuración de comportamientos del mapa: - **`allowOrphanTicketSelection`**: Si es `true`, permite seleccionar tickets individuales. Si es `false`, solo permite selección de grupos completos. {% /codeannotation %} {% codeannotation highlight-lines="9" %} **`totalCount`**: Número total de tickets disponibles para reventa en el mapa. Si es `0`, no hay tickets disponibles. {% /codeannotation %} {% codeannotation highlight-lines="10" %} **`bestListing`**: Mejor listado disponible (menor precio o mejor ubicación) o `null` si no hay listados. Puede contener precio, ubicación, cantidad de tickets, etc. {% /codeannotation %} {% codeannotation highlight-lines="11" %} **`results`**: Array con los listados de tickets disponibles organizados por zona/sección. Cada elemento representa un grupo de tickets en una ubicación específica. Puede incluir zona/sección, cantidad, precio, coordenadas e información de seating. {% /codeannotation %} **Notas de implementación** - El mapa solo debe renderizarse si `totalCount > 0` o si las reglas de visibilidad lo requieren incluso sin inventario - Debes implementar la lógica de renderizado del mapa del venue, típicamente usando las coordenadas o identificadores de zonas proporcionados en `results` - Cada elemento en `results` debe mapearse a una zona/sección visual en el mapa - Debes manejar la interacción del usuario (clic, hover) sobre las zonas del mapa - Si `allowOrphanTicketSelection` es `false`, debes agrupar tickets y solo permitir selección de grupos completos - El `bestListing` puede usarse para destacar visualmente una zona recomendada en el mapa - Si `results` está vacío, puedes mostrar el mapa sin zonas destacadas o mostrar un mensaje de "Sin disponibilidad" - Debes integrar este mapa con el flujo de compra, redirigiendo al usuario cuando selecciona una zona {% /column %} {% column width="1" valign="center" %} ```json { "type": "map", "class": "integratedMap", "integratedMap": { "map": { "config": { "allowOrphanTicketSelection": true }, "totalCount": 0, "bestListing": null, "results": [] } } } ``` {% /column %} {% /columns %} {% /tab %} {% /conditionaltabs %}