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

update from user testing payment platform

Browse Source
This commit is contained in:
JCEEE
2026-08-24 18:09:44 +01:00
parent d71353fb3e
commit 09d73199ea
10 changed files with 615 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/pricing/+page.svelte
+64 -25
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { tick } from 'svelte';
import { enhance } from '$app/forms';
import { goto } from '$app/navigation';
import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from '$app/env/public';
import { loadStripe, type StripeEmbeddedCheckout } from '@stripe/stripe-js';
import { Button, PricingPlans } from '$lib/components';
@@ -27,16 +28,23 @@
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);
// use:enhance is two-stage: this factory receives submit params (no result
// yet), and the RESOLVE function it returns receives { result, formData }.
const handleChoose = () =>
async ({ result, formData }: any) => {
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);
}
} else if (result?.type === 'redirect') {
// Logged-out choose → server sends us to signup with the plan.
await goto(String(result.location));
}
}
}
};
function resetCheckout() {
checkout?.unmount();
@@ -90,9 +98,7 @@
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background:
radial-gradient(60rem 30rem at 50% -10rem, #eef2ff 0%, transparent 65%),
#fafafa;
background: radial-gradient(60rem 30rem at 50% -10rem, #eef2ff 0%, transparent 65%), #fafafa;
}
.topbar {
display: flex;
@@ -116,13 +122,19 @@
align-items: center;
gap: 1rem;
}
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-link {
font-size: 0.9rem;
color: #4b5563;
text-decoration: none;
}
.nav-link:hover { color: #111827; }
.nav-link:hover {
color: #111827;
}
.nav-cta {
font-size: 0.88rem;
font-weight: 600;
@@ -132,7 +144,9 @@
padding: 0.45rem 1rem;
border-radius: 999px;
}
.nav-cta:hover { background: linear-gradient(135deg, #3730a3, #4f46e5); }
.nav-cta:hover {
background: linear-gradient(135deg, #3730a3, #4f46e5);
}
main {
display: flex;
@@ -145,7 +159,9 @@
max-width: 1040px;
margin: 0 auto;
}
.head { text-align: center; }
.head {
text-align: center;
}
.head h1 {
margin: 0 0 0.35rem;
font-size: clamp(1.5rem, 3vw, 2.1rem);
@@ -159,7 +175,10 @@
color: #6b7280;
}
.checkout-wrap { width: 100%; max-width: 720px; }
.checkout-wrap {
width: 100%;
max-width: 720px;
}
.checkout-card {
background: #fff;
border: 1px solid #e5e7eb;
@@ -173,10 +192,22 @@
justify-content: space-between;
margin-bottom: 0.75rem;
}
.checkout-head h2 { margin: 0; font-size: 1.05rem; color: #111827; }
.checkout-host { min-height: 420px; }
.checkout-host :global(iframe) { width: 100%; }
.hint { font-size: 0.82rem; color: #9ca3af; margin: 0.75rem 0 0; }
.checkout-head h2 {
margin: 0;
font-size: 1.05rem;
color: #111827;
}
.checkout-host {
min-height: 420px;
}
.checkout-host :global(iframe) {
width: 100%;
}
.hint {
font-size: 0.82rem;
color: #9ca3af;
margin: 0.75rem 0 0;
}
.dash-link {
display: inline-block;
margin-top: 0.5rem;
@@ -185,10 +216,18 @@
font-size: 0.9rem;
text-decoration: none;
}
.dash-link:hover { text-decoration: underline; }
.dash-link:hover {
text-decoration: underline;
}
@media (max-height: 760px) {
main { gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.head h1 { font-size: 1.35rem; }
main {
gap: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.head h1 {
font-size: 1.35rem;
}
}
</style>
</style>