Book Your Appointment

Professional beauty treatments in a calm and friendly environment

{#if !authReady}

{#each [1, 2, 3, 4] as _}

{#if _ < 4}

{/if} {/each}

{:else} {#if currentStep === 0} Welcome Log in for the best booking experience

Guest checkout does not receive loyalty stamps or seasonal discounts.

{/if} {#if currentStep === 1} Choose Your Services Select one or more treatments for your appointment {#if authStore.isAuthenticated && userDepositsRequired > 0 && hasActiveBooking}

One Booking at a Time

We are currently asking for deposits on upcoming bookings. While this is active, only one online booking can be made at a time. If you need another appointment please contact us.

{/if}

Need something different? Select the closest service and add a note, or contact us for a bespoke treatment.

Arrange a custom booking →

{#if selectedServices.length > 0}

Selected Services

{#each selectedServices as service (service.id)}

{service.name} {service.duration_minutes} mins • £{service.price}

{/each}

Estimated Duration: {formattedTotalDuration}

Total Cost: £{getTotalPrice()}{#if vatRegistered} incl. VAT{/if}

{/if} {/if} {#if currentStep === 2} Choose Date & Time {selectedServices.map((s) => s.name).join(', ')} • {formattedTotalDuration} total • £{getTotalPrice()} {#if loadingWorkingHours}

Loading available dates...

{:else} { selectedDate = newDate; selectedTime = null; }} onPlaceholderChange={(newPlaceholder) => { placeholder = newPlaceholder; userNavigatedCalendar = true; }} /> {/if} {#if loadingAvailableHours}

Loading times...

{:else} { selectTimeWithValidation(time); }} /> {/if}

{#if selectedDate && selectedTime} Appointment for {selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
at {selectedTime} {:else} Select a date and time {/if}

{#if selectedDate && selectedTime} Appointment for {selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })} at {selectedTime} {:else} Select a date and time {/if}

{/if} {#if currentStep === 3}

Almost There

{#if !authStore.isAuthenticated}

Just a couple more details

{/if}

Your Details Please confirm your contact information {#if reservationExpired}

Reservation expired — please go back and select a new time

{:else}

Your slot will be held for {reservationCountdown} — complete your booking before time expires

{/if} {#if !authStore.isAuthenticated}

You are checking out as a guest, so you will miss out on a loyalty stamp and any possible seasonal discounts. Please login for full membership benefits.

First Name *

Last Name *

Email * { emailSuggestion = null; debouncedEmailCheck(); }} onerrorchange={(err) => { emailError = err; }} onblur={() => { debouncedEmailCheck(); }} /> {#if emailError} {emailError} {/if} {#if emailChecking} Checking... {/if}

Phone Number * { if (!err) debouncedEmailCheck(); }} />

{#if emailSuggestion === 'login'}

This email belongs to a registered user. Please log in instead to access your bookings and rewards.

{:else if emailSuggestion === 'check'}

This email might belong to an existing account. Please double-check or log in.

{/if} {/if}

Special Requests (Optional)

<div class="text-sm text-gray-600">
						{#if !authStore.isAuthenticated}
							<p>* Required fields</p>
						{/if}
						<p class="mt-2">
							By booking, you agree to our Terms & Conditions and Privacy Policy. We'll send you
							appointment reminders via email and/or SMS.
						</p>
						<p class="mt-2 text-xs text-gray-500">
							<strong>Cancellation Policy:</strong> If paying early a free full refund will be given if
							cancelled more than 72 hours before your appointment. Between 24-72 hours, up to 50% of
							the booking total may be retained as a protected deposit. Cancellations within 24 hours
							are non-refundable and count as a no-show against your account.
						</p>
						<p class="mt-1 text-xs text-gray-500">
							<PolicyPopover>
								{#snippet trigger()}
									<span class="underline">Read full cancellation policy →</span>
								{/snippet}
							</PolicyPopover>
						</p>
					</div>
				</Card.Content>
				<Card.Footer class="flex justify-between">
					<Button variant="outline" onclick={prevStep}>Back</Button>
					<Button
						disabled={!canProceedStep3}
						onclick={nextStep}
						class="bg-primary text-primary-foreground"
					>
						{#if reservationExpired}
							Reservation Expired
						{:else if depositRequired}
							Next: Payment
						{:else}
							Confirm Booking
						{/if}
					</Button>
				</Card.Footer>
			</Card.Root>
		{/if}

{#if currentStep === finalStep}
			{#if confirmedBooking}
				{@const isRequested = confirmedBooking.notes && confirmedBooking.notes.length > 0}
				{@const bookingDate = new SvelteDate(confirmedBooking.start_time)}
				{@const dateStr = bookingDate.toLocaleDateString('en-GB', {
					weekday: 'long',
					day: 'numeric',
					month: 'long',
					year: 'numeric'
				})}
				{@const timeStr = bookingDate.toLocaleTimeString('en-GB', {
					hour: 'numeric',
					minute: '2-digit',
					hour12: true
				})}

<Card.Root class="border-emerald-200">
					{#if isProcessingPayment && paymentAttempted}
						<Card.Header class="text-center">
							<div
								class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-100"
							>
								<div
									class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-amber-600"
								></div>
							</div>
							<Card.Title class="text-2xl font-bold">Processing Payment</Card.Title>
							<Card.Description class="mt-2 text-base">
								Your booking is confirmed. We're processing your payment — this should only take a
								moment.
							</Card.Description>
						</Card.Header>
					{:else}
						<Card.Header class="text-center">
							<div
								class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full {isRequested
									? 'bg-amber-100'
									: 'bg-emerald-100'}"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-8 w-8 {isRequested ? 'text-amber-600' : 'text-emerald-600'}"
									viewBox="0 0 20 20"
									fill="currentColor"
								>
									<path
										fill-rule="evenodd"
										d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
										clip-rule="evenodd"
									/>
								</svg>
							</div>
							<Card.Title class="text-2xl font-bold"
								>{isRequested ? 'Booking Requested' : 'Booking Confirmed'}</Card.Title
							>
							<Card.Description class="mt-2 text-base">
								{isRequested
									? "Your booking has been submitted and is awaiting approval. We'll notify you once it's confirmed."
									: 'Your appointment has been booked successfully.'}
							</Card.Description>
						</Card.Header>
					{/if}
					<Card.Content class="space-y-6">
						{#if !(isProcessingPayment && paymentAttempted)}
							<div class="rounded-lg border border-gray-200 bg-gray-50 p-6">
								<div class="mb-4 flex items-center justify-between">
									<span class="text-sm font-medium text-gray-500">Confirmation Number</span>
									<span class="font-mono text-lg font-bold text-gray-900"
										>{confirmedBooking.id}</span
									>
								</div>
								<div class="grid gap-4 md:grid-cols-2">
									<div>
										<div class="text-xs text-gray-500">Date</div>
										<div class="font-medium">{dateStr}</div>
									</div>
									<div>
										<div class="text-xs text-gray-500">Time</div>
										<div class="font-medium">{timeStr}</div>
									</div>
									<div>
										<div class="text-xs text-gray-500">Duration</div>
										<div class="font-medium">{getTotalDuration()} minutes (estimated)</div>
									</div>
									<div>
										<div class="text-xs text-gray-500">Status</div>
										<div class="font-medium">
											<span
												class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {isRequested
													? 'bg-amber-100 text-amber-800'
													: 'bg-emerald-100 text-emerald-800'}"
											>
												{isRequested ? 'Pending Approval' : 'Confirmed'}
											</span>
										</div>
									</div>
								</div>
							</div>

<div class="rounded-lg border border-gray-200 bg-gray-50 p-6">
								<h4 class="mb-3 text-sm font-semibold text-gray-600 uppercase">Services</h4>
								<div class="space-y-2">
									{#each selectedServices as service (service.id)}
										<div class="flex justify-between text-sm">
											<span>{service.name}</span>
											<span class="text-gray-600"
												>{service.duration_minutes} min • £{service.price}</span
											>
										</div>
									{/each}
									<div class="border-t pt-2">
										{#if discountPreview?.eligible}
											{#each discountPreview.discounts as d}
												<div class="flex justify-between text-sm text-gray-600">
													<span>{d.name}</span>
													<span>-£{d.amount.toFixed(2)}</span>
												</div>
											{/each}
											<div class="flex justify-between font-semibold text-emerald-700">
												<span>Estimated Total After Discount</span>
												<span>£{discountPreview.discounted_total.toFixed(2)}</span>
											</div>
										{:else}
											<div class="flex justify-between font-semibold">
												<span>Total (estimated)</span>
												<span
													>£{getTotalPrice()}{#if vatRegistered}
														<span class="text-xs font-normal text-gray-400">incl. VAT</span
														>{/if}</span
												>
											</div>
										{/if}
									</div>
								</div>
							</div>

{#if isRequested}
								<div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
									<p class="text-sm text-amber-800">
										<strong>Please note:</strong> Because you included special requests, the cost
										and duration shown are estimates. We may adjust these after reviewing your
										requirements. You'll receive
										{authStore.isAuthenticated ? ' a notification' : ' an email'} once your booking is
										approved.
									</p>
								</div>
							{/if}

{#if authStore.isAuthenticated && authStore.currentUser?.role !== 'admin' && authStore.currentUser?.role !== 'guest'}
								{#if depositPaid}
									<div class="rounded-lg border border-emerald-200 bg-emerald-50 p-6 text-center">
										<div
											class="mb-2 inline-flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100"
										>
											<svg class="h-5 w-5 text-emerald-600" viewBox="0 0 20 20" fill="currentColor"
												><path
													fill-rule="evenodd"
													d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
													clip-rule="evenodd"
												/></svg
											>
										</div>
										<h3 class="text-lg font-semibold text-emerald-800">Deposit Paid</h3>
										<p class="mt-1 text-emerald-700">
											Your deposit of <strong>£{calculateDepositAmount().toFixed(2)}</strong> has been
											paid successfully. See you at your appointment!
										</p>
									</div>
								{:else if depositRequired}
									<div class="rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
										<h3 class="mb-2 text-lg font-semibold text-amber-800">Deposit Not Paid</h3>
										<p class="mb-4 text-amber-700">
											Your booking is confirmed but the deposit of <strong
												>£{calculateDepositAmount().toFixed(2)}</strong
											>
											was not paid. If the deposit remains unpaid within 24 hours of your appointment,
											the slot may be released and the booking could be cancelled or rebooked by someone
											else.
										</p>
										<p class="mb-4 text-xs text-amber-600">
											<PolicyPopover>
												{#snippet trigger()}
													<span class="underline">Read our cancellation policy →</span>
												{/snippet}
											</PolicyPopover>
										</p>
										<Button
											onclick={() => (showPayEarlyModal = true)}
											class="bg-amber-600 text-white hover:bg-amber-700"
										>
											Pay Deposit Now
										</Button>
									</div>
								{:else}
									<div class="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center">
										<h3 class="mb-2 text-lg font-semibold">Pay on the Day</h3>
										<p class="mb-4 text-gray-600">
											You can pay when you arrive, or pay ahead of time to speed things up.
										</p>
										<Button
											onclick={() => (showPayEarlyModal = true)}
											class="bg-emerald-600 text-white hover:bg-emerald-700"
										>
											Pay Early
										</Button>
									</div>
								{/if}
							{/if}
						{/if}
					</Card.Content>
					<Card.Footer class="flex justify-center">
						<Button
							onclick={() => (window.location.href = authStore.isAuthenticated ? '/schedule' : '/')}
							class="w-full"
						>
							{authStore.isAuthenticated ? 'View My Bookings' : 'Return Home'}
						</Button>
					</Card.Footer>
				</Card.Root>
			{:else if depositRequired}
				<Card.Root>
					<Card.Header>
						<Card.Title>Pay Your Deposit</Card.Title>
						<Card.Description>
							A deposit of <span class="font-semibold">£{calculateDepositAmount()}</span> is required
							to secure your appointment.
						</Card.Description>
					</Card.Header>
					<Card.Content class="space-y-6">
						<BookingSummary
							services={selectedServices}
							date={selectedDate}
							time={selectedTime}
							customer={authStore.isAuthenticated
								? {
										firstName: authStore.currentUser?.firstName ?? '',
										lastName: authStore.currentUser?.lastName ?? '',
										email: authStore.currentUser?.email ?? '',
										phone: authStore.currentUser?.phone ?? '',
										specialRequests: customerInfo.specialRequests
									}
								: customerInfo}
							showCustomer={true}
						/>

<div class="rounded-lg border border-gray-200 bg-white p-6">
							<h3 class="mb-4 text-xl font-semibold">Pay Deposit</h3>

{#if authStore.isAuthenticated}
								{#if paymentMethodsLoading}
									<div class="py-4 text-center text-gray-500">Loading payment methods...</div>
								{:else if paymentMethods.length > 0}
									<div class="mb-6">
										<h4 class="mb-3 text-sm font-medium text-gray-700">Saved Cards</h4>
										<div class="space-y-3">
											{#each paymentMethods as method (method.id)}
												<div
													class="flex items-center justify-between rounded-lg border border-gray-200 p-3 {selectedPaymentMethod ===
													method.id
														? 'border-primary bg-primary/5'
														: ''}"
												>
													<div class="flex items-center gap-3">
														<div
															class="flex h-10 w-14 items-center justify-center rounded bg-gray-100 text-xs font-medium"
														>
															{method.brand}
														</div>
														<div class="text-sm">
															<span class="font-mono">**** {method.last4}</span>
															<span class="ml-2 text-gray-500">
																{formatCardExpiry(method.expiry_month, method.expiry_year)}
															</span>
														</div>
													</div>
													<Button
														size="sm"
														variant={selectedPaymentMethod === method.id ? 'default' : 'outline'}
														onclick={() => {
															selectedPaymentMethod = method.id;
															showNewCardForm = false;
														}}
													>
														{selectedPaymentMethod === method.id ? 'Selected' : 'Use this card'}
													</Button>
												</div>
											{/each}
										</div>
									</div>
								{/if}

{#if !showNewCardForm}
									<Button
										variant="outline"
										class="mb-6"
										onclick={() => {
											showNewCardForm = true;
											selectedPaymentMethod = null;
										}}
									>
										+ Add new card
									</Button>
								{/if}
							{/if}

{#if showNewCardForm || !authStore.isAuthenticated}
								<CardInput
									bind:cardNumber={newCardNumber}
									bind:cardExpiry={newCardExpiry}
									bind:cardCVC={newCardCVC}
									disabled={isProcessingPayment}
								/>
							{/if}

<div class="flex items-center justify-between border-t pt-4">
								<Button variant="ghost" onclick={prevStep}>Back</Button>
								<Button
									disabled={isProcessingPayment || !depositCardFormValid}
									onclick={() => processPayment(calculateDepositAmount())}
									class="bg-primary text-primary-foreground"
								>
									{isProcessingPayment
										? 'Processing...'
										: `Pay Deposit £${calculateDepositAmount()}`}
								</Button>
							</div>
						</div>
					</Card.Content>
				</Card.Root>
			{/if}
		{/if}

{#if showPayEarlyModal && confirmedBooking}
			{@const bk = confirmedBooking}
			<UserPaymentModal
				booking={{
					id: bk.id,
					status: bk.status as BookingStatus,
					start_time: bk.start_time,
					notes: bk.notes,
					services: selectedServices.map((s) => ({
						booking_id: bk.id,
						service_id: s.id,
						service_name: s.name,
						price: s.price,
						duration_minutes: s.duration_minutes
					})) as BookingService[],
					total_amount: bk.total_amount,
					amount_paid: bk.amount_paid,
					amount_due: bk.amount_due,
					deposit_required: bk.deposit_required,
					deposit_paid: bk.deposit_paid,
					payments: bk.payments,
					duration_minutes: bk.duration_minutes,
					created_at: new SvelteDate().toISOString(),
					updated_at: new SvelteDate().toISOString()
				}}
				onClose={() => (showPayEarlyModal = false)}
				onComplete={() => {
					showPayEarlyModal = false;
				}}
				canSaveCards={authStore.isAuthenticated}
			/>
		{/if}
	{/if}
</div>