|
<!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> |
