117 lines
4.7 KiB
Markdown
117 lines
4.7 KiB
Markdown
# Threema UX rework + QR code
|
||
|
||
## 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
|
||
```
|
||
|
||
## 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>/* .
|
||
|
||
# Quick TS check (the new component uses next/image — should be fine)
|
||
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 push
|
||
```
|
||
|
||
## Verify after redeploy
|
||
|
||
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;"
|
||
```
|
||
|
||
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.
|