update

2026-03-30 20:23:04 +02:00
parent df13b3613c
commit ca8db7a9da
23 changed files with 972 additions and 108 deletions
--- 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>