From b9a0bdb318b9e66d25363439bb4f7b31ca904201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20M=C3=B6rling?= <jcamorling@gmail.com>
Date: Thu, 21 May 2026 14:49:50 +0200
Subject: [PATCH] Clarify Swish reference order ID on the payment page.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The full UUID is required as the Swish message but was easy to miss when
embedded only in instruction text.

- Show beställnings-ID in a dedicated box above payment summary
- Point Swish instructions to that ID instead of repeating inline
- Add PaymentRedirect unit test for full order ID display
---
 .../src/__tests__/PaymentRedirect.spec.ts     | 12 ++++++
 frontend/src/pages/PaymentRedirect.vue        | 41 +++++++++++++++----
 2 files changed, 45 insertions(+), 8 deletions(-)

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: <strong>{{ route.query.plate || '—' }}</strong>
       </p>
 
+      <div class="payment__order-ref">
+        <p class="payment__order-ref-label">Beställnings-ID</p>
+        <p class="payment__order-id">{{ orderId }}</p>
+      </div>
+
       <div class="payment__summary">
         <div class="payment__row">
           <span class="payment__label">Att betala</span>
@@ -74,8 +79,7 @@ async function confirmPayment() {
           <p class="payment__swish-label">Swisha till</p>
           <p class="payment__swish-number">{{ swishNumber }}</p>
           <p class="payment__swish-instruction">
-            Ange <strong class="payment__order-id">{{ orderId }}</strong>
-            som meddelande i Swish-appen.
+            Ange beställnings-ID ovan som meddelande i Swish-appen.
           </p>
           <p class="payment__swish-instruction">
             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%;
 }