| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>User Rewards</title> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
| </head> |
| <body> |
| <div class="container mt-5"> |
| <h1>User Rewards</h1> |
| <div id="rewards-container" class="mt-3"></div> |
| </div> |
|
|
| <script> |
| |
| fetch('/rewards') |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| const rewardsContainer = document.getElementById('rewards-container'); |
| data.rewards.forEach(reward => { |
| const rewardDiv = document.createElement('div'); |
| rewardDiv.className = 'card mb-3'; |
| rewardDiv.innerHTML = ` |
| <div class="card-body"> |
| <h5 class="card-title">${reward.Name}</h5> |
| <p>Coupon Code: ${reward.Coupon_Code__c || 'N/A'}</p> |
| <p>Points Earned: ${reward.Points_Earned__c}</p> |
| <p>Points Redeemed: ${reward.Points_Redeemed__c}</p> |
| <p>Total Points: ${reward.Total_Reward_Points__c}</p> |
| <p>Discount: ${reward.Discount_Perc__c || 0}%</p> |
| <button class="btn btn-primary" onclick="redeemPoints('${reward.Id}', 10)">Redeem 10 Points</button> |
| </div> |
| `; |
| rewardsContainer.appendChild(rewardDiv); |
| }); |
| } else { |
| alert('Failed to load rewards'); |
| } |
| }) |
| .catch(err => console.error('Error:', err)); |
| |
| function redeemPoints(rewardId, points) { |
| fetch('/redeem', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ reward_id: rewardId, points: points }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| alert(data.message); |
| location.reload(); |
| } else { |
| alert('Error redeeming points: ' + data.error); |
| } |
| }) |
| .catch(err => console.error('Error:', err)); |
| } |
| </script> |
| </body> |
| </html> |
