orderPRO/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous

phase	plan	type	wave	depends_on	files_modified	autonomous
24-shipment-presets-ui	01	execute	1	23-01	resources/views/shipments/prepare.php resources/scss/modules/_shipment-presets.scss resources/scss/main.scss	false

## Goal Dodać sekcję presetów przesyłek nad formularzem przygotowania przesyłki: kolorowe przyciski, popup tworzenia presetu (nazwa + kolor), JS autofill formularza po kliknięciu.

Purpose

Użytkownik chce jednym kliknięciem wypełnić formularz przesyłki zapisanymi parametrami — bez ręcznego wybierania przewoźnika, usługi, wymiarów za każdym razem.

Output

• Sekcja presetów z kolorowymi przyciskami nad formularzem
• Popup do tworzenia presetu (nazwa + kolor) z bieżących wartości formularza
• JS: autofill formularza po kliknięciu przycisku presetu
• SCSS style dla presetów

## Project Context @.paul/PROJECT.md @.paul/ROADMAP.md @.paul/STATE.md

Prior Work

@.paul/phases/23-shipment-presets-backend/23-01-SUMMARY.md

Source Files

@resources/views/shipments/prepare.php @src/Modules/Shipments/ShipmentPresetController.php @routes/web.php

No specialized flows required for this plan (sonar-scanner required post-APPLY).

<acceptance_criteria>

AC-1: Przyciski presetów widoczne nad formularzem

Given użytkownik otwiera stronę przygotowania przesyłki
When w bazie istnieją presety
Then nad formularzem wyświetlają się kolorowe przyciski z nazwami presetów
And wyświetla się przycisk "Dodaj przycisk dostawy"

AC-2: Kliknięcie presetu wypełnia formularz

Given preset ma zapisane: carrier=inpost, package_type=PACKAGE, weight=2kg, wymiary 30x25x10
When użytkownik klika przycisk tego presetu
Then formularz automatycznie wypełnia się tymi wartościami
And odpowiedni panel przewoźnika staje się widoczny
And usługa dostawy zostaje wybrana

AC-3: Przycisk "Dodaj przycisk dostawy" tworzy preset z bieżących wartości

Given użytkownik wypełnił formularz (wybrał przewoźnika, usługę, wymiary itp.)
When klika "Dodaj przycisk dostawy"
Then pojawia się popup z polem nazwy i wyborem koloru
When wpisuje nazwę i klika Zapisz
Then preset zostaje zapisany przez API i przycisk pojawia się w sekcji

</acceptance_criteria>

Task 1: SCSS style dla presetów resources/scss/modules/_shipment-presets.scss, resources/scss/main.scss 1. Utworzyć `resources/scss/modules/_shipment-presets.scss`: - `.shipment-presets` — kontener sekcji (flex, wrap, gap: 8px, margin-bottom: 16px) - `.shipment-presets__btn` — przycisk presetu: - Inline-flex, border-radius: 6px, padding: 6px 14px - Biały tekst, tło z custom property `--preset-color` - Hover: opacity 0.85, cursor pointer - Font-size: 13px, font-weight: 500 - `.shipment-presets__add` — przycisk dodawania: - Border: 1px dashed #ccc, background transparent - Color: #666, hover: border-color #999 - `.preset-modal` — overlay popup: - Position fixed, inset 0, background rgba(0,0,0,0.4), z-index 1000 - Display flex, align-items center, justify-content center - `.preset-modal__content` — zawartość popup: - Background white, border-radius 8px, padding 24px, min-width 360px, max-width 420px - `.preset-modal__colors` — grid kolorów: - Display flex, gap 8px, flex-wrap wrap - `.preset-modal__color-swatch` — próbka koloru: - Width 28px, height 28px, border-radius 50%, cursor pointer - Border: 2px solid transparent - `&.is-selected` — border-color: #333

2. Dodać `@import 'modules/shipment-presets';` w `resources/scss/main.scss`

Sprawdzić że plik SCSS istnieje i import dodany do main.scss AC-1 partially: style gotowe Task 2: HTML sekcja presetów + popup + JavaScript resources/views/shipments/prepare.php 1. **Sekcja presetów** — wstawić PRZED `` (po zamknięciu sekcji flash messages, linia ~63):

   ```html
   <section class="shipment-presets" id="shipment-presets">
     <!-- Buttons rendered by JS -->
     <button type="button" class="shipment-presets__add" id="preset-add-btn">+ Dodaj przycisk dostawy</button>
   </section>
   ```

2. **Popup modal** — wstawić na końcu pliku (przed zamykającym `</script>` lub po ostatnim `</section>`):

   ```html
   <div class="preset-modal" id="preset-modal" style="display:none">
     <div class="preset-modal__content">
       <h3>Nowy przycisk dostawy</h3>
       <label class="form-field mt-12">
         <span class="field-label">Nazwa</span>
         <input class="form-control" type="text" id="preset-name-input" maxlength="100" placeholder="np. InPost Paczkomat Standard">
       </label>
       <div class="form-field mt-12">
         <span class="field-label">Kolor</span>
         <div class="preset-modal__colors" id="preset-color-picker">
           <!-- 8 kolorów do wyboru -->
         </div>
       </div>
       <div class="form-actions mt-16">
         <button type="button" class="btn btn--primary" id="preset-save-btn">Zapisz</button>
         <button type="button" class="btn btn--secondary" id="preset-cancel-btn">Anuluj</button>
       </div>
     </div>
   </div>
   ```

3. **JavaScript** — dodać w istniejącym bloku `<script>` na końcu prepare.php:

   Logika JS (dodać jako IIFE):

   a) **Konfiguracja kolorów:**
      ```javascript
      const PRESET_COLORS = [
        '#3b82f6', '#ef4444', '#10b981', '#f59e0b',
        '#8b5cf6', '#ec4899', '#06b6d4', '#6b7280'
      ];
      ```

   b) **Ładowanie presetów:** fetch GET /api/shipment-presets → renderowanie przycisków
      - Dla każdego presetu: `<button class="shipment-presets__btn" style="--preset-color: {color}; background: {color}" data-preset-id="{id}">{name}</button>`
      - Wstawić PRZED przyciskiem "Dodaj"

   c) **Kliknięcie presetu → autofill:**
      - Ustawić select `#shipment-carrier-select` na preset.carrier i wystrzelić event 'change'
      - Po 100ms (żeby panel się pokazał):
        - Ustawić ukryte pola: delivery_method_id, credentials_id, carrier_id, provider_code
        - Ustawić package_type, length_cm, width_cm, height_cm, weight_kg
        - Ustawić sender_point_id, label_format
        - Dla odpowiedniego panelu przewoźnika:
          - Allegro: znaleźć opcję w searchable dropdown po data-value === delivery_method_id, kliknąć ją
          - InPost: ustawić select[name="inpost_service"] na delivery_method_id
          - Apaczka: ustawić select[name="apaczka_service"] na delivery_method_id

   d) **Przycisk "Dodaj" → popup:**
      - Pokazać modal
      - Wygenerować swatche kolorów (PRESET_COLORS)
      - Zaznaczenie koloru → is-selected
      - Input nazwy focus

   e) **Zapisanie presetu:**
      - Zebrać bieżące wartości formularza:
        carrier (z #shipment-carrier-select), provider_code, delivery_method_id, credentials_id, carrier_id,
        package_type, length_cm, width_cm, height_cm, weight_kg, sender_point_id, label_format
      - POST /api/shipment-presets z name, color i zebranymi danymi (JSON, Content-Type: application/json)
      - Po sukcesie: zamknąć modal, przeładować listę presetów

   f) **Anuluj:** zamknąć modal, wyczyścić input

Ważne:
- Nie modyfikować istniejącego JS (carrier selection, status polling itp.)
- fetch() z credentials: 'same-origin' (sesja PHP)
- Autofill musi obsłużyć 3 różne panele przewoźników (allegro searchable dropdown, inpost select, apaczka select)

php -l resources/views/shipments/prepare.php — brak błędów składni PHP AC-1, AC-2, AC-3 satisfied Sekcja presetów przesyłek nad formularzem: kolorowe przyciski, popup tworzenia, autofill formularza 1. Uruchomić migrację: wykonaj SQL z database/migrations/20260322_000059_create_shipment_presets_table.sql na bazie 2. Zbudować SCSS: npm run build (lub odpowiedni skrypt) 3. Odwiedź: /orders/{dowolne-id}/shipment/prepare 4. Powinien być widoczny przycisk "+ Dodaj przycisk dostawy" 5. Wypełnij formularz: wybierz przewoźnika, usługę, wymiary 6. Kliknij "Dodaj przycisk dostawy" — popup z nazwą i kolorem 7. Wpisz nazwę, wybierz kolor, kliknij Zapisz 8. Przycisk powinien się pojawić w sekcji 9. Odśwież stronę — przycisk nadal widoczny 10. Kliknij przycisk — formularz powinien się wypełnić zapisanymi wartościami Type "approved" to continue, or describe issues to fix

DO NOT CHANGE

• src/Modules/Shipments/ShipmentController.php (nie modyfikować kontrolera)
• src/Modules/Shipments/ShipmentPresetController.php (gotowy z fazy 23)
• src/Modules/Shipments/ShipmentPresetRepository.php (gotowy z fazy 23)
• routes/web.php (routing gotowy z fazy 23)
• Istniejący JS w prepare.php (carrier selection, status polling, print)

SCOPE LIMITS

• Tylko tworzenie presetów i autofill — edycja/usuwanie w fazie 25
• Brak auto-submit formularza po kliknięciu presetu (na razie)
• Brak drag & drop sortowania (faza 25)

Before declaring plan complete: - [ ] Sekcja presetów widoczna nad formularzem - [ ] Przyciski ładują się z API - [ ] Popup tworzenia działa (nazwa + kolor) - [ ] Autofill wypełnia formularz po kliknięciu presetu - [ ] php -l na prepare.php — OK - [ ] SCSS zbudowany - [ ] Human verification checkpoint passed

<success_criteria>

• Kolorowe przyciski presetów widoczne nad formularzem
• Kliknięcie presetu wypełnia formularz
• Popup tworzenia presetu z nazwą i kolorem działa
• Brak regresji w istniejącej funkcjonalności przesyłek </success_criteria>

After completion, create `.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md`