Redeem a Reward

Add a simple list of ways to redeem, and link to a button with the reward id we want to redeem.

<h3>Ways to redeem</h3>
<ul>
  {% for points_reward in shop.metafields.rivo.loy.points_program.points_rewards %}
    <li>{{ points_reward.name }} for {{ points_reward.points_amount }} points. <button class="redeem" data-reward-id="{{ points_reward.id }}">Redeem</button></li>
  {% endfor %}
</ul>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelectorAll('.redeem').forEach(function(element) {
      element.addEventListener('click', function(event) {
        // redeem the reward and expect a promise with the data
        window.RivoJS.redeemReward(this.dataset.rewardId).then(function(data){
          console.log(data)
          alert("reward been redeemed");
        });
      });
    });
  });
</script>