78 lines
4.3 KiB
Markdown
78 lines
4.3 KiB
Markdown
# Threema UX v3 — three real fixes
|
||
|
||
## What this fixes vs v2
|
||
|
||
| # | Issue | Fix |
|
||
|---|-------|-----|
|
||
| 1 | QR image 404'd as `GET /en/threema/qr_code_AIAGENT.png` | Middleware matcher now excludes paths with file extensions, so static files in `public/` are not locale-prefixed |
|
||
| 2 | Displayed gateway name as `AIAGENT` (without asterisk) | `displayName` is now `*AIAGENT` (with asterisk) — what users actually see in their Threema contacts |
|
||
| 3 | "Show QR" hyperlink — too small, unclear what it does | Replaced with a proper accent-bordered info banner: icon + title + body explaining what to do + prominent "Show QR code" button |
|
||
|
||
## Files
|
||
|
||
```
|
||
src/middleware.ts # MODIFIED — matcher excludes dot-paths (static files)
|
||
src/lib/threema-gateway-config.ts # MODIFIED — displayName: "*AIAGENT"
|
||
src/components/channel-users/channel-users.tsx # MODIFIED — banner replaces inline hyperlink
|
||
src/components/channel-users/threema-qr-modal.tsx # UNCHANGED from v2 (label now reads "*AIAGENT" automatically via config)
|
||
deploy/patch-i18n-threema.mjs # MODIFIED — new bannerTitle/bannerBody/bannerButton keys, showQr dropped
|
||
public/threema/qr_code_AIAGENT.png # UNCHANGED
|
||
```
|
||
|
||
## Apply
|
||
|
||
```bash
|
||
cd /path/to/pieced-portal
|
||
|
||
unzip -o /path/to/threema-ux-v3.zip
|
||
node deploy/patch-i18n-threema.mjs
|
||
npx tsc --noEmit
|
||
git add -A
|
||
git status # eyeball
|
||
git commit -m "Threema UX: middleware static fix, *AIAGENT display, info banner"
|
||
git push
|
||
```
|
||
|
||
## Layout after redeploy
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ threema 2 users │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ ╔═══════════════════════════════════════════════════════╗│
|
||
│ ║ [icon] Set up Threema [ Show QR code ] ║│ ← prominent banner, accent border
|
||
│ ║ Open Threema on your phone and scan our ║│
|
||
│ ║ QR code to add the assistant as a contact. ║│
|
||
│ ║ Then add your own Threema ID below. ║│
|
||
│ ╚═══════════════════════════════════════════════════════╝│
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ <help: "Enter your own Threema ID..."> │
|
||
│ ┌───────┐ ┌───────┐ │
|
||
│ │USER01 ✕│ │USER02 ✕│ │
|
||
│ └───────┘ └───────┘ │
|
||
│ [ A8K2P3X7 ] [ Add ] │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
The banner is always visible whenever the threema channel is enabled.
|
||
Clicking "Show QR code" opens the modal with the QR and 3-step
|
||
instructions. ESC, overlay click, or × button closes.
|
||
|
||
Auto-open on first focus of the add-ID input is preserved from v2 —
|
||
the modal pops once when a customer clicks into the input to add their
|
||
first ID, so a brand-new customer who skipped the banner still gets
|
||
the QR right when they need it.
|
||
|
||
## Verification
|
||
|
||
After redeploy:
|
||
|
||
1. Open `https://app.pieced.ch/en/tenants/acme-gmbh-2acf4612` in the browser.
|
||
2. Scroll to the **Authorized Users → threema** card.
|
||
3. Visible banner with icon, title "Set up Threema", body text, and a
|
||
clearly clickable "Show QR code" button on the right.
|
||
4. Click the button → modal with the QR shows.
|
||
5. The label under the QR reads `*AIAGENT` (with asterisk).
|
||
6. Browser DevTools → Network → `GET /threema/qr_code_AIAGENT.png` is
|
||
`200`, not `404`, and not redirected to `/en/threema/...`.
|