feat(frontend): add deposit and payment warnings to cancel modal

Shows the total amount already paid in the cancellation confirmation, plus deposit-specific messaging: forfeiture warning when deposit is paid, and a note that outstanding deposit is no longer due when deposit is required but not yet paid.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-06-15 23:19:39 +01:00
co-authored by Sisyphus
parent e46df47a8f
commit 6ace9abab8
@@ -634,16 +634,35 @@
<Modal.Header>
<Modal.Title>Cancel Booking</Modal.Title>
<Modal.Description>
{#if hasPayments}
<p>
Are you sure you want to cancel this booking? You have already made payments totalling
<span class="font-semibold">£{totalPaid.toFixed(2)}</span>.
</p>
{:else}
Are you sure you want to cancel this booking?
{/if}
{#if hasPayments}
<div
class="mt-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800"
>
<p class="font-medium">Please note:</p>
<p class="mt-1">
The <span class="font-semibold">£{totalPaid.toFixed(2)}</span> already paid for this booking
will not be refunded, but will be retained as credit towards a future appointment.
Any amounts paid (<span class="font-semibold">£{totalPaid.toFixed(2)}</span>) will
not be refunded, but will be retained as credit towards a future appointment.
</p>
{#if selectedBooking}
{#if selectedBooking.deposit_paid}
<p class="mt-1">
The deposit of
<span class="font-semibold">£{selectedBooking.deposit_amount?.toFixed(2)}</span>
paid for this booking may be forfeited.
</p>
{/if}
{#if selectedBooking.deposit_required && !selectedBooking.deposit_paid}
<p class="mt-1">Any outstanding deposit will no longer be due.</p>
{/if}
{/if}
</div>
{/if}
</Modal.Description>