Incremental points redemption

<div id="confirmation-modal" style="display: none;">
  <p>Points to redeem: <input id="points-input" type="number" min="100" step="100" style="display: none;"></p>
  
  <button id="redeem-btn">Redeem</button>
  <button id="cancel-btn">Cancel</button>
</div>

<div id="rewards-list"></div>

<script type="text/javascript">
document.addEventListener('rivo-js-loaded', function() {
    const pointsInput = document.getElementById('points-input');
    const redeemBtn = document.getElementById('redeem-btn');
    const rewardsList = document.getElementById('rewards-list');

    let selectedRewardId;

    window.RivoJS.getShopRewards().then(function(rewards) {
        rewards.forEach(function(reward) {
            var rewardItem = document.createElement('div');
            
            rewardItem.dataset.rewardId = reward.id;
            rewardItem.dataset.rewardType = reward.points_type;

            // Click event to select the reward and show/hide points input based on reward type
            rewardItem.addEventListener('click', function(event) {
                selectedRewardId = this.dataset.rewardId;
                pointsInput.style.display = this.dataset.rewardType === 'multiplier' ? 'block' : 'none';
            });

            rewardsList.appendChild(rewardItem);
        });
    });

    redeemBtn.onclick = function() {
        var payload = {};
        if (pointsInput.style.display === 'block') {
            payload.points = Number(pointsInput.value); 
        }
        
        // Call the redeemReward function with the selected reward ID and payload
        window.RivoJS.redeemReward(selectedRewardId, payload).then(function(data) {
            // Logic to handle the redemption result...
        });
    }
});
</script>