Add cancel RSVP feature (backend DELETE endpoint + frontend UI)
All checks were successful
CI / backend-test (push) Successful in 59s
CI / frontend-test (push) Successful in 24s
CI / frontend-e2e (push) Successful in 1m18s
CI / build-and-publish (push) Has been skipped

Allows guests to cancel their RSVP via a DELETE endpoint using their
guestToken. Frontend shows cancel button in RsvpBar and clears local
storage on success. Includes unit tests, integration tests, and E2E spec.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 17:45:37 +01:00
parent a1855ff8d6
commit 41bb17d5c9
23 changed files with 1371 additions and 12 deletions

View File

@@ -28,7 +28,7 @@
<ConfirmDialog
:open="!!pendingDeleteToken"
title="Remove event?"
message="This event will be removed from your list."
:message="deleteDialogMessage"
confirm-label="Remove"
cancel-label="Cancel"
@confirm="confirmDelete"
@@ -42,24 +42,62 @@ import { computed, ref } from 'vue'
import { useEventStorage, isValidStoredEvent } from '../composables/useEventStorage'
import { useEventGrouping } from '../composables/useEventGrouping'
import { formatRelativeTime } from '../composables/useRelativeTime'
import { api } from '../api/client'
import EventCard from './EventCard.vue'
import SectionHeader from './SectionHeader.vue'
import DateSubheader from './DateSubheader.vue'
import ConfirmDialog from './ConfirmDialog.vue'
import type { StoredEvent } from '../composables/useEventStorage'
const { getStoredEvents, removeEvent } = useEventStorage()
const { getStoredEvents, getRsvp, removeEvent } = useEventStorage()
const pendingDeleteToken = ref<string | null>(null)
const deleteError = ref('')
const deleteDialogMessage = computed(() => {
if (!pendingDeleteToken.value) return ''
const rsvp = getRsvp(pendingDeleteToken.value)
if (rsvp) {
return 'This event will be removed from your list and your attendance will be cancelled.'
}
return 'This event will be removed from your list.'
})
function requestDelete(eventToken: string) {
deleteError.value = ''
pendingDeleteToken.value = eventToken
}
function confirmDelete() {
if (pendingDeleteToken.value) {
removeEvent(pendingDeleteToken.value)
async function confirmDelete() {
if (!pendingDeleteToken.value) return
const eventToken = pendingDeleteToken.value
const rsvp = getRsvp(eventToken)
if (rsvp) {
try {
const { response } = await api.DELETE('/events/{token}/rsvps/{rsvpToken}', {
params: {
path: {
token: eventToken,
rsvpToken: rsvp.rsvpToken,
},
},
})
if (response.status !== 204 && response.status !== 404) {
deleteError.value = 'Could not cancel attendance. Please try again.'
pendingDeleteToken.value = null
return
}
} catch {
deleteError.value = 'Could not cancel attendance. Please try again.'
pendingDeleteToken.value = null
return
}
}
removeEvent(eventToken)
pendingDeleteToken.value = null
}