Threema QR: on-demand modal + auto-open on first add
All checks were successful
Build and Push / build (push) Successful in 1m29s
All checks were successful
Build and Push / build (push) Successful in 1m29s
This commit is contained in:
140
README.md
140
README.md
@@ -1,116 +1,66 @@
|
||||
# Threema UX rework + QR code
|
||||
# Threema UX v2 — QR available on demand
|
||||
|
||||
Replaces the previous attempt that had the QR rendering inline above
|
||||
the channel help text. That placement didn't work for you in practice
|
||||
because it wasn't visible when you actually wanted it.
|
||||
|
||||
## What this does instead
|
||||
|
||||
1. **"Show QR" link** next to the channel title in the threema card —
|
||||
visible at all times, clickable any time you want the QR.
|
||||
|
||||
2. **Auto-opens the modal** the first time you focus the add-ID input
|
||||
on the page (so a new user adding their first ID sees it without
|
||||
needing to click "Show QR" themselves). Doesn't re-pop after
|
||||
dismissal — the link covers re-opens.
|
||||
|
||||
3. **Modal** with QR + 3-step instructions + "AIAGENT" label. Plain
|
||||
`<img>` (no next/image), closes on ESC / overlay click / × button.
|
||||
|
||||
The earlier `threema-setup.tsx` component file is removed — replaced by
|
||||
`threema-qr-modal.tsx`.
|
||||
|
||||
## Files
|
||||
|
||||
```
|
||||
src/lib/threema-gateway-config.ts # NEW — single source of truth for gateway ID + QR path
|
||||
src/components/channel-users/threema-setup.tsx # NEW — QR + 3-step instructions component
|
||||
src/components/channel-users/channel-users.tsx # MODIFIED — renders <ThreemaSetup /> for the threema channel
|
||||
deploy/patch-i18n-threema.mjs # REPLACES earlier version — customer-friendly texts in 4 langs
|
||||
public/threema/qr_code_AIAGENT.png # NEW — the QR you uploaded
|
||||
src/lib/threema-gateway-config.ts # unchanged from before — central gateway constants
|
||||
src/components/channel-users/threema-qr-modal.tsx # NEW — the modal
|
||||
src/components/channel-users/channel-users.tsx # MODIFIED — Show QR button + focus auto-open + modal mount
|
||||
deploy/patch-i18n-threema.mjs # adds threemaSetup.showQr label in 4 langs
|
||||
public/threema/qr_code_AIAGENT.png # unchanged
|
||||
```
|
||||
|
||||
## What changed (UX, customer-facing)
|
||||
|
||||
1. **Package description / instructions / disclaimer.** No mention of
|
||||
"Gateway account", "Gateway credentials", or anything about asterisks.
|
||||
The disclaimer now explicitly says messages are end-to-end encrypted
|
||||
only up to PieCed's messaging service (where they get decrypted to
|
||||
route to the assistant) — accurate, not overclaiming. Crucially it
|
||||
also says **Threema charges per message** so customers know that
|
||||
sending/receiving on this channel has a cost separate from their
|
||||
PieCed subscription.
|
||||
|
||||
2. **Threema ID help text.** Now tells the customer to add **their
|
||||
own** ID, with explicit instructions for finding it in the Threema
|
||||
app (Settings → My Threema ID). Drops the asterisk / Gateway-prefix
|
||||
explanation entirely.
|
||||
|
||||
3. **QR code component (NEW).** Shown above the help text in the
|
||||
channel-users panel when the threema channel is enabled. Three-step
|
||||
flow: open Threema, scan, add your own ID below.
|
||||
|
||||
4. **All four languages** (en/de/fr/it) updated consistently.
|
||||
|
||||
## What changed (technical)
|
||||
|
||||
- Gateway constants centralised in `src/lib/threema-gateway-config.ts`.
|
||||
Today hardcoded to `*AIAGENT` + `/threema/qr_code_AIAGENT.png`. When
|
||||
you need multiple gateway accounts, edit that one file (and the
|
||||
inline TODO block tells the next person how).
|
||||
- The component uses Next.js `<Image>` — automatic optimisation,
|
||||
lazy-loaded by default (no `priority`).
|
||||
- The PNG goes in `public/threema/`, served as a static asset under
|
||||
`/threema/qr_code_AIAGENT.png` — no API route, no auth wrapper, the
|
||||
QR encodes a Threema invitation anyone can scan anyway.
|
||||
|
||||
## Apply
|
||||
|
||||
```bash
|
||||
cd /path/to/pieced-portal
|
||||
|
||||
# Drop in new files (overwrites prior channel-users.tsx and i18n script)
|
||||
cp -r <unzipped>/* .
|
||||
# Remove the old inline component if you applied the previous archive
|
||||
rm -f src/components/channel-users/threema-setup.tsx
|
||||
|
||||
# Quick TS check (the new component uses next/image — should be fine)
|
||||
# Drop new + modified files
|
||||
unzip -o /path/to/threema-ux-v2.zip
|
||||
|
||||
# Update messages
|
||||
node deploy/patch-i18n-threema.mjs
|
||||
|
||||
# TS check
|
||||
npx tsc --noEmit
|
||||
|
||||
# Patch the message files
|
||||
node deploy/patch-i18n-threema.mjs
|
||||
# Should print 4 lines, one per language
|
||||
|
||||
# Commit + push
|
||||
git add -A
|
||||
git status # eyeball the changes
|
||||
git commit -m "Threema: customer-friendly texts + QR setup component"
|
||||
git commit -m "Threema QR: on-demand modal + auto-open on first add"
|
||||
git push
|
||||
```
|
||||
|
||||
## Verify after redeploy
|
||||
After redeploy, the threema card under Authorized Users shows:
|
||||
|
||||
1. Open the portal as a customer admin, pick the test tenant.
|
||||
2. Disable + re-enable Threema in the package list (or just look at
|
||||
the channel-users panel — the QR shows there regardless).
|
||||
3. Authorized Users → threema section should show:
|
||||
- QR code on the left
|
||||
- "AIAGENT" label under the QR (no asterisk)
|
||||
- 3-step instruction list
|
||||
- Help text below: "Enter your own Threema ID..."
|
||||
- Existing user pills + Add input
|
||||
|
||||
Scan the QR with your phone — it should prompt to add `*AIAGENT` as a
|
||||
contact in Threema with trust level "verified by the operator" (the
|
||||
QR encodes the contact's public key).
|
||||
|
||||
## Billing log query (re-run after sending a few messages)
|
||||
|
||||
```bash
|
||||
POD=$(kubectl -n threema-gateway get pods -l 'cnpg.io/cluster=pieced-threema-gateway-db,role=primary' -o jsonpath='{.items[0].metadata.name}')
|
||||
DBPASS=$(kubectl -n threema-gateway get secret pieced-threema-gateway-db-app -o jsonpath='{.data.password}' | base64 -d)
|
||||
|
||||
# Per-tenant in/out counts
|
||||
kubectl -n threema-gateway exec $POD -- env PGPASSWORD="$DBPASS" \
|
||||
psql -U relay -d relay -c \
|
||||
"SELECT tenant_name, direction, count(*), max(created_at) FROM messages GROUP BY tenant_name, direction ORDER BY tenant_name, direction;"
|
||||
```
|
||||
threema [Show QR] 0 users
|
||||
────────────────────
|
||||
<help text: 'Enter your own Threema ID...'>
|
||||
────────────────────
|
||||
[ input: A8K2P3X7 ] [ Add ]
|
||||
^^^ focusing this opens the QR modal the first time
|
||||
```
|
||||
|
||||
That's your billing source — count(*) × Threema's per-message rate ×
|
||||
direction-specific multiplier = customer charge.
|
||||
|
||||
## Future: dynamic gateway accounts
|
||||
|
||||
Today's hardcoded `*AIAGENT` works for one shared gateway. When you
|
||||
move to per-tenant gateway accounts (Threema's bigger plans, or to
|
||||
isolate billing per tenant):
|
||||
|
||||
1. Update `src/lib/threema-gateway-config.ts`:
|
||||
- Make the constants a lookup keyed by tenant
|
||||
- Or fetch from `/api/tenants/<name>/threema` (new admin route)
|
||||
2. Update `threema-setup.tsx` to accept gateway info as props
|
||||
3. Update the parent `channel-users.tsx` to pass tenant-specific values
|
||||
4. Replace the static PNG with a server route that generates per-tenant
|
||||
QR codes from each gateway's `id` + `publicKey`
|
||||
|
||||
The single config file means this refactor is contained — every
|
||||
consumer reads from one place, so once that one place returns the
|
||||
right values, everything else falls in line.
|
||||
Clicking "Show QR" or focusing the input → modal with QR + steps.
|
||||
|
||||
Reference in New Issue
Block a user