You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
continuous-integration/drone/push Build is passing
Details
Implemented complete slot picker flow with real-time validation: **Components Created:** 1. **SlotPickerTile** (src/components/bookings/SlotPickerTile.tsx) - Individual slot tile with dry_run validation - 4 validation states: idle, validating, valid, invalid - Real-time API calls to validateMoveBooking() on selection - Visual feedback: checkmark (✓) for valid, X for invalid, spinner during validation - Displays validation errors inline with bullet points - Shows success message "✓ Valid - ready to confirm" - Integrates CapacityDisplay component - Color-coded borders (green=valid, red=invalid, gray=idle) - Disabled state for full/cancelled slots - onValidationResult callback for parent coordination 2. **SlotPickerModal** (src/components/bookings/SlotPickerModal.tsx) - Full-screen modal for slot selection - Groups slots by date (weekday, month, day, year) - Sorts dates chronologically - Filters out current slot - 2-column grid layout for slots - Info banner with policy hints (14-day window, product-type, club match) - Confirm button disabled until valid slot selected - Loading states with spinner - Empty state with helpful message - Tracks validation state from child tiles 3. **CancelBookingModal** (src/components/bookings/CancelBookingModal.tsx) - Confirmation modal for booking cancellation - Optional reason textarea (500 char limit) - Displays grace period policy (reads from booking.policies or defaults to 15 min) - Shows booking details (court, time, attendees count) - Warning banner: "This action cannot be undone" - Policy info banner with grace period details - Two-button layout: "Keep Booking" / "Yes, Cancel Booking" - Loading state with spinner **Features:** - Live dry_run validation on slot selection (no manual trigger needed) - Real-time feedback with checkmarks/errors - Graceful error handling (network failures, validation errors) - Parameterized error messages from getBookingErrorMessage() - SSR-safe with proper disabled states - Professional slate theme matching existing UI - Responsive grid layouts **Integration:** - SlotPickerTile calls validateMoveBooking() API automatically - SlotPickerModal coordinates validation state - CancelBookingModal reads policy fields from BookingDetail - All components ready for integration into BookingDrawer Related: Phase 3, Booking Admin API v1.1, BUILD #23 |
1 month ago | |
|---|---|---|
| .. | ||
| app | 1 month ago | |
| assets | 1 month ago | |
| components | 1 month ago | |
| config | 1 month ago | |
| constants | 1 month ago | |
| contexts | 1 month ago | |
| hooks | 1 month ago | |
| lib | 1 month ago | |
| services | 1 month ago | |
| styles | 1 month ago | |
| types | 1 month ago | |
| utils | 1 month ago | |
| index.css | 1 month ago | |
| middleware.ts | 1 month ago | |