Navigation Examples

// spaaza controller emits content:select when user clicks content
document.addEventListener('content:select', (event) => {
  const { campaign, voucher } = event.detail;

  // your code — preserve auth params and change the navigation params
  const params = new URLSearchParams(window.location.search);

  if (voucher) {
    params.delete('campaign_id');
    params.delete('name');
    params.set('voucher_id', voucher.id);
    window.location.search = params.toString();
  } else if (campaign?.image_link) {
    if (campaign.image_link.startsWith('http')) {
      window.open(campaign.image_link, '_blank');  // external link
    } else {
      // merge image_link params (e.g. ?campaign_id=123) with existing auth params
      const intentParams = new URLSearchParams(campaign.image_link);
      intentParams.forEach((value, key) => params.set(key, value));
      window.location.search = params.toString();
    }
  }
});

// spaaza controller emits content:select when user clicks content
document.addEventListener('content:select', (event) => {
  const { campaign, voucher } = event.detail;

  // your code — forward the click intent to the native app
  window.ReactNativeWebView?.postMessage(JSON.stringify({
    type: 'navigate',
    contentType: voucher ? 'voucher' : 'campaign',
    id: voucher?.id || campaign?.id,
    imageLink: campaign?.image_link
  }));
});

// your code — native receives the message and loads the detail WebView with URL params
function onWebViewMessage(message) {
  const { contentType, id, imageLink } = JSON.parse(message);

  if (imageLink?.startsWith('http')) {
    Linking.openURL(imageLink);  // external link
  } else if (contentType === 'voucher') {
    showDetailWebView(`?voucher_id=${id}`);  // controller reads params on init
  } else {
    showDetailWebView(`?campaign_id=${id}`);  // controller reads params on init
  }
}

// spaaza controller initializes and mounts both components
const controller = await initializeSpaazaElements({
  target: '#spaaza-elements',
  config: config,
  pageName: 'home',
  componentBaseUrl: 'https://elements.spaaza.com/'
});

// your code — get references to both mounted components (see Web Components for IDs)
const pageEl = document.getElementById('spaazaContentPage');
const detailEl = document.getElementById('spaazaContentPageDetail');

// your code — show campaign detail by setting campaignId property
function showCampaignDetail(campaignId) {
  detailEl.campaignId = campaignId;  // controller reactively fetches campaign data
  pageEl.style.display = 'none';
  detailEl.style.display = 'block';
}

// your code — show voucher detail by setting voucherId property
function showVoucherDetail(voucherId) {
  detailEl.voucherId = voucherId;  // controller reactively fetches voucher data
  pageEl.style.display = 'none';
  detailEl.style.display = 'block';
}

// your code — show page view by setting pageName property
function showPage(name) {
  if (name) pageEl.pageName = name;  // controller reactively fetches page data
  detailEl.style.display = 'none';
  pageEl.style.display = 'block';
}

// spaaza controller emits content:select when user clicks content
document.addEventListener('content:select', (event) => {
  const { campaign, voucher } = event.detail;

  // your code — decide what to show based on the clicked content
  if (voucher) {
    showVoucherDetail(voucher.id);
  } else if (campaign?.image_link) {
    const intent = controller.parseImageLink(campaign.image_link);

    if (intent.type === 'detail') {
      showCampaignDetail(intent.campaignId);
    } else if (intent.type === 'page') {
      showPage(intent.pageName);
    } else if (intent.type === 'external') {
      window.open(intent.url, '_blank');
    }
  }
});