Picker API Reference

// Standalone mode (synchronous)
// By default, requirePricingCategory is true — entities without a valid pricing category are unavailable
const { success } = SeatSquirrel.picker.loadLayout(layoutData);

// Opt out of pricing enforcement — uncategorized entities remain selectable
const { success } = SeatSquirrel.picker.loadLayout(layoutData, {
  requirePricingCategory: false,
});

// Load with initial availability (prevents flash of default state)
const { success, availabilityErrors } = SeatSquirrel.picker.loadLayout(layoutData, {
  initialAvailability: {
    mode: 'by-id',
    rowSeats: { 'seat-1': true, 'seat-2': false },
    areas: { 'area-1': 50 },
  },
});
if (availabilityErrors) {
  console.warn('Availability issues:', availabilityErrors);
}

// Load with initial availability using pricing categories
const result = SeatSquirrel.picker.loadLayout(layoutData, {
  initialAvailability: {
    mode: 'by-pricing-category',
    available: ['category-vip', 'category-standard'],
  },
});

// Iframe SDK mode (async)
const { success } = await picker.loadLayout(layoutData);

// Opt out of pricing enforcement
const { success } = await picker.loadLayout(layoutData, { requirePricingCategory: false });

// Load with initial availability (prevents flash)
const { success, availabilityErrors } = await picker.loadLayout(layoutData, {
  initialAvailability: {
    mode: 'by-slug',
    rowSeats: { 'row-a/seat-1': true, 'row-a/seat-2': false },
  },
});

// By ID
picker.setAvailability({
  mode: 'by-id',
  rowSeats: {
    'row-1234567890_abc123-seat-0_1234567890': true,
    'row-1234567890_abc123-seat-1_1234567890': false,
  },
  areas: {
    'area-1234567890_abc123': 50, // number for count
    'area-9876543210_def456': false, // boolean for single-customer areas (false=0, true=1)
  },
  tableSeats: {
    'table-1234567890_abc123-seat-0_1234567890': true,
  },
  tables: {
    'table-1234567890_abc123': false,
    'table-1234567891_def456': true,
  },
});

// By slug (recommended)
picker.setAvailability({
  mode: 'by-slug',
  rowSeats: {
    'row-a-seat-1': false,
    'row-a-seat-2': true,
  },
  areas: {
    'standing-room': 50,
    'vip-lounge': 0, // number: 0 = sold out
    'private-booth': false, // boolean: false = unavailable (same as 0)
  },
  tableSeats: {
    'table-1-seat-1': false,
  },
  tables: {
    'vip-table-1': false,
    'table-5': true,
  },
});

// By pricing category — only "standard" category entities are available (full reset)
picker.setAvailability({
  mode: 'by-pricing-category',
  available: ['price_abc123'], // Standard category ID
});

// By pricing category — make "vip" entities unavailable (delta, others unchanged)
picker.setAvailability({
  mode: 'by-pricing-category',
  unavailable: ['price_def456'], // VIP category ID
});

// By pricing category — combined: available sets baseline, unavailable overrides
picker.setAvailability({
  mode: 'by-pricing-category',
  available: ['price_abc123', 'price_def456'], // Standard + VIP available
  unavailable: ['price_abc123'], // Then override: Standard-only entities → unavailable
});

// By pricing category slug — same as above but using slugs
picker.setAvailability({
  mode: 'by-pricing-category-slug',
  available: ['standard', 'vip'],
});

// With requirePricingCategory — uncategorized entities also become unavailable
picker.setAvailability({
  mode: 'by-pricing-category',
  available: ['price_abc123'],
  requirePricingCategory: true,
});

// Dangerously by labels (use with caution)
picker.setAvailability({
  mode: 'dangerously-by-labels',
  rowSeats: [
    { rowLabel: 'A', seatLabel: '1', isAvailable: false },
    { rowLabel: 'A', seatLabel: '2', isAvailable: true },
  ],
  areas: [
    { areaLabel: 'Standing Room', availableCount: 50 },
    { areaLabel: 'Private Booth', availableCount: false }, // boolean: false = 0
  ],
  tableSeats: [
    { tableLabel: 'Table 1', seatLabel: '1', isAvailable: false },
    { tableLabel: 'Table 1', seatLabel: '2', isAvailable: true },
  ],
  tables: [
    { tableLabel: 'VIP Table', isAvailable: false },
    { tableLabel: 'Table 5', isAvailable: true },
  ],
});

// Replace all categories (standalone, synchronous)
const { success } = SeatSquirrel.picker.setPricingCategories({
  mode: 'replace',
  pricingCategories: [
    { id: 'cat-1', label: 'Standard', slug: 'standard', price: 5000, color: '#3B82F6' },
    { id: 'cat-2', label: 'VIP', slug: 'vip', price: 10000, color: '#EF4444', customerNotes: 'Includes drinks' },
  ],
});

// Replace all categories (iframe SDK, async)
const { success } = await picker.setPricingCategories({
  mode: 'replace',
  pricingCategories: [
    { id: 'cat-1', label: 'Standard', slug: 'standard', price: 5000, color: '#3B82F6' },
    { id: 'cat-2', label: 'VIP', slug: 'vip', price: 10000, color: '#EF4444', customerNotes: 'Includes drinks' },
  ],
});

// Partially update by ID
const { success } = SeatSquirrel.picker.setPricingCategories({
  mode: 'update-by-id',
  pricingCategories: [
    { id: 'price_abc123', price: 7500, label: 'Standard (updated)' },
    { id: 'price_def456', color: '#10B981' },
  ],
});

// Partially update by slug
const { success } = await picker.setPricingCategories({
  mode: 'update-by-slug',
  pricingCategories: [
    { slug: 'standard', price: 7500, label: 'Standard (updated)' },
    { slug: 'vip', color: '#10B981' },
  ],
});

// Price-only update (pass only the price field — other properties are preserved)
SeatSquirrel.picker.setPricingCategories({
  mode: 'update-by-slug',
  pricingCategories: [
    { slug: 'standard', price: 4000 },
    { slug: 'vip', price: 8000 },
  ],
});

// Tier filtering: only offer VIP and Standard for this performance.
// Entities assigned to other categories (e.g., Budget) become unavailable
// because requirePricingCategory defaults to true via loadLayout.
SeatSquirrel.picker.setPricingCategories({
  mode: 'replace',
  pricingCategories: [
    { id: 'cat-1', label: 'Standard', slug: 'standard', price: 5000, color: '#3B82F6' },
    { id: 'cat-2', label: 'VIP', slug: 'vip', price: 10000, color: '#EF4444' },
  ],
});

// Standalone mode (synchronous)
const { pricingCategories } = SeatSquirrel.picker.getPricingCategories();

// Iframe SDK mode (async)
const { pricingCategories } = await picker.getPricingCategories();

pricingCategories.forEach(cat => {
  console.log(cat.label, cat.price, cat.color);
});

// Assign by slug (recommended)
const result = SeatSquirrel.picker.assignPricingCategories({
  mode: 'by-slug',
  rows: {
    'row-a': ['vip', 'standard'],
    'row-b': ['standard'],
  },
  areas: {
    'vip-lounge': ['vip'],
  },
});

// Assign by ID
const result = await picker.assignPricingCategories({
  mode: 'by-id',
  rows: {
    'row-uuid-1': ['cat-uuid-1', 'cat-uuid-2'],
    'row-uuid-2': ['cat-uuid-2'],
  },
});

// Dangerously by labels (use with caution)
const result = SeatSquirrel.picker.assignPricingCategories({
  mode: 'dangerously-by-labels',
  rows: [
    { rowLabel: 'A', pricingCategorySlugs: ['vip', 'standard'] },
    { sectionId: 'section-uuid', rowLabel: 'A', pricingCategorySlugs: ['economy'] },
  ],
});

if (!result.success) {
  console.error('Assignment errors:', result.errors);
}

// Standalone mode — pre-select items using slugs
const result = SeatSquirrel.picker.setSelections({
  mode: 'by-slug',
  selections: [
    { type: 'row-seat', slug: 'row-a-seat-1', categorySlug: 'standard' },
    { type: 'area', slug: 'vip-lounge', categorySlug: 'vip', quantity: 2 },
    { type: 'table-seat', slug: 'table-1-seat-3', categorySlug: 'premium' },
    { type: 'whole-table', tableSlug: 'table-5', categorySlug: 'standard', quantity: 4 },
  ],
});

if (!result.success) {
  result.failed.forEach(f => {
    console.warn(`Failed: ${f.selection.slug || f.selection.id} — ${f.reason}`);
  });
}

// Iframe SDK mode — by-slug (async)
const result = await picker.setSelections({
  mode: 'by-slug',
  selections: [
    { type: 'row-seat', slug: 'row-a-seat-1', categorySlug: 'standard' },
    { type: 'row-seat', slug: 'row-b-seat-5', categorySlug: null },
  ],
});

// Standalone mode — restore a saved cart (replace mode, default)
const result = SeatSquirrel.picker.setSelections({
  selections: [
    { id: 'seat-id-1', type: 'row-seat', categoryId: 'cat-1' },
    { id: 'seat-id-2', type: 'row-seat', categoryId: null },
    { id: 'area-id-1', type: 'area', categoryId: 'cat-2', quantity: 2 },
  ],
});

if (!result.success) {
  result.failed.forEach(f => {
    console.warn(`Failed: ${f.selection.id} — ${f.reason}`);
  });
}

// Merge mode — add to existing selections
const mergeResult = SeatSquirrel.picker.setSelections(
  {
    selections: [{ id: 'seat-id-3', type: 'row-seat', categoryId: 'cat-1' /* ...other fields */ }],
  },
  { mode: 'merge' }
);

// Iframe SDK mode (async)
const result = await picker.setSelections({
  selections: savedCart.selections,
  lastSelection: null,
  totals: { count: 0, amount: 0 },
});
console.log('Applied:', result.applied.length, 'Failed:', result.failed.length);

picker.clearSelections();

// Disable the proceed button
picker.setAllowProceed(false);

// Re-enable it after external validation passes
picker.setAllowProceed(true);

picker.showToast({ title: 'Seats reserved!', variant: 'success' });

// Per-toast action callback (works in both modes)
const { actionClicked } = await picker.showToast({
  title: 'Availability changed',
  variant: 'info',
  description: 'Some seats are no longer available.',
  action: {
    label: 'Refresh',
    onClick: function () {
      fetchLatestAvailability().then(a => picker.setAvailability({ mode: 'by-slug', ...a }));
    },
  },
});
console.log('User clicked action:', actionClicked);

picker.showAlertDialog({
  title: 'Seat unavailable',
  description: 'This seat was just booked by another customer.',
  mode: 'alert',
  variant: 'error',
  onConfirm: function () {
    fetchLatestAvailability().then(a => picker.setAvailability({ mode: 'by-slug', ...a }));
  },
});

picker.showAlertDialog({
  title: 'Session expired',
  description: 'Your reservation has expired. Please start again.',
  mode: 'alert',
  variant: 'error',
  onConfirm: function () {
    window.location.reload();
  },
});

// Show a warning over the stage
const { noticeId } = picker.showNotice({
  position: 'stage-top',
  variant: 'warning',
  title: 'Booking closes in 5 minutes',
  dismissable: false,
});

// Show an info notice at the top of the cart
picker.showNotice({
  position: 'cart-top',
  variant: 'info',
  title: 'Maximum 4 seats per booking',
});

// Show an error with an action button before the Proceed button
picker.showNotice({
  position: 'cart-before-proceed',
  variant: 'error',
  title: 'Please select at least 2 seats',
  action: {
    label: 'Help',
    onClick: function () {
      console.log('Help clicked');
    },
  },
});

// Replace the stage-top notice (same position replaces)
picker.showNotice({
  position: 'stage-top',
  variant: 'success',
  title: 'Seats reserved!',
});

const { noticeId } = picker.showNotice({
  position: 'stage-top',
  variant: 'info',
  title: 'Loading availability...',
  dismissable: false,
});

// Later, remove it programmatically
picker.removeNotice(noticeId);

const { selections, totals } = picker.getSelections();
console.log(`${totals.count} items selected, $${totals.amount / 100}`);

const totals = picker.getTotals();
console.log(`${totals.count} items, $${totals.amount / 100}`);

// Standalone mode (synchronous)
const { layout } = SeatSquirrel.picker.getLayout({ mode: 'current' });

// Iframe SDK mode (async)
const { layout } = await picker.getLayout({ mode: 'current' });
if (layout) {
  layout.layout.rows.forEach(row => {
    row.rowSeats.forEach(seat => {
      console.log(seat.label, seat.isAvailable);
    });
  });
}

// Get the last loaded snapshot
const { layout: savedLayout } = picker.getLayout({ mode: 'last-saved' });
if (savedLayout) {
  console.log('Last loaded:', savedLayout);
}

picker.destroy();