update

2026-03-30 20:23:04 +02:00
parent df13b3613c
commit ca8db7a9da
23 changed files with 972 additions and 108 deletions
--- a/.paul/PROJECT.md
+++ b/.paul/PROJECT.md
@@ -44,7 +44,6 @@ Plugin Elementor do rezerwacji samochodu na stronie carei.pagedev.pl, zintegrowa

 ## Out of Scope (backlog)
 - Ubezpieczenie (pakiet Soft/Premium) — czeka na API Softra
- Wyjazd zagraniczny (lista krajów + ceny) — czeka na API Softra
 - Eksport CSV/PDF rezerwacji
 - Email notyfikacje

--- a/.paul/ROADMAP.md
+++ b/.paul/ROADMAP.md
@@ -19,6 +19,18 @@ Edge cases (token retry, timeout, network errors), animacje przejść form↔sum
 ### Phase 5: Admin Panel — Historia Formularzy ✅ Complete
 CPT `carei_reservation` z automatycznym zapisem po booking, lista z kolumnami i filtrem statusu, meta box szczegółów, system statusów nowe/przeczytane/zrealizowane, auto-mark-read.

+---
+
+## Milestone v0.2: Wyjazd Zagraniczny
+
+**Goal:** Wydzielenie pozycji "WYJAZD ZA GRANICĘ" z opcji dodatkowych do dedykowanej sekcji z wyszukiwarką krajów (zgodnie z Figmą).
+
+**Status:** In progress
+
+### Phase 6: Wyjazd zagraniczny — sekcja + wyszukiwarka krajów 🔄 Planning
+Sekcja "Wyjazd zagraniczny" z checkboxem toggle, wyszukiwarką krajów z flagami/cenami, dodawanie/usuwanie krajów, integracja z API submit. Design z Figmy (node 32-397, 122:1054, 122:1091, 123:1195).
+
+---
+
 ### Backlog (do realizacji gdy API będzie gotowe)
- **Wyjazd zagraniczny:** Checkbox "Planuję trasę poza granicę Polski" + wyszukiwarka krajów z cenami. Wymaga endpointu listy krajów i cennika per kraj w API Softra.
 - **Ubezpieczenie:** Sekcja "Pakiet ochrony Soft/Premium" jak na Figmie. Wymaga dedykowanych pozycji ubezpieczeniowych w API pricelist.
--- a/.paul/STATE.md
+++ b/.paul/STATE.md
@@ -2,35 +2,33 @@

 ## Current Position

-Milestone: v0.1 Formularz Rezerwacji MVP — COMPLETE
-Phase: 5 of 5 (Admin Panel — Historia Formularzy) — Complete
-Plan: 05-01 — Complete
-Status: Milestone v0.1 complete — all 5 phases finished
-Last activity: 2026-03-25 — Phase 5 unified, milestone complete
+Milestone: v0.2 Wyjazd Zagraniczny
+Phase: 6 of 6 (Wyjazd zagraniczny — sekcja + wyszukiwarka krajów) — Planning
+Plan: 06-01 created, awaiting approval
+Status: PLAN created, ready for APPLY
+Last activity: 2026-03-30 — Created .paul/phases/06-wyjazd-zagraniczny/06-01-PLAN.md

 Progress:
- Milestone: [██████████] 100% ✅
- Phase 1: [██████████] 100% ✅
- Phase 2: [██████████] 100% ✅
- Phase 3: [██████████] 100% ✅
- Phase 4: [██████████] 100% ✅
- Phase 5: [██████████] 100% ✅
+- Milestone v0.1: [██████████] 100% ✅
+- Milestone v0.2: [░░░░░░░░░░] 0%
+- Phase 6: [░░░░░░░░░░] 0%

 ## Loop Position

 Current loop state:
 ```
 PLAN ──▶ APPLY ──▶ UNIFY
-  ✓        ✓        ✓     [Loop complete — milestone v0.1 finished]
+  ✓        ○        ○     [Plan created, awaiting approval]
 ```

 ## Session Continuity

-Last session: 2026-03-25
-Stopped at: Milestone v0.1 complete — all phases unified
-Next action: /paul:complete-milestone or start next milestone
-Resume file: .paul/ROADMAP.md
+Last session: 2026-03-30
+Stopped at: Plan 06-01 created
+Next action: Review and approve plan, then run /paul:apply .paul/phases/06-wyjazd-zagraniczny/06-01-PLAN.md
+Resume file: .paul/phases/06-wyjazd-zagraniczny/06-01-PLAN.md
 Resume context:
- All 5 phases complete: skeleton, form UI, booking flow, polish, admin panel
- Plugin fully functional: formularz → API Softra → admin panel
- Backlog: ubezpieczenie + wyjazd zagraniczny (czeka na API)
+- v0.1 complete (5 phases)
+- v0.2 Phase 6: wyjazd zagraniczny — wydzielenie WYJAZD ZA GRANICĘ z extras do dedykowanej sekcji z wyszukiwarką krajów
+- Dane krajów z istniejącego pricelist API (additionalItems z nazwą WYJAZD ZA GRANIC...)
+- Design z Figmy: checkbox toggle + wyszukiwarka z flagami/cenami + karty krajów
--- a/.paul/phases/06-wyjazd-zagraniczny/06-01-PLAN.md
+++ b/.paul/phases/06-wyjazd-zagraniczny/06-01-PLAN.md
@@ -0,0 +1,282 @@
+---
+phase: 06-wyjazd-zagraniczny
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - wp-content/plugins/carei-reservation/includes/class-elementor-widget.php
+  - wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
+  - wp-content/plugins/carei-reservation/assets/css/carei-reservation.css
+autonomous: false
+---
+
+<objective>
+## Goal
+Wydzielić pozycje "WYJAZD ZA GRANICĘ ..." z sekcji "Opcje dodatkowe" do osobnej sekcji "Wyjazd zagraniczny" z checkboxem "Planuję trasę poza granicę Polski" i interaktywną wyszukiwarką krajów zgodną z Figmą.
+
+## Purpose
+Użytkownik chcący zarezerwować samochód z wyjazdem za granicę powinien mieć dedykowaną, intuicyjną sekcję zamiast listy checkboxów zagubionych wśród opcji dodatkowych. Design Figmy przewiduje wyszukiwarkę krajów z flagami, cenami i możliwością dodawania/usuwania — lepsze UX niż surowe checkboxy.
+
+## Output
+- Sekcja "Wyjazd zagraniczny" z checkboxem toggle
+- Wyszukiwarka krajów z 3 stanami (default, active, z wybranymi)
+- Karty krajów z flagą, nazwą, ceną, przyciskiem +/×
+- Wybrane kraje trafiają do API jako extras przy submit
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+@.paul/STATE.md
+
+## Prior Work
+@.paul/phases/02-form-ui/02-01-SUMMARY.md — struktura formularza (opcje dodatkowe, loadExtras)
+
+## Source Files
+@wp-content/plugins/carei-reservation/includes/class-elementor-widget.php — HTML formularza (linia 126-143: extras wrapper)
+@wp-content/plugins/carei-reservation/assets/js/carei-reservation.js — loadExtras() linia 315-346, buildExtraCard() linia 348-364, getSelectedExtrasForApi() linia 588-604
+@wp-content/plugins/carei-reservation/assets/css/carei-reservation.css — style extra-card (linia 390-429)
+
+## Design Reference
+@docs/figma-formularz/README.md — sekcja "Wyjazd zagraniczny" (linia 113-117) + wyszukiwarka krajów (linia 146-177)
+@docs/figma-formularz/input-wyszukiwarka-krajow.jsx — stany wyszukiwarki, karty krajów, kolory
+@docs/figma-formularz/screenshot-popup-desktop.png
+@docs/figma-formularz/screenshot-input-kraje-stany.png
+</context>
+
+<skills>
+No SPECIAL-FLOWS.md — skills section omitted.
+</skills>
+
+<acceptance_criteria>
+
+## AC-1: Pozycje WYJAZD ZA GRANICĘ nie pojawiają się w Opcjach dodatkowych
+```gherkin
+Given formularz z załadowanym cennikiem z API
+When pricelist zawiera pozycje zaczynające się od "WYJAZD ZA GRANIC"
+Then te pozycje NIE wyświetlają się w sekcji "Opcje dodatkowe"
+And wyświetlają się TYLKO w sekcji "Wyjazd zagraniczny"
+```
+
+## AC-2: Sekcja "Wyjazd zagraniczny" z checkboxem toggle
+```gherkin
+Given formularz z załadowanymi extras
+When użytkownik widzi sekcję "Wyjazd zagraniczny"
+Then widoczny jest checkbox "Planuję trasę poza granicę Polski"
+And wyszukiwarka krajów jest UKRYTA dopóki checkbox nie jest zaznaczony
+When użytkownik zaznacza checkbox
+Then wyszukiwarka krajów pojawia się z animacją
+When użytkownik odznacza checkbox
+Then wyszukiwarka znika i wybrane kraje się czyszczą
+```
+
+## AC-3: Wyszukiwarka krajów — wyszukiwanie i dodawanie
+```gherkin
+Given checkbox "Planuję trasę..." jest zaznaczony
+When użytkownik widzi domyślny stan wyszukiwarki
+Then widzi ikonę "+" i tekst "Wyszukaj i dodaj kraj na trasie"
+When użytkownik klika pole i wpisuje tekst (np. "Nie")
+Then pod polem pojawiają się karty krajów pasujących do frazy
+And każda karta ma: flagę (emoji/obraz), nazwę kraju, cenę "od X do Y zł", przycisk "+"
+When użytkownik klika "+" na karcie kraju
+Then kraj zostaje dodany do listy wybranych (karta zmienia styl na selected, "+" → "×")
+```
+
+## AC-4: Wybrane kraje trafiają do API przy submit
+```gherkin
+Given użytkownik wybrał kraje w wyszukiwarce (np. Niemcy, Czechy)
+When formularz jest submitowany
+Then getSelectedExtrasForApi() zawiera pozycje z pricelist odpowiadające wybranym krajom
+And pricing summary i booking zawierają te pozycje
+```
+
+## AC-5: Design zgodny z Figmą
+```gherkin
+Given sekcja "Wyjazd zagraniczny" jest wyświetlona
+Then separator "Wyjazd zagraniczny" ma taki sam styl jak inne separatory
+And karty krajów mają: border-radius 8px, nazwę w #2F2482 Albert Sans SemiBold 15px, cenę w #505050
+And wybrany kraj ma tło rgba(47,36,130,0.05), border rgba(47,36,130,0.2)
+And pole wyszukiwarki ma 48px wysokości, border-radius 8px
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: HTML sekcji "Wyjazd zagraniczny" + filtrowanie w JS</name>
+  <files>wp-content/plugins/carei-reservation/includes/class-elementor-widget.php, wp-content/plugins/carei-reservation/assets/js/carei-reservation.js</files>
+  <action>
+    **PHP (class-elementor-widget.php):**
+    Dodać nową sekcję HTML PRZED sekcją "Opcje dodatkowe" (między linią 135 "Ubezpieczenie" a linią 136 "Opcje dodatkowe"):
+
+    ```
+    <div class="carei-form__divider"><span>Wyjazd zagraniczny</span></div>
+    <div class="carei-form__section" id="carei-abroad-section">
+        <label class="carei-form__checkbox-label">
+            <input type="checkbox" id="carei-abroad-toggle" name="abroadToggle">
+            <span class="carei-form__checkbox-box"><svg ...checkmark...</svg></span>
+            <span>Planuję trasę poza granicę Polski</span>
+        </label>
+        <div id="carei-abroad-search" class="carei-abroad" style="display:none;">
+            <div class="carei-abroad__input-wrap" id="carei-abroad-input-wrap">
+                <svg class="carei-abroad__plus-icon">+</svg>
+                <input type="text" id="carei-abroad-input" class="carei-abroad__input" placeholder="Wyszukaj i dodaj kraj na trasie">
+            </div>
+            <div class="carei-abroad__results" id="carei-abroad-results"></div>
+            <div class="carei-abroad__selected" id="carei-abroad-selected"></div>
+        </div>
+    </div>
+    ```
+
+    **JS (carei-reservation.js) — modyfikacja loadExtras():**
+    W pętli `items.forEach()` (linia 329-341) dodać trzecią kategorię:
+    - Jeśli `name` zaczyna się od "wyjazd za granic" → `abroadItems.push(item)` (NIE do extraItems)
+    - Parsować nazwę kraju z item.name (np. "WYJAZD ZA GRANICĘ - NIEMCY" → "Niemcy")
+    - Przechowywać `abroadItems` w zmiennej modułowej (dostępnej dla wyszukiwarki)
+
+    Po załadowaniu — NIE renderować abroadItems jako checkboxów. Zamiast tego, zachować dane w pamięci JS do użycia przez wyszukiwarkę.
+
+    Avoid: Nie usuwać istniejącej logiki insurance/extras — tylko dodać nową kategorię w `forEach`.
+  </action>
+  <verify>
+    1. Otworzyć formularz, wybrać segment i oddział
+    2. Pozycje "WYJAZD ZA GRANICĘ ..." NIE pojawiają się w "Opcje dodatkowe"
+    3. Widoczna sekcja "Wyjazd zagraniczny" z checkboxem
+  </verify>
+  <done>AC-1 satisfied: pozycje WYJAZD nie lądują w Opcjach dodatkowych. AC-2 partially: sekcja HTML istnieje.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Wyszukiwarka krajów — interakcje JS + style CSS</name>
+  <files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js, wp-content/plugins/carei-reservation/assets/css/carei-reservation.css</files>
+  <action>
+    **JS — nowy blok "Abroad Country Search":**
+
+    1. **Toggle checkbox:** Listener na `#carei-abroad-toggle`:
+       - checked → `#carei-abroad-search` display:block (slide down)
+       - unchecked → hide + wyczyść selected countries
+
+    2. **Mapowanie krajów na flagi:** Obiekt `COUNTRY_FLAGS` z emoji flagami dla typowych krajów (Niemcy 🇩🇪, Czechy 🇨🇿, Norwegia 🇳🇴, etc.). Fallback: flaga 🏳️.
+
+    3. **Wyszukiwanie:** Input event na `#carei-abroad-input`:
+       - Filtruj `abroadItems` po nazwie kraju (case-insensitive, includes)
+       - Renderuj karty wyników w `#carei-abroad-results` (2 kolumny CSS grid)
+       - Karta: flaga (emoji 24px) + nazwa kraju + cena "od X do Y zł" + przycisk "+"
+       - Już wybrane kraje w wynikach → styl selected (bg/border Figma) + przycisk "×"
+       - Puste pole = nie pokazuj wyników (stan default)
+
+    4. **Dodawanie kraju ("+"):**
+       - Dodaj do `selectedCountries` Map (id → item)
+       - Przerenderuj wyniki (kraj zmienia się na selected)
+       - Przerenderuj `#carei-abroad-selected` — lista wybranych pod wyszukiwarką
+
+    5. **Usuwanie kraju ("×"):**
+       - Usuń z `selectedCountries`
+       - Przerenderuj wyniki i selected
+
+    6. **Integracja z getSelectedExtrasForApi():**
+       Zmodyfikować `getSelectedExtrasForApi()` (linia 588-604) — oprócz `extras[]` checkboxów, dołączyć kraje z `selectedCountries` Map w tym samym formacie:
+       ```js
+       selectedCountries.forEach(function(item) {
+           items.push({ id: item.id || item.code, name: item.name, ... });
+       });
+       ```
+
+    **CSS — nowe reguły `.carei-abroad`:**
+
+    Zgodne z Figmą (docs/figma-formularz):
+    - `.carei-abroad__input-wrap`: height 48px, border-radius 8px, border 1px #D0D0D0, flex, gap 8px, padding 0 16px, align-items center
+    - `.carei-abroad__input`: no border, flex 1, Albert Sans SemiBold 15px, color #2F2482, placeholder color #C7C7C7
+    - `.carei-abroad__plus-icon`: 16px, color #2F2482
+    - `.carei-abroad__results`: display grid, grid-template-columns 1fr 1fr, gap 8px, margin-top 8px
+    - `.carei-abroad__card`: height 56px, border-radius 8px, border 1px rgba(0,0,0,0.1), flex, align-items center, padding 0 12px, gap 8px
+    - `.carei-abroad__card--selected`: background rgba(47,36,130,0.05), border-color rgba(47,36,130,0.2)
+    - `.carei-abroad__flag`: width 24px, height 24px, border-radius 50%, font-size 20px, line-height 24px, text-align center
+    - `.carei-abroad__name`: Albert Sans SemiBold 15px, color #2F2482, flex 1
+    - `.carei-abroad__price`: text-align right, color #505050 (format: "od" 10px + wartość 14px + "do" 10px + wartość 14px + "zł")
+    - `.carei-abroad__action`: 16px button, cursor pointer, no bg/border
+    - `.carei-abroad__selected`: margin-top 8px, flex column, gap 8px
+
+    Mobile (max-width 600px):
+    - `.carei-abroad__results`: grid-template-columns 1fr (1 kolumna)
+
+    Avoid: Nie modyfikować istniejących stylów `.carei-form__extra-card`. Nowe klasy `.carei-abroad__*`.
+  </action>
+  <verify>
+    1. Zaznacz checkbox "Planuję trasę..." → wyszukiwarka się pojawia
+    2. Wpisz "Niem" → pojawia się karta Niemcy z flagą, ceną, "+"
+    3. Kliknij "+" → Niemcy zmienia styl na selected, pojawia się w liście wybranych z "×"
+    4. Kliknij "×" → kraj usunięty
+    5. Odznacz checkbox → wyszukiwarka znika, wybrane kraje się czyszczą
+    6. Submit z wybranym krajem → pricing summary zawiera pozycję WYJAZD
+  </verify>
+  <done>AC-2, AC-3, AC-4, AC-5 satisfied: pełna interakcja wyszukiwarki, integracja z API, design Figma</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Sekcja "Wyjazd zagraniczny" z wyszukiwarką krajów w popup rezerwacji</what-built>
+  <how-to-verify>
+    1. Otwórz stronę z formularzem rezerwacji
+    2. Wybierz segment i oddział (żeby załadować extras)
+    3. Sprawdź: pozycje "WYJAZD ZA GRANICĘ ..." NIE widać w "Opcje dodatkowe"
+    4. Sprawdź: widoczna sekcja "Wyjazd zagraniczny" z checkboxem
+    5. Zaznacz "Planuję trasę poza granicę Polski" → wyszukiwarka się pojawia
+    6. Wpisz fragment nazwy kraju → karty z flagami i cenami
+    7. Dodaj kraj (+) → karta się podświetla, pojawia się w liście wybranych
+    8. Usuń kraj (×) → znika z wybranych
+    9. Odznacz checkbox → wszystko się czyści
+    10. Zaznacz, dodaj kraje, submit → w summary widać pozycje WYJAZD
+    11. Sprawdź responsywność na mobile (1 kolumna kart)
+    12. Porównaj wygląd z Figmą (kolory, fonty, spacing)
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- wp-content/plugins/carei-reservation/includes/class-softra-api.php (API client — nie wymaga zmian)
+- wp-content/plugins/carei-reservation/includes/class-rest-proxy.php (REST proxy — nie wymaga zmian)
+- wp-content/plugins/carei-reservation/includes/class-admin-panel.php (Admin panel — osobna funkcjonalność)
+- Istniejąca logika ubezpieczeń (filtrowanie ubezp/ochrony w loadExtras)
+- Istniejąca logika buildExtraCard() — nie modyfikować, nowe karty mają osobny builder
+- Istniejące style .carei-form__extra-card — nie modyfikować
+
+## SCOPE LIMITS
+- Nie dodawać prawdziwych obrazów flag (emoji wystarczą na MVP)
+- Nie tworzyć osobnego API endpoint do krajów — dane z istniejącego pricelist
+- Nie modyfikować logiki booking/confirm — tylko getSelectedExtrasForApi()
+- Nie dodawać walidacji "minimum 1 kraj wybrany" — checkbox sam w sobie jest opcjonalny
+- Summary overlay — wystarczy że kraje pojawią się jako standardowe pozycje extras
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Pozycje "WYJAZD ZA GRANIC..." nie pojawiają się w "Opcje dodatkowe"
+- [ ] Sekcja "Wyjazd zagraniczny" wyświetla się z separatorem i checkboxem
+- [ ] Toggle checkbox pokazuje/ukrywa wyszukiwarkę
+- [ ] Wyszukiwanie filtruje kraje w real-time
+- [ ] Dodawanie/usuwanie krajów działa poprawnie
+- [ ] Wybrane kraje trafiają do getSelectedExtrasForApi()
+- [ ] Pricing summary zawiera pozycje WYJAZD dla wybranych krajów
+- [ ] Mobile: karty w 1 kolumnie
+- [ ] Brak błędów w konsoli JS
+</verification>
+
+<success_criteria>
+- All tasks completed
+- All verification checks pass
+- No errors or warnings introduced
+- Design wizualnie zgodny z Figmą (kolory, spacing, typografia)
+- Istniejąca funkcjonalność (ubezpieczenie, opcje dodatkowe, booking flow) nienaruszona
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/06-wyjazd-zagraniczny/06-01-SUMMARY.md`
+</output>