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

Web component properties are lowercase (pagename, campaignid) because HTML custom elements do not support camelCase attributes.

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):

The detail component accepts one of two data shapes, depending on the view:

Campaign detail:

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

Property	Required	Description
campaign	Yes	Campaign object from get-campaign.
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.

Voucher detail:

detailEl.data = { voucher };

Property	Required	Description
voucher	Yes	Single voucher object from get-user-vouchers.