Web Components

Both components below are always mounted inside the target element. The page component is visible by default; the detail component is mounted but hidden.

Bootstrapped DOM Structure

After calling initializeSpaazaElements(), the controller mounts the following inside your target element:

<div id="spaaza-elements">
  <spaaza-environment>
    <spaaza-content-page id="spaazaContentPage">
    </spaaza-content-page>
    <spaaza-content-page-detail id="spaazaContentPageDetail" style="display: none">
    </spaaza-content-page-detail>
  </spaaza-environment>
</div>

Component IDs

Component	ID	Default Visibility
`<spaaza-content-page>`	`spaazaContentPage`	Visible
`<spaaza-content-page-detail>`	`spaazaContentPageDetail`	Hidden (`display: none`)

initializeSpaazaElements() sets the initial display styles: the active view gets display: block, the other gets display: none. When you pass campaignId or voucherId, the detail component is visible and the page component is hidden. Since both components are in the DOM, you can control their visibility yourself for SPA-like navigation. See Navigation Handling Examples for patterns.

Which view is initially displayed depends on what you pass to initializeSpaazaElements():

You pass	Active view
`pageName` only (or nothing)	Page view
`campaignId`	Detail view
`voucherId`	Detail view

spaaza-content-page

Renders a content page with zones and items.

Input properties (set by client to trigger data loading):

Property	Type	Description
`pageName`	`string`	Page name to load (e.g., `'home'`, `'offers'`)

Data object (set by Spaaza’s controller after fetching — full Spaaza API objects):

pageEl.data = { page, vouchers, user };

Property	Required	Description
`page`	Yes	Page content object from `get-content-page` API response
`vouchers`	No	Array of vouchers from `get-user-vouchers`. Required if page displays voucher items or wallet campaign items.
`user`	No	User object from `get-user`. Used for business filtering of the page or display of the membercard item.

spaaza-content-page-detail

Renders a single campaign or voucher detail.

Input properties (set by client to trigger data loading):

Property	Type	Description
`campaignId`	`number`	Campaign ID to load
`voucherId`	`number`	Voucher ID to load

Data object (set by Spaaza’s controller after fetching — full Spaaza API objects):

detailEl.data = { campaign, voucher, vouchers, walletLedger };

Property	Required	Description
`campaign`	Yes*	Campaign object from `get-campaign`. Required for all campaign detail views.
`voucher`	No	Single voucher object. Required only when showing voucher-specific detail.
`vouchers`	No	Array of vouchers from `get-user-vouchers`. Required for wallet campaigns to show selected amounts.
`walletLedger`	No	Transaction history from `user-wallet-ledger`. Required for wallet campaigns to show history.

Always required for campaign details. For voucher-only details, provide voucher instead.