Show the payment QR on desktop and wallet copy on mobile

docs/test-architecture.md

@@ -132,6 +132,23 @@ run does not prove for each one; the taxonomy and cross-repository entries live
   fixture with `{ userData: { verifiedName } }`. A green run proves that the review screen
   accepts that name, not that the API returns the logged-in staff member's `verifiedName`.
   The spec stays on the AML reset path and does not assert the Editor label.
+- **The payment-link device-split tests answer the pay-request endpoint themselves.** The loc API
+  cannot build a Lightning/BTC transfer amount (`404 No BTC transfer amount found`), so
+  `e2e-stack/specs/payment-links.spec.ts` fulfils `paymentLink/payment` with a quoted OpenCryptoPay
+  payload (`displayQr: false`) and holds `lnurlp/wait` / `paymentLink/payment/wait` open. A green
+  run proves the desktop QR / handheld wallet-copy split for that payload, not that the loc API can
+  produce a quote or that a real quote's transfer amounts, expiry or callback match what the screen
+  then renders.
+
+- **The two payment visual specs answer every API they need themselves.**
+  `e2e/payment-qr-device.spec.ts` fulfils the `/v1/` payment routes with a fixed quote whose
+  expiry is a constant ISO string, holds the wait-polling open so it never re-fetches, and pins
+  wall-clock time; `e2e/payment-routes-qr-label.spec.ts` answers `GET /v2/user`,
+  `GET /v1/route`, the payment-link list, its config and POS endpoints and the info banner with
+  static payloads, and mounts the screen on a synthetic unsigned JWT. A green
+  run of either proves that the screen renders those payloads — the device split, the wallet copy
+  and the renamed setting label — not that a real session passes the address guard, that the API
+  returns these shapes, or that a live quote expires when the baseline says it does.
 
 ## Known gaps
 

e2e-stack/docs/test-data.md

@@ -240,6 +240,7 @@ The self-reference check is deliberately conservative for a key spanning several
 | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Real bank/crypto **arrival** → auto process                      | Crons disabled (`DISABLED_PROCESSES=*`)                                                                                                                                                                                                                                                                              |
 | Live **price-based** payment infos                               | Outbound HTTP mocked; CoinGecko/etc. unreliable                                                                                                                                                                                                                                                                      |
+| Real Lightning/BTC **payment-link quote**                        | `createPayRequest` 404s with "No BTC transfer amount found". The two device-split `/pl` tests therefore fulfill `paymentLink/payment` themselves — see `docs/test-architecture.md`. A green run does not prove the loc API can quote a payment.                                                                      |
 | Full **Sumsub / IdNow** KYC completion                           | External ident providers mocked; use `createKycStep` + SQL `kycLevel`                                                                                                                                                                                                                                                |
 | Mail **verification codes** after first mail                     | Mail sending disabled; first `PUT /v2/user/mail` applies immediately when mail was null                                                                                                                                                                                                                              |
 | Real **Lightning** payment-link API path                         | No Lightning deposits from EVM seed; factory uses SQL synthetic Lightning deposit                                                                                                                                                                                                                                    |

e2e-stack/specs/payment-links.spec.ts

@@ -10,7 +10,7 @@
  * SQL factory instead.
  */
 
-import type { Page } from '@playwright/test';
+import { devices, type Page, type Route } from '@playwright/test';
 import {
   apiGet,
   cleanupCreatedData,
@@ -27,6 +27,70 @@ import {
   waitForRow,
 } from './fixtures';
 
+const SCAN_COPY = 'Scan the QR-Code with a compatible app to complete the payment.';
+const WALLET_COPY = 'Choose your wallet to open the payment.';
+
+/**
+ * The loc API cannot build a Lightning/BTC transfer amount, so a quoted pay-request
+ * never reaches the browser (see docs/test-architecture.md). These two device-split tests
+ * replace only that response; everything else hits the real stack.
+ */
+async function installQuotedPayRequest(
+  page: Page,
+  opts: { merchant: string; amount: number; uniqueId: string },
+): Promise<void> {
+  const quoted = {
+    id: opts.uniqueId,
+    externalId: `ext-${opts.uniqueId}`,
+    tag: 'payRequest',
+    displayName: opts.merchant,
+    standard: 'OpenCryptoPay',
+    possibleStandards: ['OpenCryptoPay'],
+    displayQr: false,
+    mode: 'Multiple',
+    route: 'e2e-quoted-route',
+    currency: 'CHF',
+    recipient: { name: opts.merchant },
+    transferAmounts: [
+      {
+        method: 'Lightning',
+        minFee: 0,
+        assets: [{ asset: 'BTC', amount: 0.00025 }],
+        available: true,
+      },
+    ],
+    requestedAmount: { asset: 'CHF', amount: opts.amount },
+    quote: {
+      id: `q-${opts.uniqueId}`,
+      expiration: new Date(Date.now() + 30 * 60 * 1000).toISOString(),
+      payment: `pay-${opts.uniqueId}`,
+    },
+    callback: 'https://api.example.test/v1/lnurlp/cb/quoted',
+    metadata: 'e2e-quoted',
+    minSendable: 1,
+    maxSendable: 100000000,
+  };
+
+  await page.route('**/v1/**', async (route: Route) => {
+    const url = route.request().url();
+    if (url.includes('/lnurlp/wait') || url.includes('paymentLink/payment/wait')) {
+      await new Promise(() => {
+        /* intentionally never resolves — same as the visual suite */
+      });
+      return;
+    }
+    if (url.includes('/paymentLink/payment')) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(quoted),
+      });
+      return;
+    }
+    await route.continue();
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Types & helpers
 // ---------------------------------------------------------------------------
@@ -254,6 +318,11 @@ test.describe('Payment links / routes / invoice', () => {
     // Payment Links section + card content unique to this screen.
     await expect(page.getByRole('heading', { name: 'Payment Links', exact: true })).toBeVisible();
     await expect(page.getByText('e2e-routes-pl-label', { exact: true })).toBeVisible();
+
+    // `displayQr` is a force switch; the merchant-facing label has to say so.
+    await page.getByText('Default configuration', { exact: true }).locator('xpath=following-sibling::div').click();
+    await expect(page.getByText('Always show QR code', { exact: true })).toBeVisible();
+    await expect(page.getByText('Display QR code', { exact: true })).toHaveCount(0);
     if (pl.routeId) {
       await expect(page.getByText(`Payment route ${pl.routeId}`, { exact: true })).toBeVisible();
     }
@@ -352,6 +421,102 @@ test.describe('Payment links / routes / invoice', () => {
     }
   });
 
+  test.describe('device-aware /pl quote view', () => {
+    test.describe('desktop', () => {
+      test.use({
+        viewport: { width: 1280, height: 900 },
+        isMobile: false,
+        hasTouch: false,
+      });
+
+      test('/pl: desktop with a quote shows the large QR and the scan sentence', async ({ page }) => {
+        const user = await createUser({
+          tag: 'pl-qr-desktop',
+          language: 'EN',
+          kycLevel: 30,
+          completePersonalData: true,
+        });
+        const externalId = 'e2e-pl-qr-desktop';
+        const merchant = 'E2E Desktop Quoted Merchant';
+        const pl = await createPaymentLink(user.jwt, {
+          tag: 'pl-qr-desktop',
+          amount: 24,
+          label: 'e2e-pl-qr-desktop',
+          externalId,
+        });
+
+        await installQuotedPayRequest(page, {
+          merchant,
+          amount: 24,
+          uniqueId: pl.uniqueId,
+        });
+        await page.goto(
+          `/pl?routeId=${pl.routeId}&externalId=${encodeURIComponent(externalId)}&amount=24&currency=CHF`,
+          { waitUntil: 'domcontentloaded' },
+        );
+        await expect
+          .poll(() => normPath(new URL(page.url()).pathname), {
+            message: 'expected pathname /pl',
+            timeout: 20000,
+          })
+          .toBe('/pl');
+
+        await expect(page.getByText(merchant, { exact: true })).toBeVisible({ timeout: 20000 });
+        await expect(page.getByText(SCAN_COPY, { exact: true })).toBeVisible();
+        await expect(page.getByText(WALLET_COPY, { exact: true })).toHaveCount(0);
+        await expect(page.locator('.w-48.my-3 svg')).toBeVisible();
+      });
+    });
+
+    test.describe('handheld', () => {
+      test.use({
+        userAgent: devices['iPhone 13'].userAgent,
+        viewport: devices['iPhone 13'].viewport,
+        deviceScaleFactor: devices['iPhone 13'].deviceScaleFactor,
+        isMobile: true,
+        hasTouch: true,
+      });
+
+      test('/pl: handheld with a quote shows wallet copy and the collapsed QR row', async ({ page }) => {
+        const user = await createUser({
+          tag: 'pl-qr-handheld',
+          language: 'EN',
+          kycLevel: 30,
+          completePersonalData: true,
+        });
+        const externalId = 'e2e-pl-qr-handheld';
+        const merchant = 'E2E Handheld Quoted Merchant';
+        const pl = await createPaymentLink(user.jwt, {
+          tag: 'pl-qr-handheld',
+          amount: 24,
+          label: 'e2e-pl-qr-handheld',
+          externalId,
+        });
+
+        await installQuotedPayRequest(page, {
+          merchant,
+          amount: 24,
+          uniqueId: pl.uniqueId,
+        });
+        await page.goto(
+          `/pl?routeId=${pl.routeId}&externalId=${encodeURIComponent(externalId)}&amount=24&currency=CHF`,
+          { waitUntil: 'domcontentloaded' },
+        );
+        await expect
+          .poll(() => normPath(new URL(page.url()).pathname), {
+            message: 'expected pathname /pl',
+            timeout: 20000,
+          })
+          .toBe('/pl');
+
+        await expect(page.getByText(merchant, { exact: true })).toBeVisible({ timeout: 20000 });
+        await expect(page.getByText(WALLET_COPY, { exact: true })).toBeVisible();
+        await expect(page.getByText(SCAN_COPY, { exact: true })).toHaveCount(0);
+        await expect(page.locator('.w-48.my-3 svg')).toHaveCount(0);
+      });
+    });
+  });
+
   test('/pl: the real lightning= URL from GET /paymentLink now resolves through the tests-container forwarder', async ({
     page,
   }) => {