Display points needed to unlock next VIP tier

Below are two methods for displaying the points a customer needs to unlock their next available VIP tier.

1. Using response data to display custom text

<p id="vip-unlock"></p>

<script type="text/javascript">
document.addEventListener("rivo-js-loaded", function() {
  RivoJS.getCustomerVipTier().then(function(resp) {
    var pointsNeeded = resp.next_tier.to_spend_or_earn;
    var tierName = resp.next_tier.name;
    var vipInfoP = document.getElementById('vip-unlock');
    if (vipInfoP) {
      vipInfoP.innerHTML = "Earn " + pointsNeeded + " more points to reach " + tierName;
    }
  });
});
</script>

2. Using premade HTML from response data

<p id="vip-unlock"></p>

<script type="text/javascript">
document.addEventListener("rivo-js-loaded", function() {
  RivoJS.getCustomerVipTier().then(function(resp) {
    var element = document.getElementById('vip-unlock'); 
    element.innerHTML = resp.next_tier_desc;
  });
});
</script>