Users who do not have Flex Passes, should not be able to select reserved seats for Flex Pass holders.
We do not know how we can accomplish setting aside these seats.
In the UI, seats that are available have a mouseover effect providing additional details (e.g., price) and a hover effect that suggests they can be clicked. Seats that are blocked do not have these features.
The task will be either:
The UI is an SVG. Seats are represented as
<ellipse /> nodes with a zone property identifying the seat. The SVG does not contain
<ellipse /> nodes for the seats that are blocked. It may be an easy experiment to add one via JS (or even using browser dev tools) to see how far that gets us.
Note: since we understand it to be a global setting, toggling the "Hidden from frontend" setting for seats is not a viable approach, since the seats will be unlocked for all users.
The SVG has a JS handler on it that listens for clicks. See https://theme-dev.bactheatre.org/wp-content/plugins/qsot-seating/assets/js/frontend/ui.js, approx line 1947. The handler basically extracts the seat ID from the element the user clicked on, fetches price information, and delegates seat reservation. There are also listeners for mousein events, presumably to build the hovering box with price info, etc.
Based on a cursory code review, I'm optimistic we could attach these listeners (or create similar ones) to
<ellipse />nodes added to the SVG by custom JS.
All of the above assumes that we can hack a single seating chart to behave the way we'd like it to. The very real possibility exists that this won't be possible, in which case we could explore having two seating charts for each venue / event area. One that has the restricted seats, and one which doesn't. Then swapping between the two when the user is recognized by The System™ as having a FlexPass.