-
Submit RSVP
+
+
Number of people:
+
+ 0
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+
+
+
+
+
+ $25
+ $50
+ Other$
+ Maybe later
-
-
-
-
Change to:
-
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- Cancel RSVP
-
-
-
Make an additional donation?
-
- $25
- $50
- Other$
-
-
+
+
+ Submit RSVP
@@ -226,20 +201,13 @@
let selectedNumPeople = 1;
let selectedDonation = 25;
- function setupButtonGroup(groupId, onChange, useHighlight = false) {
+ function setupButtonGroup(groupId, onChange) {
const group = document.getElementById(groupId);
group.querySelectorAll('wa-button').forEach(btn => {
btn.addEventListener('click', (e) => {
if (e.target.tagName === 'WA-INPUT') return;
- group.querySelectorAll('wa-button').forEach(b => {
- b.variant = 'neutral';
- b.classList.remove('selected');
- });
- if (useHighlight) {
- btn.classList.add('selected');
- } else {
- btn.variant = 'brand';
- }
+ group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
+ btn.classList.add('selected');
onChange(btn.dataset.value);
});
});
@@ -247,11 +215,11 @@
setupButtonGroup('num-people-group', val => {
selectedNumPeople = parseInt(val);
- }, true);
+ });
setupButtonGroup('donation-group', val => {
selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val));
- }, true);
+ });
document.getElementById('custom-amount').addEventListener('focus', () => {
const group = document.getElementById('donation-group');
@@ -260,64 +228,45 @@
selectedDonation = 'custom';
});
- document.getElementById('additional-amount').addEventListener('focus', () => {
- const group = document.getElementById('additional-donation-group');
- group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
- group.querySelector('wa-button[data-value="custom"]').classList.add('selected');
- });
-
- setupButtonGroup('num-people-update-group', async val => {
- const numPeople = parseInt(val);
- const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople });
- updateUI(data);
- }, true);
-
- setupButtonGroup('additional-donation-group', async val => {
- let donationCents = 0;
- if (val === 'custom') {
- donationCents = (parseInt(document.getElementById('additional-amount').value) || 0) * 100;
- } else {
- donationCents = parseInt(val) * 100;
- }
- if (donationCents > 0) {
- const data = await api('POST', `/api/rsvp/${eventId}`, { donationCents });
- if (data.url) location.href = data.url;
- }
- }, true);
-
async function loadRSVP() {
const data = await api('GET', `/api/rsvp/${eventId}`);
updateUI(data);
}
function updateUI(data) {
- if (data.numPeople > 0) {
- document.getElementById('rsvp-prompt').style.display = 'none';
- document.getElementById('rsvp-status').style.display = 'block';
+ const hasRSVP = data.numPeople > 0;
+ const hasDonation = data.donation > 0;
+
+ if (hasRSVP) {
const word = data.numPeople === 1 ? 'person' : 'people';
- document.getElementById('rsvp-message').textContent = `You're RSVPed for ${data.numPeople} ${word}.`;
- if (data.donation > 0) {
- document.getElementById('donation-status').textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
- } else {
- document.getElementById('donation-status').textContent = '';
- }
- const updateGroup = document.getElementById('num-people-update-group');
- updateGroup.querySelectorAll('wa-button').forEach(b => {
- b.classList.remove('selected');
- b.variant = 'neutral';
- });
- const currentBtn = updateGroup.querySelector(`wa-button[data-value="${data.numPeople}"]`);
- if (currentBtn) currentBtn.classList.add('selected');
+ document.getElementById('rsvp-header').textContent = `You're RSVPed for ${data.numPeople} ${word}.`;
} else {
- document.getElementById('rsvp-prompt').style.display = 'block';
- document.getElementById('rsvp-status').style.display = 'none';
- const promptDonation = document.getElementById('prompt-donation-status');
- if (data.donation > 0) {
- promptDonation.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
- promptDonation.style.display = 'block';
- } else {
- promptDonation.style.display = 'none';
- }
+ document.getElementById('rsvp-header').textContent = 'RSVP now!';
+ }
+
+ const donationStatus = document.getElementById('donation-status');
+ if (hasDonation) {
+ donationStatus.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
+ donationStatus.style.display = 'block';
+ document.getElementById('donation-header').textContent = 'Make an additional donation?';
+ } else {
+ donationStatus.style.display = 'none';
+ document.getElementById('donation-header').textContent = 'Would you like to make a donation?';
+ }
+
+ document.getElementById('rsvp-btn').textContent = (hasRSVP || hasDonation) ? 'Update RSVP' : 'Submit RSVP';
+
+ const numGroup = document.getElementById('num-people-group');
+ numGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
+ selectedNumPeople = data.numPeople || 1;
+ const currentBtn = numGroup.querySelector(`wa-button[data-value="${selectedNumPeople}"]`);
+ if (currentBtn) currentBtn.classList.add('selected');
+
+ if (hasRSVP || hasDonation) {
+ const donationGroup = document.getElementById('donation-group');
+ donationGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
+ donationGroup.querySelector('wa-button[data-value="0"]').classList.add('selected');
+ selectedDonation = 0;
}
}