Spaces:
Sleeping
Sleeping
| <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/[email protected]/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 for the user | |
| 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)); | |
| // Redeem points | |
| 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(); // Refresh to show updated points | |
| } else { | |
| alert('Error redeeming points: ' + data.error); | |
| } | |
| }) | |
| .catch(err => console.error('Error:', err)); | |
| } | |
| </script> | |
| </body> | |
| </html> |