Event System

Components communicate via DOM events that bubble up.

Core Events

Event	When	Your response
content:select	User clicks item	Handle navigation
content:action:start	Action begins	Optional: show loading
content:action:success	Action completed	Optional: analytics
content:action:error	Action failed	Show error
data:refresh:request	Component requests data	Fetch and respond
data:refresh:done	Data loaded successfully	Hide loading
data:refresh:error	Data load failed	Show error state
ui:render:done	Component finished post-mount async work	Optional: hide loading indicator

content:* events are user interactions on content items; data:refresh:* events describe data-loading requests and outcomes.

Event Detail Structure

The campaign, voucher, item, zone and page objects in event details are compact summaries (a few identifying fields each, shown below).

The results of the underlying API response is carried in spaaza_results — see API Results in Events.

// content:select
{
  campaign: { id: 4911, type: 'wallet', title: 'Points Wallet', image_link: '?campaign_id=4911' },
  voucher: { id: 123, title: 'Reward' },  // if voucher clicked
  item: { layoutType: 'card', type: 'campaign' },
  zone: { id: 'rewards', orientation: 'vertical' },
  page: { name: 'home', storeid: 3522 },
  root: 'spaaza-content-item',           // component that emitted the event
  pageContext: 'spaaza-content-page'     // top parent: page or detail
}

// content:action:start
{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletBalance: 150, selectedAmount: 50 },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

content:select

All events include root (emitting component) and pageContext (page or detail).

Event detail contains Spaaza's default objects. See API Documentation for full object structures.

Field	Description
campaign	Campaign summary: id, type, title, image_link
voucher	Voucher summary: id, title
item	Item metadata: layoutType, type
zone	Zone metadata: id, orientation
page	Page metadata: name, storeid

API Results in Events (spaaza_results)

Events that report the successful completion of a Spaaza API call carry a spaaza_results field: the results member of that call's response, forwarded as-is (see Responses). The event's action tells you which call:

action	Event	spaaza_results contains
voucher-claim / voucher-unclaim	content:action:success	The updated voucher object returned by claim/unclaim
get-user-vouchers	data:refresh:done (voucher detail)	The get-user-vouchers response shape, filtered to the one voucher being shown
get-campaign	data:refresh:done (campaign detail; also fired wherever vouchers are shown — once per issuing campaign)	{ campaign: { … } } — the get-campaign response
get-wallet	data:refresh:done	{ campaign: { … } } — the wallet campaign. The sibling campaign field carries the same object and is kept for backwards compatibility; prefer spaaza_results
get-content-page	data:refresh:done (page)	The raw page response. Note: injected custom zones (vouchers, membercard) are a frontend enrichment and are not part of this response

Notes:

• Treat the field as optional — error events and events without an API call (content:select, ui:render:done) never carry it.
• Error events carry spaaza_response (the error envelope) instead — see Data Events.

Action Events

content:action:start

{
  action: 'wallet-value-select',
  campaign_info: {
    campaignId: 4911,
    campaignType: 'wallet',
    walletId: 4912,
    walletBalance: 150,
    selectedAmount: 50
  },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

content:action:success

{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletId: 4912, selectedAmount: 50 },
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

For voucher claim/unclaim, the success event also carries the updated voucher in spaaza_results:

{
  action: 'voucher-claim',
  voucher_info: { voucherId: 3682861, voucherKey: '5003…', voucherStatus: 'generated' },
  spaaza_results: { /* full Spaaza voucher object */ },
  root: 'spaaza-controller'
}

voucher_info echoes the request that started the action; spaaza_results is the voucher as the API returned it after the claim.

content:action:error

{
  action: 'wallet-value-select',
  campaign_info: { campaignId: 4911, walletId: 4912 },
  error: 'Insufficient balance',
  root: 'spaaza-content-item-campaign-wallet',
  pageContext: 'spaaza-content-page-detail'
}

Action Event Types

For the full list of action types, see Operation Handling Matrix.

Data Events

These events handle communication between web components and Spaaza's controller for data fetching operations.

data:refresh:request (component requests data)

{
  action: 'get-content-page',  // or get-campaign, get-user-vouchers
  page: { name: 'home', storeid: 3522 },
  root: 'spaaza-content-page',
  pageContext: 'spaaza-content-page'
}

data:refresh:done (data loaded successfully)

{
  action: 'get-content-page',
  page: { name: 'home' },
  zoneCount: 4,
  spaaza_results: { /* raw get-content-page response */ },
  root: 'spaaza-content-page',
  pageContext: 'spaaza-content-page'
}

On the campaign detail page:

{
  action: 'get-campaign',
  campaign_info: { campaignId: 4911 },
  spaaza_results: { campaign: { /* full Spaaza campaign object */ } },
  campaign: { id: 4911, type: 'wallet', title: 'Points Wallet' },  // summary
  root: 'spaaza-content-page-detail',
  pageContext: 'spaaza-content-page-detail'
}

data:refresh:error (data load failed)

{
  action: 'get-content-page',
  page: { name: 'home' },
  status: 401,
  spaaza_response: {
    result: { code: 2, status: 'error' },
    error: {
      code: 6,
      name: 'no_valid_session',
      description: 'The user needs to be logged in...',
      extrainfo: 'JWT validation failed'
    }
  },
  root: 'spaaza-controller',
  pageContext: 'spaaza-content-page'
}

spaaza_response is the Spaaza response envelope forwarded as-is — see Responses and Error and warning codes.

UI Events

These events fire when a component reports a UI-level state change distinct from data loading.

ui:render:done (component fully rendered after async work)

Most components are ready as soon as their data arrives (data:refresh:done). Components that perform additional asynchronous rendering work after data arrives emit ui:render:done once that work completes. Listen to this event if you want to defer your "ready" or "hide loading" signal until the UI is visibly settled. If ui:render:done is not emitted listen for data:refresh:done.

{
  action: 'scratch-table-ready',
  campaign_info: { campaignId: 4911 },
  root: 'spaaza-content-item-campaign-...',
  pageContext: 'spaaza-content-page-detail'
}