---
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*