popertots
e0f22e5c5c
- Convert HTML comments in script sections to eslint-disable-next-line - Fix err->_err references in catch blocks across 8 files - Fix required→_required and onclose→_onclose prop mismatches - Revert BookingCreateModal.svelte from no-unused-vars agent damage - Fix broken regex in account page - Fix .writable (not in Svelte 5 stable) back to + - Fix NavBar dynamic href links with proper eslint-disable
2292 lines
73 KiB
Svelte
2292 lines
73 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as Card from '$lib/components/ui/card/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { EmailInput } from '$lib/components/ui/email-input/index.js';
|
|
import { Label } from '$lib/components/ui/label/index.js';
|
|
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
|
import CharCounter from '$lib/components/ui/CharCounter.svelte';
|
|
import { Separator } from '$lib/components/ui/separator/index.js';
|
|
import { PhoneInput } from '$lib/components/ui/phone-input/index.js';
|
|
import { isValidUKPhone, toE164UK } from '$lib/utils/phone';
|
|
// INTENTIONAL: We use the browser's local timezone (getLocalTimeZone) because Crussell is a UK-only
|
|
// salon app. All customers are physically in the UK and book UK appointment slots. We do NOT
|
|
// auto-adjust for international timezones — the slot time shown is the actual UK salon time.
|
|
// Cloudflare geo-blocking prevents non-UK access. BST/GMT transitions are handled automatically:
|
|
// formatLocalDateTime converts wall-clock time to UTC using the correct DST offset for the
|
|
// target date (via @internationalized/date's CalendarDate.toDate which applies the target
|
|
// date's timezone rules, not the current date's). The backend stores all timestamps as
|
|
// TIMESTAMPTZ (UTC) and converts to Europe/London for display. This ensures a booking at
|
|
// "10am June 15" stays at 10am BST regardless of when the booking was made.
|
|
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
|
|
import { goto } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import { authStore } from '$lib/stores/auth.svelte';
|
|
import { ensureBusinessInfo, getBusinessInfo } from '$lib/stores/businessInfo.svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
import { SvelteDate } from 'svelte/reactivity';
|
|
|
|
// Components
|
|
import BookingActions from '$lib/components/booking/BookingActions.svelte';
|
|
import BookingSummary from '$lib/components/booking/BookingSummary.svelte';
|
|
import StepIndicator from '$lib/components/booking/StepIndicator.svelte';
|
|
import DatePicker from '$lib/components/booking/DatePicker.svelte';
|
|
import TimeSlotPicker from '$lib/components/booking/TimeSlotPicker.svelte';
|
|
import ServiceSelector from '$lib/components/booking/ServiceSelector.svelte';
|
|
import CardInput from '$lib/components/payments/CardInput.svelte';
|
|
import PolicyPopover from '$lib/components/ui/policyPopover.svelte';
|
|
import { POLICY } from '$lib/constants/policy';
|
|
import UserPaymentModal from '$lib/components/payments/UserPaymentModal.svelte';
|
|
import {
|
|
extractBookedSlots,
|
|
getLunchProtectionForSlots,
|
|
} from '$lib/lunchProtection';
|
|
import { formatLocalDateTime, getLondonTodayCalendarDate } from '$lib/utils/timeSlots';
|
|
|
|
import type {
|
|
Service,
|
|
CustomerInfo,
|
|
WorkingHoursDay,
|
|
AvailableHoursDay,
|
|
BookingService,
|
|
BookingStatus,
|
|
Payment
|
|
} from '$lib/types/booking';
|
|
|
|
// =============== State Management ===============
|
|
let currentStep = $state<number>(0);
|
|
let authReady = $state(false);
|
|
|
|
// Wait for auth store to finish initializing before deciding which step to show.
|
|
// This prevents a flash of the login prompt on SSR + hydration — the skeleton
|
|
// displays while auth checks are pending, then the correct screen appears.
|
|
$effect(() => {
|
|
if (authStore.hasLoaded && !authReady) {
|
|
authReady = true;
|
|
currentStep = authStore.isAuthenticated ? 1 : 0;
|
|
}
|
|
});
|
|
let selectedServices = $state<Service[]>([]);
|
|
let selectedDate = $state<CalendarDate | undefined>(undefined);
|
|
let selectedTime = $state<string | null>(null);
|
|
const customerInfo = $state<CustomerInfo>({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
specialRequests: ''
|
|
});
|
|
let _isSubmitting = $state(false);
|
|
let idempotencyKey = $state<string>('');
|
|
|
|
// =============== Payment State ===============
|
|
let userDepositsRequired = $state<number>(0);
|
|
let hasActiveBooking = $state<boolean>(false);
|
|
let _activeBookingCheckDone = $state<boolean>(false);
|
|
let paymentMethods = $state<
|
|
Array<{ id: string; brand: string; last4: string; expiry_month: number; expiry_year: number }>
|
|
>([]);
|
|
let paymentMethodsLoading = $state(false);
|
|
let selectedPaymentMethod = $state<string | null>(null);
|
|
let showNewCardForm = $state(false);
|
|
let isProcessingPayment = $state(false);
|
|
|
|
// New card form fields
|
|
let newCardNumber = $state('');
|
|
let newCardExpiry = $state('');
|
|
let newCardCVC = $state('');
|
|
const _saveCardForFuture = $state(false);
|
|
|
|
// Payment flow state
|
|
let depositPaid = $state(false);
|
|
let _showPaymentForm = $state(false);
|
|
|
|
const depositCardFormValid = $derived(
|
|
selectedPaymentMethod !== null ||
|
|
(showNewCardForm &&
|
|
newCardNumber.replace(/\s/g, '').length >= 13 &&
|
|
/^\d{2}\/\d{2}$/.test(newCardExpiry) &&
|
|
newCardCVC.length >= 3)
|
|
);
|
|
|
|
// VAT registration status from public business info (via shared store)
|
|
const vatRegistered = $derived(getBusinessInfo()?.is_vat_registered ?? false);
|
|
|
|
// Email existence check (guest flow only)
|
|
let emailChecking = $state(false);
|
|
let emailSuggestion = $state<string | null>(null);
|
|
let emailError = $state('');
|
|
const emailFormatValid = $derived(
|
|
!customerInfo.email ||
|
|
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(customerInfo.email)
|
|
);
|
|
const allGuestFieldsValid = $derived(
|
|
customerInfo.firstName &&
|
|
customerInfo.lastName &&
|
|
customerInfo.email &&
|
|
emailFormatValid &&
|
|
customerInfo.phone &&
|
|
isValidUKPhone(customerInfo.phone)
|
|
);
|
|
|
|
async function checkEmailExists(email: string) {
|
|
if (!email || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
|
|
emailSuggestion = null;
|
|
return;
|
|
}
|
|
// Don't check unless ALL guest fields have valid input
|
|
if (!allGuestFieldsValid) {
|
|
emailSuggestion = null;
|
|
return;
|
|
}
|
|
|
|
emailChecking = true;
|
|
try {
|
|
// Send all 4 fields to enable the backend to match beyond just email
|
|
const params = new URLSearchParams({
|
|
email: email.toLowerCase(),
|
|
firstName: customerInfo.firstName,
|
|
lastName: customerInfo.lastName,
|
|
phone: toE164UK(customerInfo.phone) ?? customerInfo.phone
|
|
});
|
|
const resp = await fetch(`/api/check-email?${params}`);
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
emailSuggestion = data.suggestion ?? null;
|
|
}
|
|
} catch {
|
|
// Network error - silently ignore, don't block booking
|
|
emailSuggestion = null;
|
|
} finally {
|
|
emailChecking = false;
|
|
}
|
|
}
|
|
|
|
let emailCheckTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
function debouncedEmailCheck() {
|
|
if (emailCheckTimeout) clearTimeout(emailCheckTimeout);
|
|
if (allGuestFieldsValid) {
|
|
emailCheckTimeout = setTimeout(() => checkEmailExists(customerInfo.email), 500);
|
|
}
|
|
}
|
|
|
|
// Confirmation state
|
|
let confirmedBooking = $state<{
|
|
id: string;
|
|
status: string;
|
|
start_time: string;
|
|
notes: string;
|
|
deposit_required: boolean;
|
|
deposit_paid: boolean;
|
|
deposit_amount: number;
|
|
amount_paid: number;
|
|
amount_due: number;
|
|
payments: Payment[];
|
|
total_amount: number;
|
|
duration_minutes: number;
|
|
} | null>(null);
|
|
|
|
let showPayEarlyModal = $state(false);
|
|
let discountPreview = $state<{
|
|
eligible: boolean;
|
|
discounts: Array<{ source: string; name: string; percent: number; amount: number }>;
|
|
original_total: number;
|
|
discounted_total: number;
|
|
} | null>(null);
|
|
|
|
// =============== Payment Functions ===============
|
|
async function fetchUserDepositsRequired() {
|
|
if (!authStore.isAuthenticated) {
|
|
userDepositsRequired = 0;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/user/profile', {
|
|
headers: authStore.currentToken ? { Authorization: `Bearer ${authStore.currentToken}` } : {}
|
|
});
|
|
if (response.ok) {
|
|
const user = await response.json();
|
|
userDepositsRequired = user.deposits_required ?? 0;
|
|
}
|
|
} catch (_err) {
|
|
userDepositsRequired = 0;
|
|
}
|
|
}
|
|
|
|
async function fetchActiveBookingStatus() {
|
|
if (!authStore.isAuthenticated) {
|
|
hasActiveBooking = false;
|
|
_activeBookingCheckDone = true;
|
|
return;
|
|
}
|
|
|
|
_activeBookingCheckDone = false;
|
|
try {
|
|
// Check for pending bookings
|
|
const pendingResp = await fetch('/api/bookings?status=pending&perPage=1', {
|
|
headers: authStore.currentToken ? { Authorization: `Bearer ${authStore.currentToken}` } : {}
|
|
});
|
|
if (pendingResp.ok) {
|
|
const data = await pendingResp.json();
|
|
if (data.bookings && data.bookings.length > 0) {
|
|
hasActiveBooking = true;
|
|
_activeBookingCheckDone = true;
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Check for confirmed bookings
|
|
const confirmedResp = await fetch('/api/bookings?status=confirmed&perPage=1', {
|
|
headers: authStore.currentToken ? { Authorization: `Bearer ${authStore.currentToken}` } : {}
|
|
});
|
|
if (confirmedResp.ok) {
|
|
const data = await confirmedResp.json();
|
|
hasActiveBooking = data.bookings && data.bookings.length > 0;
|
|
}
|
|
} catch (_err) {
|
|
hasActiveBooking = false;
|
|
} finally {
|
|
_activeBookingCheckDone = true;
|
|
}
|
|
}
|
|
|
|
|
|
function calculateDepositRequired(): boolean {
|
|
if (!selectedDate || !selectedTime) return false;
|
|
|
|
// Deposit required if user has deposits_required > 0, regardless of booking window
|
|
return userDepositsRequired > 0;
|
|
}
|
|
|
|
function calculateDepositAmount(): number {
|
|
return Math.round(getTotalPrice() * 0.2 * 100) / 100;
|
|
}
|
|
|
|
async function fetchDiscountPreview() {
|
|
if (!confirmedBooking?.id) return;
|
|
try {
|
|
const resp = await fetch(`/api/bookings/${confirmedBooking.id}/discount-preview`, {
|
|
headers: authStore.currentToken
|
|
? { Authorization: `Bearer ${authStore.currentToken}` }
|
|
: undefined
|
|
});
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
// Only show time-based (auto-apply) discounts on the confirmation screen
|
|
if (data.eligible && data.discounts?.length > 0) {
|
|
discountPreview = data;
|
|
}
|
|
}
|
|
} catch (_err) {
|
|
console.error('Failed to fetch discount preview:', _err);
|
|
}
|
|
}
|
|
|
|
async function processPayment(amount: number) {
|
|
isProcessingPayment = true;
|
|
paymentAttempted = false;
|
|
try {
|
|
await submitAndProceed();
|
|
if (!confirmedBooking) {
|
|
toast.error('Booking was not created. Please try again.');
|
|
return;
|
|
}
|
|
const bookingId = confirmedBooking.id;
|
|
const amountCents = Math.round(amount * 100);
|
|
|
|
const body: Record<string, unknown> = {
|
|
payment_type: 'deposit',
|
|
amount: amountCents,
|
|
idempotency_key: crypto.randomUUID?.() ?? Date.now().toString()
|
|
};
|
|
|
|
if (selectedPaymentMethod) {
|
|
body.card_id = selectedPaymentMethod;
|
|
} else {
|
|
const rawNumber = newCardNumber.replace(/\s/g, '');
|
|
if (rawNumber.length >= 13) {
|
|
body.new_card_token = rawNumber;
|
|
}
|
|
}
|
|
|
|
paymentAttempted = true;
|
|
|
|
const response = await fetch(`/api/bookings/${bookingId}/payment`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(authStore.currentToken ? { Authorization: `Bearer ${authStore.currentToken}` } : {})
|
|
},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (response.ok) {
|
|
depositPaid = true;
|
|
confirmedBooking.deposit_paid = true;
|
|
confirmedBooking.amount_paid = (confirmedBooking.amount_paid || 0) + amount;
|
|
confirmedBooking.amount_due = Math.max(0, (confirmedBooking.amount_due || 0) - amount);
|
|
toast.success('Payment successful!');
|
|
} else {
|
|
const text = await response.text();
|
|
toast.warning(text || 'Payment failed — you can pay again from your booking details.');
|
|
}
|
|
} catch (_err) {
|
|
toast.error(
|
|
'An error occurred. Your booking may still be confirmed — check your appointments.'
|
|
);
|
|
} finally {
|
|
isProcessingPayment = false;
|
|
}
|
|
}
|
|
|
|
let paymentAttempted = $state(false);
|
|
|
|
|
|
|
|
|
|
function formatCardExpiry(month: number, year: number): string {
|
|
return `${String(month).padStart(2, '0')}/${year.toString().slice(-2)}`;
|
|
}
|
|
|
|
|
|
|
|
// Fetch user deposit and active booking status when step 1 is reached
|
|
$effect(() => {
|
|
if (currentStep === 1 && authStore.isAuthenticated) {
|
|
fetchUserDepositsRequired();
|
|
fetchActiveBookingStatus();
|
|
}
|
|
});
|
|
|
|
// =============== Slot Reservation System ===============
|
|
let _reservationId = $state<string | null>(null);
|
|
let reservationExpiresAt = $state<Date | null>(null);
|
|
let reservationCountdown = $state<string>('');
|
|
let reservationExpired = $state(false);
|
|
let _isReserving = $state(false);
|
|
|
|
// =============== Slot Reservation Functions ===============
|
|
async function reserveSlot() {
|
|
_isReserving = true;
|
|
try {
|
|
if (!selectedDate || !selectedTime) {
|
|
toast.error('Please select a date and time');
|
|
return false;
|
|
}
|
|
|
|
const [hours, minutes] = selectedTime.split(':').map(Number);
|
|
const bookingDate = selectedDate.toDate(getLocalTimeZone());
|
|
bookingDate.setHours(hours, minutes, 0, 0);
|
|
const startTimeISO = formatLocalDateTime(bookingDate);
|
|
const serviceIds = selectedServices.map((s) => s.id);
|
|
|
|
const response = await fetch('/api/bookings/reserve', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ start_time: startTimeISO, service_ids: serviceIds })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const _errorText = await response.text();
|
|
if (response.status === 429) {
|
|
toast.error('Too many active reservations. Please wait or log in.');
|
|
} else if (response.status === 409) {
|
|
toast.error('This time slot is no longer available. Please choose a different time.');
|
|
await refreshAvailableHours();
|
|
} else {
|
|
toast.error('Failed to reserve slot. Please try again.');
|
|
}
|
|
return false;
|
|
}
|
|
|
|
const data = await response.json();
|
|
_reservationId = data.id;
|
|
reservationExpiresAt = new Date(data.expires_at);
|
|
reservationExpired = false;
|
|
startCountdown();
|
|
return true;
|
|
} catch (_error) {
|
|
toast.error('Network error while reserving slot.');
|
|
return false;
|
|
} finally {
|
|
_isReserving = false;
|
|
}
|
|
}
|
|
|
|
function startCountdown() {
|
|
if (!reservationExpiresAt) return;
|
|
|
|
const updateCountdown = () => {
|
|
if (!reservationExpiresAt) {
|
|
reservationCountdown = '';
|
|
return;
|
|
}
|
|
|
|
const now = new SvelteDate();
|
|
const diff = reservationExpiresAt.getTime() - now.getTime();
|
|
|
|
if (diff <= 0) {
|
|
reservationCountdown = '00:00';
|
|
reservationExpired = true;
|
|
_reservationId = null;
|
|
reservationExpiresAt = null;
|
|
toast.error('Your reservation has expired. Please select a new time slot.');
|
|
return;
|
|
}
|
|
|
|
const minutes = Math.floor(diff / 60000);
|
|
const seconds = Math.floor((diff % 60000) / 1000);
|
|
reservationCountdown = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
};
|
|
|
|
updateCountdown();
|
|
const interval = setInterval(() => {
|
|
if (reservationExpired) {
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
updateCountdown();
|
|
}, 1000);
|
|
}
|
|
|
|
async function refreshAvailableHours() {
|
|
if (!selectedDate) return;
|
|
|
|
const monthKey = `${selectedDate.year}-${String(selectedDate.month).padStart(2, '0')}`;
|
|
delete availableHoursCache[monthKey];
|
|
await fetchHoursForMonth(selectedDate);
|
|
}
|
|
|
|
// =============== Services Management ===============
|
|
let services = $state<Service[]>([]);
|
|
let servicesLoading = $state(true);
|
|
|
|
async function fetchServices() {
|
|
servicesLoading = true;
|
|
try {
|
|
const response = await fetch('/api/services', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data: Service[] = await response.json();
|
|
// Sort: valid patch tests first (by name), then grayed out (by name)
|
|
const valid: Service[] = [];
|
|
const grayedOut: Service[] = [];
|
|
|
|
for (const service of data) {
|
|
if (service.patch_test_status === 'required' || service.patch_test_status === 'expired') {
|
|
grayedOut.push(service);
|
|
} else {
|
|
valid.push(service);
|
|
}
|
|
}
|
|
|
|
// Sort each group alphabetically
|
|
valid.sort((a, b) => a.name.localeCompare(b.name));
|
|
grayedOut.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
// Combine: valid first, then grayed out
|
|
services = [...valid, ...grayedOut];
|
|
} else {
|
|
toast.error('Failed to load services');
|
|
}
|
|
} catch (_err) {
|
|
toast.error('Network error loading services');
|
|
} finally {
|
|
servicesLoading = false;
|
|
}
|
|
}
|
|
|
|
// =============== Working Hours & Available Hours ===============
|
|
let workingHours = $state<Record<
|
|
string,
|
|
{ isOpen: boolean; startTime: string; endTime: string }
|
|
> | null>(null);
|
|
|
|
let availableHours = $state<Record<
|
|
string,
|
|
{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
|
|
> | null>(null);
|
|
|
|
let loadingWorkingHours = $state<boolean>(false);
|
|
let loadingAvailableHours = $state<boolean>(false);
|
|
|
|
const workingHoursCache: Record<
|
|
string,
|
|
Record<string, { isOpen: boolean; startTime: string; endTime: string }>
|
|
> = {};
|
|
|
|
const availableHoursCache: Record<
|
|
string,
|
|
Record<string, { isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }>
|
|
> = {};
|
|
|
|
// Initialize date boundaries
|
|
const today = getLondonTodayCalendarDate();
|
|
const minDate = today;
|
|
const maxDate = new SvelteDate(today.year, today.month - 1, today.day);
|
|
maxDate.setMonth(today.month - 1 + 6);
|
|
const maxCalendarDate = new CalendarDate(
|
|
maxDate.getFullYear(),
|
|
maxDate.getMonth() + 1,
|
|
maxDate.getDate()
|
|
);
|
|
|
|
let placeholder = $state<CalendarDate>(minDate);
|
|
let userNavigatedCalendar = $state(false);
|
|
let bookingFlowAutoSelectDone = $state(false);
|
|
|
|
$effect(() => {
|
|
fetchServices();
|
|
ensureBusinessInfo();
|
|
});
|
|
|
|
// Track which months are currently being fetched (prevents duplicate requests)
|
|
const loadingMonths: Record<string, boolean> = {};
|
|
|
|
// Preload current + next month on first render; subsequent months fetched individually
|
|
let initialLoadDone = $state(false);
|
|
$effect(() => {
|
|
if (!initialLoadDone) {
|
|
// Pre-seed cache for current + next month
|
|
for (let i = 0; i < 2; i++) {
|
|
let mYear = placeholder.year;
|
|
let mMonth = placeholder.month + i;
|
|
while (mMonth > 12) {
|
|
mMonth -= 12;
|
|
mYear++;
|
|
}
|
|
const key = `${mYear}-${String(mMonth).padStart(2, '0')}`;
|
|
if (!(key in workingHoursCache)) {
|
|
workingHoursCache[key] = null as unknown as Record<
|
|
string,
|
|
{ isOpen: boolean; startTime: string; endTime: string }
|
|
>;
|
|
availableHoursCache[key] = null as unknown as Record<
|
|
string,
|
|
{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
|
|
>;
|
|
loadingMonths[key] = true;
|
|
}
|
|
}
|
|
fetchHoursRange(placeholder, 2);
|
|
initialLoadDone = true;
|
|
}
|
|
});
|
|
|
|
// Safety net: fetch silently when navigating to an uncached month
|
|
// (uses skipLoadingFlags=true to prevent layout shift / scroll snap)
|
|
$effect(() => {
|
|
const monthKey = `${placeholder.year}-${String(placeholder.month).padStart(2, '0')}`;
|
|
if (initialLoadDone && !(monthKey in workingHoursCache)) {
|
|
fetchHoursForMonth(placeholder, true);
|
|
}
|
|
});
|
|
|
|
// Data-driven auto-selection: auto-select the first available date when data loads
|
|
$effect(() => {
|
|
if (
|
|
workingHours &&
|
|
availableHours &&
|
|
!selectedDate &&
|
|
selectedServices.length > 0 &&
|
|
!userNavigatedCalendar &&
|
|
!bookingFlowAutoSelectDone
|
|
) {
|
|
bookingFlowAutoSelectDone = true;
|
|
|
|
const currentDate = new SvelteDate(getLondonTodayCalendarDate().toString() + 'T00:00:00');
|
|
const maxDateJs = new SvelteDate(
|
|
maxCalendarDate.year,
|
|
maxCalendarDate.month - 1,
|
|
maxCalendarDate.day
|
|
);
|
|
|
|
const daysDifference = Math.floor(
|
|
(maxDateJs.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24)
|
|
);
|
|
const daysToCheck = Math.min(daysDifference, 180);
|
|
|
|
for (let i = 1; i <= daysToCheck; i++) {
|
|
const nextDate = new SvelteDate(currentDate);
|
|
nextDate.setDate(currentDate.getDate() + i);
|
|
const dateStr = nextDate.toLocaleDateString('en-CA', { timeZone: 'Europe/London' });
|
|
|
|
if (workingHours[dateStr]?.isOpen) {
|
|
const calDate = new CalendarDate(
|
|
nextDate.getFullYear(),
|
|
nextDate.getMonth() + 1,
|
|
nextDate.getDate()
|
|
);
|
|
if (!isDateUnavailable(calDate)) {
|
|
selectedDate = calDate;
|
|
if (!userNavigatedCalendar) {
|
|
placeholder = new CalendarDate(nextDate.getFullYear(), nextDate.getMonth() + 1, 1);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
const tomorrowCal = getLondonTodayCalendarDate();
|
|
const tomorrowDate = new CalendarDate(
|
|
tomorrowCal.year,
|
|
tomorrowCal.month,
|
|
tomorrowCal.day + 1
|
|
);
|
|
selectedDate = tomorrowDate;
|
|
if (!userNavigatedCalendar) {
|
|
placeholder = new CalendarDate(tomorrowCal.year, tomorrowCal.month, 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
async function fetchHoursRange(startDate: CalendarDate, months: number) {
|
|
// Calculate end month manually (CalendarDate is immutable)
|
|
let endYear = startDate.year;
|
|
let endMonth = startDate.month + months - 1;
|
|
while (endMonth > 12) {
|
|
endMonth -= 12;
|
|
endYear++;
|
|
}
|
|
const endMonthDate = new CalendarDate(endYear, endMonth, 1);
|
|
const daysInEndMonth = endMonthDate.calendar.getDaysInMonth(endMonthDate);
|
|
|
|
const startStr = startDate.toString();
|
|
const endStr = `${endYear}-${String(endMonth).padStart(2, '0')}-${String(daysInEndMonth).padStart(2, '0')}`;
|
|
|
|
loadingWorkingHours = true;
|
|
loadingAvailableHours = true;
|
|
|
|
try {
|
|
const [whRes, ahRes] = await Promise.all([
|
|
fetch(`/api/scheduling/working-hours?start=${startStr}&end=${endStr}`),
|
|
fetch(`/api/scheduling/available-hours?start=${startStr}&end=${endStr}`)
|
|
]);
|
|
if (!whRes.ok || !ahRes.ok) {
|
|
throw new Error(`HTTP error! wh: ${whRes.status}, ah: ${ahRes.status}`);
|
|
}
|
|
|
|
const whData: Array<WorkingHoursDay> = await whRes.json();
|
|
const ahData: Array<AvailableHoursDay> = await ahRes.json();
|
|
|
|
const whMap: Record<string, { isOpen: boolean; startTime: string; endTime: string }> = {};
|
|
whData.forEach((d) => {
|
|
whMap[d.date] = { isOpen: d.isOpen, startTime: d.startTime, endTime: d.endTime };
|
|
});
|
|
|
|
const ahMap: Record<
|
|
string,
|
|
{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
|
|
> = {};
|
|
ahData.forEach((d) => {
|
|
ahMap[d.date] = { isOpen: d.isOpen, slots: d.slots };
|
|
});
|
|
|
|
// Cache by month key
|
|
for (let i = 0; i < months; i++) {
|
|
let mYear = startDate.year;
|
|
let mMonth = startDate.month + i;
|
|
while (mMonth > 12) {
|
|
mMonth -= 12;
|
|
mYear++;
|
|
}
|
|
const key = `${mYear}-${String(mMonth).padStart(2, '0')}`;
|
|
workingHoursCache[key] = whMap;
|
|
availableHoursCache[key] = ahMap;
|
|
delete loadingMonths[key];
|
|
}
|
|
|
|
// MERGE instead of replace — preserves data from previously loaded months
|
|
workingHours = { ...workingHours, ...whMap };
|
|
availableHours = { ...availableHours, ...ahMap };
|
|
} catch (_error) {
|
|
// Clean up loadingMonths for the range
|
|
for (let i = 0; i < months; i++) {
|
|
let mYear = startDate.year;
|
|
let mMonth = startDate.month + i;
|
|
while (mMonth > 12) {
|
|
mMonth -= 12;
|
|
mYear++;
|
|
}
|
|
const key = `${mYear}-${String(mMonth).padStart(2, '0')}`;
|
|
delete loadingMonths[key];
|
|
}
|
|
if (!selectedDate) {
|
|
selectedDate = minDate;
|
|
}
|
|
} finally {
|
|
loadingWorkingHours = false;
|
|
loadingAvailableHours = false;
|
|
}
|
|
}
|
|
|
|
async function fetchHoursForMonth(date: CalendarDate, skipLoadingFlags = false) {
|
|
const monthKey = `${date.year}-${String(date.month).padStart(2, '0')}`;
|
|
|
|
// Only use cache if the value is truthy (not a pre-seeded null placeholder)
|
|
if (workingHoursCache[monthKey] && availableHoursCache[monthKey]) {
|
|
// MERGE instead of replace — preserves data from other loaded months
|
|
workingHours = { ...workingHours, ...workingHoursCache[monthKey] };
|
|
availableHours = { ...availableHours, ...availableHoursCache[monthKey] };
|
|
return;
|
|
}
|
|
|
|
// Prevent duplicate concurrent requests for the same month
|
|
if (loadingMonths[monthKey]) return;
|
|
loadingMonths[monthKey] = true;
|
|
|
|
if (!skipLoadingFlags) {
|
|
loadingWorkingHours = true;
|
|
loadingAvailableHours = true;
|
|
}
|
|
|
|
try {
|
|
const startOfMonth = new CalendarDate(date.year, date.month, 1);
|
|
const endOfMonth = new CalendarDate(
|
|
date.year,
|
|
date.month,
|
|
date.calendar.getDaysInMonth(date)
|
|
);
|
|
|
|
const startStr = startOfMonth.toString();
|
|
const endStr = endOfMonth.toString();
|
|
|
|
// Fetch working hours
|
|
const workingHoursResponse = await fetch(
|
|
`/api/scheduling/working-hours?start=${startStr}&end=${endStr}`
|
|
);
|
|
if (!workingHoursResponse.ok) {
|
|
throw new Error(`HTTP error! status: ${workingHoursResponse.status}`);
|
|
}
|
|
|
|
const workingHoursData: Array<WorkingHoursDay> = await workingHoursResponse.json();
|
|
const workingHoursMap: Record<
|
|
string,
|
|
{ isOpen: boolean; startTime: string; endTime: string }
|
|
> = {};
|
|
|
|
workingHoursData.forEach((day) => {
|
|
workingHoursMap[day.date] = {
|
|
isOpen: day.isOpen,
|
|
startTime: day.startTime,
|
|
endTime: day.endTime
|
|
};
|
|
});
|
|
|
|
workingHoursCache[monthKey] = workingHoursMap;
|
|
workingHours = { ...workingHours, ...workingHoursMap };
|
|
|
|
// Fetch available hours
|
|
const availableHoursResponse = await fetch(
|
|
`/api/scheduling/available-hours?start=${startStr}&end=${endStr}`
|
|
);
|
|
if (!availableHoursResponse.ok) {
|
|
throw new Error(`HTTP error! status: ${availableHoursResponse.status}`);
|
|
}
|
|
|
|
const availableHoursData: Array<AvailableHoursDay> = await availableHoursResponse.json();
|
|
const availableHoursMap: Record<
|
|
string,
|
|
{ isOpen: boolean; slots: Array<{ startTime: string; endTime: string }> }
|
|
> = {};
|
|
|
|
availableHoursData.forEach((day) => {
|
|
availableHoursMap[day.date] = {
|
|
isOpen: day.isOpen,
|
|
slots: day.slots
|
|
};
|
|
});
|
|
|
|
availableHoursCache[monthKey] = availableHoursMap;
|
|
availableHours = { ...availableHours, ...availableHoursMap };
|
|
} catch (_error) {
|
|
if (!selectedDate) {
|
|
selectedDate = minDate;
|
|
}
|
|
} finally {
|
|
delete loadingMonths[monthKey];
|
|
if (!skipLoadingFlags) {
|
|
loadingWorkingHours = false;
|
|
loadingAvailableHours = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============== Time Slot Generation ===============
|
|
function calculateEndTime(startTime: string, durationMinutes: number): string {
|
|
const [hours, minutes] = startTime.split(':').map(Number);
|
|
const date = new SvelteDate();
|
|
date.setHours(hours, minutes, 0, 0);
|
|
date.setMinutes(date.getMinutes() + durationMinutes);
|
|
const endHours = date.getHours().toString().padStart(2, '0');
|
|
const endMinutes = date.getMinutes().toString().padStart(2, '0');
|
|
return `${endHours}:${endMinutes}`;
|
|
}
|
|
|
|
function timeToMinutes(time: string): number {
|
|
const [hours, minutes] = time.split(':').map(Number);
|
|
return hours * 60 + minutes;
|
|
}
|
|
|
|
function calculatePreviousTime(time: string): string {
|
|
const [hours, minutes] = time.split(':').map(Number);
|
|
let totalMinutes = hours * 60 + minutes;
|
|
totalMinutes -= 15;
|
|
|
|
const prevHours = Math.floor(totalMinutes / 60);
|
|
const prevMinutes = totalMinutes % 60;
|
|
return `${String(prevHours).padStart(2, '0')}:${String(prevMinutes).padStart(2, '0')}`;
|
|
}
|
|
|
|
function generateAvailableTimeSlots(duration: number, date: CalendarDate | undefined): string[] {
|
|
if (!date || !workingHours || !availableHours) {
|
|
return [];
|
|
}
|
|
|
|
const dateStr = date.toString();
|
|
const dayWorkingHours = workingHours[dateStr];
|
|
const dayAvailableHours = availableHours[dateStr];
|
|
|
|
if (
|
|
!dayWorkingHours ||
|
|
!dayWorkingHours.isOpen ||
|
|
!dayAvailableHours ||
|
|
!dayAvailableHours.slots
|
|
) {
|
|
return [];
|
|
}
|
|
|
|
const slots: string[] = [];
|
|
const today = getLondonTodayCalendarDate();
|
|
const now = new Date();
|
|
const londonTimeStr = now.toLocaleTimeString('en-GB', {
|
|
timeZone: 'Europe/London',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
const [londonHours, londonMinutes] = londonTimeStr.split(':').map(Number);
|
|
const isToday = date.compare(today) === 0;
|
|
|
|
for (const slot of dayAvailableHours.slots) {
|
|
const [startHour, startMinute] = slot.startTime.split(':').map(Number);
|
|
const [endHour, endMinute] = slot.endTime.split(':').map(Number);
|
|
|
|
let startTotalMinutes = Math.ceil((startHour * 60 + startMinute) / 15) * 15;
|
|
const endTotalMinutes = endHour * 60 + endMinute;
|
|
|
|
if (isToday) {
|
|
const currentMinutes = londonHours * 60 + londonMinutes;
|
|
const minimumStartMinutes = Math.ceil((currentMinutes + 60) / 15) * 15;
|
|
startTotalMinutes = Math.max(startTotalMinutes, minimumStartMinutes);
|
|
}
|
|
|
|
for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
|
|
const slotEndMinutes = minutes + duration;
|
|
|
|
if (slotEndMinutes <= endTotalMinutes) {
|
|
const hour = Math.floor(minutes / 60);
|
|
const minute = minutes % 60;
|
|
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
|
|
slots.push(timeStr);
|
|
}
|
|
}
|
|
}
|
|
|
|
return slots;
|
|
}
|
|
|
|
function generateGroupedTimeSlots(
|
|
duration: number,
|
|
date: CalendarDate | undefined,
|
|
lunchProtectionMap: Map<
|
|
string,
|
|
{ isBlocked: boolean; showWarning: boolean; warningMessage?: string }
|
|
> = new Map()
|
|
): Array<{
|
|
type: 'available' | 'unavailable';
|
|
startTime: string;
|
|
endTime: string;
|
|
isGrouped?: boolean;
|
|
}> {
|
|
if (!date || !workingHours) {
|
|
return [];
|
|
}
|
|
|
|
const dateStr = date.toString();
|
|
const dayWorkingHours = workingHours[dateStr];
|
|
|
|
if (!dayWorkingHours || !dayWorkingHours.isOpen) {
|
|
return [];
|
|
}
|
|
|
|
const groupedSlots: Array<{
|
|
type: 'available' | 'unavailable';
|
|
startTime: string;
|
|
endTime: string;
|
|
isGrouped?: boolean;
|
|
}> = [];
|
|
const [startHour, startMinute] = dayWorkingHours.startTime.split(':').map(Number);
|
|
const [endHour, endMinute] = dayWorkingHours.endTime.split(':').map(Number);
|
|
|
|
let startTotalMinutes = startHour * 60 + startMinute;
|
|
const endTotalMinutes = endHour * 60 + endMinute;
|
|
|
|
const todayCal = getLondonTodayCalendarDate();
|
|
const now = new Date();
|
|
const londonTimeStr = now.toLocaleTimeString('en-GB', {
|
|
timeZone: 'Europe/London',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
const [londonHours, londonMinutes] = londonTimeStr.split(':').map(Number);
|
|
const isToday = date.compare(todayCal) === 0;
|
|
|
|
if (isToday) {
|
|
const currentMinutes = londonHours * 60 + londonMinutes;
|
|
const minimumStartMinutes = Math.ceil((currentMinutes + 60) / 15) * 15;
|
|
startTotalMinutes = Math.max(startTotalMinutes, minimumStartMinutes);
|
|
}
|
|
|
|
const availableSlots = generateAvailableTimeSlots(duration, date);
|
|
|
|
let currentUnavailableStart: string | null = null;
|
|
let lastAvailableEndTime: string | null = null;
|
|
|
|
for (let minutes = startTotalMinutes; minutes < endTotalMinutes; minutes += 15) {
|
|
const hour = Math.floor(minutes / 60);
|
|
const minute = minutes % 60;
|
|
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
|
|
|
|
const slotDateTime = date.toDate(getLocalTimeZone());
|
|
slotDateTime.setHours(hour, minute, 0, 0);
|
|
const hoursUntilSlot = (slotDateTime.getTime() - now.getTime()) / (1000 * 60 * 60);
|
|
const isBlockedByDepositAdvance =
|
|
userDepositsRequired > 0 && hoursUntilSlot < POLICY.DEPOSIT_ADVANCE_HOURS;
|
|
|
|
const isAvailable =
|
|
availableSlots.includes(timeStr) &&
|
|
!lunchProtectionMap.get(timeStr)?.isBlocked &&
|
|
!isBlockedByDepositAdvance;
|
|
|
|
if (isAvailable) {
|
|
if (currentUnavailableStart !== null) {
|
|
const groupEndTime = calculatePreviousTime(timeStr);
|
|
const unavailableStartTime = currentUnavailableStart || lastAvailableEndTime;
|
|
if (
|
|
unavailableStartTime &&
|
|
timeToMinutes(unavailableStartTime) < timeToMinutes(groupEndTime)
|
|
) {
|
|
groupedSlots.push({
|
|
type: 'unavailable',
|
|
startTime: unavailableStartTime,
|
|
endTime: groupEndTime,
|
|
isGrouped: true
|
|
});
|
|
}
|
|
currentUnavailableStart = null;
|
|
}
|
|
|
|
const slotEndTime = calculateEndTime(timeStr, duration);
|
|
lastAvailableEndTime = slotEndTime;
|
|
groupedSlots.push({
|
|
type: 'available',
|
|
startTime: timeStr,
|
|
endTime: slotEndTime
|
|
});
|
|
|
|
if (timeToMinutes(slotEndTime) >= endTotalMinutes) {
|
|
break;
|
|
}
|
|
} else {
|
|
if (currentUnavailableStart === null) {
|
|
currentUnavailableStart = timeStr;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (currentUnavailableStart !== null) {
|
|
const lastAvailableSlot = groupedSlots.filter((s) => s.type === 'available').pop();
|
|
const lastAvailableEnd = lastAvailableSlot ? timeToMinutes(lastAvailableSlot.endTime) : 0;
|
|
|
|
const unavailableStartMinutes = timeToMinutes(currentUnavailableStart);
|
|
|
|
if (unavailableStartMinutes < endTotalMinutes && lastAvailableEnd < endTotalMinutes) {
|
|
// Use the end time of the last available slot for the final unavailable period
|
|
const unavailableStartTime = lastAvailableSlot
|
|
? lastAvailableSlot.endTime
|
|
: currentUnavailableStart;
|
|
groupedSlots.push({
|
|
type: 'unavailable',
|
|
startTime: unavailableStartTime,
|
|
endTime: dayWorkingHours.endTime,
|
|
isGrouped: true
|
|
});
|
|
}
|
|
}
|
|
|
|
return groupedSlots;
|
|
}
|
|
|
|
// =============== Date Availability Check ===============
|
|
function isDateUnavailable(date: DateValue): boolean {
|
|
if (!(date instanceof CalendarDate)) {
|
|
return true;
|
|
}
|
|
|
|
if (date.compare(minDate) < 0 || date.compare(maxCalendarDate) > 0) {
|
|
return true;
|
|
}
|
|
|
|
if (!workingHours) return true;
|
|
|
|
const dateStr = date.toString();
|
|
const dayHours = workingHours[dateStr];
|
|
|
|
if (!dayHours) return true;
|
|
if (!dayHours.isOpen) return true;
|
|
|
|
// No available hours data for this date = data not loaded = unavailable
|
|
if (!availableHours?.[dateStr]) return true;
|
|
// API returned empty slots = no availability at all
|
|
if (!availableHours[dateStr].slots || availableHours[dateStr].slots.length === 0) return true;
|
|
|
|
if (selectedServices.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
const duration = getTotalDuration();
|
|
const availableSlots = generateAvailableTimeSlots(duration, date);
|
|
if (availableSlots.length === 0) return true;
|
|
|
|
const dayAvailableHours = availableHours[dateStr];
|
|
// dayAvailableHours.slots is already checked above, but keep this guard for safety
|
|
if (dayAvailableHours.slots) {
|
|
const existingBookings = extractBookedSlots(
|
|
dayHours.startTime,
|
|
dayHours.endTime,
|
|
dayAvailableHours.slots
|
|
);
|
|
const lunchProtection = getLunchProtectionForSlots(
|
|
dayHours.startTime,
|
|
dayHours.endTime,
|
|
existingBookings,
|
|
duration,
|
|
15,
|
|
false
|
|
);
|
|
const now = new SvelteDate();
|
|
const validSlots = availableSlots.filter((t) => {
|
|
if (lunchProtection.get(t)?.isBlocked) return false;
|
|
if (userDepositsRequired > 0) {
|
|
const [h, m] = t.split(':').map(Number);
|
|
const slotDate = date.toDate(getLocalTimeZone());
|
|
slotDate.setHours(h, m, 0, 0);
|
|
const hoursUntil = (slotDate.getTime() - now.getTime()) / (1000 * 60 * 60);
|
|
if (hoursUntil < POLICY.DEPOSIT_ADVANCE_HOURS) return false;
|
|
}
|
|
return true;
|
|
});
|
|
if (validSlots.length === 0) return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// =============== Helper Functions ===============
|
|
function getTotalDuration() {
|
|
return selectedServices.reduce(
|
|
(total, service: Service) => total + service.duration_minutes,
|
|
0
|
|
);
|
|
}
|
|
|
|
function getTotalPrice() {
|
|
return selectedServices.reduce((total, service: Service) => total + service.price, 0);
|
|
}
|
|
|
|
function toggleService(service: Service) {
|
|
const index = selectedServices.findIndex((s) => s.id === service.id);
|
|
const wasSelected = index >= 0;
|
|
|
|
if (wasSelected) {
|
|
selectedServices = selectedServices.filter((s) => s.id !== service.id);
|
|
} else {
|
|
selectedServices = [...selectedServices, service];
|
|
}
|
|
|
|
// Only clear if we're on the date/time selection step
|
|
if (currentStep === 2 && selectedDate) {
|
|
const monthKey = `${selectedDate.year}-${String(selectedDate.month).padStart(2, '0')}`;
|
|
delete availableHoursCache[monthKey];
|
|
fetchHoursForMonth(selectedDate);
|
|
}
|
|
|
|
// Reset date selection when services change so auto-select can re-run
|
|
bookingFlowAutoSelectDone = false;
|
|
selectedDate = undefined;
|
|
selectedTime = null;
|
|
}
|
|
|
|
// =============== Lunch Protection for Rendering ===============
|
|
function getLunchProtectionStatus() {
|
|
if (!selectedDate || !workingHours || !availableHours || selectedServices.length === 0) {
|
|
return new Map<
|
|
string,
|
|
{ isBlocked: boolean; showWarning: boolean; warningMessage?: string }
|
|
>();
|
|
}
|
|
|
|
const dateStr = selectedDate.toString();
|
|
const dayWH = workingHours[dateStr];
|
|
const dayAH = availableHours[dateStr];
|
|
if (!dayWH?.isOpen || !dayAH?.slots) return new Map();
|
|
|
|
const existingBookings = extractBookedSlots(dayWH.startTime, dayWH.endTime, dayAH.slots);
|
|
return getLunchProtectionForSlots(
|
|
dayWH.startTime,
|
|
dayWH.endTime,
|
|
existingBookings,
|
|
getTotalDuration(),
|
|
15,
|
|
false
|
|
);
|
|
}
|
|
|
|
// Select a time slot with server-side re-validation
|
|
async function selectTimeWithValidation(time: string) {
|
|
selectedTime = time;
|
|
await refreshAndValidateSlot();
|
|
}
|
|
|
|
// Re-fetch available hours silently and check if selectedTime is still available
|
|
// Uses skipLoadingFlags=true to prevent UI judder (loading spinners hide DatePicker/TimeSlotPicker)
|
|
async function refreshAndValidateSlot() {
|
|
if (!selectedDate || !selectedTime) return;
|
|
|
|
const monthKey = `${selectedDate.year}-${String(selectedDate.month).padStart(2, '0')}`;
|
|
delete availableHoursCache[monthKey];
|
|
await fetchHoursForMonth(selectedDate, true);
|
|
|
|
const dateStr = selectedDate.toString();
|
|
const dayAvailable = availableHours?.[dateStr]?.slots;
|
|
if (!dayAvailable || dayAvailable.length === 0) {
|
|
toast.error('Sorry, this slot is no longer available. Please choose a different time.');
|
|
selectedTime = null;
|
|
return false;
|
|
}
|
|
|
|
const duration = getTotalDuration();
|
|
const [selHour, selMinute] = selectedTime.split(':').map(Number);
|
|
const selStart = selHour * 60 + selMinute;
|
|
const selEnd = selStart + duration;
|
|
|
|
const stillAvailable = dayAvailable.some((slot) => {
|
|
const [sH, sM] = slot.startTime.split(':').map(Number);
|
|
const [eH, eM] = slot.endTime.split(':').map(Number);
|
|
return selStart >= sH * 60 + sM && selEnd <= eH * 60 + eM;
|
|
});
|
|
|
|
if (!stillAvailable) {
|
|
toast.error('Sorry, this slot was just taken. Please choose a different time.');
|
|
selectedTime = null;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function formatDuration(minutes: number): string {
|
|
const hours = Math.floor(minutes / 60);
|
|
const remainingMinutes = minutes % 60;
|
|
|
|
if (hours === 0) {
|
|
return `${remainingMinutes} minutes`;
|
|
} else if (remainingMinutes === 0) {
|
|
return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
|
|
} else {
|
|
return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
|
|
}
|
|
}
|
|
|
|
function getDayWithOrdinal(date: CalendarDate): string {
|
|
const monthName = new SvelteDate(date.year, date.month - 1, date.day).toLocaleDateString(
|
|
'en-GB',
|
|
{
|
|
month: 'long'
|
|
}
|
|
);
|
|
const day = date.day;
|
|
if (day > 3 && day < 21) return monthName + ' ' + day + 'th';
|
|
switch (day % 10) {
|
|
case 1:
|
|
return monthName + ' ' + day + 'st';
|
|
case 2:
|
|
return monthName + ' ' + day + 'nd';
|
|
case 3:
|
|
return monthName + ' ' + day + 'rd';
|
|
default:
|
|
return monthName + ' ' + day + 'th';
|
|
}
|
|
}
|
|
|
|
// =============== Derived Values ===============
|
|
const formattedTotalDuration = $derived(formatDuration(getTotalDuration()));
|
|
const lunchProtectionMap = $derived(getLunchProtectionStatus());
|
|
const groupedTimeSlots = $derived(
|
|
currentStep === 2 && selectedServices.length > 0 && selectedDate
|
|
? generateGroupedTimeSlots(getTotalDuration(), selectedDate, lunchProtectionMap)
|
|
: []
|
|
);
|
|
const formattedSelectedDate = $derived(
|
|
selectedDate ? getDayWithOrdinal(selectedDate) : undefined
|
|
);
|
|
|
|
const depositRequired = $derived(calculateDepositRequired());
|
|
const totalSteps = $derived(authStore.isAuthenticated ? 4 : 5);
|
|
// StepIndicator uses displayNumber = startAt + index. currentStep aligns with displayNumber,
|
|
// not the array index. For auth: startAt=1, totalSteps=4 → last displayNumber=4.
|
|
// For guest: startAt=0, totalSteps=5 → last displayNumber=4. Always evaluates to 4.
|
|
const finalStep = $derived(totalSteps - 1 + (authStore.isAuthenticated ? 1 : 0));
|
|
const stepLabels = $derived(
|
|
authStore.isAuthenticated
|
|
? ['Service', 'Date & Time', 'Details', 'Payment']
|
|
: userDepositsRequired > 0
|
|
? ['Welcome', 'Service', 'Date & Time', 'Details', 'Payment']
|
|
: ['Welcome', 'Service', 'Date & Time', 'Details', 'Confirmation']
|
|
);
|
|
|
|
// =============== Navigation ===============
|
|
async function nextStep() {
|
|
if (currentStep === 0) {
|
|
currentStep = 1;
|
|
setTimeout(() => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, 50);
|
|
return;
|
|
}
|
|
|
|
// Step 2 -> Step 3: Re-validate slot, then reserve
|
|
if (currentStep === 2) {
|
|
const slotStillFree = await refreshAndValidateSlot();
|
|
if (!slotStillFree) return;
|
|
const reserved = await reserveSlot();
|
|
if (!reserved) return;
|
|
}
|
|
|
|
// Step 3 -> Final step (Payment if deposit required, else submit booking)
|
|
if (currentStep === 3) {
|
|
if (calculateDepositRequired()) {
|
|
currentStep = finalStep;
|
|
} else {
|
|
await submitAndProceed();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Final step with deposit: user must pay before booking is created.
|
|
// Payment is handled by processPayment(), not nextStep().
|
|
// This guards against manual increment from the payment step.
|
|
if (currentStep === finalStep && calculateDepositRequired()) {
|
|
return;
|
|
}
|
|
|
|
if (currentStep < finalStep) {
|
|
currentStep++;
|
|
setTimeout(() => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
async function submitAndProceed() {
|
|
_isSubmitting = true;
|
|
try {
|
|
if (!idempotencyKey) {
|
|
// Generate UUID v4 manually for environments where crypto.randomUUID() is unavailable
|
|
const array = new Uint8Array(16);
|
|
if (typeof window !== 'undefined' && window.crypto) {
|
|
window.crypto.getRandomValues(array);
|
|
} else {
|
|
for (let i = 0; i < 16; i++) array[i] = Math.floor(Math.random() * 256);
|
|
}
|
|
array[6] = (array[6] & 0x0f) | 0x40; // version 4
|
|
array[8] = (array[8] & 0x3f) | 0x80; // variant 1
|
|
idempotencyKey = [...array]
|
|
.map((b, i) => {
|
|
const hex = b.toString(16).padStart(2, '0');
|
|
if (i === 4 || i === 6 || i === 8 || i === 10) return '-' + hex;
|
|
return hex;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
if (!selectedDate || !selectedTime) {
|
|
toast.error('Please select a date and time');
|
|
_isSubmitting = false;
|
|
return;
|
|
}
|
|
|
|
const [hours, minutes] = selectedTime.split(':').map(Number);
|
|
const bookingDate = selectedDate.toDate(getLocalTimeZone());
|
|
bookingDate.setHours(hours, minutes, 0, 0);
|
|
const startTimeISO = formatLocalDateTime(bookingDate);
|
|
|
|
const serviceIds = selectedServices.map((s) => s.id);
|
|
|
|
let guestUserId: string | null = null;
|
|
if (!authStore.isAuthenticated) {
|
|
const guestResponse = await fetch('/api/users/guest', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
firstName: customerInfo.firstName,
|
|
lastName: customerInfo.lastName,
|
|
email: customerInfo.email,
|
|
phone: toE164UK(customerInfo.phone) ?? customerInfo.phone
|
|
})
|
|
});
|
|
|
|
if (!guestResponse.ok) {
|
|
const _errorText = await guestResponse.text();
|
|
if (guestResponse.status === 409) {
|
|
toast.error('Email already registered — please log in to book.');
|
|
} else {
|
|
toast.error('Failed to create guest account. Please try again.');
|
|
}
|
|
_isSubmitting = false;
|
|
return;
|
|
}
|
|
|
|
const guestData = await guestResponse.json();
|
|
guestUserId = guestData.id;
|
|
}
|
|
|
|
const requestBody: Record<string, unknown> = {
|
|
service_ids: serviceIds,
|
|
start_time: startTimeISO,
|
|
notes: customerInfo.specialRequests || null
|
|
};
|
|
|
|
if (guestUserId) {
|
|
requestBody.user_id = guestUserId;
|
|
}
|
|
|
|
const headers: Record<string, string> = {
|
|
'Content-Type': 'application/json',
|
|
'Idempotency-Key': idempotencyKey
|
|
};
|
|
if (authStore.currentToken) {
|
|
headers['Authorization'] = `Bearer ${authStore.currentToken}`;
|
|
}
|
|
|
|
const response = await fetch('/api/bookings', {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify(requestBody)
|
|
});
|
|
|
|
if (response.ok) {
|
|
const booking = await response.json();
|
|
confirmedBooking = {
|
|
id: booking.id,
|
|
status: booking.status,
|
|
start_time: booking.start_time,
|
|
notes: booking.notes || '',
|
|
deposit_required: booking.deposit_required ?? false,
|
|
deposit_paid: booking.deposit_paid ?? false,
|
|
deposit_amount: booking.deposit_amount ?? 0,
|
|
amount_paid: booking.amount_paid ?? 0,
|
|
amount_due: booking.amount_due || getTotalPrice(),
|
|
payments: booking.payments ?? [],
|
|
total_amount: booking.total_amount || getTotalPrice(),
|
|
duration_minutes: booking.duration_minutes || getTotalDuration()
|
|
};
|
|
currentStep = finalStep;
|
|
fetchDiscountPreview();
|
|
setTimeout(() => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, 50);
|
|
} else {
|
|
const errorText = await response.text();
|
|
let errorMessage = errorText.trim();
|
|
if (!errorMessage) {
|
|
errorMessage = 'Failed to submit booking. Please try again.';
|
|
}
|
|
// Backend may return plain text or JSON
|
|
try {
|
|
const errorData = JSON.parse(errorText);
|
|
if (errorData.error) errorMessage = errorData.error;
|
|
} catch {
|
|
/* use raw text from backend */
|
|
}
|
|
|
|
if (response.status === 409) {
|
|
if (errorMessage.includes('active booking') || errorMessage.includes('already have')) {
|
|
toast.error(
|
|
'You already have an active booking. Please complete or cancel it before creating a new one.'
|
|
);
|
|
} else {
|
|
toast.error('This time slot is no longer available. Please choose a different time.');
|
|
}
|
|
} else if (errorMessage.includes('patch test') || errorMessage.includes('Patch test')) {
|
|
toast.error(errorMessage + ' Please complete a patch test first.');
|
|
} else if (
|
|
errorMessage.includes('48 hours') ||
|
|
errorMessage.includes('48h') ||
|
|
errorMessage.includes('advance')
|
|
) {
|
|
toast.error(errorMessage);
|
|
} else if (errorMessage.includes('deposit') || errorMessage.includes('Deposit')) {
|
|
toast.error(errorMessage);
|
|
} else if (response.status === 400) {
|
|
toast.error(errorMessage);
|
|
} else {
|
|
toast.error('Failed to submit booking: ' + errorMessage);
|
|
}
|
|
}
|
|
} catch (_error) {
|
|
toast.error('Network error. Please check your connection and try again.');
|
|
} finally {
|
|
_isSubmitting = false;
|
|
}
|
|
}
|
|
|
|
function prevStep() {
|
|
if (currentStep > 1) {
|
|
currentStep--;
|
|
setTimeout(() => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
// =============== Validation ===============
|
|
const isBlockedByActiveBooking = $derived(
|
|
authStore.isAuthenticated && userDepositsRequired > 0 && hasActiveBooking
|
|
);
|
|
|
|
const canProceedStep1 = $derived(selectedServices.length > 0 && !isBlockedByActiveBooking);
|
|
const canProceedStep2 = $derived(!!(selectedDate && selectedTime) && !isBlockedByActiveBooking);
|
|
const canProceedStep3 = $derived(
|
|
!isBlockedByActiveBooking &&
|
|
(authStore.isAuthenticated
|
|
? !!(
|
|
authStore.currentUser?.firstName &&
|
|
authStore.currentUser?.lastName &&
|
|
authStore.currentUser?.email &&
|
|
authStore.currentUser?.phone
|
|
)
|
|
: !!(
|
|
customerInfo.firstName &&
|
|
customerInfo.lastName &&
|
|
customerInfo.email &&
|
|
emailFormatValid &&
|
|
customerInfo.phone &&
|
|
isValidUKPhone(customerInfo.phone) &&
|
|
!emailSuggestion
|
|
)) &&
|
|
!reservationExpired
|
|
);
|
|
const _canProceedStep4 = $derived(true);
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-4xl p-6">
|
|
<div class="mb-8 text-center">
|
|
<h1 class="mb-2 font-['Playfair_Display'] text-4xl font-bold">Book Your Appointment</h1>
|
|
<p class="text-gray-600">Professional beauty treatments in a calm and friendly environment</p>
|
|
</div>
|
|
|
|
{#if !authReady}
|
|
<div class="mb-6 flex items-center justify-center gap-2">
|
|
{#each [1, 2, 3, 4] as _ (_)}
|
|
<div class="flex items-center gap-1">
|
|
<div class="h-8 w-8 animate-pulse rounded-full bg-gray-200" />
|
|
<div class="h-3 w-16 animate-pulse rounded bg-gray-200" />
|
|
</div>
|
|
{#if _ < 4}
|
|
<div class="mx-1 h-0.5 w-8 animate-pulse rounded bg-gray-200" />
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<div class="h-7 w-40 animate-pulse rounded bg-gray-200" />
|
|
<div class="mt-2 h-4 w-64 animate-pulse rounded bg-gray-200" />
|
|
</Card.Header>
|
|
<Card.Content class="space-y-4">
|
|
<div class="h-16 animate-pulse rounded-lg bg-gray-100" />
|
|
<div class="h-16 animate-pulse rounded-lg bg-gray-100" />
|
|
<div class="h-16 animate-pulse rounded-lg bg-gray-100" />
|
|
</Card.Content>
|
|
</Card.Root>
|
|
{:else}
|
|
<StepIndicator
|
|
{currentStep}
|
|
steps={stepLabels}
|
|
startAt={authStore.isAuthenticated ? 1 : 0}
|
|
className={currentStep === 0 ? 'md:hidden' : ''}
|
|
/>
|
|
|
|
{#if currentStep === 0}
|
|
<Card.Root class="border-fuchsia-200 bg-fuchsia-50">
|
|
<Card.Header class="text-center">
|
|
<Card.Title>Welcome</Card.Title>
|
|
<Card.Description>Log in for the best booking experience</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="p-6 text-center">
|
|
<p class="mb-4 text-sm text-muted-foreground">
|
|
Guest checkout does not receive loyalty stamps or seasonal discounts.
|
|
</p>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4">
|
|
<Button
|
|
onclick={() => goto(resolve('/login'))}
|
|
variant="outline"
|
|
class="border-fuchsia-200 hover:bg-fuchsia-100"
|
|
>
|
|
Log In
|
|
</Button>
|
|
<Button onclick={nextStep}>Continue as Guest</Button>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
{/if}
|
|
|
|
<!-- Step 1: Service Selection -->
|
|
{#if currentStep === 1}
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>Choose Your Services</Card.Title>
|
|
<Card.Description>Select one or more treatments for your appointment</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="space-y-4">
|
|
<!-- Warning: Active booking limit for deposit-owing users -->
|
|
{#if authStore.isAuthenticated && userDepositsRequired > 0 && hasActiveBooking}
|
|
<div class="rounded-lg border border-amber-200/60 bg-amber-50 p-4">
|
|
<div class="flex gap-3">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-amber-600"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-1 text-sm text-amber-900">
|
|
<p class="font-semibold text-amber-800">One Booking at a Time</p>
|
|
<p>
|
|
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 <a href="/contact" target="_blank" rel="external" class="font-medium underline"
|
|
>contact us</a
|
|
>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<ServiceSelector
|
|
{services}
|
|
selected={selectedServices}
|
|
loading={servicesLoading}
|
|
ontoggle={toggleService}
|
|
/>
|
|
|
|
<div
|
|
class="mt-4 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4 text-center"
|
|
>
|
|
<p class="text-sm text-gray-600">
|
|
Need something different? Select the closest service and add a note, or contact us for
|
|
a bespoke treatment.
|
|
</p>
|
|
<a
|
|
href={resolve("/contact")}
|
|
class="mt-1 inline-block text-sm font-medium text-blue-600 hover:underline"
|
|
>
|
|
Arrange a custom booking →
|
|
</a>
|
|
</div>
|
|
|
|
{#if selectedServices.length > 0}
|
|
<div class="rounded-lg bg-gray-50 p-4">
|
|
<h4 class="mb-2 font-semibold">Selected 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>{service.duration_minutes} mins • £{service.price}</span>
|
|
</div>
|
|
{/each}
|
|
<Separator class="my-2" />
|
|
<div class="flex justify-between text-sm font-semibold">
|
|
<span>Estimated Duration:</span>
|
|
<span>{formattedTotalDuration}</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm font-semibold">
|
|
<span>Total Cost:</span>
|
|
<span
|
|
>£{getTotalPrice()}{#if vatRegistered}
|
|
<span class="text-xs font-normal text-gray-400">incl. VAT</span>{/if}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</Card.Content>
|
|
<Card.Footer class="flex justify-end">
|
|
<BookingActions
|
|
canBack={!authStore.isAuthenticated}
|
|
canNext={canProceedStep1}
|
|
nextLabel="Next: Select Date & Time"
|
|
on:next={nextStep}
|
|
/>
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
{/if}
|
|
|
|
<!-- Step 2: Date & Time Selection -->
|
|
{#if currentStep === 2}
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>Choose Date & Time</Card.Title>
|
|
<Card.Description>
|
|
{selectedServices.map((s) => s.name).join(', ')} • {formattedTotalDuration} total • £{getTotalPrice()}
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="p-0">
|
|
<Card.Root class="gap-0 border-0 p-0">
|
|
<Card.Content class="relative p-0 md:pr-56">
|
|
{#if loadingWorkingHours}
|
|
<div class="flex items-center justify-center p-6">
|
|
<p>Loading available dates...</p>
|
|
</div>
|
|
{:else}
|
|
<DatePicker
|
|
date={selectedDate}
|
|
{placeholder}
|
|
minValue={minDate}
|
|
maxValue={maxCalendarDate}
|
|
{isDateUnavailable}
|
|
onchange={(newDate) => {
|
|
selectedDate = newDate;
|
|
selectedTime = null;
|
|
}}
|
|
onPlaceholderChange={(newPlaceholder) => {
|
|
placeholder = newPlaceholder;
|
|
userNavigatedCalendar = true;
|
|
}}
|
|
/>
|
|
{/if}
|
|
|
|
{#if loadingAvailableHours}
|
|
<div
|
|
class="absolute inset-y-0 right-0 flex w-56 items-center justify-center border-l p-6"
|
|
>
|
|
<p class="text-sm text-gray-500">Loading times...</p>
|
|
</div>
|
|
{:else}
|
|
<TimeSlotPicker
|
|
date={selectedDate}
|
|
{groupedTimeSlots}
|
|
{selectedTime}
|
|
formattedDate={formattedSelectedDate}
|
|
onselect={(time) => {
|
|
selectTimeWithValidation(time);
|
|
}}
|
|
/>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</Card.Content>
|
|
|
|
<!-- Mobile appointment summary -->
|
|
<div class="border-t px-6 py-4 text-center text-sm md:hidden">
|
|
{#if selectedDate && selectedTime}
|
|
Appointment for
|
|
<span class="font-medium">
|
|
{selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'short'
|
|
})}
|
|
</span>
|
|
<br />at <span class="font-medium">{selectedTime}</span>
|
|
{:else}
|
|
Select a date and time
|
|
{/if}
|
|
</div>
|
|
|
|
<Card.Footer class="flex justify-between border-t px-6 !py-5">
|
|
<Button variant="outline" onclick={prevStep}>Back</Button>
|
|
<div class="flex items-center space-x-4">
|
|
<!-- Desktop appointment summary -->
|
|
<div class="hidden text-sm md:block">
|
|
{#if selectedDate && selectedTime}
|
|
Appointment for
|
|
<span class="font-medium">
|
|
{selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'short'
|
|
})}
|
|
</span>
|
|
at <span class="font-medium">{selectedTime}</span>
|
|
{:else}
|
|
Select a date and time
|
|
{/if}
|
|
</div>
|
|
<Button disabled={!canProceedStep2} onclick={nextStep}>Next: Your Details</Button>
|
|
</div>
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
{/if}
|
|
|
|
<!-- Step 3: Customer Details -->
|
|
{#if currentStep === 3}
|
|
<div class="mb-6 text-center">
|
|
<h2 class="font-['Playfair_Display'] text-2xl font-bold">Almost There</h2>
|
|
{#if !authStore.isAuthenticated}
|
|
<p class="mt-1 text-gray-500">Just a couple more details</p>
|
|
{/if}
|
|
</div>
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>Your Details</Card.Title>
|
|
<Card.Description>Please confirm your contact information</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content class="space-y-6">
|
|
{#if reservationExpired}
|
|
<div class="rounded-lg bg-red-50 p-4 text-center">
|
|
<p class="text-red-600">Reservation expired — please go back and select a new time</p>
|
|
</div>
|
|
{:else}
|
|
<div class="rounded-lg bg-blue-50 p-4 text-center">
|
|
<p class="text-blue-700">
|
|
Your slot will be held for {reservationCountdown} — complete your booking before time
|
|
expires
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<BookingSummary
|
|
services={selectedServices}
|
|
date={selectedDate}
|
|
time={selectedTime}
|
|
showCustomer={false}
|
|
/>
|
|
|
|
{#if !authStore.isAuthenticated}
|
|
<p class="mb-4 text-center text-sm text-yellow-600">
|
|
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.
|
|
</p>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<Label for="firstName">First Name *</Label>
|
|
<Input
|
|
id="firstName"
|
|
bind:value={customerInfo.firstName}
|
|
placeholder="Enter your first name"
|
|
onblur={debouncedEmailCheck}
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="lastName">Last Name *</Label>
|
|
<Input
|
|
id="lastName"
|
|
bind:value={customerInfo.lastName}
|
|
placeholder="Enter your last name"
|
|
onblur={debouncedEmailCheck}
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="email">Email *</Label>
|
|
<EmailInput
|
|
id="email"
|
|
bind:value={customerInfo.email}
|
|
placeholder="Enter your email"
|
|
required
|
|
onvaluechange={() => {
|
|
emailSuggestion = null;
|
|
debouncedEmailCheck();
|
|
}}
|
|
onerrorchange={(err) => {
|
|
emailError = err;
|
|
}}
|
|
onblur={() => {
|
|
debouncedEmailCheck();
|
|
}}
|
|
/>
|
|
{#if emailError}
|
|
<span class="text-xs font-medium text-red-500">{emailError}</span>
|
|
{/if}
|
|
{#if emailChecking}
|
|
<span class="text-xs text-gray-500">Checking...</span>
|
|
{/if}
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="phone">Phone Number *</Label>
|
|
<PhoneInput
|
|
id="phone"
|
|
bind:value={customerInfo.phone}
|
|
placeholder="07123 456789"
|
|
onerrorchange={(err) => {
|
|
if (!err) debouncedEmailCheck();
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{#if emailSuggestion === 'login'}
|
|
<p class="text-xs font-medium text-red-500">
|
|
This email belongs to a registered user. Please
|
|
<a href={resolve("/login")} class="underline hover:text-red-800">log in</a>
|
|
instead to access your bookings and rewards.
|
|
</p>
|
|
{:else if emailSuggestion === 'check'}
|
|
<p class="text-xs font-medium text-amber-600">
|
|
This email might belong to an existing account. Please double-check or
|
|
<a href={resolve("/login")} class="underline hover:text-amber-800">log in</a>.
|
|
</p>
|
|
{/if}
|
|
{/if}
|
|
|
|
<div class="space-y-2">
|
|
<Label for="requests">Special Requests (Optional)</Label>
|
|
<Textarea
|
|
id="requests"
|
|
bind:value={customerInfo.specialRequests}
|
|
placeholder="Any allergies, preferences, or special requirements..."
|
|
rows={3}
|
|
/>
|
|
<CharCounter text={customerInfo.specialRequests} />
|
|
</div>
|
|
|
|
<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}
|
|
|
|
<!-- Step 4: Payment & Confirmation (final step) -->
|
|
{#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 (d.name)}
|
|
<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>
|