diff --git a/frontend/src/__tests__/PaymentRedirect.spec.ts b/frontend/src/__tests__/PaymentRedirect.spec.ts index 5ec71d5..37b531e 100644 --- a/frontend/src/__tests__/PaymentRedirect.spec.ts +++ b/frontend/src/__tests__/PaymentRedirect.spec.ts @@ -74,6 +74,18 @@ describe('PaymentRedirect', () => { expect(wrapper.text()).toContain('ABC123') }) + it('shows full order id for Swish reference', async () => { + const orderId = 'b82fb935-369e-4402-9d72-667bf59e4e29' + const { wrapper } = await mountPage(orderId, 'HDO732') + await vi.waitFor(() => { + expect(wrapper.text()).toContain('Beställnings-ID') + expect(wrapper.text()).toContain(orderId) + expect(wrapper.text()).toContain( + 'Ange beställnings-ID ovan som meddelande i Swish-appen', + ) + }) + }) + it('shows Swish payment button', async () => { const { wrapper } = await mountPage() await vi.waitFor(() => { diff --git a/frontend/src/pages/PaymentRedirect.vue b/frontend/src/pages/PaymentRedirect.vue index 2d84f89..2ae5432 100644 --- a/frontend/src/pages/PaymentRedirect.vue +++ b/frontend/src/pages/PaymentRedirect.vue @@ -54,6 +54,11 @@ async function confirmPayment() { Registreringsnummer: {{ route.query.plate || '—' }}
+Beställnings-ID
+{{ orderId }}
+Swisha till
{{ swishNumber }}
- Ange {{ orderId }} - som meddelande i Swish-appen. + Ange beställnings-ID ovan som meddelande i Swish-appen.
Tryck sedan på knappen nedan för att bekräfta. @@ -140,11 +144,37 @@ async function confirmPayment() { } .page__plate { - margin: 0 0 var(--space-xl) 0; + margin: 0 0 var(--space-md) 0; font-size: 0.875rem; color: var(--color-muted); } +.payment__order-ref { + margin: 0 0 var(--space-xl) 0; + padding: var(--space-md); + background: var(--color-border-light); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); +} + +.payment__order-ref-label { + margin: 0 0 var(--space-xs) 0; + font-size: 0.75rem; + font-weight: 600; + color: var(--color-muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.payment__order-id { + margin: 0; + font-family: ui-monospace, monospace; + font-size: 0.8125rem; + color: var(--color-ink); + word-break: break-all; + line-height: 1.5; +} + .payment__summary { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); @@ -205,11 +235,6 @@ async function confirmPayment() { margin-top: var(--space-xs); } -.payment__order-id { - word-break: break-all; - color: var(--color-ink); -} - .payment__submit { width: 100%; }