Jacek Pyziak
6f6c1fcf17
Sekcja Elementor zawierająca modal miała elementor-hidden-mobile/tablet, co powodowało display:none na rodzicu. Modal position:fixed wewnątrz ukrytego elementu miał zerowe wymiary. Fix: przeniesienie overlay do document.body w initRefs(). Plan Phase 13 (pakiety ochronne) utworzony, BLOCKED — czeka na klienta. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.3 KiB
4.3 KiB
Carei - Formularz Rezerwacji Samochodu
Value Proposition
Plugin Elementor do rezerwacji samochodu na stronie carei.pagedev.pl, zintegrowany z API Softra Rent. Formularz wielokrokowy: krok 1 (podstawowe dane rezerwacji) → krok 2 (Overlay z pełnym podsumowaniem i płatnością).
Core Requirements
- Elementor Widget — plugin rejestrujący widget w Elementorze, wywoływany przyciskiem "Złóż zapytanie o rezerwację"
- Integracja z Softra Rent API — pobieranie oddziałów, klas pojazdów, cen, dodatków; tworzenie klientów i rezerwacji
- Multi-step form — krok 1: formularz z Figmy (segment, daty, lokalizacja, opcje, dane osobowe), krok 2: Overlay z podsumowaniem
- Responsive — desktop (modal overlay) i mobile (full-screen bottom sheet)
- Design zgodny z Figmą — kolory Carei (#2F2482, #FF0000), font Albert Sans
Tech Stack
- WordPress + Hello Elementor theme
- Elementor + Elementor Pro
- Istniejący plugin:
wp-content/plugins/elementor-addon/(custom widgets) - PHP backend (REST API proxy do Softra)
- Vanilla JS + CSS frontend (bez frameworków JS)
- Softra Rent API:
https://softra.com.pl:8444/rent2www-ci-tst
Constraints
- Dane API w
.env(url, username, password) - Token JWT ważny 1h — cacheowanie po stronie serwera
- Formularz NIE jest natywnym formularzem Elementor Pro — to custom widget
- Brak dodatkowych zależności npm/composer — czysty PHP + JS
Validated Requirements (Milestone v0.1)
- ✓ Elementor Widget z modalem rezerwacji — Phase 1-2
- ✓ Integracja z Softra Rent API (auth, branch, carclass, pricelist, booking) — Phase 1, 3
- ✓ Multi-step form: formularz → podsumowanie → sukces — Phase 2-3
- ✓ Responsive modal (desktop overlay + mobile) — Phase 2
- ✓ Error handling: token retry, timeout, network errors — Phase 4
- ✓ Accessibility: ARIA dialog, focus trap, aria-live — Phase 4
- ✓ Admin panel: CPT carei_reservation, lista, szczegóły, statusy — Phase 5
Validated Requirements (Milestone v0.2)
- ✓ Wyjazd zagraniczny: sekcja z wyszukiwarką krajów — Phase 6
- ✓ Hero Search Form: mini formularz w hero z pre-fill do modala — Phase 7
Key Decisions
| Decision | Phase | Rationale |
|---|---|---|
| CPT + post_meta (nie custom table) | 5 | WordPress-native, prostsze dla MVP |
| Fire-and-forget save | 5 | Nie blokuj response — rezerwacja już w Softra |
| Meta-based status (nie taxonomy) | 5 | Prosty 3-wartościowy enum |
| Token retry on 401/403 | 4 | Automatyczny re-auth bez interwencji usera |
| Inline display:none for steps | 4 | CSS class conflict resolution |
| Calendar picker opacity:0 stretch | 7 | Ukrycie natywnej ikonki z zachowaniem kliknięcia |
| Search form niezależne API loading | 7 | Dane dostępne od razu, niezależnie od modala |
| Static city→SVG coords (no geocoding) | 8 | Prostota, brak zewnętrznych zależności |
| Branch name D/L suffix stripping | 8 | API zwraca warianty Dworzec/Lotnisko — deduplikacja |
| CSS ::after for city separators | 8 | Zapobiega orphanowaniu | na początku linii |
| Modal overlay appendChild to body | 14 | Elementor hidden-mobile na rodzicu — fixed positioning wymaga body |
Validated Requirements (Milestone v0.3)
- ✓ Mapa SVG Polski z dynamicznymi pinami oddziałów i tooltipami — Phase 8
- ✓ Siatka miast oddziałowych (widget Elementor) — Phase 8
- ✓ Grid oddziałów z adresami (widget Elementor) — Phase 8
- ✓ Cachowanie
/branch/listz TTL 60 min — Phase 8
Validated Requirements (Milestone v0.5)
- ✓ Modal rezerwacji działa na mobile/tablet — Phase 14
Out of Scope (backlog)
- Ubezpieczenie (pakiet Soft/Premium) — czeka na potwierdzenie klienta (źródło danych)
- Eksport CSV/PDF rezerwacji
- Email notyfikacje
API Endpoints (kluczowe)
| Endpoint | Metoda | Użycie |
|---|---|---|
/account/auth |
POST | Autoryzacja JWT |
/branch/list |
GET | Lista oddziałów (miejsce odbioru) |
/car/class/list |
POST | Klasy pojazdów wg dat i oddziału |
/pricelist/list |
POST | Cennik z dodatkami |
/customer/add |
POST | Tworzenie klienta |
/rent/makebooking |
POST | Złożenie rezerwacji |
/rent/confirm |
POST | Potwierdzenie rezerwacji |
/rent/princingSummary |
POST | Podsumowanie opłat |
/agreement/def/list |
GET | Definicje zgód RODO |