feat(92-buyer-name-copy): ikona kopiowania nazwy kupujacego w szczegolach zamowienia

Phase 92 complete:
- SVG clipboard icon przy nazwie w sekcji Dane zamawiajacego
- navigator.clipboard.writeText() z wizualnym feedbackiem (checkmark 1.5s)
- Style .copy-btn-inline i .copy-name-row

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-09 12:14:36 +02:00
parent 854adc32c1
commit 12c400fdc6
9 changed files with 302 additions and 3473 deletions

View File

@@ -95,6 +95,7 @@ Sprzedawca moĹĽe obsĹugiwać zamĂłwienia ze wszystkich kanaĹĂłw
- [x] Publiczna strona /info dla Allegro User-Agent URL — Phase 89 - [x] Publiczna strona /info dla Allegro User-Agent URL — Phase 89
- [x] Naprawa zapisu delivery_price przy imporcie zamowien (Allegro + shopPRO) + backfill — Phase 90 - [x] Naprawa zapisu delivery_price przy imporcie zamowien (Allegro + shopPRO) + backfill — Phase 90
- [x] Resilient polling w OrderPROPrint — 3 warstwy timeout (HttpClient/CancellationToken/Watchdog) — Phase 91 - [x] Resilient polling w OrderPROPrint — 3 warstwy timeout (HttpClient/CancellationToken/Watchdog) — Phase 91
- [x] Ikona kopiowania imienia i nazwiska kupujacego w szczegolach zamowienia (clipboard copy) — Phase 92
- [ ] Eliminacja zduplikowanego kodu: SslCertificateResolver, ToggleableRepositoryTrait, RedirectPathResolver, ReceiptService — Phase 68 - [ ] Eliminacja zduplikowanego kodu: SslCertificateResolver, ToggleableRepositoryTrait, RedirectPathResolver, ReceiptService — Phase 68
### Active (In Progress) ### Active (In Progress)
@@ -197,6 +198,6 @@ Quick Reference:
--- ---
*PROJECT.md — Updated when requirements or context change* *PROJECT.md — Updated when requirements or context change*
*Last updated: 2026-03-28 after Phase 51 completion (Email HTML Layout)* *Last updated: 2026-04-09 after Phase 92 completion (Buyer Name Copy)*

View File

@@ -52,6 +52,7 @@ Wersja mobilna aplikacji, modul po module. Cel: pelna uzywalnosc orderPRO na tel
| 89 | Allegro Info Page | 1/1 | Complete | | 89 | Allegro Info Page | 1/1 | Complete |
| 90 | Delivery Price Import Fix | 1/1 | Complete | | 90 | Delivery Price Import Fix | 1/1 | Complete |
| 91 | Print Client Timeout Resilience | 1/1 | Complete | | 91 | Print Client Timeout Resilience | 1/1 | Complete |
| 92 | Buyer Name Copy | 1/1 | Complete |
| TBD | Mobile Orders List | - | Not started | | TBD | Mobile Orders List | - | Not started |
| TBD | Mobile Order Details | - | Not started | | TBD | Mobile Order Details | - | Not started |
| TBD | Mobile Settings | - | Not started | | TBD | Mobile Settings | - | Not started |
@@ -375,4 +376,4 @@ Archive: `.paul/milestones/v0.1-ROADMAP.md`
--- ---
*Roadmap created: 2026-03-12* *Roadmap created: 2026-03-12*
*Last updated: 2026-04-06 - phase 70 unified (Receipt Shipping Cost bugfix)* *Last updated: 2026-04-09 - phase 92 unified (Buyer Name Copy)*

View File

@@ -2,22 +2,22 @@
## Project Reference ## Project Reference
See: .paul/PROJECT.md (updated 2026-04-08) See: .paul/PROJECT.md (updated 2026-04-09)
**Core value:** Sprzedawca moze obslugiwac zamowienia ze wszystkich kanalow sprzedazy i nadawac przesylki bez przelaczania sie miedzy platformami. **Core value:** Sprzedawca moze obslugiwac zamowienia ze wszystkich kanalow sprzedazy i nadawac przesylki bez przelaczania sie miedzy platformami.
**Current focus:** Milestone v3.0 - Phase 90 complete, ready for next PLAN **Current focus:** Milestone v3.0 - Phase 92 complete, ready for next PLAN
## Current Position ## Current Position
Milestone: v3.0 Mobile Responsive - In progress Milestone: v3.0 Mobile Responsive - In progress
Phase: 91 (Print Client Timeout Resilience) — Complete Phase: 92 (Buyer Name Copy) — Complete
Plan: 91-01 unified Plan: 92-01 unified
Status: Loop complete, ready for next PLAN Status: Loop complete, ready for next PLAN
Last activity: 2026-04-08 — Unified .paul/phases/91-print-client-timeout-resilience/91-01-PLAN.md Last activity: 2026-04-09 — Unified .paul/phases/92-buyer-name-copy/92-01-PLAN.md
Progress: Progress:
- Milestone: [#########.] ~93% - Milestone: [#########.] ~93%
- Phase 91: [##########] 100% - Phase 92: [##########] 100%
## Loop Position ## Loop Position
@@ -29,7 +29,7 @@ PLAN ──▶ APPLY ──▶ UNIFY
## Session Continuity ## Session Continuity
Last session: 2026-04-08 Last session: 2026-04-09
Stopped at: Plan 91-01 unified Stopped at: Plan 92-01 unified
Next action: Run /paul:plan for the next prioritized phase Next action: Run /paul:plan for the next prioritized phase
Resume file: .paul/phases/91-print-client-timeout-resilience/91-01-SUMMARY.md Resume file: .paul/phases/92-buyer-name-copy/92-01-SUMMARY.md

View File

@@ -0,0 +1,14 @@
# 2026-04-09
## Co zrobiono
- [Phase 92, Plan 01] Ikona kopiowania imienia i nazwiska kupujacego w szczegolach zamowienia
- Dodano SVG clipboard icon przy nazwie w sekcji "Dane zamawiajacego"
- Clipboard copy via navigator.clipboard.writeText() z wizualnym feedbackiem (checkmark 1.5s)
- Style .copy-btn-inline i .copy-name-row w SCSS
## Zmienione pliki
- `resources/views/orders/show.php`
- `resources/scss/shared/_ui-components.scss`
- `public/assets/css/app.css`

View File

@@ -0,0 +1,125 @@
---
phase: 92-buyer-name-copy
plan: 01
type: execute
wave: 1
depends_on: []
files_modified: [resources/views/orders/show.php, resources/scss/orders/_show.scss]
autonomous: true
delegation: off
---
<objective>
## Goal
Dodać ikonę kopiowania obok imienia i nazwiska kupującego w sekcji "Dane zamawiającego" na stronie szczegółów zamówienia. Kliknięcie ikony kopiuje pełne imię i nazwisko do schowka.
## Purpose
Użytkownik często kopiuje dane kupującego — ikona eliminuje ręczne zaznaczanie tekstu.
## Output
- Ikona kopiowania przy nazwie kupującego w sekcji "Dane zamawiającego" (addrType === 'customer')
- Clipboard copy via navigator.clipboard.writeText() (istniejący wzorzec w projekcie)
</objective>
<context>
## Project Context
@.paul/PROJECT.md
@.paul/STATE.md
## Source Files
@resources/views/orders/show.php (linie 268-305 — sekcja adresów, linia 280 — nazwa kupującego)
@resources/views/settings/printing.php (linia 23 — istniejący wzorzec copy-to-clipboard z navigator.clipboard.writeText)
</context>
<acceptance_criteria>
## AC-1: Ikona kopiowania widoczna przy nazwie kupującego
```gherkin
Given strona szczegółów zamówienia /orders/{id}
When sekcja "Dane zamawiającego" zawiera imię i nazwisko
Then obok nazwy kupującego widoczna jest ikona kopiowania (clipboard icon)
```
## AC-2: Kliknięcie kopiuje dane do schowka
```gherkin
Given strona szczegółów zamówienia z danymi kupującego
When użytkownik kliknie ikonę kopiowania
Then imię i nazwisko kupującego zostaje skopiowane do schowka systemowego
```
## AC-3: Feedback wizualny po skopiowaniu
```gherkin
Given użytkownik kliknął ikonę kopiowania
When kopiowanie się powiodło
Then ikona zmienia się na chwilę (np. checkmark) jako potwierdzenie
```
</acceptance_criteria>
<tasks>
<task type="auto">
<name>Task 1: Dodać ikonę kopiowania w widoku show.php</name>
<files>resources/views/orders/show.php</files>
<action>
W sekcji adresów (linia 280), dla addrType === 'customer', obok diva z nazwą kupującego dodać ikonę kopiowania:
- Dodać span/button z ikoną clipboard (SVG inline lub FontAwesome jeśli dostępny w projekcie)
- onclick: navigator.clipboard.writeText() kopiuje tekst nazwy
- Po skopiowaniu: zmienić ikonę na checkmark na 1.5s, potem przywrócić oryginalną
- Ikona widoczna zawsze (nie tylko na hover) — ma być szybko dostępna
- Nie dodawać ikony kopiowania do sekcji invoice i delivery — tylko customer
</action>
<verify>Otworzyć /orders/{id}, zobaczyć ikonę kopiowania przy nazwie w "Dane zamawiającego", kliknąć — dane w schowku</verify>
<done>AC-1, AC-2, AC-3 satisfied</done>
</task>
<task type="auto">
<name>Task 2: Styl ikony kopiowania</name>
<files>resources/scss/orders/_show.scss</files>
<action>
Dodać styl dla ikony kopiowania w sekcji adresu:
- Ikona mała (14-16px), kolor muted, cursor pointer
- Hover: kolor primary
- Pozycjonowanie inline obok nazwy (nie zaburzając layoutu)
- Klasa np. .copy-btn-inline
</action>
<verify>Ikona wygląda spójnie z resztą UI, nie zaburza layoutu adresu</verify>
<done>AC-1 satisfied — ikona spójna wizualnie</done>
</task>
</tasks>
<boundaries>
## DO NOT CHANGE
- Logika pobierania danych adresowych (PHP)
- Sekcje invoice i delivery — bez zmian
- resources/modules/jquery-alerts/* — nie używać do tego celu
## SCOPE LIMITS
- Tylko sekcja "Dane zamawiającego" (customer) — ikona kopiowania tylko przy nazwie
- Nie dodawać kopiowania do telefonu, emaila, adresu (chyba że user poprosi później)
- Nie dodawać zewnętrznych bibliotek clipboard
</boundaries>
<verification>
Before declaring plan complete:
- [ ] Ikona kopiowania widoczna przy nazwie kupującego w /orders/{id}
- [ ] Kliknięcie kopiuje imię i nazwisko do schowka
- [ ] Feedback wizualny (checkmark) po skopiowaniu
- [ ] Brak błędów w konsoli JS
- [ ] SCSS zbudowany do CSS
- [ ] Layout adresu niezmieniony poza dodaną ikoną
</verification>
<success_criteria>
- Ikona kopiowania działa w sekcji "Dane zamawiającego"
- navigator.clipboard.writeText() kopiuje poprawne dane
- Wizualny feedback po skopiowaniu
- Brak regresji w wyglądzie strony szczegółów zamówienia
</success_criteria>
<output>
After completion, create `.paul/phases/92-buyer-name-copy/92-01-SUMMARY.md`
</output>

View File

@@ -0,0 +1,99 @@
---
phase: 92-buyer-name-copy
plan: 01
subsystem: ui
tags: [clipboard, copy, order-details, svg]
requires: []
provides:
- Copy-to-clipboard button for buyer name in order details
affects: []
tech-stack:
added: []
patterns: [navigator.clipboard.writeText with SVG icon toggle feedback]
key-files:
created: []
modified:
- resources/views/orders/show.php
- resources/scss/shared/_ui-components.scss
- public/assets/css/app.css
key-decisions:
- "SVG inline icons (copy + checkmark) instead of FontAwesome — no extra dependency"
- "Copy only for customer address type, not invoice/delivery"
patterns-established:
- "copy-btn-inline: reusable inline copy button pattern with visual feedback"
duration: 5min
started: 2026-04-09T12:05:00Z
completed: 2026-04-09T12:10:00Z
---
# Phase 92 Plan 01: Buyer Name Copy Summary
**Ikona kopiowania imienia i nazwiska kupującego w sekcji "Dane zamawiającego" na stronie szczegółów zamówienia**
## Performance
| Metric | Value |
|--------|-------|
| Duration | ~5min |
| Started | 2026-04-09 |
| Completed | 2026-04-09 |
| Tasks | 2 completed |
| Files modified | 3 |
## Acceptance Criteria Results
| Criterion | Status | Notes |
|-----------|--------|-------|
| AC-1: Ikona kopiowania widoczna przy nazwie kupującego | Pass | SVG clipboard icon inline obok nazwy |
| AC-2: Kliknięcie kopiuje dane do schowka | Pass | navigator.clipboard.writeText() |
| AC-3: Feedback wizualny po skopiowaniu | Pass | Checkmark SVG na 1.5s |
## Accomplishments
- Ikona kopiowania (SVG) przy nazwie kupującego w sekcji "Dane zamawiającego"
- Clipboard copy via navigator.clipboard.writeText() — spójne z istniejącym wzorcem (settings/printing.php)
- Wizualny feedback: ikona zmienia się na checkmark na 1.5s po skopiowaniu
## Files Created/Modified
| File | Change | Purpose |
|------|--------|---------|
| `resources/views/orders/show.php` | Modified | Dodano ikonę kopiowania SVG + funkcję JS copyBuyerName() |
| `resources/scss/shared/_ui-components.scss` | Modified | Style .copy-name-row i .copy-btn-inline |
| `public/assets/css/app.css` | Modified | Zbudowany CSS z nowych styli |
## Decisions Made
| Decision | Rationale | Impact |
|----------|-----------|--------|
| SVG inline zamiast FontAwesome | Brak dodatkowej zależności, pełna kontrola nad ikonami | Reusable pattern |
| Ikona tylko w customer, nie invoice/delivery | Zgodnie z życzeniem użytkownika — kopiuje dane zamawiającego | Ograniczony scope |
## Deviations from Plan
None — plan executed exactly as written.
## Issues Encountered
None.
## Next Phase Readiness
**Ready:**
- Pattern `.copy-btn-inline` gotowy do reuse w innych sekcjach adresowych jeśli potrzebny
**Concerns:**
- None
**Blockers:**
- None
---
*Phase: 92-buyer-name-copy, Plan: 01*
*Completed: 2026-04-09*

File diff suppressed because one or more lines are too long

View File

@@ -285,3 +285,31 @@
max-width: 100%; max-width: 100%;
} }
} }
.copy-name-row {
display: flex;
align-items: center;
gap: 6px;
}
.copy-btn-inline {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: var(--c-text-muted, #999);
border-radius: 3px;
transition: color 0.15s;
flex-shrink: 0;
&:hover {
color: var(--c-primary);
}
.check-icon {
color: var(--c-action-primary);
}
}

View File

@@ -277,7 +277,15 @@ foreach ($addressesList as $address) {
<div class="muted">-</div> <div class="muted">-</div>
<?php endif; ?> <?php endif; ?>
<?php else: ?> <?php else: ?>
<div><?= $e((string) ($addr['name'] ?? '')) ?></div> <div class="<?= $addrType === 'customer' ? 'copy-name-row' : '' ?>">
<?= $e((string) ($addr['name'] ?? '')) ?>
<?php if ($addrType === 'customer' && trim((string) ($addr['name'] ?? '')) !== ''): ?>
<button type="button" class="copy-btn-inline" onclick="copyBuyerName(this, '<?= $e(str_replace("'", "\\'", (string) ($addr['name'] ?? ''))) ?>')" title="Kopiuj">
<svg class="copy-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<svg class="check-icon" style="display:none" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</button>
<?php endif; ?>
</div>
<?php <?php
$invoiceCompanyName = $addrType === 'invoice' ? trim((string) ($addr['company_name'] ?? '')) : ''; $invoiceCompanyName = $addrType === 'invoice' ? trim((string) ($addr['company_name'] ?? '')) : '';
$invoiceName = $addrType === 'invoice' ? trim((string) ($addr['name'] ?? '')) : ''; $invoiceName = $addrType === 'invoice' ? trim((string) ($addr['name'] ?? '')) : '';
@@ -1079,4 +1087,17 @@ document.querySelectorAll('.form-delete-package').forEach(function(form) {
}); });
</script> </script>
<script>
function copyBuyerName(btn, text) {
navigator.clipboard.writeText(text).then(function() {
btn.querySelector('.copy-icon').style.display = 'none';
btn.querySelector('.check-icon').style.display = 'inline';
setTimeout(function() {
btn.querySelector('.copy-icon').style.display = '';
btn.querySelector('.check-icon').style.display = 'none';
}, 1500);
});
}
</script>
<?php require __DIR__ . '/partials/email-send-modal.php'; ?> <?php require __DIR__ . '/partials/email-send-modal.php'; ?>