elpatron/beauty-bookings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor booking-form: Add compatibility fallback, functional state updates, memoized calculations, and treatment reconciliation

Browse Source
This commit is contained in:
elpatron
2025-10-08 18:17:59 +02:00
parent 94e269697a
commit d153aad8b3
2 changed files with 267 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/client/components/booking-form.tsx
View File

@@ -1,9 +1,12 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useMemo } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { queryClient } from "@/client/rpc-client";
// Feature flag for multi-treatments availability API compatibility
const USE_MULTI_TREATMENTS_AVAILABILITY = false;
export function BookingForm() {
const [selectedTreatment, setSelectedTreatment] = useState("");
const [selectedTreatments, setSelectedTreatments] = useState<Array<{id: string, name: string, duration: number, price: number}>>([]);
const [customerName, setCustomerName] = useState("");
const [customerEmail, setCustomerEmail] = useState("");
const [customerPhone, setCustomerPhone] = useState("");
@@ -62,29 +65,80 @@ export function BookingForm() {
queryClient.treatments.live.list.experimental_liveOptions()
);
// Dynamische Verfügbarkeitsabfrage für das gewählte Datum und die Behandlung
// Comment 3: Compute total duration and price once per render
const totalDuration = useMemo(
() => selectedTreatments.reduce((sum, t) => sum + t.duration, 0),
[selectedTreatments]
);
const totalPrice = useMemo(
() => selectedTreatments.reduce((sum, t) => sum + t.price, 0),
[selectedTreatments]
);
// Comment 1: Dynamische Verfügbarkeitsabfrage mit Kompatibilitäts-Fallback
const availabilityQueryInput = USE_MULTI_TREATMENTS_AVAILABILITY
? { date: appointmentDate, treatmentIds: selectedTreatments.map(t => t.id) }
: { date: appointmentDate, treatmentId: selectedTreatments[0]?.id ?? "" };
const availabilityQueryEnabled = USE_MULTI_TREATMENTS_AVAILABILITY
? !!appointmentDate && selectedTreatments.length > 0
: !!appointmentDate && selectedTreatments.length > 0;
const { data: availableTimes, isLoading, isFetching, error } = useQuery({
...queryClient.recurringAvailability.getAvailableTimes.queryOptions({
input: {
date: appointmentDate,
treatmentId: selectedTreatment
}
input: availabilityQueryInput as any
}),
enabled: !!appointmentDate && !!selectedTreatment
enabled: availabilityQueryEnabled
});
const { mutate: createBooking, isPending } = useMutation(
queryClient.bookings.create.mutationOptions()
);
const selectedTreatmentData = treatments?.find((t) => t.id === selectedTreatment);
// Clear selectedTime when treatment changes
const handleTreatmentChange = (treatmentId: string) => {
setSelectedTreatment(treatmentId);
// Comment 2: Handle treatment checkbox toggle with functional state updates
const handleTreatmentToggle = (treatment: {id: string, name: string, duration: number, price: number}) => {
setSelectedTreatments((prev) => {
const isSelected = prev.some(t => t.id === treatment.id);
if (isSelected) {
// Remove from selection
return prev.filter(t => t.id !== treatment.id);
} else if (prev.length < 3) {
// Add to selection (only if limit not reached)
return [...prev, {
id: treatment.id,
name: treatment.name,
duration: treatment.duration,
price: treatment.price
}];
}
// Return unchanged if limit reached
return prev;
});
// Clear selected time when treatments change
setSelectedTime("");
};
// Comment 4: Reconcile selectedTreatments when treatments list changes
useEffect(() => {
if (!treatments) return;
setSelectedTreatments((prev) => {
const validTreatments = prev.filter((selected) =>
treatments.some((t) => t.id === selected.id)
);
// Only update state if something changed to avoid unnecessary re-renders
if (validTreatments.length !== prev.length) {
return validTreatments;
}
return prev;
});
}, [treatments]);
// Clear selectedTime when it becomes invalid
useEffect(() => {
if (selectedTime && availableTimes && !availableTimes.includes(selectedTime)) {
@@ -173,7 +227,7 @@ export function BookingForm() {
setErrorMessage(""); // Clear any previous error messages
// console.log("Form submitted with data:", {
// selectedTreatment,
// selectedTreatments,
// customerName,
// customerEmail,
// customerPhone,
@@ -182,8 +236,12 @@ export function BookingForm() {
// agbAccepted
// });
if (!selectedTreatment || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedTime) {
setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
if (selectedTreatments.length === 0 || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedTime) {
if (selectedTreatments.length === 0) {
setErrorMessage("Bitte wähle mindestens eine Behandlung aus.");
} else {
setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
}
return;
}
if (!agbAccepted) {
@@ -198,7 +256,7 @@ export function BookingForm() {
// Email validation now handled in backend before booking creation
const appointmentTime = selectedTime;
// console.log("Creating booking with data:", {
// treatmentId: selectedTreatment,
// treatments: selectedTreatments,
// customerName,
// customerEmail,
// customerPhone,
@@ -209,7 +267,7 @@ export function BookingForm() {
// });
createBooking(
{
treatmentId: selectedTreatment,
treatments: selectedTreatments,
customerName,
customerEmail,
customerPhone,
@@ -220,7 +278,7 @@ export function BookingForm() {
},
{
onSuccess: () => {
setSelectedTreatment("");
setSelectedTreatments([]);
setCustomerName("");
setCustomerEmail("");
setCustomerPhone("");
@@ -265,24 +323,65 @@ export function BookingForm() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* Treatment Selection */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Behandlung auswählen *
</label>
<select
value={selectedTreatment}
onChange={(e) => handleTreatmentChange(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
required
>
<option value="">Wähle eine Behandlung</option>
{treatments?.map((treatment) => (
<option key={treatment.id} value={treatment.id}>
{treatment.name} - {(treatment.price / 100).toFixed(2)} € ({treatment.duration} Min)
</option>
))}
</select>
{selectedTreatmentData && (
<p className="mt-2 text-sm text-gray-600">{selectedTreatmentData.description}</p>
<div className="flex justify-between items-center mb-2">
<label className="block text-sm font-medium text-gray-700">
Behandlungen auswählen (1-3) *
</label>
<span className="text-sm text-gray-600">
{selectedTreatments.length} von 3 ausgewählt
</span>
</div>
{/* Checkbox List Container */}
<div className="max-h-96 overflow-y-auto border border-gray-300 rounded-md p-3 space-y-2" aria-label="Wähle bis zu 3 Behandlungen">
{treatments?.map((treatment) => {
const isSelected = selectedTreatments.some(t => t.id === treatment.id);
const isDisabled = selectedTreatments.length >= 3 && !isSelected;
return (
<div key={treatment.id} className="flex items-start space-x-3">
<input
type="checkbox"
id={`treatment-${treatment.id}`}
checked={isSelected}
disabled={isDisabled}
onChange={() => handleTreatmentToggle({
id: treatment.id,
name: treatment.name,
duration: treatment.duration,
price: treatment.price
})}
className="h-4 w-4 text-pink-600 border-gray-300 rounded flex-shrink-0 mt-1"
/>
<label htmlFor={`treatment-${treatment.id}`} className={`flex-1 text-sm cursor-pointer ${isDisabled ? 'text-gray-400' : 'text-gray-700'}`}>
{treatment.name} - {treatment.duration} Min - {(treatment.price / 100).toFixed(2)} €
</label>
</div>
);
})}
</div>
{/* Treatment Descriptions */}
{selectedTreatments.length > 0 && (
<div className="mt-3 space-y-2">
{selectedTreatments.map((selectedTreatment) => {
const fullTreatment = treatments?.find(t => t.id === selectedTreatment.id);
return fullTreatment ? (
<p key={selectedTreatment.id} className="text-sm text-gray-600">
<span className="font-medium">{fullTreatment.name}:</span> {fullTreatment.description}
</p>
) : null;
})}
</div>
)}
{/* Live Calculation Display */}
{selectedTreatments.length > 0 && (
<div className="mt-3 bg-pink-50 border border-pink-200 rounded-lg p-4">
<p className="font-semibold text-pink-700">
📊 Gesamt: {totalDuration} Min | {(totalPrice / 100).toFixed(2)} €
</p>
</div>
)}
</div>
@@ -350,7 +449,7 @@ export function BookingForm() {
value={selectedTime}
onChange={(e) => setSelectedTime(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
disabled={!appointmentDate || !selectedTreatment || isLoading || isFetching}
disabled={!appointmentDate || selectedTreatments.length === 0 || isLoading || isFetching}
required
>
<option value="">Zeit auswählen</option>
@@ -360,23 +459,23 @@ export function BookingForm() {
</option>
))}
</select>
{appointmentDate && selectedTreatment && isLoading && (
{appointmentDate && selectedTreatments.length > 0 && isLoading && (
<p className="mt-2 text-sm text-gray-500">
Lade verfügbare Zeiten...
</p>
)}
{appointmentDate && selectedTreatment && error && (
{appointmentDate && selectedTreatments.length > 0 && error && (
<p className="mt-2 text-sm text-red-500">
Fehler beim Laden der verfügbaren Zeiten. Bitte versuche es erneut.
</p>
)}
{appointmentDate && selectedTreatment && !isLoading && !isFetching && !error && (!availableTimes || availableTimes.length === 0) && (
{appointmentDate && selectedTreatments.length > 0 && !isLoading && !isFetching && !error && (!availableTimes || availableTimes.length === 0) && (
<p className="mt-2 text-sm text-gray-500">
Keine verfügbaren Zeiten für dieses Datum. Bitte wähle ein anderes Datum.
</p>
)}
{selectedTreatmentData && (
<p className="mt-1 text-xs text-gray-500">Dauer: {selectedTreatmentData.duration} Minuten</p>
{selectedTreatments.length > 0 && (
<p className="mt-1 text-xs text-gray-500">Gesamtdauer: {totalDuration} Minuten</p>
)}
</div>
</div>