diff --git a/src/lib/components/wishlist/ReservationButton.svelte b/src/lib/components/wishlist/ReservationButton.svelte index 2e4cca5..6742fe6 100644 --- a/src/lib/components/wishlist/ReservationButton.svelte +++ b/src/lib/components/wishlist/ReservationButton.svelte @@ -7,12 +7,25 @@ itemId: string; isReserved: boolean; reserverName?: string | null; + reservationUserId?: string | null; + currentUserId?: string | null; } - let { itemId, isReserved, reserverName }: Props = $props(); + let { itemId, isReserved, reserverName, reservationUserId, currentUserId }: Props = $props(); let showReserveForm = $state(false); let name = $state(''); + let showCancelConfirmation = $state(false); + + const canCancel = $derived(() => { + if (!isReserved) return false; + if (reservationUserId) { + return currentUserId === reservationUserId; + } + return true; + }); + + const isAnonymousReservation = $derived(!reservationUserId); {#if isReserved} @@ -23,12 +36,52 @@ by {reserverName} {/if} -
+ {#if canCancel()} + {#if showCancelConfirmation} ++ Cancel this reservation? +
+