JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature plus ux rearrangements

Browse Source
This commit is contained in:
JCEEE
2026-08-22 19:49:46 +01:00
parent f14f4e2ac1
commit 42b9a27ce6
44 changed files with 2020 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+layout.server.ts
+8
View File
@@ -0,0 +1,8 @@
import type { LayoutServerLoad } from './$types';
import { getPlatformFlags } from '$lib/server/platform';
// Platform settings are public (read-only): feature flags ride along with
// every page's data so any component can deduce them via page.data.platformFlags.
export const load: LayoutServerLoad = async () => {
return { platformFlags: await getPlatformFlags() };
};
frontend/src/routes/+layout.svelte
+2
View File
@@ -1,9 +1,11 @@
<script lang="ts">
import './layout.css';
import favicon from '$lib/assets/favicon.svg';
import NoticeDialog from '$lib/components/NoticeDialog.svelte';
let { children } = $props();
</script>
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
{@render children()}
<NoticeDialog />
frontend/src/routes/[fam]/+layout.server.ts
+16 -6
View File
@@ -1,5 +1,6 @@
import { pbAdmin, createPbClient } from '$lib/server/pocketbase';
import { createPbClient } from '$lib/server/pocketbase';
import { createServices, type ChatActor } from '$lib/server/services';
import { ensureFamAccess } from '$lib/server/access';
async function paydayCheck(famId: string, pbToken: string) {
try {
@@ -48,19 +49,30 @@ export async function load(event) {
let famId = '';
let chat: { famId: string; actor: ChatActor } | null = null;
let fam: any = null;
let famAccess = { disabled: false, mode: 'none' as 'none' | 'code' | 'sub' | 'canceled', reason: '' };
if (session && pbToken) {
famId = session.famId;
await paydayCheck(famId, pbToken);
chat = await resolveChatIdentity(session, pbToken);
// fams is superadmin-only (non-realtime). Fetched server-side for both
// roles; also recomputes + persists the derived `active` flag.
const res = await ensureFamAccess(famId).catch(() => null);
if (res) {
fam = res.fam;
famAccess = res.access;
}
}
return {
// Canonical fam slug — from the URL param ([fam] routes). Client code
// reads page.data.famSlug; never copy it into local $state.
famSlug: event.params.fam || '',
session: session
? {
famId: session.famId,
userId: session.id,
famSlug: event.params.fam,
memberName: session.name,
memberColor: session.color || '',
role: session.role
@@ -71,9 +83,7 @@ export async function load(event) {
famId,
chat,
pbToken,
// fams is superadmin-only (non-realtime). Fetched server-side for both roles.
fam: famId
? await pbAdmin.getOne('fams', famId).catch(() => null)
: null
fam,
famAccess
};
}
frontend/src/routes/[fam]/+layout.svelte
+160 -4
View File
@@ -1,9 +1,11 @@
<script lang="ts">
import { page } from '$app/state';
import { onMount } from 'svelte';
import { initRealtimePb } from '$lib/pocketbase';
import { invalidateAll } from '$app/navigation';
import { onDestroy, onMount } from 'svelte';
import { initRealtimePb, pb } from '$lib/pocketbase';
import { famStore } from '$lib/stores/fam.svelte';
import { chatStore } from '$lib/stores/chat.svelte';
import { notices } from '$lib/stores/notices.svelte';
import { Sidebar, TopNav, Footer, Chat } from '$lib/components';
import { chatIcon } from '$lib/components/icons';
import type { Session } from '$lib/types';
@@ -15,6 +17,82 @@
let famName = $derived(
famStore.initialized ? (famStore.fam as any)?.name || page.params.fam : page.params.fam
);
let disabled = $derived(!!data.famAccess?.disabled);
let accessReason = $derived(data.famAccess?.reason || '');
// Settings stays usable while paused so admins can apply a code / manage billing.
let locked = $derived(disabled && !page.url.pathname.endsWith('/settings'));
// ── Post-checkout activation (event-driven) ──
// Landing with ?checkout=return: if the webhook has already landed we show
// the welcome notice; otherwise show an "activating" state and wait for the
// EVENT — `fams` has viewRule id=@request.auth.famId, so the fam can
// realtime-subscribe to its own record. When the Stripe webhook (superuser)
// writes paymentMode/active, PB pushes over SSE → single revalidation.
let activating = $state(false);
let returnHandled = false;
let unsubFam: (() => void) | null = null;
const ACTIVATION_TIMEOUT_MS = 20_000;
function handleCheckoutReturn() {
if (returnHandled || page.url.searchParams.get('checkout') !== 'return') return;
returnHandled = true;
history.replaceState({}, '', page.url.pathname); // cosmetic only
if (!disabled) {
notices.success('Welcome to FamChore!', 'Your subscription is active.');
return;
}
startActivating();
}
async function startActivating() {
activating = true;
initRealtimePb(data.pbToken || '');
try {
unsubFam = await pb.collection('fams').subscribe(data.famId, () => {
invalidateAll().catch(() => {});
});
} catch {
/* SSE unavailable — the timeout below still degrades gracefully */
}
// Safety net only: the event should land within seconds of payment.
setTimeout(() => {
if (!activating) return;
stopActivating();
notices.warning(
'Still activating',
'Payment received — unlocking usually takes a few seconds. Refresh if this persists.'
);
}, ACTIVATION_TIMEOUT_MS);
}
function stopActivating() {
activating = false;
unsubFam?.();
unsubFam = null;
}
// Flip to success the moment the gate lifts (SSE → invalidateAll → data).
$effect(() => {
if (activating && !disabled) {
stopActivating();
notices.success('Subscription active!', 'Your family is unlocked.');
}
});
onDestroy(stopActivating);
handleCheckoutReturn();
function accessMessage(reason: string, parent: boolean) {
const map: Record<string, string> = {
code_expired: parent ? 'Access paused — your code has expired. Add a new one.' : 'Access paused.',
code_disabled: parent ? 'Access paused — your access code was disabled.' : 'Access paused.',
subscription_inactive: parent ? 'Access paused — check your subscription payment.' : 'Access paused.',
canceled: parent ? 'Access paused — renew your subscription or add a code.' : 'Access paused.',
no_access: parent ? 'Access paused — add an access code to get started.' : 'Access paused.'
};
return map[reason] || 'Access paused.';
}
// Claim toast watcher (admin only)
let claimToast = $state('');
@@ -64,7 +142,11 @@
<div class="layout-stage" class:chat-open={chatStore.open}>
<div class="app-shell">
<Sidebar {famName} session={data.session} {isParent} {role} />
<TopNav {role} seasons={famStore.seasons}>
<TopNav
{role}
seasons={famStore.seasons}
announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
>
<button class="chat-toggle" onclick={() => chatStore.toggle()} aria-label="Open chat">
{@html chatIcon}
{#if chatStore.unread > 0}
@@ -73,7 +155,27 @@
</button>
</TopNav>
<main class="app-main">
{@render children()}
<div class="page-wrap">
<div class="page-content" class:locked>{@render children()}</div>
{#if locked}
<div class="disabled-overlay">
<div class="disabled-card">
{#if activating}
<div class="spinner" aria-hidden="true"></div>
<strong>Activating your subscription…</strong>
<span>Payment received — this usually only takes a few seconds.</span>
{:else}
<strong>Access paused</strong>
<span>
{isParent
? 'Add an access code or resume your subscription to keep using FamChore.'
: 'Your family access is paused.'}
</span>
{/if}
</div>
</div>
{/if}
</div>
</main>
{#if claimToast}
<div class="claim-toast">{claimToast}</div>
@@ -136,6 +238,60 @@
flex: 1;
transition: margin-left 0.2s;
}
.page-wrap {
position: relative;
min-height: 70vh;
}
.page-content.locked {
filter: blur(3px);
pointer-events: none;
user-select: none;
}
.disabled-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 5;
}
.disabled-card {
background: #fff;
border: 1px solid #fca5a5;
border-radius: 12px;
padding: 1.25rem 1.75rem;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.disabled-card strong {
color: #b91c1c;
font-size: 1rem;
}
.disabled-card .spinner {
width: 28px;
height: 28px;
margin: 0 auto;
border: 3px solid #e0e7ff;
border-top-color: #6366f1;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.disabled-card:has(.spinner) strong {
color: #4338ca;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.disabled-card span {
color: #6b7280;
font-size: 0.9rem;
}
.chat-toggle {
position: relative;
width: 40px;
frontend/src/routes/[fam]/+page.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
Chart.register(...registerables);
let { data } = $props();
let famSlug = $derived(page.params.fam);
let famSlug = $derived(page.data.famSlug ?? page.params.fam);
let summary = $state(data.summary);
let members = $state(data.members || []);
frontend/src/routes/[fam]/[username]/+page.svelte
+23 -1
View File
@@ -23,9 +23,13 @@
let { data } = $props();
let role = $state(data.role || 'child');
let famSlug = $derived(page.params.fam);
let famSlug = $derived(page.data.famSlug ?? page.params.fam);
let username = $derived(page.params.username);
// Access gate (frontend-only). When the fam is paused/disabled the member
// kanban interactions are locked — toggles no-op and the board renders empty.
let accessDisabled = $derived(!!page.data.famAccess?.disabled);
// ─── Family timezone (resolved) ───
const rawFamTz = $derived(data.timezone || data.fam?.timezone || 'auto');
const famTz = $derived(resolveTz(rawFamTz));
@@ -521,6 +525,7 @@
}
async function toggle(chore: AssignedChore) {
if (accessDisabled) return;
if (togglingIds) return;
togglingIds = chore.id;
@@ -1122,6 +1127,22 @@ const res = await fetch('/api/members', {
{/if}
<!-- KANBAN -->
{#if accessDisabled}
<div class="kanban locked">
<div class="column col-daily">
<h2>🎯 Daily</h2>
<p class="empty">🔒 Access paused</p>
</div>
<div class="column col-weekly">
<h2>📅 Weekly</h2>
<p class="empty">🔒</p>
</div>
<div class="column col-done">
<h2>✅ Done</h2>
<p class="empty">🔒</p>
</div>
</div>
{:else}
<div class="kanban">
<div class="column col-daily">
<h2>🎯 Daily ({dailyPending.length})</h2>
@@ -1205,6 +1226,7 @@ const res = await fetch('/api/members', {
{/if}
</div>
</div>
{/if}
<!-- WALLET / CLAIMS -->
<div class="wallet">
frontend/src/routes/[fam]/[username]/bonuses/+page.svelte
-1
View File
@@ -86,7 +86,6 @@
return map;
});
const famId = $derived(page.params.fam);
const username = $derived(page.params.username);
function memberName(id: string): string {
frontend/src/routes/[fam]/[username]/settings/+page.server.ts
+48 -2
View File
@@ -1,10 +1,12 @@
import { redirect } from '@sveltejs/kit';
import { redirect, fail } from '@sveltejs/kit';
import type { RequestEvent } from '@sveltejs/kit';
import { pbUser } from '$lib/server/pocketbase';
import { pbAdmin } from '$lib/server/pocketbase';
import { servicesFor } from '$lib/server/servicesFor';
import { issueAccess, createChild } from '$lib/server/member-otp';
import { slugify } from '@shared/slugify';
import { applyAccessCode } from '$lib/server/access';
import { createBillingPortalSession, isDummyStripe } from '$lib/server/stripe';
function famIdOf(event: RequestEvent): string {
if (!event.locals.user) throw redirect(303, '/login');
@@ -21,7 +23,12 @@ export async function load(event: RequestEvent) {
pbAdmin.getOne('fams', famId),
pb.collection('seasons').getFullList({ filter: `famId = '${famId}'` })
]);
return { members, fam, seasons };
// The applied code's duration backs the Access-card countdown (0 = never).
let accessCode: any = null;
if (fam?.paymentMode === 'code' && fam?.accessCodeId) {
accessCode = await pbAdmin.getOne('accesscodes', fam.accessCodeId).catch(() => null);
}
return { members, fam, seasons, accessCode };
}
export const actions = {
@@ -147,5 +154,44 @@ export const actions = {
} catch (e) {
return { error: e instanceof Error ? e.message : 'Failed to generate data' };
}
},
applyCode: async (event: RequestEvent) => {
const famId = famIdOf(event);
const fd = await event.request.formData();
const code = (fd.get('code') as string) || '';
const result = await applyAccessCode(famId, code);
return result.error ? { error: result.error } : { ok: true, ...result };
},
// Revoke the applied access code — sets paymentMode back to 'none'.
// No debug flag gate; the button is only visible when a code is applied.
revokeCode: async (event: RequestEvent) => {
const famId = famIdOf(event);
await pbAdmin.update('fams', famId, {
paymentMode: 'none',
accessCodeId: '',
accessCodeEnteredAt: ''
});
return { ok: true, revoked: true };
},
// Open Stripe Customer Portal (cancel subscription, update payment method,
// invoices). Real mode redirects; dummy mode returns the URL for the client.
billingPortal: async (event: RequestEvent) => {
const famId = famIdOf(event);
const fam = await pbAdmin.getOne('fams', famId);
if (!fam.stripeCustomerId) {
return fail(400, { error: 'No Stripe customer linked yet. Start with a plan first.' });
}
try {
const session = await createBillingPortalSession(fam.stripeCustomerId, event.url.origin, event.params.fam as string);
if (isDummyStripe) return { success: true, portalUrl: session.url };
if (!session.url) return fail(500, { error: 'Billing portal session has no URL' });
throw redirect(303, session.url);
} catch (e) {
if (e instanceof redirect) throw e;
return fail(500, { error: e instanceof Error ? e.message : 'Failed to open billing portal' });
}
}
};
frontend/src/routes/[fam]/[username]/settings/+page.svelte
+378 -301
View File
@@ -2,18 +2,34 @@
import { page } from '$app/state';
import { enhance } from '$app/forms';
import { famStore } from '$lib/stores/fam.svelte';
import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
import { ViewHeader, CardGrid, Card, Button, Accordion, AccordionItem, NoticeDialog } from '$lib/components';
import { COMMON_TIMEZONES } from '@shared/timezone';
import { handleOf } from '@shared/slugify';
import { addMonthsUTC, formatShortDate } from '$lib/format';
import QRCode from 'qrcode';
let { data } = $props();
// fam is sensitive (stripeCustomerId, featureFlags) — never in the
// fam is sensitive (stripeCustomerId, access fields) — never in the
// public famStore stream. It is superadmin-only, fetched server-side by the
// layout load. Writes go through form actions; no live fam subscription.
let fam = $state(data.fam);
let famSlug = $state(page.params.fam);
// Derived so apply/revoke reflect immediately after the action round trip.
let fam = $derived(data.fam);
// Canonical slug from layout load — reactive, never copied into $state.
let famSlug = $derived(page.data.famSlug || page.params.fam);
let accessCodeInput = $state('');
let accessMsg = $state('');
let hasCode = $derived(fam?.paymentMode === 'code' && !!fam?.accessCodeId);
let codeEntryDate = $derived(fam?.accessCodeEnteredAt ? new Date(fam.accessCodeEnteredAt) : null);
const modeLabel: Record<string, string> = {
code: 'Access code',
sub: 'Subscription',
canceled: 'Canceled',
none: 'No plan yet'
};
let addName = $state('');
let rename = $state('');
@@ -21,23 +37,9 @@
let payday = $state(fam?.payday != null ? Number(fam.payday) : 1);
let paydayTime = $state(fam?.paydayTime || '18:00');
let paydayTimes = $state([
'06:00',
'07:00',
'08:00',
'09:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00'
'06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00',
'13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
'20:00', '21:00', '22:00'
]);
let timezone = $state(fam?.timezone || 'auto');
let timezoneOptions = $state(COMMON_TIMEZONES);
@@ -46,9 +48,7 @@
if (typeof Intl !== 'undefined') {
try {
detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
} catch {
detectedTz = '';
}
} catch { detectedTz = ''; }
}
});
let showQR = $state(false);
@@ -60,12 +60,8 @@
let deletingSeason = $state<any>(null);
let issued = $state<{ otp: string; joinUrl: string; name: string } | null>(null);
let invitePath = $derived(
issued ? `${issued.joinUrl}?code=${issued.otp}` : ''
);
let inviteUrl = $derived(
issued ? `${page.url.origin}${invitePath}` : ''
);
let invitePath = $derived(issued ? `${issued.joinUrl}?code=${issued.otp}` : '');
let inviteUrl = $derived(issued ? `${page.url.origin}${invitePath}` : '');
function copy(url: string) {
navigator.clipboard.writeText(url);
@@ -79,304 +75,368 @@
function toggleQR() {
showQR = !showQR;
if (!showQR) {
qrDataUrl = '';
} else {
generateQR(inviteUrl);
}
if (!showQR) qrDataUrl = '';
else generateQR(inviteUrl);
}
function handleParentInvite() {
alert('Parent invite coming soon — email would be sent to ' + parentInviteEmail);
}
function formatCountdown(entryDate: Date | null, durationMonths: number): string {
if (!entryDate) return '';
if (durationMonths === 0) return 'Never expires';
const expiry = addMonthsUTC(entryDate, durationMonths);
const now = new Date();
const diffMs = expiry.getTime() - now.getTime();
if (diffMs <= 0) return 'Expired';
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
if (diffDays < 30) return `${diffDays} day${diffDays === 1 ? '' : 's'} left`;
const months = Math.floor(diffDays / 30);
const remDays = diffDays % 30;
return `${months} month${months === 1 ? '' : 's'}${remDays ? ` ${remDays} day${remDays === 1 ? '' : 's'}` : ''} left`;
}
</script>
<ViewHeader title="Settings" hero />
<CardGrid>
<Card title="Family Name">
<p class="hint">
This is the name shown to your family. The address stays at
<code class="slug-inline">/{famSlug}</code> even if you rename it — links you've shared keep
working.
</p>
<form method="POST" action="?/renameFam" use:enhance>
<label class="field-label" for="fam-name">Display name</label>
<input id="fam-name" name="name" bind:value={rename} placeholder={fam?.name || 'Family name'} required />
<Button type="submit" size="sm">Rename</Button>
</form>
{#if fam?.slug}
<p class="hint slug-line">
Family page: <code class="slug-inline">/{fam.slug}</code>
</p>
{/if}
</Card>
<Card title="Members ({members.length})" cols={2}>
<div class="members-grid">
<div class="members-add">
<p class="hint">Add a child. They'll pick their own colour after joining.</p>
<form method="POST" action="?/addMember" use:enhance>
<label class="field-label" for="new-child">New child</label>
<input id="new-child" name="name" bind:value={addName} placeholder="Child name" required />
<Button type="submit" size="sm">Add child</Button>
<Accordion>
<!-- Family -->
<AccordionItem title="Family" open>
<CardGrid>
<Card title="Family Name">
<p class="hint">
This is the name shown to your family. The address stays at
<code class="slug-inline">/{famSlug}</code> even if you rename it — links you've shared keep
working.
</p>
<form method="POST" action="?/renameFam" use:enhance>
<label class="field-label" for="fam-name">Display name</label>
<input id="fam-name" name="name" bind:value={rename} placeholder={fam?.name || 'Family name'} required />
<Button type="submit" size="sm">Rename</Button>
</form>
</div>
<ul class="members-list">
{#each members as m}
<li>
<span class="member-left">
<span class="member-color" style="background:{m.color}"></span>
<span class="member-info">
<span class="member-name">{m.name}</span>
<span class="member-handle">/{famSlug}/{handleOf(m.username)}</span>
</span>
</span>
<span class="member-actions">
<Button href="/{famSlug}/{handleOf(m.username)}" variant="secondary" size="sm">Preview</Button>
<form method="POST" action="?/deleteMember" use:enhance class="inline">
<input type="hidden" name="id" value={m.id} />
<Button
type="submit"
variant="danger"
size="sm"
onclick={() => confirm('Remove {m.name}?')}>Remove</Button
>
</form>
</span>
</li>
{/each}
</ul>
</div>
</Card>
<Card title="Payday" cols={1}>
<form
method="POST"
action="?/updatePayday"
use:enhance={() => {
return async ({ result }) => {
if (result.type === 'error') {
alert(result.error || 'Failed to update payday');
}
// One-way: no invalidation — local state is already correct,
// and the PB subscription handles cross-device sync.
};
}}
class="payday-form"
>
<div class="payday-row">
<label>Day</label>
<select name="payday" bind:value={payday}>
<option value={0}>Sunday</option>
<option value={1}>Monday</option>
<option value={2}>Tuesday</option>
<option value={3}>Wednesday</option>
<option value={4}>Thursday</option>
<option value={5}>Friday</option>
<option value={6}>Saturday</option>
</select>
<label>Time</label>
<select name="paydayTime" bind:value={paydayTime}>
{#each paydayTimes as t}
<option value={t}>{t}</option>
{/each}
</select>
</div>
<div class="payday-row">
<label>Timezone</label>
<select name="timezone" bind:value={timezone}>
<option value="auto">{detectedTz ? `Auto (${detectedTz})` : 'Auto'}</option>
{#each timezoneOptions as tz}
<option value={tz}>{tz}</option>
{/each}
</select>
</div>
<Button type="submit" size="sm">Set payday</Button>
</form>
<p class="hint">
Payday: the week starts on this day and weekly earnings are settled at this time. Auto timezone
follows each device.
</p>
</Card>
<Card title="Invite Children" cols={1}>
<form
method="POST"
action="?/issueAccess"
use:enhance={() => {
return async ({ formData, result }) => {
if (result.type === 'success' && result.data?.ok) {
showQR = false;
qrDataUrl = '';
issued = {
otp: result.data.otp,
joinUrl: result.data.joinUrl,
name: String(formData.get('name') || '')
};
} else if (result.type === 'success' && result.data?.error) {
alert(result.data.error);
}
};
}}
class="invite-form"
>
<label class="field-label" for="invite-child">Child</label>
<select id="invite-child" bind:value={inviteChild} name="name" required>
<option value="">— Select a child —</option>
{#each members as m}
<option value={m.name}>{m.name}</option>
{/each}
</select>
<Button type="submit" size="sm" disabled={!inviteChild}>Issue code</Button>
</form>
<p class="hint">
Generates a 6-digit code valid for 20 minutes. The child enters it at the join link.
</p>
{#if issued?.otp}
<div class="mt-3 rounded-lg border border-indigo-200 bg-indigo-50 p-4">
<p class="text-xs text-slate-500">
Code for {issued.name} (valid 20 min):
</p>
<p class="my-2 text-center text-4xl font-bold tracking-[0.3em] text-indigo-700">
{issued.otp}
</p>
<p class="invite-url">{invitePath}</p>
<div class="actions justify-center">
<Button variant="secondary" size="sm" onclick={() => copy(inviteUrl)}>
{copied ? 'Copied!' : 'Copy URL'}
</Button>
<Button variant="secondary" size="sm" onclick={toggleQR}>
{showQR ? 'Hide QR' : 'Show QR'}
</Button>
</div>
{#if showQR && qrDataUrl}
<div class="qr-wrap">
<img src={qrDataUrl} alt="QR Code" class="qr" />
</div>
{#if fam?.slug}
<p class="hint slug-line">
Family page: <code class="slug-inline">/{fam.slug}</code>
</p>
{/if}
</div>
{/if}
</Card>
</Card>
<Card title="Invite Parent" cols={1}>
<p class="hint">Send an email invitation for another parent to join as an admin.</p>
<div class="invite-form">
<label class="field-label" for="parent-email">Parent email</label>
<input id="parent-email" type="email" bind:value={parentInviteEmail} placeholder="parent@example.com" />
<Button onclick={handleParentInvite} size="sm">Send invite</Button>
</div>
<p class="hint">They will set up their own password on first login.</p>
</Card>
<Card title="Seasons" cols={1}>
<p class="hint">Group chores into seasons. Toggle seasons on/off from the top nav.</p>
<form method="POST" action="?/createSeason" use:enhance class="season-form">
<label class="field-label" for="season-name">New season</label>
<input id="season-name" name="name" placeholder="Season name" required />
<div class="color-row">
<label for="season-color">Colour</label>
<input id="season-color" name="color" type="color" value="#6366f1" class="color-input" />
</div>
<Button type="submit" size="sm">Add</Button>
</form>
<ul>
{#each data.seasons as s}
<li>
<span class="dot" style="background:{s.color}"></span>
{s.name}
<Button variant="danger" size="sm" onclick={() => (deletingSeason = s)}>Remove</Button>
</li>
{/each}
</ul>
</Card>
<!-- Delete Season Modal -->
{#if deletingSeason}
<div class="overlay" onclick={() => (deletingSeason = null)} role="presentation">
<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
<h3>Delete "{deletingSeason.name}"?</h3>
<p class="warning">
All chores assigned to this season will also be removed. This cannot be undone.
</p>
<Card title="Payday" cols={1}>
<form
method="POST"
action="?/deleteSeason"
action="?/updatePayday"
use:enhance={() => {
return async ({ result }) => {
if (result.type === 'success') {
deletingSeason = null;
if (result.type === 'error') alert(result.error || 'Failed to update payday');
};
}}
class="payday-form"
>
<div class="payday-row">
<label>Day</label>
<select name="payday" bind:value={payday}>
<option value={0}>Sunday</option>
<option value={1}>Monday</option>
<option value={2}>Tuesday</option>
<option value={3}>Wednesday</option>
<option value={4}>Thursday</option>
<option value={5}>Friday</option>
<option value={6}>Saturday</option>
</select>
<label>Time</label>
<select name="paydayTime" bind:value={paydayTime}>
{#each paydayTimes as t}
<option value={t}>{t}</option>
{/each}
</select>
</div>
<div class="payday-row">
<label>Timezone</label>
<select name="timezone" bind:value={timezone}>
<option value="auto">{detectedTz ? `Auto (${detectedTz})` : 'Auto'}</option>
{#each timezoneOptions as tz}
<option value={tz}>{tz}</option>
{/each}
</select>
</div>
<Button type="submit" size="sm">Set payday</Button>
</form>
<p class="hint">
Payday: the week starts on this day and weekly earnings are settled at this time. Auto timezone
follows each device.
</p>
</Card>
<Card title="Seasons" cols={1}>
<p class="hint">Group chores into seasons. Toggle seasons on/off from the top nav.</p>
<form method="POST" action="?/createSeason" use:enhance class="season-form">
<label class="field-label" for="season-name">New season</label>
<input id="season-name" name="name" placeholder="Season name" required />
<div class="color-row">
<label for="season-color">Colour</label>
<input id="season-color" name="color" type="color" value="#6366f1" class="color-input" />
</div>
<Button type="submit" size="sm">Add</Button>
</form>
<ul>
{#each data.seasons as s}
<li>
<span class="dot" style="background:{s.color}"></span>
{s.name}
<Button variant="danger" size="sm" onclick={() => (deletingSeason = s)}>Remove</Button>
</li>
{/each}
</ul>
</Card>
<!-- Delete Season Modal -->
{#if deletingSeason}
<div class="overlay" onclick={() => (deletingSeason = null)} role="presentation">
<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
<h3>Delete "{deletingSeason.name}"?</h3>
<p class="warning">All chores assigned to this season will also be removed. This cannot be undone.</p>
<form method="POST" action="?/deleteSeason" use:enhance={() => {
return async ({ result }) => { if (result.type === 'success') deletingSeason = null; };
}}>
<input type="hidden" name="id" value={deletingSeason.id} />
<div class="modal-actions">
<button type="button" onclick={() => (deletingSeason = null)}>Cancel</button>
<button type="submit" class="danger">Delete Season</button>
</div>
</form>
</div>
</div>
{/if}
</CardGrid>
</AccordionItem>
<AccordionItem title="Invites">
<CardGrid>
<Card title="Members ({members.length})" cols={2}>
<div class="members-grid">
<div class="members-add">
<p class="hint">Add a child. They'll pick their own colour after joining.</p>
<form method="POST" action="?/addMember" use:enhance>
<label class="field-label" for="new-child">New child</label>
<input id="new-child" name="name" bind:value={addName} placeholder="Child name" required />
<Button type="submit" size="sm">Add child</Button>
</form>
</div>
<ul class="members-list">
{#each members as m}
<li>
<span class="member-left">
<span class="member-color" style="background:{m.color}"></span>
<span class="member-info">
<span class="member-name">{m.name}</span>
<span class="member-handle">/{famSlug}/{handleOf(m.username)}</span>
</span>
</span>
<span class="member-actions">
<Button href="/{famSlug}/{handleOf(m.username)}" variant="secondary" size="sm">Preview</Button>
<form method="POST" action="?/deleteMember" use:enhance class="inline">
<input type="hidden" name="id" value={m.id} />
<Button type="submit" variant="danger" size="sm" onclick={() => confirm('Remove {m.name}?')}>Remove</Button>
</form>
</span>
</li>
{/each}
</ul>
</div>
</Card>
<Card title="Invite Children" cols={1}>
<form
method="POST"
action="?/issueAccess"
use:enhance={() => {
return async ({ formData, result }) => {
if (result.type === 'success' && result.data?.ok) {
showQR = false;
qrDataUrl = '';
issued = {
otp: result.data.otp,
joinUrl: result.data.joinUrl,
name: String(formData.get('name') || '')
};
} else if (result.type === 'success' && result.data?.error) {
alert(result.data.error);
}
};
}}
class="invite-form"
>
<input type="hidden" name="id" value={deletingSeason.id} />
<div class="modal-actions">
<button type="button" onclick={() => (deletingSeason = null)}>Cancel</button>
<button type="submit" class="danger">Delete Season</button>
<label class="field-label" for="invite-child">Child</label>
<select id="invite-child" bind:value={inviteChild} name="name" required>
<option value="">— Select a child —</option>
{#each members as m}
<option value={m.name}>{m.name}</option>
{/each}
</select>
<Button type="submit" size="sm" disabled={!inviteChild}>Issue code</Button>
</form>
<p class="hint">
Generates a 6-digit code valid for 20 minutes. The child enters it at the join link.
</p>
{#if issued?.otp}
<div class="mt-3 rounded-lg border border-indigo-200 bg-indigo-50 p-4">
<p class="text-xs text-slate-500">Code for {issued.name} (valid 20 min):</p>
<p class="my-2 text-center text-4xl font-bold tracking-[0.3em] text-indigo-700">{issued.otp}</p>
<p class="invite-url">{invitePath}</p>
<div class="actions justify-center">
<Button variant="secondary" size="sm" onclick={() => copy(inviteUrl)}>{copied ? 'Copied!' : 'Copy URL'}</Button>
<Button variant="secondary" size="sm" onclick={toggleQR}>{showQR ? 'Hide QR' : 'Show QR'}</Button>
</div>
{#if showQR && qrDataUrl}
<div class="qr-wrap"><img src={qrDataUrl} alt="QR Code" class="qr" /></div>
{/if}
</div>
</form>
</div>
</div>
{/if}
{/if}
</Card>
<Card title="Billing & Subscription" cols={1}>
<p class="hint">
{data.fam?.active === false
? 'Your subscription is paused — interactions and payments are disabled.'
: 'Manage your plan, billing details, or pause your subscription.'}
</p>
<div class="actions">
<Button href="/account" variant="primary" size="sm">Account & Billing</Button>
<Button href="/subscriptions" variant="secondary" size="sm">Plans</Button>
</div>
</Card>
<Card title="Invite Parent" cols={1}>
<p class="hint">Send an email invitation for another parent to join as an admin.</p>
<div class="invite-form">
<label class="field-label" for="parent-email">Parent email</label>
<input id="parent-email" type="email" bind:value={parentInviteEmail} placeholder="parent@example.com" />
<Button onclick={handleParentInvite} size="sm">Send invite</Button>
</div>
<p class="hint">They will set up their own password on first login.</p>
</Card>
</CardGrid>
</AccordionItem>
<Card title="Data" cols={1}>
<div class="actions">
<Button variant="ghost" size="sm" disabled>Download CSV (coming soon)</Button>
<Button variant="danger" size="sm" disabled>Delete Family (coming soon)</Button>
</div>
</Card>
{#if data.fam?.featureFlags?.debugMode}
<Card title="Debug Tools" cols={1} accent="#f59e0b">
<p class="hint">Debug mode is enabled. These tools are for development and testing only.</p>
<div class="actions">
<form
method="POST"
action="?/completeWeek"
use:enhance={() => {
<AccordionItem title="Account">
<CardGrid>
<!-- Access -->
<Card title="Access" cols={1} accent={hasCode ? '#059669' : '#dc2626'}>
{#if hasCode}
<p class="hint">
Access active via access code
{#if data.accessCode?.duration}
— <strong>{formatCountdown(codeEntryDate, data.accessCode.duration)}</strong>
(expires {formatShortDate(addMonthsUTC(codeEntryDate!, data.accessCode.duration))})
{:else}
— <strong>never expires</strong>
{/if}.
</p>
<form
class="revoke-form"
method="POST"
action="?/revokeCode"
use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success') accessMsg = 'Access code revoked.';
else if (result.type === 'failure') accessMsg = (result.data as any)?.error || 'Revoke failed.';
await update();
};
}}
>
<Button type="submit" size="sm" variant="danger">Revoke code</Button>
</form>
{:else}
<p class="hint">No access applied. Enter a valid access code to enable your family.</p>
<form method="POST" action="?/applyCode" use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success') alert('Week completed!');
if (result.type === 'success' && result.data) {
const d = result.data as { error?: string; ok?: boolean };
accessMsg = d.error || 'Code applied — access enabled.';
accessCodeInput = '';
}
await update();
};
}}
>
<Button type="submit" size="sm" variant="secondary">Complete Week</Button>
</form>
<form
method="POST"
action="?/generateData"
use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success') alert('Test data generated!');
await update();
};
}}
>
<input type="hidden" name="days" value="7" />
<Button type="submit" size="sm" variant="secondary">Generate Test Data (7 days)</Button>
</form>
</div>
</Card>
{/if}
</CardGrid>
}}>
<input name="code" bind:value={accessCodeInput} placeholder="Enter access code" autocomplete="off" />
<Button type="submit" size="sm" variant="primary">Apply code</Button>
</form>
{/if}
{#if accessMsg}
<p class="access-msg">{accessMsg}</p>
{/if}
</Card>
<Card title="Subscription" cols={1} accent={fam?.paymentMode === 'sub' ? '#059669' : '#f59e0b'}>
<p class="hint">
{fam?.paymentMode === 'sub' ? 'Current plan: Subscription.' :
fam?.paymentMode === 'code' ? `Current plan: Access code${hasCode ? '' : ' (invalid)'}.` :
fam?.paymentMode === 'canceled' ? 'Your subscription was canceled.' : 'No active plan.'}
</p>
{#if fam?.paymentMode === 'sub'}
<div class="actions">
<Button href="/pricing" variant="primary" size="sm">Change plan</Button>
<form method="POST" action="?/billingPortal" use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success' && (result.data as any)?.portalUrl) {
window.open((result.data as any).portalUrl, '_blank');
} else if (result.type === 'failure') {
accessMsg = (result.data as any)?.error || 'Failed to open billing portal';
}
await update();
};
}}>
<Button type="submit" variant="secondary" size="sm" disabled={!fam?.stripeCustomerId}>Open billing portal</Button>
</form>
</div>
<p class="hint resume-hint">
To pause your plan, cancel in the billing portal — you keep your data and can resubscribe
anytime. Cancelling takes effect at period end.
</p>
{:else if fam?.paymentMode === 'code'}
<div class="actions">
<Button href="/pricing" variant="primary" size="sm">Switch to subscription</Button>
</div>
{:else}
<div class="actions">
<Button href="/pricing" variant="primary" size="sm">Choose a plan</Button>
</div>
{/if}
</Card>
</CardGrid>
</AccordionItem>
<AccordionItem title="App">
<CardGrid>
{#if page.data.platformFlags?.debug}
<Card title="Debug Tools" cols={1} accent="#f59e0b">
<p class="hint">Debug mode is enabled. These tools are for development and testing only.</p>
<div class="actions">
<form method="POST" action="?/completeWeek" use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success') alert('Week completed!');
await update();
};
}}>
<Button type="submit" size="sm" variant="secondary">Complete Week</Button>
</form>
<form method="POST" action="?/generateData" use:enhance={() => {
return async ({ result, update }) => {
if (result.type === 'success') alert('Test data generated!');
await update();
};
}}>
<input type="hidden" name="days" value="7" />
<Button type="submit" size="sm" variant="secondary">Generate Test Data (7 days)</Button>
</form>
</div>
</Card>
{/if}
<Card title="Data" cols={1}>
<div class="actions">
<Button variant="ghost" size="sm" disabled>Download CSV (coming soon)</Button>
<Button variant="danger" size="sm" disabled>Delete Family (coming soon)</Button>
</div>
</Card>
</CardGrid>
</AccordionItem>
<!-- Invites -->
</Accordion>
<NoticeDialog />
<style>
.hint {
font-size: 0.85rem;
@@ -698,4 +758,21 @@
border-radius: 6px;
margin-bottom: 0.5rem;
}
.access-msg {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #059669;
}
.revoke-form {
margin-top: 0.6rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.revoke-form .hint {
font-size: 0.78rem;
}
.resume-hint {
margin-top: 0.5rem;
}
</style>
frontend/src/routes/[famSlug]/join/[username]/+page.server.ts → frontend/src/routes/[fam]/join/[username]/+page.server.ts
+5 -5
View File
@@ -1,10 +1,10 @@
import { fail, redirect } from '@sveltejs/kit';
import { redeemOtp } from '$lib/server/member-otp';
import { setSessionCookie } from '$lib/server/session';
import { setSessionCookie, clearLegacyCookies } from '$lib/server/session';
export const actions = {
default: async (event) => {
const famSlug = event.params.famSlug;
const fam = event.params.fam;
const username = event.params.username;
const fd = await event.request.formData();
const otp = (fd.get('otp') || '').toString().trim();
@@ -12,13 +12,13 @@ export const actions = {
if (!otp) return fail(400, { error: 'Enter the code shown by your parent.' });
try {
const token = await redeemOtp({ famSlug, username, otp });
event.cookies.delete('device_token', { path: '/' });
const token = await redeemOtp({ famSlug: fam, username, otp });
clearLegacyCookies(event.cookies);
setSessionCookie(event.cookies, token);
} catch (e) {
return fail(400, { error: e instanceof Error ? e.message : 'Join failed' });
}
throw redirect(303, `/${famSlug}/${encodeURIComponent(username)}`);
throw redirect(303, `/${fam}/${encodeURIComponent(username)}`);
}
};
frontend/src/routes/[famSlug]/join/[username]/+page.svelte → frontend/src/routes/[fam]/join/[username]/+page.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
import { enhance } from '$app/forms';
import { Button } from '$lib/components';
const famSlug = page.params.famSlug;
const famSlug = page.params.fam;
const username = page.params.username;
let otp = $state(page.url.searchParams.get('code') || '');
let { form } = $props();
frontend/src/routes/admin/+page.server.ts
+10 -11
View File
@@ -1,16 +1,17 @@
import { pbAdmin } from '$lib/server/pocketbase';
import { redirect, fail } from '@sveltejs/kit';
import { PB_EMAIL, PB_PASSWORD } from '$app/env/private';
import { getPlatformFlags, setPlatformFlag } from '$lib/server/platform';
import type { Actions, PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ cookies }) => {
const session = cookies.get('platform_session');
if (!session) {
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0 };
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
}
try {
const fams = await pbAdmin.getList('fams');
const [fams, platformFlags] = await Promise.all([pbAdmin.getList('fams'), getPlatformFlags()]);
const famsWithStats = await Promise.all(fams.map(async (fam: any) => {
const [members, rewards, parents] = await Promise.all([
pbAdmin.getList('users', `famId = '${fam.id}' && role = 'child'`),
@@ -23,7 +24,6 @@ export const load: PageServerLoad = async ({ cookies }) => {
requestedRewards: (rewards as any[]).filter((r: any) => r.status === 'requested').length,
totalRewards: rewards.length,
parentEmail: (parents as any[])?.[0]?.email || '',
featureFlags: fam.featureFlags || {},
};
}));
@@ -31,9 +31,9 @@ export const load: PageServerLoad = async ({ cookies }) => {
const totalMembers = famsWithStats.reduce((s: number, f: any) => s + f.memberCount, 0);
const totalRewards = famsWithStats.reduce((s: number, f: any) => s + f.totalRewards, 0);
return { authenticated: true, fams: famsWithStats, totalFams, totalMembers, totalRewards };
return { authenticated: true, fams: famsWithStats, totalFams, totalMembers, totalRewards, platformFlags };
} catch {
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0 };
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
}
};
@@ -60,19 +60,18 @@ export const actions: Actions = {
throw redirect(303, '/admin');
},
toggleFeatureFlag: async ({ request, cookies }) => {
// Toggles a platform-level feature flag on the singleton platform record.
togglePlatformFlag: async ({ request, cookies }) => {
const session = cookies.get('platform_session');
if (!session) return fail(401, { error: 'Not authenticated' });
const fd = await request.formData();
const famId = fd.get('famId') as string;
const flag = fd.get('flag') as string;
if (!flag) return fail(400, { error: 'Flag required' });
try {
const fam = await pbAdmin.getOne('fams', famId);
const flags = fam.featureFlags || {};
flags[flag] = !flags[flag];
await pbAdmin.update('fams', famId, { featureFlags: flags });
const flags = await getPlatformFlags();
await setPlatformFlag(flag, !flags[flag]);
return { success: true };
} catch (e) {
return fail(500, { error: e instanceof Error ? e.message : 'Failed to update' });
frontend/src/routes/admin/+page.svelte
+27 -16
View File
@@ -49,6 +49,19 @@
</div>
</Card>
<Card cols={1} title="Platform Flags" accent="#f59e0b">
<p class="hint">Global feature flags (public read-only for fams; toggled here).</p>
<div class="flag-row">
<span class="flag-name">debug</span>
<form method="POST" action="?/togglePlatformFlag" use:enhance>
<input type="hidden" name="flag" value="debug" />
<button type="submit" class="toggle-btn" class:active={data.platformFlags?.debug}>
{data.platformFlags?.debug ? 'ON' : 'OFF'}
</button>
</form>
</div>
</Card>
<Card cols={2} title="Families" accent="#059669">
<table class="fam-table">
<thead>
@@ -57,7 +70,6 @@
<th>Parent</th>
<th>Members</th>
<th>Claims</th>
<th>Debug</th>
<th>Actions</th>
</tr>
</thead>
@@ -65,7 +77,7 @@
{#each data.fams as fam}
<tr>
<td>
<a href="/{fam.slug}/admin">{fam.name}</a>
<a href="/{fam.slug}">{fam.name}</a>
<span class="slug">/{fam.slug}</span>
</td>
<td>{fam.parentEmail || '—'}</td>
@@ -78,20 +90,7 @@
{/if}
</td>
<td>
<form method="POST" action="?/toggleFeatureFlag" use:enhance>
<input type="hidden" name="famId" value={fam.id} />
<input type="hidden" name="flag" value="debugMode" />
<button
type="submit"
class="toggle-btn"
class:active={fam.featureFlags?.debugMode}
>
{fam.featureFlags?.debugMode ? 'ON' : 'OFF'}
</button>
</form>
</td>
<td>
<a href="/{fam.slug}/admin" class="link">Dashboard</a>
<a href="/{fam.slug}" class="link">Dashboard</a>
<a href="/{fam.slug}" class="link">View</a>
</td>
</tr>
@@ -211,6 +210,18 @@
background: #059669;
color: white;
}
.flag-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.35rem 0;
}
.flag-name {
font-family: monospace;
font-size: 0.85rem;
color: #374151;
}
.link {
color: #2563eb;
text-decoration: none;
frontend/src/routes/api/webhooks/stripe/+server.ts
+30
View File
@@ -0,0 +1,30 @@
import { json, type RequestHandler } from '@sveltejs/kit';
import { verifyStripeEvent, isDummyStripe } from '$lib/server/stripe';
import { handleStripeEvent } from '$lib/server/stripe-events';
// Stripe webhook: updates fams.stripeCustomerId + fams.active + fams.paymentMode
// from subscription lifecycle events. Lives under /api/webhooks/stripe per the
// architecture — machine-to-machine endpoints live in /api/*, not under UI routes.
export const POST: RequestHandler = async ({ request }) => {
const rawBody = await request.text();
const signature = request.headers.get('stripe-signature');
// Dummy mode: no webhook secret configured — accept the event without
// verification so the flow is testable before the account is connected.
if (isDummyStripe || !signature) {
return json({ received: true, dummy: true });
}
let event;
try {
event = verifyStripeEvent(rawBody, signature);
} catch (e) {
return json(
{ error: e instanceof Error ? e.message : 'Webhook signature verification failed' },
{ status: 400 }
);
}
await handleStripeEvent(event);
return json({ received: true });
};
frontend/src/routes/logout/+page.server.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { redirect } from '@sveltejs/kit';
import { clearSessionCookie } from '$lib/server/session';
import { clearSessionCookie, clearLegacyCookies } from '$lib/server/session';
function signOut(event: { cookies: any }) {
clearSessionCookie(event.cookies);
event.cookies.delete('session', { path: '/' });
event.cookies.delete('device_token', { path: '/' });
clearLegacyCookies(event.cookies);
}
export function load(event) {
frontend/src/routes/pricing/+page.server.ts
+70
View File
@@ -0,0 +1,70 @@
import { redirect, fail } from '@sveltejs/kit';
import type { RequestEvent } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
import { pbAdmin } from '$lib/server/pocketbase';
import { createEmbeddedCheckoutSession, resolveTrialDays, PLAN_IDS } from '$lib/server/stripe';
import type { PlanId } from '$lib/server/stripe';
function famOf(event: RequestEvent) {
if (!event.locals.user) throw redirect(303, '/login');
return event.locals.user.famId;
}
export const load: PageServerLoad = async (event) => {
const authenticated = !!event.locals.user;
let famSlug: string | null = null;
if (authenticated) {
const fam = await pbAdmin.getOne('fams', event.locals.user!.famId).catch(() => null);
famSlug = fam?.slug || null;
}
return {
authenticated,
famSlug,
plans: { monthly: PLAN_IDS.monthly, yearly: PLAN_IDS.yearly }
};
};
export const actions: Actions = {
choose: async (event) => {
const fd = await event.request.formData();
const plan = fd.get('plan') as PlanId;
const code = (fd.get('code') as string) || '';
if (!['trial', 'monthly', 'yearly'].includes(plan)) {
return fail(400, { error: 'Unknown plan' });
}
// Trial requires a valid app-side code (which maps to trial days).
let trialDays: number | null = null;
if (plan === 'trial') {
trialDays = await resolveTrialDays(code);
if (!trialDays) return fail(400, { error: 'Invalid trial code' });
}
// Not logged in → redirect to signup with plan preselected.
if (!event.locals.user) {
throw redirect(303, `/signup?plan=${plan}`);
}
const famId = famOf(event);
const fam = await pbAdmin.getOne('fams', famId);
const parents = await pbAdmin.getList('users', `famId = '${famId}' && role = 'parent'`);
const email = (parents[0] as { email?: string } | undefined)?.email || null;
try {
const { clientSecret, sessionId } = await createEmbeddedCheckoutSession({
plan,
famId,
famSlug: fam.slug,
email,
customerId: fam.stripeCustomerId || null,
trialDays,
origin: event.url.origin
});
return { success: true, clientSecret, sessionId, plan };
} catch (e) {
if (e instanceof redirect) throw e;
return fail(500, { error: e instanceof Error ? e.message : 'Failed to start checkout' });
}
}
};
frontend/src/routes/pricing/+page.svelte
+99
View File
@@ -0,0 +1,99 @@
<script lang="ts">
import { tick } from 'svelte';
import { enhance } from '$app/forms';
import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from '$app/env/public';
import { loadStripe, type StripeEmbeddedCheckout } from '@stripe/stripe-js';
import { ViewHeader, CardGrid, Card, Button, PricingPlans } from '$lib/components';
let { data, form } = $props();
let showCheckout = $state(false);
let checkoutTitle = $state('');
let checkoutEl = $state<HTMLDivElement | null>(null);
let checkout: StripeEmbeddedCheckout | null = null;
async function mountEmbedded(clientSecret: string, planName: string) {
const stripe = await loadStripe(String(PUBLIC_STRIPE_PUBLISHABLE_KEY));
if (!stripe) {
alert('Stripe failed to load');
return;
}
checkout?.unmount();
checkout = await stripe.createEmbeddedCheckoutPage({ clientSecret });
checkoutTitle = planName;
showCheckout = true;
await tick();
if (checkoutEl) checkout.mount(checkoutEl);
}
function handleChoose({ result, formData }: { result: any; formData?: FormData }) {
if (result.type === 'success' && result.data) {
const d = result.data as { clientSecret?: string };
if (d.clientSecret) {
const planName = String(formData?.get('plan') || '');
const label = { trial: 'Trial', monthly: 'Monthly', yearly: 'Yearly' }[planName] || planName;
mountEmbedded(d.clientSecret, label);
}
}
}
function resetCheckout() {
checkout?.unmount();
checkout = null;
showCheckout = false;
checkoutTitle = '';
}
</script>
<ViewHeader title="Pricing" subtitle="Choose a plan for your family" hero />
{#if !showCheckout}
<PricingPlans
action="?/choose"
selected=""
error={form?.error}
onsubmit={handleChoose}
/>
{:else}
<CardGrid>
<Card title={`Checkout — ${checkoutTitle}`} accent="#059669">
<div class="checkout-actions">
<Button variant="ghost" size="sm" onclick={resetCheckout}>← Back to plans</Button>
</div>
<div bind:this={checkoutEl} class="checkout-host"></div>
<p class="hint" style="margin-top: 1rem;">
You can close and go to your dashboard any time — access unlocks once payment completes.
</p>
<a href={data.famSlug ? `/${data.famSlug}` : '/'} class="btn-primary" style="margin-top: 1rem; display: inline-block;">Go to dashboard</a>
</Card>
</CardGrid>
{/if}
<style>
.hint {
font-size: 0.85rem;
color: #9ca3af;
line-height: 1.4;
}
.checkout-actions {
margin-bottom: 0.75rem;
}
.checkout-host {
min-height: 480px;
}
.checkout-host :global(iframe) {
width: 100%;
}
.btn-primary {
display: inline-block;
text-align: center;
background: #4338ca;
color: #fff;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.btn-primary:hover { background: #3730a3; }
</style>
frontend/src/routes/signup/+page.server.ts
+61 -7
View File
@@ -5,6 +5,9 @@ import { createPbClient } from '$lib/server/pocketbase';
import { setSessionCookie } from '$lib/server/session';
import { issueAccess } from '$lib/server/member-otp';
import { slugify, handle, famUsername, handleOf } from '@shared/slugify';
import { applyAccessCode } from '$lib/server/access';
import { createEmbeddedCheckoutSession, PLAN_IDS } from '$lib/server/stripe';
import type { PlanId } from '$lib/server/stripe';
class SignupError extends Error {}
@@ -32,11 +35,14 @@ export const actions = {
const username = famUsername(slug, handleName);
try {
const fam = await pbAdmin.create('fams', {
const famData: Record<string, unknown> = {
name: famName,
slug,
timezone: 'auto'
});
timezone: 'auto',
paymentMode: 'none',
active: false
};
const fam = await pbAdmin.create('fams', famData);
const user = await pbAdmin.create('users', {
username,
name: parentName,
@@ -61,7 +67,6 @@ export const actions = {
.catch(() => null);
if (authResult?.token) setSessionCookie(event.cookies, authResult.token);
// `username` here is the handle (URL segment), not the composite.
return { success: true, famSlug: slug, username: handleName };
},
@@ -71,11 +76,14 @@ export const actions = {
const fd = await event.request.formData();
const name = ((fd.get('member') as string) || '').trim();
// No [fam] URL param here (signup isn't fam-scoped) — resolve the slug
// from DB. Everywhere else, the slug comes from event.params.fam /
// page.data.famSlug ([fam] layout load) — never copy it into state.
const fam = await pbAdmin.getOne('fams', user.famId);
const famSlug = fam?.slug || user.famId;
if (!name) {
return { success: true, famSlug, username: handleOf(user.username) };
return { success: true, famSlug, username: handleOf(user.username || '') };
}
const { otp, joinUrl } = await issueAccess({
@@ -84,11 +92,57 @@ export const actions = {
name
});
return { success: true, code: otp, joinUrl, famSlug, username: handleOf(user.username) };
return { success: true, code: otp, joinUrl, famSlug, username: handleOf(user.username || '') };
},
// Step 3 — apply an access code (or skip via client-side navigation).
access: async (event: RequestEvent) => {
const user = requireUser(event);
const fd = await event.request.formData();
const code = ((fd.get('code') as string) || '').trim();
if (!code) {
return { ok: true, skipped: true };
}
const result = await applyAccessCode(user.famId, code);
if (result.error) return fail(400, { error: result.error });
return { ok: true, ...result };
},
// Step 4 — choose a plan, start embedded checkout.
choose: async (event: RequestEvent) => {
const user = requireUser(event);
const fd = await event.request.formData();
const plan = fd.get('plan') as PlanId;
if (!['monthly', 'yearly'].includes(plan)) {
return fail(400, { error: 'Unknown plan' });
}
const fam = await pbAdmin.getOne('fams', user.famId);
const parents = await pbAdmin.getList('users', `famId = '${user.famId}' && role = 'parent'`);
const email = (parents[0] as { email?: string } | undefined)?.email || null;
try {
const { clientSecret, sessionId } = await createEmbeddedCheckoutSession({
plan,
famId: user.famId,
famSlug: fam.slug,
email,
customerId: fam.stripeCustomerId || null,
origin: event.url.origin
});
return { success: true, clientSecret, sessionId, plan };
} catch (e) {
if (e instanceof redirect) throw e;
return fail(500, { error: e instanceof Error ? e.message : 'Failed to start checkout' });
}
}
};
function requireUser(event: RequestEvent) {
if (!event.locals.user) throw redirect(303, '/signup');
return event.locals.user;
}
}
frontend/src/routes/signup/+page.svelte
+140 -43
View File
@@ -1,40 +1,116 @@
<script lang="ts">
import { enhance } from '$app/forms';
import AuthShell from '$lib/components/AuthShell.svelte';
import { slugify, handle } from '@shared/slugify';
import { enhance } from '$app/forms';
import { tick } from 'svelte';
import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from '$app/env/public';
import { loadStripe, type StripeEmbeddedCheckout } from '@stripe/stripe-js';
import AuthShell from '$lib/components/AuthShell.svelte';
import { ViewHeader, CardGrid, Card, Button, PricingPlans } from '$lib/components';
import { slugify, handle } from '@shared/slugify';
import { page } from '$app/state';
let { form } = $props();
let step = $state(1);
// State machine: 'fam' | 'child' | 'code' | 'plan' | 'done'
let step = $state<'fam' | 'child' | 'code' | 'plan' | 'done'>('fam');
// Determine initial step from URL param (plan preselection)
$effect(() => {
const plan = page.url.searchParams.get('plan');
if (plan && (plan === 'monthly' || plan === 'yearly') && form?.type !== 'failure') {
step = 'plan';
}
});
let famName = $state('');
let yourName = $state('');
let email = $state('');
let password = $state('');
let childName = $state('');
let accessCode = $state('');
let accessMsg = $state('');
let submittedFamSlug = $state('');
let submitting = $state(false);
let localError = $state('');
let famSlugPreview = $derived(slugify(famName) || 'your-family');
let handlePreview = $derived(handle(yourName) || 'your-name');
let selectedPlan = $derived(page.url.searchParams.get('plan') || '');
let showCheckout = $state(false);
let checkoutTitle = $state('');
let checkoutEl = $state<HTMLDivElement | null>(null);
let checkout: StripeEmbeddedCheckout | null = null;
const enhanceForm = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- canary $types lacks SubmitFunction
return () =>
async ({ update, result }: any) => {
submitting = true;
localError = '';
accessMsg = '';
try {
await update();
} catch (e) {
localError = e instanceof Error ? e.message : 'Something went wrong. Please try again.';
}
submitting = false;
if (result.type !== 'failure' && result.type !== 'error') step++;
if (result.type !== 'failure' && result.type !== 'error') {
if (step === 'fam') {
// Capture famSlug from the signup action result
if (result.data?.famSlug) submittedFamSlug = result.data.famSlug;
step = 'child';
} else if (step === 'child') step = 'code';
}
};
};
async function mountEmbedded(clientSecret: string, planName: string) {
const stripe = await loadStripe(String(PUBLIC_STRIPE_PUBLISHABLE_KEY));
if (!stripe) {
alert('Stripe failed to load');
return;
}
checkout?.unmount();
checkout = await stripe.createEmbeddedCheckoutPage({ clientSecret });
checkoutTitle = planName;
showCheckout = true;
await tick();
if (checkoutEl) checkout.mount(checkoutEl);
}
function handleAccess({ result, formData }: { result: any; formData?: FormData }) {
if (result.type === 'success' && result.data) {
if (result.data.skipped) {
step = 'plan';
} else {
accessMsg = 'Access code applied — you\'re all set!';
step = 'done';
}
} else if (result.type === 'failure') {
accessMsg = result.data?.error || 'Invalid code.';
}
}
function handleChoose({ result, formData }: { result: any; formData?: FormData }) {
if (result.type === 'success' && result.data) {
const d = result.data as { clientSecret?: string };
if (d.clientSecret) {
const planName = String(formData?.get('plan') || '');
const label = { monthly: 'Monthly', yearly: 'Yearly' }[planName] || planName;
mountEmbedded(d.clientSecret, label);
}
} else if (result.type === 'failure') {
localError = result.data?.error || 'Failed to start checkout.';
}
}
function resetCheckout() {
checkout?.unmount();
checkout = null;
showCheckout = false;
checkoutTitle = '';
}
</script>
<AuthShell title="Create your family" subtitle="Set up in about a minute. Free to get going.">
{#if form?.message}
<p class="form-error">{form.message}</p>
{/if}
@@ -42,7 +118,8 @@
<p class="form-error">{localError}</p>
{/if}
{#if step === 1}
<!-- Step 1: Family + Parent -->
{#if step === 'fam'}
<form method="POST" action="?/signup" use:enhance={enhanceForm()}>
<label>
Family name
@@ -81,9 +158,8 @@
<button type="submit" disabled={submitting}>Create my family</button>
</form>
<p class="alt">Already have a family? <a href="/login">Log in</a></p>
{/if}
{#if step === 2}
{:else if step === 'child'}
<h3 class="step-title">Add a child now?</h3>
<p class="step-note">We'll create a shareable join code so they can jump in on any device.</p>
<form method="POST" action="?/child" use:enhance={enhanceForm()}>
@@ -99,24 +175,53 @@
<button type="submit" disabled={submitting}>Create join code</button>
</form>
<p class="alt">
<a href="/{form?.famSlug}">Skip for now →</a>
<a href="/{submittedFamSlug}" onclick={() => (step = 'code')}>Skip for now →</a>
</p>
{/if}
{#if step === 3}
<h3 class="step-title">{childName ? `Nice — share this code with ${childName}:` : 'Your family is ready!'}</h3>
{#if form?.code}
<div class="code">
<span class="code-text">{form.code}</span>
</div>
<p class="step-note">
They open <code class="inline-code">{form?.joinUrl}</code> and enter this code.
</p>
{:else}
<p class="step-note">You can add kids and share join codes any time from Family Settings.</p>
{:else if step === 'code'}
<h3 class="step-title">Have an access code?</h3>
<p class="step-note">If you have a code (e.g. from your employer or a gift), enter it here. Otherwise skip to choose a plan.</p>
<form method="POST" action="?/access" use:enhance={handleAccess}>
<input name="code" bind:value={accessCode} placeholder="Enter access code" autocomplete="off" />
<Button type="submit" size="md" variant="primary" disabled={submitting}>Apply code</Button>
</form>
{#if accessMsg}
<p class="access-msg">{accessMsg}</p>
{/if}
<p class="alt">
<button onclick={() => (step = 'plan')} class="skip-link">Skip — choose a plan instead →</button>
</p>
{:else if step === 'plan'}
<h3 class="step-title">Choose a plan</h3>
<p class="step-note">Pick the plan that works for your family. Your trial or subscription starts immediately.</p>
<PricingPlans
action="?/choose"
hideTrial={true}
selected={selectedPlan}
error={form?.error}
onsubmit={handleChoose}
/>
{#if showCheckout}
<CardGrid>
<Card title={`Checkout — ${checkoutTitle}`} accent="#059669">
<div class="checkout-actions">
<Button variant="ghost" size="sm" onclick={resetCheckout}>← Back to plans</Button>
</div>
<div bind:this={checkoutEl} class="checkout-host"></div>
<p class="hint" style="margin-top: 1rem;">
You can close and go to your dashboard any time — access unlocks once payment completes.
</p>
<a href={submittedFamSlug ? `/${submittedFamSlug}` : '/'} class="btn-primary" style="margin-top: 1rem; display: inline-block;">Go to dashboard</a>
</Card>
</CardGrid>
{/if}
{:else if step === 'done'}
<h3 class="step-title">Your family is ready!</h3>
<p class="step-note">You can add kids and share join codes any time from Family Settings.</p>
<div class="actions">
<a href="/{form?.famSlug}" class="btn-primary">Go to dashboard</a>
<a href="/{submittedFamSlug}" class="btn-primary">Go to dashboard</a>
</div>
{/if}
</AuthShell>
@@ -201,28 +306,20 @@
text-align: center;
}
.alt a { color: #4338ca; text-decoration: none; font-weight: 500; }
.code {
background: #eef2ff;
border: 1px dashed #a5b4fc;
border-radius: 10px;
padding: 1rem;
text-align: center;
margin: 0 0 0.75rem;
}
.code-text {
font-family: ui-monospace, monospace;
font-size: 1.6rem;
letter-spacing: 0.35em;
font-weight: 700;
.skip-link {
background: none;
border: none;
color: #4338ca;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
padding: 0;
}
.inline-code {
font-family: ui-monospace, monospace;
font-size: 0.85em;
background: #f3f4f6;
border-radius: 4px;
padding: 0.1em 0.35em;
color: #374151;
.skip-link:hover { text-decoration: underline; }
.access-msg {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #059669;
}
.actions {
margin-top: 1.25rem;