# Smart Access Layer UI Components This guide describes each component returned by the **Smart Access Layer (SAL)** in buy mode. Every component includes its full JSON structure with line‑by‑line explanations. The SAL response contains a collection of preconfigured components that your platform must render. Each component comes with all the information needed for its display: text, images, colors, CTAs, and visibility rules. --- {% conditionaltabs id="tabs-1767366632924" %} {% tab label="Banner" %} # Banner {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Highlighted visual component shown on the event page to indicate resale ticket availability, promotional messages, or marketplace status. {% /column %} {% column width="0.4" valign="top" %} ![Banner](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-3.png) {% /column %} {% /columns %} --- ## JSON structure {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifies that this component type is a `banner`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifies a subtype of component. In this case it is a `banner` of type `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`title`**: Main banner title. Prominent text that appears at the top. {% /codeannotation %} {% codeannotation highlight-lines="6" %} **`description`**: Banner subtitle or body text. Provides additional context for the main message. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`image`**: URL of the background or main image for the banner. Optional depending on configuration. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`visible`**: Indicates whether the banner should be shown. If `false`, it must not be rendered. {% /codeannotation %} {% codeannotation highlight-lines="9:12" %} **`colors`**: Banner color palette: - **`background`**: Background color in hexadecimal format - **`text`**: Text color in hexadecimal format {% /codeannotation %} {% codeannotation highlight-lines="13:17" %} **`callToAction`**: Banner action button or link: - **`text`**: Button or link text - **`url`**: Redirect URL when clicked - **`enabled`**: If `false`, the button should be displayed as disabled {% /codeannotation %} **Important note** If `visible` is `false`, you must completely skip rendering this component, regardless of the other values. {% /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" %} Popup window that appears on top of the page content to guide the user into the resale purchase flow. It is used to capture attention at key points in the journey. {% /column %} {% column width="0.4" valign="top" %} {% /column %} {% /columns %} --- ## JSON structure {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifies that this component type is a `modal`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifies a subtype of component. In this case it is a `modal` of type `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`title`**: Main modal title. Prominent text that appears at the top of the popup window. {% /codeannotation %} {% codeannotation highlight-lines="6" %} **`description`**: Body text or message of the modal. Provides additional information about the promoted action. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`image`**: URL of the image displayed inside the modal. Optional depending on configuration. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`visible`**: Indicates whether the modal should be shown. If `false`, it must not be rendered or triggered. {% /codeannotation %} {% codeannotation highlight-lines="9:13" %} **`callToAction`**: Primary action button for the modal: - **`text`**: Button text - **`url`**: Redirect URL when clicked - **`enabled`**: If `false`, the button should be displayed as disabled {% /codeannotation %} **Implementation notes** - You must implement modal close behavior (X button, click outside the modal, ESC key) - The modal must include a semi‑transparent overlay that dims the background content - If `visible` is `false`, the modal should not be displayed or auto‑triggered - You can decide when to display the modal based on `visible: true` and your own UX rules {% /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="Buy Button" %} # Buy Button {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} CTA component that allows users to go directly into the resale purchase flow. It appears when there is available inventory and its state reflects the current marketplace availability. {% /column %} {% column width="0.4" valign="top" %} ![Buy Button](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-4.png) {% /column %} {% /columns %} --- ## JSON structure {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifies that this component type is a `button`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifies a subtype of component. In this case it is a `button` of type `buy`. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`visible`**: Indicates whether the button should be shown. If `false`, it must not be rendered. {% /codeannotation %} {% codeannotation highlight-lines="6:15" %} **`callToAction`**: Button behavior and appearance: - **`text`**: Button text (e.g. "Buy Tickets", "View options") - **`url`**: Redirect URL when clicked - **`enabled`**: If `false`, the button should be displayed as disabled - **`colors`**: Button colors: - **`background`**: Background color in hexadecimal - **`text`**: Text color in hexadecimal {% /codeannotation %} {% codeannotation highlight-lines="16:19" %} **`colors`**: Color palette for the button. If `callToAction.colors` is present, it takes precedence. - **`background`**: Background color - **`text`**: Text color {% /codeannotation %} **Implementation notes** - If `visible` is `false`, the button must not be rendered - If `callToAction.enabled` is `false`, the button must be visually disabled (reduced opacity, `not-allowed` cursor) - The button must be responsive and adapt to different screen sizes - You can add hover and active effects according to your design standards - The CTA `url` typically points to the resale purchase flow in 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="Categories List" %} # Categories List {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Displays all ticket categories available for resale with availability information, floor prices, and per‑category CTAs. Each category has its own visibility and availability state. {% /column %} {% column width="0.4" valign="top" %} ![Categories List](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-1.png) {% /column %} {% /columns %} --- ## JSON structure {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifies that this component type is a `list`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifies a subtype of component. In this case it is a `list` of type `categories`. {% /codeannotation %} {% codeannotation highlight-lines="4" %} **`categoriesList`**: Container object that groups all categories available for resale. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`categories`**: Array with all ticket categories available. Each element represents a category with availability, price, and CTA information. {% /codeannotation %} {% codeannotation highlight-lines="7" %} **`ticketOptionId`**: Unique identifier of the ticket option (category) in the partner’s system. Used to map each category to its equivalent in the primary system. {% /codeannotation %} {% codeannotation highlight-lines="8" %} **`quantityForSale`**: Number of tickets available for resale in this category. Updated in real time. If `0`, there are no tickets available. {% /codeannotation %} {% codeannotation highlight-lines="9" %} **`floorPrice`**: Minimum (floor) price available for this category. If `0`, it may indicate that there is no inventory or that the price has not yet been determined. {% /codeannotation %} {% codeannotation highlight-lines="10" %} **`visible`**: Indicates whether this category should be shown. If `false`, it must be omitted from rendering. {% /codeannotation %} {% codeannotation highlight-lines="11:19" %} **`callToAction`**: Action button or link specific to this category: - **`text`**: Button text (e.g. "Check availability", "View options") - **`url`**: Redirect URL, typically including category parameters - **`enabled`**: If `false`, the button should be displayed as disabled - **`colors`**: Button colors: - **`background`**: Background color - **`text`**: Text color {% /codeannotation %} {% codeannotation highlight-lines="20:23" %} **`colors`**: Color palette for the category item (card background, border, etc.): - **`background`**: Background color - **`text`**: Main text color {% /codeannotation %} **Implementation notes** - You must iterate over the `categories` array and render each category with `visible: true` - Each category must clearly display: name (if available), `quantityForSale`, `floorPrice`, and the CTA - If `quantityForSale` is `0`, you can show "No availability" or a similar message - If `floorPrice` is `0` and `quantityForSale > 0`, it may indicate that the price is being calculated - `ticketOptionId` should be used to map the category to the primary system if needed - Categories with `visible: false` must be completely omitted from rendering - You can sort categories according to your own UX rules, but you must respect visibility {% /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="Integrated Map" %} # Integrated Map {% columns gap="2rem" align="start" %} {% column width="0.6" valign="top" %} Interactive venue map showing the distribution of resale tickets by zone/section. It lets users visualize inventory availability geographically and select tickets directly from the map. It is only enabled when the event has seating configured and distributed inventory. {% /column %} {% column width="0.4" valign="top" %} ![Integrated Map](https://storage.googleapis.com/default_mentatickets-core/docs-static/img/component-2.png) {% /column %} {% /columns %} --- ## JSON structure {% columns gap="2rem" align="start" %} {% column width="0.75" valign="top" sticky=true %} {% codeannotation highlight-lines="2" %} **`type`**: Identifies that this component type is a `map`. {% /codeannotation %} {% codeannotation highlight-lines="3" %} **`class`**: Identifies a subtype of component. In this case it is a `map` of type `integrated`. {% /codeannotation %} {% codeannotation highlight-lines="4" %} **`integratedMap`**: Container object that groups all information related to the integrated map. {% /codeannotation %} {% codeannotation highlight-lines="5" %} **`map`**: Main object containing the map configuration and data. {% /codeannotation %} {% codeannotation highlight-lines="6:8" %} **`config`**: Map behavior configuration: - **`allowOrphanTicketSelection`**: If `true`, allows selecting individual tickets. If `false`, only allows selecting entire groups. {% /codeannotation %} {% codeannotation highlight-lines="9" %} **`totalCount`**: Total number of tickets available for resale on the map. If `0`, there are no tickets available. {% /codeannotation %} {% codeannotation highlight-lines="10" %} **`bestListing`**: Best available listing (lowest price or best location) or `null` if there are no listings. It may include price, location, ticket quantity, etc. {% /codeannotation %} {% codeannotation highlight-lines="11" %} **`results`**: Array of available ticket listings organized by zone/section. Each element represents a group of tickets in a specific location. It may include zone/section, quantity, price, coordinates, and seating information. {% /codeannotation %} **Implementation notes** - The map should only be rendered if `totalCount > 0` or if your visibility rules require it even without inventory - You must implement the venue map rendering logic, typically using the coordinates or zone identifiers provided in `results` - Each element in `results` should be mapped to a visual zone/section on the map - You must handle user interaction (click, hover) over map zones - If `allowOrphanTicketSelection` is `false`, you must group tickets and allow selection only of full groups - `bestListing` can be used to visually highlight a recommended zone on the map - If `results` is empty, you can show the map without highlighted zones or display a "No availability" message - You must integrate this map with the purchase flow, redirecting the user when they select a zone {% /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 %}