feat(native): the in-app TREK Cloud subscription flow

After picking a plan, the app now carries the whole purchase itself when the build
can take one: choose your address (checked for free as you type, against the same
endpoint the website uses), your email, and subscribe. The receipt goes to
/api/iap/redeem, and a Setting up your TREK screen waits on the new address and
loads it the moment it answers.

The purchase sits behind an IapClient seam (src/native/iap.ts): a fake drives the
whole flow in development and preview, the native client reports itself
unavailable until the store plugin and products exist, and until then the plan
picker still finishes on the web, so nothing half-wired faces a customer. New
claim and provisioning strings across all locales (en, de and the five largest
European languages translated).
This commit is contained in:
Maurice
2026-11-05 14:36:21 +01:00
parent d02e58387d
commit 037e739807
31 changed files with 914 additions and 5 deletions
+58
View File
@@ -652,3 +652,61 @@ a.linkbtn {
margin: 2px 0 0;
line-height: 1.45;
}
/* ── Claim: address + email, and the provisioning wait ───────────────────── */
.slug-field {
display: flex;
align-items: center;
padding-right: 14px;
}
.slug-field .slug-input {
flex: 1;
min-width: 0;
text-align: right;
}
.slug-suffix {
flex: none;
color: var(--muted);
font-size: 0.98rem;
padding-left: 2px;
user-select: none;
}
.hint {
margin: -6px 2px 2px;
font-size: 0.84rem;
color: var(--faint);
min-height: 1.1em;
transition: color 0.2s;
}
.hint.ok {
color: var(--ok);
}
.hint.bad {
color: var(--danger);
}
.screen-center {
justify-content: center;
text-align: center;
align-items: center;
gap: 18px;
}
.screen-center .title-sm,
.screen-center .sub {
text-align: center;
}
.provision-mark {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.provision-mark .spinner {
width: 40px;
height: 40px;
border-width: 3px;
border-color: var(--edge-strong);
border-top-color: var(--accent);
}