// Inventory listing — the partner's landing screen (BOO-644). List / Grid / Map,
// list by default, one page of venues at a time.
//
// Search and filtering run over the WHOLE in-memory catalogue (window.VENUES is
// fully loaded before __pp_live.ready flips) and only the surviving page is
// rendered — so a match on the 400th venue still surfaces on page 1 of results,
// and only a page's worth of /api/availability calls go out.
const VENUES_PAGE_SIZE = 50;
const PRE_ORDER_LABELS = {
none: null,
optional: { short: 'Pre-order available', title: 'This venue publishes a menu — you can add guest selections during booking.' },
menu: { short: 'Menu pre-order required', title: 'Guests must choose menu items before this booking can be submitted.' },
package: { short: 'Package required', title: 'A package must be added to this booking before it can be submitted.' },
packageAndMenu: { short: 'Pre-order required', title: 'Either a package or menu selections must be added before this booking can be submitted.' },
};
// ── Pure helpers (kept top-level so tests/inventory-list.test.js can lift them
// out of this browser-global file — see tests/booking-window.test.js) ─────────
// Which slice of `total` items page `page` shows, with the page clamped into
// range. A filter that shrinks the list must not leave you stranded on an empty
// page, so callers render `page` back rather than their own state.
function ppPageWindow(total, pageSize, page) {
const totalPages = Math.max(1, Math.ceil(total / pageSize));
const safePage = Math.min(Math.max(0, page || 0), totalPages - 1);
const from = safePage * pageSize;
return { page: safePage, totalPages, from, to: Math.min(total, from + pageSize) };
}
const PP_SOFT_STOP = new Set(['and', 'the', 'with', 'for', 'a', 'an', 'of', 'in', 'on', 'at', 'to', 'that', 'does', 'do']);
// Needle matches when every significant token appears somewhere in the hay.
function ppTokenHit(hay, needle) {
const norm = (typeof ppNorm === 'function')
? ppNorm
: (s) => (s || '').toString().toLowerCase().replace(/[^a-z0-9\s]/g, ' ').replace(/\s+/g, ' ').trim();
const toks = norm(needle).split(' ').filter(t => t && !PP_SOFT_STOP.has(t));
if (!toks.length) return true;
return toks.every(t => hay.includes(t));
}
// The keyword is applied on top of the hard filters, and dropped rather than
// allowed to blank the page — a partner who typed a dish name nothing matches is
// better served the filtered list than an empty one.
//
// Takes venues, not pre-built haystacks: with no keyword (the common case) not a
// single haystack gets built.
function ppSoftTiers(venues, { text }) {
if (!text) return { rows: venues, dropped: null };
const hit = venues.filter(v => ppTokenHit(ppVenueHay(v), text));
return hit.length ? { rows: hit, dropped: null } : { rows: venues, dropped: 'text' };
}
function ResultsScreen({ query, setQuery, onSearch, onBook, onOpenListing }) {
const [view, setView] = ppUsePref('pp_view', 'list');
const [page, setPage] = React.useState(0);
const listTop = React.useRef(null);
// Paging 50 rows leaves you wherever you were vertically — which is the bottom
// of the previous page. Put the top of the new page back under the eye.
const goToPage = (p) => {
setPage(p);
const el = listTop.current;
if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
};
// Any change to what's being filtered starts again at page 1.
React.useEffect(() => { setPage(0); }, [
query.text, (query.locations || []).join(','), (query.productTypes || []).join(','),
(query.operatorIds || []).join(','), query.venueId, query.date, query.guests,
]);
const text = (query.text || '').trim().toLowerCase();
const types = query.productTypes || [];
const locations = query.locations || [];
const operators = query.operatorIds || [];
// Hard signals — city / operator / products / venueId — must always pass. The
// keyword is soft: it narrows when it matches and is dropped rather than
// blanking the page (see ppSoftTiers).
const matchesHard = (v) => {
if (query.venueId && v.id !== query.venueId) return false;
// Each multi-select is a union within itself and an AND across facets:
// "(London or Leeds) and (Dinner or Karaoke)".
if (locations.length && !locations.includes(v.city)) return false;
if (operators.length && !operators.includes(v.operator)) return false;
// Multi-select is a union: "Dinner or Karaoke", matching the prototype's
// checkbox popover. Matches a product's PRIMARY category only, so every
// venue in the results has the filtered product to show and to book.
if (types.length && !types.some(t => v.products.includes(t))) return false;
return true;
};
// Searchable text per venue, built ONLY when a keyword is actually being
// matched and cached per venue thereafter. It folds in the product taxonomy
// names (the closest thing to an event name) and the pre-order menu/package
// data so dish-level terms like "fish and chips" match — which on the real
// Stonegate catalogue is ~930KB of text across 939 venues, far too much to
// normalise on every render. See ppVenueHay in data.jsx.
const hardMatches = VENUES.filter(matchesHard);
const { rows: ordered, dropped } = ppSoftTiers(hardMatches, { text });
const droppedKeyword = dropped ? query.text : null;
// One card per venue. The card carries an inline product switcher so the
// partner can pick which of the venue's products to view times for — fixes
// "click an operator, see a random product" by surfacing every product the
// venue offers as a chip.
const cards = ordered
.map(v => {
const products = (v.products || []).filter(Boolean);
if (!products.length) return null;
// Show the product the partner filtered on, which a filtered venue always
// has now that filtering is primary-category only.
const initialProductId = types.find(t => products.includes(t)) || products[0];
return { venue: v, productId: initialProductId };
})
.filter(Boolean);
const win = ppPageWindow(cards.length, VENUES_PAGE_SIZE, page);
const pageCards = cards.slice(win.from, win.to);
const dateLabel = new Date(query.date + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' });
// Only name a total when a FILTER narrowed things. The denominator is venues
// that have a product at all: on the real Stonegate catalogue 208 of 939 publish
// none, and counting those made an unfiltered listing read as "731 of 939" —
// as though the partner's own filters had hidden 208 bookable venues.
const bookableTotal = VENUES.reduce((n, v) => n + ((v.products || []).filter(Boolean).length ? 1 : 0), 0);
const shown = cards.length === bookableTotal
? `${cards.length} listings`
: `${cards.length} of ${bookableTotal} listings`;
const metaLine = query.searched
? `${shown} · times on ${dateLabel} · ${query.guests} ${query.guests === 1 ? 'guest' : 'guests'}`
: `${shown} in your inventory — set date, guests and products, then search for live times`;
// There was no route back to the un-searched inventory: `searched` never went
// false again and no control reset the filters, so a keyword search was a
// one-way door. This is the listing exactly as it looks on arrival.
const filtersApplied = !!(text || types.length || locations.length || operators.length || query.venueId);
const resetSearch = () => setQuery({
...query, text: '', locations: [], productTypes: [], operatorIds: [],
venueId: null, searched: false,
});
return (
{/* Full-bleed band under the top bar, as in the prototype: every control
on one row with the view toggle, then the selected-product chips. */}
) : (
// The map plots exactly the rows the table is showing — narrowing the
// search or paging moves the pins with it.
)}
{cards.length > VENUES_PAGE_SIZE && (
)}
);
}
// Everything a venue row/card needs to show times for one of its products.
// Shared by the list and the grid so the min-party gating, availability fan-out
// and pre-order badge derivation exist once.
function useVenueSlots(venue, products, defaultProductId, query) {
const [sel, setSel] = React.useState(defaultProductId);
React.useEffect(() => { setSel(defaultProductId); }, [defaultProductId]);
// Per-product minimum party size (from the Bookable weekly rules, see #60).
// A product whose minimum exceeds the searched party size can never return a
// slot, so we skip its availability call entirely and tell the partner the
// minimum instead of showing a misleading "no times".
const minByProduct = {};
(venue.rawProducts || []).forEach(rp => {
const n = Number(rp.minPartySize);
if (rp.portalProduct && n > 0) minByProduct[rp.portalProduct] = n;
});
const belowMinFor = (pid) => minByProduct[pid] > 0 && query.guests < minByProduct[pid];
const eligible = products.filter(pid => !belowMinFor(pid));
const byProduct = useAllProductsAvailability(venue, eligible, query.date, query.guests, query.searched);
const productId = sel || defaultProductId;
const belowMin = belowMinFor(productId) ? minByProduct[productId] : null;
const slots = byProduct[productId];
const loading = query.searched && !belowMin && (slots === null || slots === undefined);
const product = productById(productId) || { name: (venue.productNames && venue.productNames[productId]) || productId };
const priceList = (slots || []).map(s => s.price).filter(p => typeof p === 'number' && p > 0);
const minPrice = priceList.length ? Math.min(...priceList) : null;
const rawProduct = (venue.rawProducts || []).find(rp => rp.portalProduct === productId);
// Pre-order menus/packages live at the venue level but each product publishes
// an allow-list (preorderMenuIds / preorderPackageIds). Only surface the badge
// when this product is actually nested onto something.
const allowedMenuIds = (rawProduct && rawProduct.preorderMenuIds) || [];
const allowedPackageIds = (rawProduct && rawProduct.preorderPackageIds) || [];
const venueMenus = (venue.preorders && venue.preorders.menus) || [];
const venuePackages = (venue.preorders && venue.preorders.packages) || [];
const hasPreorderCatalogue = (allowedMenuIds.length
&& venueMenus.some(m => allowedMenuIds.includes(String(m.id)) || (m.slug && allowedMenuIds.includes(m.slug))))
|| (allowedPackageIds.length
&& venuePackages.some(p => allowedPackageIds.includes(String(p.id)) || (p.slug && allowedPackageIds.includes(p.slug))));
const preOrderRequired = !!(rawProduct && rawProduct.preOrderRequired);
const preOrderType = preOrderRequired ? (rawProduct.preOrderRequiredType || 'menu')
: hasPreorderCatalogue ? 'optional'
: 'none';
const minParty = rawProduct && Number(rawProduct.minPartySize) > 0 ? Number(rawProduct.minPartySize) : null;
return {
productId, pick: setSel, byProduct, slots, loading, belowMin, product, minPrice,
minParty, preOrderLabel: PRE_ORDER_LABELS[preOrderType],
};
}
// One product switcher chip per product the venue offers. `cap` limits how many
// render before a "+N" expander — a Stonegate venue publishes nine products,
// which wrapped to seven lines and pushed a single list row past 300px, so only
// two listings fitted above the fold. The selected product always stays visible:
// it is the one whose times the row is showing, and it is often not in the first
// `cap` of the catalogue order.
function ProductSwitch({ venue, products, productId, byProduct, onPick, cap }) {
const [expanded, setExpanded] = React.useState(false);
React.useEffect(() => { setExpanded(false); }, [products.length]);
let visible = products;
if (cap && !expanded && products.length > cap) {
visible = products.slice(0, cap);
if (!visible.includes(productId)) visible = [...visible.slice(0, cap - 1), productId];
}
const hidden = products.length - visible.length;
return (
);
}
// The time chips for one venue × product. `cap` limits how many render before a
// "+N more" expander (the grid wants that; the list scrolls instead).
function TimeChips({ venue, productId, query, slots, loading, belowMin, onBook, cap }) {
const [expanded, setExpanded] = React.useState(false);
React.useEffect(() => { setExpanded(false); }, [productId, query.date, query.guests]);
if (!query.searched) return
Pick a date and search to see times
;
if (belowMin) return
Minimum {belowMin} guests for this product
;
if (loading) {
return (
{Array.from({ length: 5 }).map((_, i) => (
))}
);
}
const all = slots || [];
if (all.length === 0) return
No times for this date
;
const visible = (!cap || expanded) ? all : all.slice(0, cap);
const hidden = all.length - visible.length;
return (
{visible.map(s => {
const isRequest = s.type === 'request';
return (
);
})}
{hidden > 0 && (
)}
);
}
// ── List view — the default. A dense table: many more venues above the fold
// than the photo grid manages, and the same product switcher + time chips. ────
function VenueList({ cards, query, onBook, onOpen }) {
return (
{ e.currentTarget.style.display = 'none'; e.currentTarget.parentNode.classList.remove('has-photo'); }}/>
)}
{(!venue.photos || !venue.photos[0]) && (
)}