Appointment Details

{#if selectedBooking.user?.previous_first_name && selectedBooking.user?.previous_last_name} {@const fullName = `${selectedBooking.user.first_name} ${selectedBooking.user.last_name}`} {@const formerName = `${selectedBooking.user.previous_first_name} ${selectedBooking.user.previous_last_name}`}

{fullName}, (formerly {formerName})

{/if}

Scheduled Date & Time

{(() => { const date = parseWallClockDate(selectedBooking.start_time); const dateStr = date.toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' }); const timeStr = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }); return `${dateStr} at ${timeStr}`; })()}

Duration

{totalDuration} minutes

{#if selectedBooking.notes}

Notes

{selectedBooking.notes}

{/if}

{#if selectedBooking.services && selectedBooking.services.length > 0}

Services

{#each selectedBooking.services as service, index (index)}

{service.service_name || '—'}

{#if service.service_description}

{service.service_description}

{/if}

{service.override_duration_minutes ?? service.duration_minutes} min £{(service.override_price ?? service.price ?? 0).toFixed(2)}

{/each}

{/if}

Financial Summary

{#if ['confirmed', 'in_progress', 'completed'].includes(selectedBooking.status) && selectedBooking.deposit_required}

Deposit Required

£{selectedBooking.deposit_amount?.toFixed(2) || '0.00'}

{selectedBooking.deposit_paid ? 'Paid' : 'Outstanding'} {#if !selectedBooking.deposit_paid && selectedBooking.deposit_deadline} • Due: {parseWallClockDate( selectedBooking.deposit_deadline ).toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })} at {parseWallClockDate( selectedBooking.deposit_deadline ).toLocaleTimeString('en-GB', { hour: 'numeric', minute: '2-digit', hour12: true })} {/if}

{/if}

Subtotal (Services) £{selectedBooking.total_amount.toFixed(2)}

{#if selectedBooking.discounts && selectedBooking.discounts.length > 0}

{#each selectedBooking.discounts as d (d.id)}

{#if d.discount_source === 'loyalty'} Loyalty Stamp Card (10% Off) {:else if d.discount_source === 'referral'} Referral Discount ({d.discount_percent}% Off) {:else if d.campaign_name} {d.campaign_name} ({d.discount_percent}% Off) {:else} Promo Campaign ({d.discount_percent}% Off) {/if} -£{d.discount_amount.toFixed(2)}

{/each}

Net Total £{( selectedBooking.total_amount - selectedBooking.discounts.reduce((sum, d) => sum + d.discount_amount, 0) ).toFixed(2)}

{/if} {#if hasVAT}

Net amount (excl. VAT) £{totalNet.toFixed(2)}

VAT ({businessSettings?.default_vat_rate ?? 20}%) £{totalVAT.toFixed(2)}

{/if}

Amount Paid (Card/Cash) £{(selectedBooking.payments ?? []) .filter((p) => p.payment_method !== 'discount' && p.status === 'completed') .reduce((sum, p) => sum + p.amount, 0) .toFixed(2)}

{#if totalRefunds > 0}

Refunds -£{totalRefunds.toFixed(2)}

{/if} {#if balanceDue > 0.01}

{isFutureBooking ? 'Estimated Subtotal' : 'Amount Due'} £{balanceDue.toFixed(2)}

{/if}

{#if (selectedBooking.payments && selectedBooking.payments.length > 0) || (selectedBooking.refunds && selectedBooking.refunds.length > 0)}

Payment History

{#each selectedBooking.payments as payment, index (index)}

{getPaymentName( payment, index, selectedBooking.payments, selectedBooking.discounts )} {payment.status}

{#if payment.payment_method === 'discount'} Applied automatically on completion {:else} {payment.payment_type.charAt(0).toUpperCase() + payment.payment_type.slice(1)} payment {#if payment.card_last4} , Card ending in {payment.card_last4} {/if} {/if}

{#if payment.is_vat_applicable}

Net: £{payment.net_amount?.toFixed(2) || '0.00'}

{#if payment.vat_amount}

VAT ({payment.vat_rate || 0}%): £{payment.vat_amount.toFixed(2)}

{/if}

{new SvelteDate(payment.created_at).toLocaleString()}

{payment.payment_method === 'discount' ? '-' : ''}£{payment.amount.toFixed(2)}

{/each} {#each selectedBooking.refunds ?? [] as refund (refund.id)}

Refund {refund.status}

{refund.reason || 'Refund processed'}

{new SvelteDate(refund.created_at).toLocaleString()}

-£{refund.amount.toFixed(2)}

{/each}

{/if}

{#if isCancellable} {#if canEditBooking} {/if} {/if}

{#if pendingEditRequest} {@const timeChanged = pendingEditRequest.original.start_time && pendingEditRequest.proposed?.start_time && pendingEditRequest.original.start_time !== pendingEditRequest.proposed.start_time} {@const servicesChanged = pendingEditRequest.proposed?.services?.length && JSON.stringify(pendingEditRequest.original.services?.map((s) => s.name)) !== JSON.stringify(pendingEditRequest.proposed.services?.map((s) => s.name))} {@const originalNames = (pendingEditRequest.original.services ?? []).map((s) => s.name)} {@const proposedNames = (pendingEditRequest.proposed.services ?? []).map((s) => s.name)} {@const addedServices = proposedNames.filter((n) => !originalNames.includes(n))} {@const removedServices = originalNames.filter((n) => !proposedNames.includes(n))} {#if timeChanged || servicesChanged}

Awaiting admin approval

{#if timeChanged} Reschedule requested from {parseWallClockDate( pendingEditRequest.original.start_time! ).toLocaleString('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} to {parseWallClockDate( pendingEditRequest.proposed.start_time! ).toLocaleString('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} {/if}

{#if addedServices.length > 0}

Services added: {addedServices.join(', ')}

{/if} {#if removedServices.length > 0}

Services removed: {removedServices.join(', ')}

{/if}

We'll let you know once it's been reviewed

{/if} {/if}

{#if selectedBooking} {/if} {#if isCompleted} {/if} {#if depositOutstanding && selectedBooking?.status !== 'pending'} {:else if canPayEarly && !hasPendingEditRequest} {/if} {#if hasPendingEditRequest && !depositOutstanding}

Payments paused while awaiting approval

{/if}