The Dogfather
736535a24c
CI / Test (push) Successful in 15s
CI / Lint & Typecheck (push) Successful in 17s
CI / Lint & Typecheck (pull_request) Successful in 18s
CI / Test (pull_request) Successful in 19s
CI / Build & Push Docker Image (push) Successful in 53s
CI / Build & Push Docker Image (pull_request) Successful in 47s
Merge PR #26: feat(portal): add StatusBadge to appointment cards (GRO-1795)
1245 lines
46 KiB
TypeScript
1245 lines
46 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Calendar, Clock, Plus, ChevronRight, ChevronDown, Loader2 } from 'lucide-react';
|
|
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from '../../lib/analytics';
|
|
|
|
export interface Appointment {
|
|
id: string;
|
|
petId: string;
|
|
serviceId: string;
|
|
groomerId: string | null;
|
|
date: string;
|
|
time: string;
|
|
status: 'scheduled' | 'confirmed' | 'pending' | 'waitlisted' | 'completed' | 'cancelled' | 'no-show';
|
|
petName?: string;
|
|
serviceName?: string;
|
|
groomerName?: string;
|
|
duration?: number;
|
|
price?: number;
|
|
notes?: string;
|
|
customerNotes?: string;
|
|
addOns?: string[];
|
|
confirmationStatus?: 'confirmed' | 'pending' | 'cancelled';
|
|
}
|
|
|
|
interface Pet {
|
|
id: string;
|
|
name: string;
|
|
breed: string;
|
|
weight?: number;
|
|
photo?: string;
|
|
imageUrl?: string;
|
|
}
|
|
|
|
interface Service {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
duration: number;
|
|
price: number;
|
|
priceRange?: string;
|
|
isAddOn?: boolean;
|
|
}
|
|
|
|
interface AppointmentsSectionProps {
|
|
sessionId: string | null;
|
|
readOnly: boolean;
|
|
}
|
|
|
|
interface RescheduleFlowProps {
|
|
appointment: Appointment;
|
|
onClose: () => void;
|
|
sessionId: string | null;
|
|
}
|
|
|
|
const MAX_CUSTOMER_NOTES = 500;
|
|
|
|
export function formatDate(dateStr: string): string {
|
|
return new Date(dateStr).toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
export function parseTimeTo24Hour(time: string): string {
|
|
const parts = time.split(' ');
|
|
const hoursMinutes = parts[0] ?? '';
|
|
const period = parts[1] ?? '';
|
|
const [hoursStr, minutesStr] = hoursMinutes.split(':');
|
|
const hours = parseInt(hoursStr ?? '0', 10);
|
|
const minutes = parseInt(minutesStr ?? '0', 10);
|
|
let hours24 = hours;
|
|
if (period === 'PM' && hours !== 12) hours24 += 12;
|
|
if (period === 'AM' && hours === 12) hours24 = 0;
|
|
return `${hours24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
|
|
}
|
|
|
|
export function isUpcoming(appt: Appointment): boolean {
|
|
const now = new Date();
|
|
const apptDate = new Date(`${appt.date}T${parseTimeTo24Hour(appt.time)}`);
|
|
return apptDate > now && appt.status !== 'cancelled' && appt.status !== 'completed';
|
|
}
|
|
|
|
const STATUS_COLORS: Record<string, string> = {
|
|
confirmed: 'bg-green-100 text-green-700',
|
|
pending: 'bg-amber-100 text-amber-600',
|
|
waitlisted: 'bg-blue-100 text-blue-600',
|
|
completed: 'bg-stone-100 text-stone-600',
|
|
cancelled: 'bg-red-100 text-red-600',
|
|
'no-show': 'bg-yellow-100 text-yellow-700',
|
|
scheduled: 'bg-blue-100 text-blue-600',
|
|
};
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
confirmed: 'Confirmed',
|
|
pending: 'Pending',
|
|
waitlisted: 'Waitlisted',
|
|
completed: 'Completed',
|
|
cancelled: 'Cancelled',
|
|
'no-show': 'No-show',
|
|
scheduled: 'Scheduled',
|
|
};
|
|
|
|
export function StatusBadge({ status }: { status: string }) {
|
|
const label = STATUS_LABELS[status] ?? status;
|
|
const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
|
|
return (
|
|
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
|
|
confirmed: 'bg-green-100 text-green-700',
|
|
pending: 'bg-amber-100 text-amber-700',
|
|
cancelled: 'bg-red-100 text-red-600',
|
|
};
|
|
|
|
export const AppointmentsSection: React.FC<AppointmentsSectionProps> = ({ sessionId, readOnly }) => {
|
|
const [upcomingAppointments, setUpcomingAppointments] = useState<Appointment[]>([]);
|
|
const [pastAppointments, setPastAppointments] = useState<Appointment[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showBooking, setShowBooking] = useState(false);
|
|
const [showReschedule, setShowReschedule] = useState(false);
|
|
const [rescheduleAppointment, setRescheduleAppointment] = useState<Appointment | null>(null);
|
|
const [expandedId, setExpandedId] = useState<string | null>(null);
|
|
const [tab, setTab] = useState<'upcoming' | 'past'>('upcoming');
|
|
|
|
useEffect(() => {
|
|
const fetchAppointments = async () => {
|
|
if (!sessionId) {
|
|
setUpcomingAppointments([]);
|
|
setPastAppointments([]);
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/portal/appointments', {
|
|
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const fetchedAppointments: Appointment[] = data.appointments || data || [];
|
|
|
|
const upcoming = fetchedAppointments.filter((appt) => isUpcoming(appt));
|
|
const past = fetchedAppointments.filter((appt) => !isUpcoming(appt));
|
|
|
|
setUpcomingAppointments(upcoming);
|
|
setPastAppointments(past);
|
|
} else {
|
|
setError('Failed to load appointments.');
|
|
}
|
|
} catch {
|
|
setError('Failed to load appointments. Please try again.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchAppointments();
|
|
}, [sessionId]);
|
|
|
|
const handleReschedule = (appointment: Appointment) => {
|
|
setRescheduleAppointment(appointment);
|
|
setShowReschedule(true);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="animate-spin text-blue-600" size={24} />
|
|
<span className="ml-3 text-gray-600">Loading appointments...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-red-600 mb-4">{error}</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setTab('upcoming')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium ${
|
|
tab === 'upcoming'
|
|
? 'bg-blue-100 text-blue-700'
|
|
: 'text-stone-500 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
Upcoming ({upcomingAppointments.length})
|
|
</button>
|
|
<button
|
|
onClick={() => setTab('past')}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium ${
|
|
tab === 'past' ? 'bg-blue-100 text-blue-700' : 'text-stone-500 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
Past ({pastAppointments.length})
|
|
</button>
|
|
</div>
|
|
{!readOnly && (
|
|
<button
|
|
onClick={() => setShowBooking(true)}
|
|
className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
|
|
>
|
|
<Plus size={16} />
|
|
Book New
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{tab === 'upcoming' && (
|
|
<div className="space-y-3">
|
|
{upcomingAppointments.map((appt) => (
|
|
<AppointmentCard
|
|
key={appt.id}
|
|
appointment={appt}
|
|
expanded={expandedId === appt.id}
|
|
onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
|
|
readOnly={readOnly}
|
|
sessionId={sessionId}
|
|
onReschedule={handleReschedule}
|
|
/>
|
|
))}
|
|
{upcomingAppointments.length === 0 && (
|
|
<p className="text-center text-stone-400 py-8">No upcoming appointments</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{tab === 'past' && (
|
|
<div className="space-y-3">
|
|
{pastAppointments.map((appt) => (
|
|
<AppointmentCard
|
|
key={appt.id}
|
|
appointment={appt}
|
|
expanded={expandedId === appt.id}
|
|
onToggle={() => setExpandedId(expandedId === appt.id ? null : appt.id)}
|
|
readOnly={readOnly}
|
|
sessionId={sessionId}
|
|
onReschedule={handleReschedule}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{showBooking && (
|
|
<BookingFlow onClose={() => setShowBooking(false)} sessionId={sessionId} />
|
|
)}
|
|
{showReschedule && rescheduleAppointment && (
|
|
<RescheduleFlow
|
|
appointment={rescheduleAppointment}
|
|
onClose={() => {
|
|
setShowReschedule(false);
|
|
setRescheduleAppointment(null);
|
|
}}
|
|
sessionId={sessionId}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function AppointmentCard({
|
|
appointment: appt,
|
|
expanded,
|
|
onToggle,
|
|
readOnly,
|
|
sessionId,
|
|
onReschedule,
|
|
}: {
|
|
appointment: Appointment;
|
|
expanded: boolean;
|
|
onToggle: () => void;
|
|
readOnly: boolean;
|
|
sessionId: string | null;
|
|
onReschedule: (appt: Appointment) => void;
|
|
}) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
|
|
<button
|
|
onClick={onToggle}
|
|
className="w-full flex items-center gap-4 p-4 text-left hover:bg-stone-50"
|
|
>
|
|
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg shrink-0">
|
|
{appt.petName?.charAt(0) || 'P'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-stone-800 text-sm">
|
|
{appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
|
|
</p>
|
|
<div className="flex items-center gap-3 text-xs text-stone-500 mt-0.5">
|
|
<span className="flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
{formatDate(appt.date)}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Clock size={12} />
|
|
{appt.time}
|
|
</span>
|
|
<span>with {appt.groomerName || 'First Available'}</span>
|
|
</div>
|
|
</div>
|
|
<StatusBadge status={appt.status} />
|
|
{expanded ? (
|
|
<ChevronDown size={16} className="text-stone-400" />
|
|
) : (
|
|
<ChevronRight size={16} className="text-stone-400" />
|
|
)}
|
|
</button>
|
|
{expanded && (
|
|
<div className="px-4 pb-4 pt-0 border-t border-stone-100">
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 py-3 text-sm">
|
|
{appt.duration && (
|
|
<div>
|
|
<p className="text-xs text-stone-400">Duration</p>
|
|
<p className="text-stone-700">{appt.duration} min</p>
|
|
</div>
|
|
)}
|
|
{appt.price && (
|
|
<div>
|
|
<p className="text-xs text-stone-400">Estimated Price</p>
|
|
<p className="text-stone-700">${appt.price}</p>
|
|
</div>
|
|
)}
|
|
{appt.addOns && appt.addOns.length > 0 && (
|
|
<div className="col-span-2">
|
|
<p className="text-xs text-stone-400">Add-ons</p>
|
|
<p className="text-stone-700">{appt.addOns.join(', ')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{appt.notes && (
|
|
<p className="text-sm text-stone-600 bg-stone-50 rounded-lg px-3 py-2 mb-3">
|
|
{appt.notes}
|
|
</p>
|
|
)}
|
|
{isUpcoming(appt) && !readOnly && (
|
|
<CustomerNotesSection appointment={appt} sessionId={sessionId} />
|
|
)}
|
|
{isUpcoming(appt) && <ConfirmationSection appointment={appt} sessionId={sessionId} />}
|
|
{appt.status !== 'completed' &&
|
|
appt.status !== 'cancelled' &&
|
|
!readOnly && (
|
|
<div className="flex gap-2 mt-3">
|
|
<button
|
|
onClick={() => onReschedule(appt)}
|
|
className="text-xs px-3 py-1.5 border border-stone-200 rounded-lg text-stone-600 hover:bg-stone-50"
|
|
>
|
|
Reschedule
|
|
</button>
|
|
<CancelAppointmentButton appointment={appt} sessionId={sessionId} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ConfirmationSection({
|
|
appointment: appt,
|
|
sessionId,
|
|
}: {
|
|
appointment: Appointment;
|
|
sessionId: string | null;
|
|
}) {
|
|
const [confirming, setConfirming] = useState(false);
|
|
const [confirmError, setConfirmError] = useState<string | null>(null);
|
|
const [confirmSuccess, setConfirmSuccess] = useState(false);
|
|
const [localStatus, setLocalStatus] = useState(appt.confirmationStatus);
|
|
|
|
async function handleConfirm() {
|
|
if (!window.confirm('Confirm this appointment?')) return;
|
|
setConfirming(true);
|
|
setConfirmError(null);
|
|
try {
|
|
const headers: Record<string, string> = {};
|
|
if (sessionId) {
|
|
headers['X-Impersonation-Session-Id'] = sessionId ?? '';
|
|
}
|
|
const res = await fetch(`/api/portal/appointments/${appt.id}/confirm`, {
|
|
method: 'POST',
|
|
headers,
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ error: 'Failed to confirm' }));
|
|
throw new Error(err.error || `HTTP ${res.status}`);
|
|
}
|
|
setLocalStatus('confirmed');
|
|
setConfirmSuccess(true);
|
|
setTimeout(() => setConfirmSuccess(false), 2000);
|
|
} catch (e) {
|
|
setConfirmError(e instanceof Error ? e.message : 'Failed to confirm');
|
|
} finally {
|
|
setConfirming(false);
|
|
}
|
|
}
|
|
|
|
const currentStatus = localStatus ?? appt.confirmationStatus;
|
|
const statusLabel =
|
|
currentStatus === 'confirmed'
|
|
? 'Confirmed'
|
|
: currentStatus === 'pending'
|
|
? 'Pending confirmation'
|
|
: 'Cancelled';
|
|
|
|
return (
|
|
<div className="mt-3 p-3 bg-stone-50 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
CONFIRMATION_STATUS_COLORS[currentStatus || 'pending'] || ''
|
|
}`}
|
|
>
|
|
{statusLabel}
|
|
</span>
|
|
</div>
|
|
{!confirmSuccess && currentStatus === 'pending' && (
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={confirming}
|
|
className="flex items-center gap-1.5 text-xs px-3 py-1.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{confirming && <Loader2 size={12} className="animate-spin" />}
|
|
{confirming ? 'Confirming...' : 'Confirm Appointment'}
|
|
</button>
|
|
)}
|
|
{confirmSuccess && (
|
|
<span className="text-xs text-green-600 font-medium">Confirmed!</span>
|
|
)}
|
|
</div>
|
|
{confirmError && <p className="text-xs text-red-500 mt-1">{confirmError}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CancelAppointmentButton({
|
|
appointment: appt,
|
|
sessionId,
|
|
}: {
|
|
appointment: Appointment;
|
|
sessionId: string | null;
|
|
}) {
|
|
const [cancelling, setCancelling] = useState(false);
|
|
const [cancelError, setCancelError] = useState<string | null>(null);
|
|
|
|
async function handleCancel() {
|
|
if (!window.confirm('Cancel this appointment? This cannot be undone.')) return;
|
|
setCancelling(true);
|
|
setCancelError(null);
|
|
try {
|
|
const headers: Record<string, string> = {};
|
|
if (sessionId) {
|
|
headers['X-Impersonation-Session-Id'] = sessionId ?? '';
|
|
}
|
|
const res = await fetch(`/api/portal/appointments/${appt.id}/cancel`, {
|
|
method: 'POST',
|
|
headers,
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ error: 'Failed to cancel' }));
|
|
throw new Error(err.error || `HTTP ${res.status}`);
|
|
}
|
|
window.location.reload();
|
|
} catch (e) {
|
|
setCancelError(e instanceof Error ? e.message : 'Failed to cancel');
|
|
setCancelling(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={handleCancel}
|
|
disabled={cancelling}
|
|
className="text-xs px-3 py-1.5 border border-red-200 rounded-lg text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{cancelling ? 'Cancelling...' : 'Cancel'}
|
|
</button>
|
|
{cancelError && <p className="text-xs text-red-500 mt-1">{cancelError}</p>}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function CustomerNotesSection({
|
|
appointment: appt,
|
|
sessionId,
|
|
}: {
|
|
appointment: Appointment;
|
|
sessionId: string | null;
|
|
}) {
|
|
const [notes, setNotes] = useState(appt.customerNotes || '');
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const isDisabled = appt.status === 'completed' || appt.status === 'cancelled';
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
setError(null);
|
|
setSaved(false);
|
|
try {
|
|
const headers: Record<string, string> = { 'Content-Type': 'application/json' };
|
|
if (sessionId) {
|
|
headers['X-Impersonation-Session-Id'] = sessionId ?? '';
|
|
}
|
|
const res = await fetch(`/api/portal/appointments/${appt.id}/notes`, {
|
|
method: 'PATCH',
|
|
headers,
|
|
body: JSON.stringify({ customerNotes: notes }),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ error: 'Failed to save' }));
|
|
throw new Error(err.error || `HTTP ${res.status}`);
|
|
}
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 2000);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to save');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="mt-3 p-3 bg-stone-50 rounded-lg">
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<label className="text-xs font-medium text-stone-600">Notes for your groomer</label>
|
|
<span
|
|
className={`text-xs ${
|
|
notes.length > MAX_CUSTOMER_NOTES ? 'text-red-500' : 'text-stone-400'
|
|
}`}
|
|
>
|
|
{notes.length}/{MAX_CUSTOMER_NOTES}
|
|
</span>
|
|
</div>
|
|
<textarea
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value.slice(0, MAX_CUSTOMER_NOTES))}
|
|
disabled={isDisabled}
|
|
className="w-full text-sm border border-stone-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-stone-100 disabled:text-stone-400"
|
|
rows={3}
|
|
placeholder="Any special requests or notes for this appointment..."
|
|
/>
|
|
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
|
{saved && <p className="text-xs text-green-600 mt-1">Saved!</p>}
|
|
{!isDisabled && (
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving || notes === appt.customerNotes}
|
|
className="mt-2 flex items-center gap-1.5 text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{saving && <Loader2 size={12} className="animate-spin" />}
|
|
{saving ? 'Saving...' : 'Save Notes'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function RescheduleFlow({
|
|
appointment: appt,
|
|
onClose,
|
|
sessionId,
|
|
}: RescheduleFlowProps) {
|
|
const [selectedDate, setSelectedDate] = useState('');
|
|
const [selectedTime, setSelectedTime] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
const [slotsLoading, setSlotsLoading] = useState(false);
|
|
const [slotsError, setSlotsError] = useState<string | null>(null);
|
|
const [availableTimes, setAvailableTimes] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedDate || !sessionId) {
|
|
setAvailableTimes([]);
|
|
return;
|
|
}
|
|
const params = new URLSearchParams({ date: selectedDate });
|
|
setSlotsLoading(true);
|
|
setSlotsError(null);
|
|
fetch(`/api/book/availability?${params.toString()}`, {
|
|
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
|
})
|
|
.then((r) => r.json() as Promise<string[]>)
|
|
.then(setAvailableTimes)
|
|
.catch(() => setSlotsError('Failed to load time slots'))
|
|
.finally(() => setSlotsLoading(false));
|
|
}, [selectedDate, sessionId]);
|
|
|
|
async function handleSubmit() {
|
|
if (!selectedDate || !selectedTime) return;
|
|
|
|
const [hoursMinutes = '', period = ''] = selectedTime.split(' ');
|
|
const [hoursStr = '0', minutesStr = '0'] = hoursMinutes.split(':');
|
|
let hours = parseInt(hoursStr, 10);
|
|
const minutes = parseInt(minutesStr ?? '0', 10);
|
|
if (period === 'PM' && hours !== 12) hours += 12;
|
|
if (period === 'AM' && hours === 12) hours = 0;
|
|
const isoTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
|
|
const startTime = new Date(`${selectedDate}T${isoTime}`).toISOString();
|
|
|
|
setSubmitting(true);
|
|
setError(null);
|
|
try {
|
|
const headers: Record<string, string> = { 'Content-Type': 'application/json' };
|
|
if (sessionId) headers['X-Impersonation-Session-Id'] = sessionId ?? '';
|
|
const res = await fetch(`/api/portal/appointments/${appt.id}/reschedule`, {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify({ startTime }),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ error: 'Failed to reschedule' }));
|
|
throw new Error(err.error || `HTTP ${res.status}`);
|
|
}
|
|
setSuccess(true);
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1500);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to reschedule');
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between p-5 border-b border-stone-200">
|
|
<h2 className="font-semibold text-stone-800">Reschedule Appointment</h2>
|
|
<button onClick={onClose} className="text-stone-400 hover:text-stone-600">
|
|
Close
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
{success ? (
|
|
<div className="text-center py-8">
|
|
<div className="text-4xl mb-3">OK</div>
|
|
<h3 className="text-lg font-semibold text-stone-800 mb-1">
|
|
Appointment Rescheduled!
|
|
</h3>
|
|
<p className="text-sm text-stone-500">Redirecting...</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="bg-stone-50 rounded-xl p-4 mb-4 text-sm">
|
|
<p className="font-medium text-stone-800">
|
|
{appt.petName || 'Pet'} — {appt.serviceName || 'Service'}
|
|
</p>
|
|
<p className="text-stone-500 mt-0.5">
|
|
{formatDate(appt.date)} at {appt.time} with{' '}
|
|
{appt.groomerName || 'First Available'}
|
|
</p>
|
|
</div>
|
|
|
|
<h3 className="font-medium text-stone-800 mb-3">Pick a New Date & Time</h3>
|
|
<input
|
|
type="date"
|
|
aria-label="Select date"
|
|
value={selectedDate}
|
|
onChange={(e) => setSelectedDate(e.target.value)}
|
|
min={new Date().toISOString().split('T')[0]}
|
|
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
|
|
/>
|
|
{selectedDate && (
|
|
<div className="grid grid-cols-3 gap-2 mb-4">
|
|
{slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
|
|
{!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
|
|
{!slotsLoading && availableTimes.length === 0 && !slotsError && (
|
|
<p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
|
|
)}
|
|
{!slotsLoading && availableTimes.map((time) => (
|
|
<button
|
|
key={time}
|
|
onClick={() => setSelectedTime(time)}
|
|
className={`px-3 py-2 rounded-lg text-sm border ${
|
|
selectedTime === time
|
|
? 'border-blue-500 bg-blue-50 font-medium'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
{time}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && <p className="text-xs text-red-500 mb-3">{error}</p>}
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!selectedDate || !selectedTime || submitting}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{submitting ? 'Rescheduling...' : 'Confirm Reschedule'}
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface BookingFlowProps {
|
|
onClose: () => void;
|
|
sessionId: string | null;
|
|
}
|
|
|
|
function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
|
|
const [step, setStep] = useState(1);
|
|
const [pets, setPets] = useState<Pet[]>([]);
|
|
const [services, setServices] = useState<Service[]>([]);
|
|
const [selectedPet, setSelectedPet] = useState<Pet | null>(null);
|
|
const [selectedServices, setSelectedServices] = useState<Service[]>([]);
|
|
const [selectedAddOns, setSelectedAddOns] = useState<Service[]>([]);
|
|
const [selectedGroomer] = useState<string>('first-available');
|
|
const [selectedDate, setSelectedDate] = useState('');
|
|
const [selectedTime, setSelectedTime] = useState('');
|
|
const [notes, setNotes] = useState('');
|
|
const [recurring, setRecurring] = useState('');
|
|
const [confirmed, setConfirmed] = useState(false);
|
|
useEffect(() => {
|
|
if (confirmed) {
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "portal" });
|
|
}
|
|
}, [confirmed]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [slotsLoading, setSlotsLoading] = useState(false);
|
|
const [slotsError, setSlotsError] = useState<string | null>(null);
|
|
const [availableTimes, setAvailableTimes] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedDate || !sessionId) {
|
|
setAvailableTimes([]);
|
|
return;
|
|
}
|
|
const params = new URLSearchParams({ date: selectedDate });
|
|
setSlotsLoading(true);
|
|
setSlotsError(null);
|
|
fetch(`/api/book/availability?${params.toString()}`, {
|
|
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
|
})
|
|
.then((r) => r.json() as Promise<string[]>)
|
|
.then(setAvailableTimes)
|
|
.catch(() => setSlotsError('Failed to load time slots'))
|
|
.finally(() => setSlotsLoading(false));
|
|
}, [selectedDate, sessionId]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (!sessionId) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const [petsRes, servicesRes] = await Promise.all([
|
|
fetch('/api/portal/pets', {
|
|
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
|
}),
|
|
fetch('/api/portal/services', {
|
|
headers: { "X-Impersonation-Session-Id": sessionId ?? "" },
|
|
}),
|
|
]);
|
|
|
|
if (petsRes.ok) {
|
|
const petsData = await petsRes.json();
|
|
setPets(petsData.pets || petsData || []);
|
|
}
|
|
|
|
if (servicesRes.ok) {
|
|
const servicesData = await servicesRes.json();
|
|
setServices(servicesData.services || servicesData || []);
|
|
}
|
|
} catch {
|
|
setError('Failed to load data. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [sessionId]);
|
|
|
|
const mainServices = services.filter((s) => !s.isAddOn);
|
|
const addOnServices = services.filter((s) => s.isAddOn);
|
|
|
|
async function handleConfirmBooking() {
|
|
if (!sessionId || !selectedPet || selectedServices.length === 0) return;
|
|
|
|
setSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/portal/waitlist', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Impersonation-Session-Id': sessionId ?? '',
|
|
},
|
|
body: JSON.stringify({
|
|
petId: selectedPet.id,
|
|
serviceId: selectedServices[0]?.id,
|
|
serviceIds: selectedServices.map((s) => s.id),
|
|
addOnIds: selectedAddOns.map((s) => s.id),
|
|
groomerId: selectedGroomer === 'first-available' ? null : selectedGroomer,
|
|
preferredDate: selectedDate,
|
|
preferredTime: selectedTime,
|
|
notes: notes || undefined,
|
|
recurring: recurring || undefined,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setConfirmed(true);
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SUBMIT, { step: "submit", flow: "portal" });
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1500);
|
|
} else {
|
|
const data = await response.json();
|
|
setError(data.message || 'Failed to book appointment. Please try again.');
|
|
setSubmitting(false);
|
|
}
|
|
} catch {
|
|
setError('Failed to book appointment. Please try again.');
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full p-8">
|
|
<div className="flex items-center justify-center">
|
|
<Loader2 className="animate-spin text-blue-600" size={24} />
|
|
<span className="ml-3 text-gray-600">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between p-5 border-b border-stone-200">
|
|
<h2 className="font-semibold text-stone-800">Book Appointment</h2>
|
|
<button onClick={onClose} className="text-stone-400 hover:text-stone-600">
|
|
Close
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 px-5 pt-4">
|
|
{[1, 2, 3, 4, 5].map((s) => (
|
|
<div
|
|
key={s}
|
|
className={`flex-1 h-1.5 rounded-full ${s <= step ? 'bg-blue-600' : 'bg-stone-200'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="p-5">
|
|
{confirmed ? (
|
|
<div className="text-center py-8">
|
|
<div className="text-4xl mb-3">OK</div>
|
|
<h3 className="text-lg font-semibold text-stone-800 mb-1">
|
|
Appointment Requested!
|
|
</h3>
|
|
<p className="text-sm text-stone-500 mb-4">
|
|
{selectedPet?.name} on {formatDate(selectedDate)} at {selectedTime}
|
|
</p>
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{step === 1 && (
|
|
<div>
|
|
<h3 className="font-medium text-stone-800 mb-3">Select Pet</h3>
|
|
<div className="space-y-2">
|
|
{pets.map((pet) => (
|
|
<button
|
|
key={pet.id}
|
|
onClick={() => {
|
|
setSelectedPet(pet);
|
|
setStep(2);
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_SERVICE, { step: "service", flow: "portal" });
|
|
}}
|
|
className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-colors ${
|
|
selectedPet?.id === pet.id
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg">
|
|
{pet.photo || pet.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-stone-800">{pet.name}</p>
|
|
<p className="text-xs text-stone-500">
|
|
{pet.breed}
|
|
{pet.weight ? ` · ${pet.weight} lbs` : ''}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
{pets.length === 0 && (
|
|
<p className="text-center text-stone-400 py-4">
|
|
No pets found. Please add a pet first.
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => setStep(2)}
|
|
disabled={!selectedPet}
|
|
className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<div>
|
|
<h3 className="font-medium text-stone-800 mb-3">Select Services</h3>
|
|
<div className="space-y-2 mb-4">
|
|
{mainServices.map((svc) => (
|
|
<button
|
|
key={svc.id}
|
|
onClick={() => {
|
|
setSelectedServices((prev) =>
|
|
prev.find((s) => s.id === svc.id)
|
|
? prev.filter((s) => s.id !== svc.id)
|
|
: [...prev, svc]
|
|
);
|
|
}}
|
|
className={`w-full flex items-center justify-between p-3 rounded-xl border text-left ${
|
|
selectedServices.find((s) => s.id === svc.id)
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
<div>
|
|
<p className="font-medium text-stone-800 text-sm">{svc.name}</p>
|
|
{svc.description && (
|
|
<p className="text-xs text-stone-500">{svc.description}</p>
|
|
)}
|
|
</div>
|
|
<div className="text-right shrink-0 ml-3">
|
|
<p className="text-sm font-medium text-stone-700">
|
|
{svc.priceRange || `$${svc.price}`}
|
|
</p>
|
|
<p className="text-xs text-stone-400">{svc.duration} min</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{selectedServices.length > 0 && addOnServices.length > 0 && (
|
|
<>
|
|
<h4 className="font-medium text-stone-700 text-sm mb-2">
|
|
Add-ons (optional)
|
|
</h4>
|
|
<div className="space-y-2 mb-4">
|
|
{addOnServices.map((svc) => (
|
|
<button
|
|
key={svc.id}
|
|
onClick={() => {
|
|
setSelectedAddOns((prev) =>
|
|
prev.find((s) => s.id === svc.id)
|
|
? prev.filter((s) => s.id !== svc.id)
|
|
: [...prev, svc]
|
|
);
|
|
}}
|
|
className={`w-full flex items-center justify-between p-2.5 rounded-lg border text-left text-sm ${
|
|
selectedAddOns.find((s) => s.id === svc.id)
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
<div>
|
|
<p className="font-medium text-stone-800">{svc.name}</p>
|
|
{svc.description && (
|
|
<p className="text-xs text-stone-500">{svc.description}</p>
|
|
)}
|
|
</div>
|
|
<span className="text-stone-600 shrink-0 ml-3">
|
|
{svc.priceRange || `$${svc.price}`}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
onClick={() => setStep(1)}
|
|
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={() => setStep(3)}
|
|
disabled={selectedServices.length === 0}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<div>
|
|
<h3 className="font-medium text-stone-800 mb-3">Select Groomer</h3>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={() => setStep(4)}
|
|
className={`w-full flex items-center gap-3 p-3 rounded-xl border text-left ${
|
|
selectedGroomer === 'first-available'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
|
|
First
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-stone-800">First Available</p>
|
|
<p className="text-xs text-stone-500">
|
|
We will match you with the best available groomer
|
|
</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-stone-400 mt-3">
|
|
Note: Groomer listing not available. Showing "First Available" only.
|
|
</p>
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
onClick={() => setStep(2)}
|
|
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setStep(4);
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_CONTACT, { step: "groomer", flow: "portal" });
|
|
}}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{step === 4 && (
|
|
<div>
|
|
<h3 className="font-medium text-stone-800 mb-3">Pick Date & Time</h3>
|
|
<input
|
|
type="date"
|
|
aria-label="Select date"
|
|
value={selectedDate}
|
|
onChange={(e) => setSelectedDate(e.target.value)}
|
|
min={new Date().toISOString().split('T')[0]}
|
|
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-3"
|
|
/>
|
|
{selectedDate && (
|
|
<div className="grid grid-cols-3 gap-2 mb-4">
|
|
{slotsLoading && <p className="col-span-3 text-sm text-stone-500 py-2">Checking availability…</p>}
|
|
{!slotsLoading && slotsError && <p className="col-span-3 text-sm text-red-500 py-2">{slotsError}</p>}
|
|
{!slotsLoading && availableTimes.length === 0 && !slotsError && (
|
|
<p className="col-span-3 text-sm text-stone-500 py-2">No available slots on this date.</p>
|
|
)}
|
|
{!slotsLoading && availableTimes.map((time) => (
|
|
<button
|
|
key={time}
|
|
onClick={() => setSelectedTime(time)}
|
|
className={`px-3 py-2 rounded-lg text-sm border ${
|
|
selectedTime === time
|
|
? 'border-blue-500 bg-blue-50 font-medium'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}`}
|
|
>
|
|
{time}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="mb-4">
|
|
<label className="flex items-center gap-2 text-sm text-stone-700 mb-1">
|
|
Recurring (optional)
|
|
</label>
|
|
<select
|
|
value={recurring}
|
|
onChange={(e) => setRecurring(e.target.value)}
|
|
className="w-full border border-stone-200 rounded-lg px-3 py-2 text-sm"
|
|
>
|
|
<option value="">One-time</option>
|
|
<option value="4">Every 4 weeks</option>
|
|
<option value="6">Every 6 weeks</option>
|
|
<option value="8">Every 8 weeks</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setStep(3)}
|
|
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setStep(5);
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_STEP_TIME, { step: "time", flow: "portal" });
|
|
}}
|
|
disabled={!selectedDate || !selectedTime}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium disabled:opacity-50"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{step === 5 && (
|
|
<div>
|
|
<h3 className="font-medium text-stone-800 mb-3">Review & Confirm</h3>
|
|
<div className="bg-stone-50 rounded-xl p-4 space-y-2 text-sm mb-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Pet</span>
|
|
<span className="font-medium">{selectedPet?.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Services</span>
|
|
<span className="font-medium">
|
|
{selectedServices.map((s) => s.name).join(', ')}
|
|
</span>
|
|
</div>
|
|
{selectedAddOns.length > 0 && (
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Add-ons</span>
|
|
<span className="font-medium">
|
|
{selectedAddOns.map((s) => s.name).join(', ')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Groomer</span>
|
|
<span className="font-medium">First Available</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Date & Time</span>
|
|
<span className="font-medium">
|
|
{formatDate(selectedDate)} at {selectedTime}
|
|
</span>
|
|
</div>
|
|
{recurring && (
|
|
<div className="flex justify-between">
|
|
<span className="text-stone-500">Recurring</span>
|
|
<span className="font-medium">Every {recurring} weeks</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-stone-700 mb-1">
|
|
Notes for groomer (optional)
|
|
</label>
|
|
<textarea
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm"
|
|
rows={2}
|
|
placeholder="Any special instructions..."
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<div className="bg-red-50 rounded-lg px-3 py-2 text-xs text-red-700 mb-4">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setStep(4)}
|
|
className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={handleConfirmBooking}
|
|
disabled={submitting}
|
|
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{submitting ? 'Booking...' : 'Confirm Booking'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |