feat: wire slot reservation into all booking flows
Customer flow: reservation fires on Date/Time → Details transition with re-validation on time slot tap and on 'Next' click to prevent simultaneous bookings. 5-step flow: Service → Date/Time → Reserve → Details (countdown) → Payment & Review → Confirm. Guest users redirected to home on success. Admin call-in: reserve slot before final submission (60min TTL). Admin walk-in: reserve slot on modal open (5min TTL). Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Sisyphus
@@ -91,6 +91,12 @@
|
||||
|
||||
let submitting = $state(false);
|
||||
|
||||
// =============== Reservation State ===============
|
||||
let reservationId = $state<string | null>(null);
|
||||
let reservationExpiresAt = $state<Date | null>(null);
|
||||
let reservationCountdown = $state<string>('');
|
||||
let isReserving = $state(false);
|
||||
|
||||
// =============== Cache ===============
|
||||
const workingHoursCache = new SvelteMap<string, Record<string, any>>();
|
||||
const availableHoursCache = new SvelteMap<string, Record<string, any>>();
|
||||
@@ -240,6 +246,13 @@
|
||||
availableHoursCache.clear();
|
||||
workingHours = null;
|
||||
availableHours = null;
|
||||
// Clear reservation state
|
||||
reservationId = null;
|
||||
reservationExpiresAt = null;
|
||||
reservationCountdown = '';
|
||||
if ((window as any).__bookingCreateCountdownInterval) {
|
||||
clearInterval((window as any).__bookingCreateCountdownInterval);
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Data Fetching ===============
|
||||
@@ -346,6 +359,113 @@
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Reservation ===============
|
||||
async function reserveSlot(): Promise<boolean> {
|
||||
if (!selectedUserId || !selectedDate || !selectedTime) {
|
||||
return false;
|
||||
}
|
||||
|
||||
isReserving = true;
|
||||
|
||||
try {
|
||||
const localDate = selectedDate.toDate(getLocalTimeZone());
|
||||
const [hours, minutes] = selectedTime.split(':').map(Number);
|
||||
localDate.setHours(hours, minutes, 0, 0);
|
||||
const startTimeISO = localDate.toISOString();
|
||||
|
||||
const serviceIds = selectedServices.map((s) => s.id);
|
||||
|
||||
// Build service overrides payload
|
||||
const overrides = [];
|
||||
for (const [serviceId, data] of Object.entries(serviceOverrides)) {
|
||||
const durationChanged = parseInt(data.duration) !== data.originalDuration;
|
||||
if (durationChanged) {
|
||||
overrides.push({
|
||||
service_id: serviceId,
|
||||
override_duration_minutes: parseInt(data.duration)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const response = await fetch('/api/admin/bookings/reserve', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${authStore.currentToken}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: selectedUserId,
|
||||
start_time: startTimeISO,
|
||||
service_ids: serviceIds,
|
||||
service_overrides: overrides.length > 0 ? overrides : [],
|
||||
ttl_minutes: 60
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
reservationId = data.id;
|
||||
reservationExpiresAt = new Date(data.expires_at);
|
||||
startCountdown();
|
||||
return true;
|
||||
} else if (response.status === 409) {
|
||||
toast.error('Slot no longer available, refreshing...');
|
||||
// Refresh available hours
|
||||
if (selectedDate) {
|
||||
fetchHoursForMonth(selectedDate);
|
||||
}
|
||||
reservationId = null;
|
||||
reservationExpiresAt = null;
|
||||
reservationCountdown = '';
|
||||
return false;
|
||||
} else {
|
||||
const errorText = await response.text();
|
||||
toast.error(`Failed to reserve slot: ${errorText}`);
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Reservation error:', err);
|
||||
toast.error('Failed to reserve slot');
|
||||
return false;
|
||||
} finally {
|
||||
isReserving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
// Clear any existing interval
|
||||
if ((window as any).__bookingCreateCountdownInterval) {
|
||||
clearInterval((window as any).__bookingCreateCountdownInterval);
|
||||
}
|
||||
|
||||
const updateCountdown = () => {
|
||||
if (!reservationExpiresAt) {
|
||||
reservationCountdown = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const diff = reservationExpiresAt.getTime() - now.getTime();
|
||||
|
||||
if (diff <= 0) {
|
||||
reservationCountdown = 'Expired';
|
||||
reservationId = null;
|
||||
reservationExpiresAt = null;
|
||||
if ((window as any).__bookingCreateCountdownInterval) {
|
||||
clearInterval((window as any).__bookingCreateCountdownInterval);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const seconds = Math.floor((diff % 60000) / 1000);
|
||||
reservationCountdown = `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
updateCountdown();
|
||||
(window as any).__bookingCreateCountdownInterval = setInterval(updateCountdown, 1000);
|
||||
}
|
||||
|
||||
// =============== Logic ===============
|
||||
function toggleService(service: Service) {
|
||||
const index = selectedServices.findIndex((s) => s.id === service.id);
|
||||
@@ -600,6 +720,13 @@
|
||||
|
||||
// =============== Submission ===============
|
||||
async function submitBooking() {
|
||||
// First, reserve the slot
|
||||
const reserved = await reserveSlot();
|
||||
if (!reserved) {
|
||||
submitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
submitting = true;
|
||||
|
||||
try {
|
||||
@@ -1074,6 +1201,24 @@
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4 p-0">
|
||||
<!-- Reservation Countdown Banner -->
|
||||
{#if reservationId && reservationExpiresAt}
|
||||
<div class="mx-6 mt-4 rounded-lg bg-green-50 border border-green-200 p-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-green-800">
|
||||
Slot reserved until {reservationExpiresAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-sm font-mono font-semibold text-green-700">
|
||||
({reservationCountdown} remaining)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if loadingWorkingHours}
|
||||
<div class="flex items-center justify-center p-6">
|
||||
<p>Loading available dates...</p>
|
||||
@@ -1184,11 +1329,11 @@
|
||||
<Card.Footer class="flex justify-between">
|
||||
<Button variant="outline" onclick={() => currentStep--}>Back</Button>
|
||||
<Button
|
||||
disabled={!canProceedStep4 || submitting}
|
||||
disabled={!canProceedStep4 || submitting || isReserving}
|
||||
onclick={submitBooking}
|
||||
class="bg-primary text-primary-foreground"
|
||||
>
|
||||
{submitting ? 'Creating Booking...' : 'Create Booking'}
|
||||
{isReserving ? 'Reserving Slot...' : submitting ? 'Creating Booking...' : 'Create Booking'}
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
|
||||
Reference in New Issue
Block a user