Example Components

The example components below can be used when the following have been done:

1. A page is configured as an invitation landing page, and this page is referenced in the invitation link
   The invitation landing page contains a banner or message allowing the invitee to accept the invitation. For example, {{invite-meta-data-first-name}} has shared the {{product-label}} with you, do you want to accept the invite
2. A button is available to allow users who are already logged in to accept the invitation
3. A registration or login form is available for invitees who are not currently logged in

<style>
    #accept-banner{
        display:none;
    }
    #accept-banner-error{
        display:none;
    }
</style>
<div id="accept-banner">
    <h1>You've had the product <span id="product-label"></span> shared with you!</h1>
    <h2>Register below to continue.</h2>
    <br /> <br />
</div>
<div id="accept-banner-error">
    <h3>Sorry, this product sharing invitation is invalid.</h1>
    <br /> <br />
</div>
<script>
    const sharingId = new URLSearchParams(window.location.search).get("sharing_id")
    if(sharingId){
        fetch("/zephr/public/products/v1/shares/invitations/" + sharingId)
        .then(function(response) {
          return response.json();
        }).then(function(data) {
          if(data != null && (data.status == null || data.status == 200)){
              document.getElementById('product-label').innerHTML = data.product_label
              document.getElementById('accept-banner').style.display = 'block'
          } else {
              onError()
          }
        }).catch(function() {
          document.getElementById('accept-banner-error').style.display = 'block'
        });
        
    }
</script>

<style>
    #accept-banner{
        display:none;
    }
    #accept-banner-error{
        display:none;
    }
    #accept-banner-success{
        display:none;
    }
    .accept-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
</style>
<div id="accept-banner">
    <div class="accept-container">
      <h1>You've had the product <span id="product-label"></span> shared with you!</h1>
      <button id="accept-invite-button" onClick="acceptInvite()">Click to accept the invite</button>
   </div>
    <br /> <br />
</div>
<div id="accept-banner-error">
    <h3>Sorry, this invitation link is not valid.</h1>
    <br /> <br />
</div>
<div id="accept-banner-success">
    <div class="accept-container">
      <h1>You've accepted the product invite!</h1>
      <button id="continue-reading-button" onClick="onReload()">Click to continue reading</button>
    </div>
    <br /> <br />
</div>
<script>
    const sharingId = new URLSearchParams(window.location.search).get("sharing_id")
    
    const onError = () => {
        document.getElementById('accept-banner').style.display = 'none'
        document.getElementById('accept-banner-error').style.display = 'block'
    }
    
    const removeSharingInviteFromUrl = (url) => {
        try {
            var r = new URL(url);
            if (!r.searchParams.has("sharing_id")) {
                return url
            }
            r.searchParams.delete("sharing_id");
            return r.href;
        } catch {
            // If there is any browser compability issue, ignore it
            return url
        }
    }
    
    function onReload() {
            window.location.href = removeSharingInviteFromUrl(window.location.href)
    }
    
    if(sharingId){
        fetch("/zephr/public/products/v1/shares/invitations/" + sharingId)
        .then(function(response) {
          return response.json();
        }).then(function(data) {
          if(data != null && (data.status == null || data.status == 200)){
              document.getElementById('product-label').innerHTML = data.product_label
              document.getElementById('accept-banner').style.display = 'block'
          } else {
              onError()
          }
        }).catch(onError);
    }
    
    function acceptInvite(){
        document.getElementById('accept-banner').disabled = true
          fetch("/zephr/public/products/v1/shares/invitations/" + sharingId,
          {
              method: "PUT"
          })
        .then(function(response) {
          return response.json();
        }).then(function(data) {
          if(data == null  || data.status == 200){
              document.getElementById('accept-banner').style.display = 'none'
              document.getElementById('accept-banner-success').style.display = 'block'
          } else {
              onError()
          }
        }).catch(onError);
    }
</script>