apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-28 10:26:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat(story-5.1): add subscription pricing UI with Stripe checkout integration

Browse source 
Replace PAYG pricing tiers with subscription model (Free/Pro/Enterprise),
enable Monthly/Yearly billing toggle, wire Pro CTA to Stripe checkout with
authenticatedFetch, toast error feedback, double-click guard, checkout_url
validation, and offline graceful degradation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vonic 2026-04-14 23:28:14 +07:00
parent c1776b3ec8
commit 71edc183c4
5 changed files with 246 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

194
surfsense_web/components/pricing/pricing-section.tsx
View file

@ -1,70 +1,144 @@
import { Pricing } from "@/components/pricing";
"use client";
const demoPlans = [
{
name: "FREE",
price: "0",
yearlyPrice: "0",
period: "",
billingText: "500 pages included",
features: [
"Self Hostable",
"500 pages included to start",
"Earn up to 3,000+ bonus pages for free",
"Includes access to OpenAI text, audio and image models",
"Realtime Collaborative Group Chats with teammates",
"Community support on Discord",
],
description: "",
buttonText: "Get Started",
href: "/login",
isPopular: false,
},
{
name: "PAY AS YOU GO",
price: "1",
yearlyPrice: "1",
period: "1,000 pages",
billingText: "No subscription, buy only when you need more",
features: [
"Everything in Free",
"Buy 1,000-page packs at $1 each",
"Priority support on Discord",
],
description: "",
buttonText: "Get Started",
href: "/login",
isPopular: false,
},
{
name: "ENTERPRISE",
price: "Contact Us",
yearlyPrice: "Contact Us",
period: "",
billingText: "",
features: [
"Everything in Pay As You Go",
"On-prem or VPC deployment",
"Audit logs and compliance",
"SSO, OIDC & SAML",
"White-glove setup and deployment",
"Monthly managed updates and maintenance",
"SLA commitments",
"Dedicated support",
],
description: "Customized setup for large organizations",
buttonText: "Contact Sales",
href: "/contact",
isPopular: false,
},
];
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Pricing } from "@/components/pricing";
import { isAuthenticated, redirectToLogin, authenticatedFetch } from "@/lib/auth-utils";
import { BACKEND_URL } from "@/lib/env-config";
const PLAN_IDS = {
pro_monthly: "pro_monthly",
pro_yearly: "pro_yearly",
};
function PricingBasic() {
const [isOnline, setIsOnline] = useState(true);
const [isYearly, setIsYearly] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsOnline(navigator.onLine);
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);
return () => {
window.removeEventListener("online", handleOnline);
window.removeEventListener("offline", handleOffline);
};
}, []);
const handleUpgradePro = async () => {
if (!isOnline || isLoading) return;
if (!isAuthenticated()) {
redirectToLogin();
return;
}
setIsLoading(true);
try {
const planId = isYearly ? PLAN_IDS.pro_yearly : PLAN_IDS.pro_monthly;
const response = await authenticatedFetch(
`${BACKEND_URL}/api/v1/stripe/create-subscription-checkout`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ plan_id: planId }),
}
);
if (!response.ok) {
toast.error("Unable to start checkout. Please try again later.");
return;
}
const data = await response.json();
const checkoutUrl = data.checkout_url;
if (typeof checkoutUrl === "string" && checkoutUrl.startsWith("https://")) {
window.location.href = checkoutUrl;
} else {
toast.error("Invalid checkout response. Please try again.");
}
} catch (error) {
toast.error("Something went wrong. Please check your connection and try again.");
} finally {
setIsLoading(false);
}
};
// Pricing plans — static constant (loads offline)
const demoPlans = [
{
name: "FREE",
price: "0",
yearlyPrice: "0",
period: "month",
billingText: "No credit card required",
features: [
"Self hostable",
"500 pages ETL / month",
"50 LLM messages / day",
"Basic models (GPT-3.5 Turbo)",
"Community support on Discord",
],
description: "Perfect for personal use and exploration",
buttonText: "Get Started",
href: "/login",
isPopular: false,
},
{
name: "PRO",
price: "12",
yearlyPrice: "9",
period: "month",
billingText: isYearly ? "billed annually ($108/yr)" : "billed monthly",
features: [
"Everything in Free",
"5,000 pages ETL / month",
"1,000 LLM messages / day",
"Premium models (GPT-4, Claude, Gemini)",
"Priority support on Discord",
],
description: "For power users and professionals",
buttonText: isLoading ? "Redirecting…" : isOnline ? "Upgrade to Pro" : "Offline — unavailable",
href: "#",
isPopular: true,
onAction: handleUpgradePro,
disabled: !isOnline || isLoading,
},
{
name: "ENTERPRISE",
price: "Contact Us",
yearlyPrice: "Contact Us",
period: "",
billingText: "",
features: [
"Everything in Pro",
"Unlimited pages ETL",
"Unlimited LLM messages",
"All models including latest releases",
"On-prem or VPC deployment",
"SSO, OIDC & SAML",
"Audit logs and compliance",
"Dedicated support & SLA",
],
description: "Custom setup for large organisations",
buttonText: "Contact Sales",
href: "/contact",
isPopular: false,
},
];
return (
<Pricing
plans={demoPlans}
title="SurfSense Pricing"
description="Start free with 500 pages and pay as you go."
description="Start free. Upgrade when you need more power."
isYearly={isYearly}
onToggleBilling={setIsYearly}
/>
);
}