132 lines
5.9 KiB
Markdown
132 lines
5.9 KiB
Markdown
---
|
|
phase: 02-form-ui-step1
|
|
plan: 01
|
|
subsystem: ui
|
|
tags: [elementor, modal, form, softra-api, css, javascript]
|
|
|
|
requires:
|
|
- phase: 01-reservation-form-plugin
|
|
provides: Plugin skeleton, REST proxy, Elementor widget mount point
|
|
provides:
|
|
- Complete reservation form UI (Step 1) in Elementor modal
|
|
- Dynamic segment/branch loading from Softra API
|
|
- Segment-to-branch filtering with cached mapping
|
|
- Form validation and data collection
|
|
affects: [03-form-ui-step2, 05-admin-panel]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [BEM CSS naming, IIFE JS module, cached API mapping via WP transients]
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- wp-content/plugins/carei-reservation/includes/class-elementor-widget.php
|
|
- wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
|
|
- wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
|
|
- wp-content/plugins/carei-reservation/includes/class-softra-api.php
|
|
- wp-content/plugins/carei-reservation/includes/class-rest-proxy.php
|
|
|
|
key-decisions:
|
|
- "Segment shows ALL classes from ALL branches (car-classes-all endpoint)"
|
|
- "Pickup location filters by selected segment via cached backend mapping"
|
|
- "Extras hidden until segment AND pickup selected"
|
|
- "Insurance section skipped — API has no dedicated insurance items"
|
|
- "Foreign travel section skipped — API has no country/travel endpoints"
|
|
- "Backend segment-branches map cached in WP transient for 6 hours"
|
|
|
|
patterns-established:
|
|
- "Form field visibility driven by selection state, not page load"
|
|
- "Backend mapping endpoint with transient caching for cross-entity relationships"
|
|
|
|
duration: ~3h
|
|
started: 2025-03-25T08:00:00Z
|
|
completed: 2025-03-25T11:00:00Z
|
|
---
|
|
|
|
# Phase 2 Plan 01: Form UI — Krok 1 Summary
|
|
|
|
**Kompletny formularz rezerwacji w modalu Elementor z dynamicznym ładowaniem segmentów i oddziałów z API Softra, filtrowanie lokalizacji po segmencie, walidacja i zbieranie danych.**
|
|
|
|
## Performance
|
|
|
|
| Metric | Value |
|
|
|--------|-------|
|
|
| Duration | ~3h (across sessions) |
|
|
| Tasks | 3 completed |
|
|
| Files modified | 5 |
|
|
|
|
## Acceptance Criteria Results
|
|
|
|
| Criterion | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| AC-1: Formularz renderuje się w modalu zgodnie z Figmą | Pass | Layout, kolory, typografia zgodne. Pominięto sekcje ubezpieczenia i wyjazdu zagranicznego (brak w API) |
|
|
| AC-2: Dynamiczne dane z API | Pass | Segmenty z car-classes-all, oddziały filtrowane po segmencie, opcje dodatkowe z pricelist. Zmieniono flow vs plan: segment ładuje się pierwszy (ze wszystkich lokalizacji), nie po wyborze oddziału |
|
|
| AC-3: Interakcje formularza działają poprawnie | Pass | Checkbox zwrot, walidacja, auto-kalkulacja dni, dynamiczne extras — wszystko działa |
|
|
|
|
## Accomplishments
|
|
|
|
- Formularz rezerwacji renderuje się w modalu z pełnym stylingiem Figma (desktop + mobile)
|
|
- Dynamiczne ładowanie: segmenty (wszystkie), oddziały (filtrowane po segmencie), opcje dodatkowe (z cennika API)
|
|
- Nowy endpoint `/segments-branches-map` z cachem 6h — mapuje segmenty na oddziały
|
|
- Walidacja formularza z komunikatami, zbieranie danych do console.log (gotowe na Phase 3)
|
|
|
|
## Files Modified
|
|
|
|
| File | Change | Purpose |
|
|
|------|--------|---------|
|
|
| `includes/class-elementor-widget.php` | Modified | Pełny HTML formularza: segment+daty w jednej linii, pickup+checkbox w jednej linii, ukrywalny wrapper na extras |
|
|
| `assets/css/carei-reservation.css` | Modified | 550+ linii — modal, form layout, inputs, checkboxes, cards, responsive, validation, disabled states |
|
|
| `assets/js/carei-reservation.js` | Modified | 450+ linii — API helpers, segment/branch loading, filtering, extras hide/show, validation, form collection |
|
|
| `includes/class-softra-api.php` | Modified | Nowa metoda `get_segments_branches_map()` — cached mapping segment→branches |
|
|
| `includes/class-rest-proxy.php` | Modified | Nowy endpoint `GET /segments-branches-map` |
|
|
|
|
## Decisions Made
|
|
|
|
| Decision | Rationale | Impact |
|
|
|----------|-----------|--------|
|
|
| Segment ładuje WSZYSTKIE klasy, nie filtrowane po oddziale | Wymaganie klienta — użytkownik widzi pełną ofertę | Odwrócony flow vs plan: segment pierwszy, oddział filtrowany |
|
|
| Oddziały filtrowane po segmencie | Klient najpierw wybiera segment, potem widzi tylko pasujące oddziały | Nowy backend endpoint z cachem |
|
|
| Pominięto sekcję ubezpieczenia | API nie ma dedykowanych pozycji ubezpieczeniowych (Soft/Premium) | Do backlogu — wrócimy gdy API będzie gotowe |
|
|
| Pominięto sekcję wyjazdu zagranicznego | API nie ma endpointów country/travel | Do backlogu |
|
|
| Extras ukryte do wybrania segmentu + oddziału | Wymaganie klienta — mniej informacji na start | Lepszy UX, mniej przeładowania |
|
|
|
|
## Deviations from Plan
|
|
|
|
### Summary
|
|
|
|
| Type | Count | Impact |
|
|
|------|-------|--------|
|
|
| Scope changes (user-directed) | 3 | Layout i flow zmienione per feedback klienta |
|
|
| Deferred features | 2 | Ubezpieczenie + wyjazd zagraniczny — API limitations |
|
|
|
|
**Total impact:** Formularz jest prostszy niż w Figmie (brak 2 sekcji), ale flow jest lepszy (segment-first).
|
|
|
|
### Scope Changes
|
|
|
|
1. **Segment+daty w jednej linii** — klient poprosił o kompaktniejszy layout
|
|
2. **Pickup+checkbox w jednej linii** — klient poprosił
|
|
3. **Odwrócony flow** — segment pierwszy (z wszystkich lokalizacji), oddziały filtrowane po segmencie
|
|
|
|
### Deferred Items
|
|
|
|
- Sekcja ubezpieczenia (Pakiet Soft/Premium) — API nie ma tych pozycji, w backlogu
|
|
- Sekcja wyjazdu zagranicznego (checkbox + wyszukiwarka krajów) — API nie ma endpointów, w backlogu
|
|
|
|
## Next Phase Readiness
|
|
|
|
**Ready:**
|
|
- Formularz zbiera wszystkie dane i loguje do console
|
|
- API proxy obsługuje customer/add, makebooking, confirm
|
|
- Cennik (pricelist) ładuje się dynamicznie
|
|
- Phase 5 dodana do roadmapy: Admin Panel historia formularzy
|
|
|
|
**Concerns:**
|
|
- Opcje dodatkowe z API zawierają pozycje karno-zwrotowe (BRAK, BRUD, KARA) — Phase 3 powinien je filtrować przy wysyłce
|
|
|
|
**Blockers:** None
|
|
|
|
---
|
|
*Phase: 02-form-ui-step1, Plan: 01*
|
|
*Completed: 2026-03-25*
|