116 lines
4.6 KiB
Markdown
116 lines
4.6 KiB
Markdown
---
|
|
phase: 61-payment-button-activation
|
|
plan: 01
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- resources/views/orders/show.php
|
|
- resources/scss/app.scss
|
|
- public/assets/css/app.css
|
|
autonomous: true
|
|
---
|
|
|
|
<objective>
|
|
## Goal
|
|
Aktywacja przycisku "Platnosc" w headerze szczegółów zamówienia — kliknięcie przełącza na zakładkę płatności i automatycznie otwiera formularz dodawania płatności. Dodatkowo poprawa odstępu między inputami a buttonami w formularzu płatności.
|
|
|
|
## Purpose
|
|
Przycisk "Płatność" jest obecnie nieaktywny (btn--disabled) mimo że zakładka płatności i formularz już istnieją (Phase 56). Aktywacja przycisku skraca ścieżkę użytkownika do dodania płatności.
|
|
|
|
## Output
|
|
- Przycisk "Platnosc" aktywny, przełącza na tab `payments` i otwiera formularz
|
|
- Formularz z wizualnym odstępem między inputami a przyciskami
|
|
</objective>
|
|
|
|
<context>
|
|
## Source Files
|
|
@resources/views/orders/show.php (linia 76: przycisk Platnosc, linia 128: tab payments, linia 559-638: panel + formularz)
|
|
@resources/scss/app.scss (linia 1648-1687: style payment-add-form)
|
|
</context>
|
|
|
|
<acceptance_criteria>
|
|
|
|
## AC-1: Przycisk Platnosc aktywny i funkcjonalny
|
|
```gherkin
|
|
Given użytkownik jest na stronie szczegółów zamówienia /orders/{id}
|
|
When klika przycisk "Platnosc" w headerze
|
|
Then widok przełącza się na zakładkę "Płatności"
|
|
And formularz dodawania płatności jest automatycznie widoczny (rozwinięty)
|
|
```
|
|
|
|
## AC-2: Odstęp między inputami a buttonami formularza
|
|
```gherkin
|
|
Given formularz dodawania płatności jest widoczny
|
|
When użytkownik widzi formularz
|
|
Then między rzędem inputów a rzędem przycisków jest wyraźny odstęp (margin-top ≥ 12px)
|
|
```
|
|
|
|
</acceptance_criteria>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Aktywacja przycisku Platnosc i podpięcie JS</name>
|
|
<files>resources/views/orders/show.php</files>
|
|
<action>
|
|
1. Linia 76: zamień `<button type="button" class="btn btn--secondary btn--disabled">Platnosc</button>` na `<button type="button" class="btn btn--secondary" id="btn-header-payment">Platnosc</button>` — usunięcie btn--disabled i dodanie ID.
|
|
2. W bloku `<script>` na dole pliku dodaj handler:
|
|
- Nasłuchuje click na `#btn-header-payment`
|
|
- Wywołuje `setActiveTab('payments')` aby przełączyć na zakładkę płatności
|
|
- Ustawia `localStorage` (storageKey) na `'payments'`
|
|
- Pokazuje formularz: `document.getElementById('payment-add-form').style.display = ''`
|
|
</action>
|
|
<verify>Otworzyć /orders/130, kliknąć przycisk "Platnosc" — widok przeskakuje na tab Płatności, formularz jest widoczny</verify>
|
|
<done>AC-1 satisfied: przycisk aktywny, przełącza tab i otwiera formularz</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: Odstęp w formularzu płatności (SCSS)</name>
|
|
<files>resources/scss/app.scss, public/assets/css/app.css</files>
|
|
<action>
|
|
1. W SCSS (app.scss) do selektora `.payment-add-form__actions` dodaj `margin-top: 12px;` (aktualnie ma tylko gap: 8px bez marginesu górnego, klasa `mt-8` w HTML daje 8px co jest za mało).
|
|
2. W HTML (show.php linia 634) zamień `mt-8` na `mt-12` lub zostaw HTML bez zmian i użyj samego SCSS.
|
|
3. Zbuduj CSS: `npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map`
|
|
</action>
|
|
<verify>Otworzyć formularz płatności — wyraźny odstęp między inputami a przyciskami Zapisz/Anuluj</verify>
|
|
<done>AC-2 satisfied: wizualny odstęp ≥ 12px między inputami a buttonami</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<boundaries>
|
|
|
|
## DO NOT CHANGE
|
|
- Logika backend płatności (PaymentController, PaymentRepository)
|
|
- Pozostałe przyciski w headerze (Strefa klienta, Drukuj, Pakuj, Edytuj — zostają disabled)
|
|
- Tab switching logic (setActiveTab) — reuse istniejącej funkcji
|
|
|
|
## SCOPE LIMITS
|
|
- Tylko aktywacja przycisku i poprawa CSS
|
|
- Brak zmian w logice formularza zapisywania płatności
|
|
- Brak zmian w API/endpointach
|
|
|
|
</boundaries>
|
|
|
|
<verification>
|
|
Before declaring plan complete:
|
|
- [ ] Przycisk "Platnosc" nie ma klasy btn--disabled
|
|
- [ ] Kliknięcie przełącza na tab payments
|
|
- [ ] Formularz dodawania płatności jest automatycznie widoczny po kliknięciu
|
|
- [ ] Odstęp między inputami a buttonami w formularzu ≥ 12px
|
|
- [ ] Build SCSS przechodzi bez błędów
|
|
- [ ] Pozostałe przyciski disabled bez zmian
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Przycisk Platnosc aktywny i funkcjonalny
|
|
- Formularz otwarty automatycznie po kliknięciu
|
|
- Wizualny odstęp w formularzu poprawiony
|
|
- Brak regresji w pozostałych zakładkach i przyciskach
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.paul/phases/61-payment-button-activation/61-01-SUMMARY.md`
|
|
</output>
|