mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-29 19:06:24 +02:00
feat(story-5.1): add subscription pricing UI with Stripe checkout integration
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
parent
c1776b3ec8
commit
71edc183c4
5 changed files with 246 additions and 99 deletions
|
|
@ -23,25 +23,38 @@ interface PricingPlan {
|
|||
buttonText: string;
|
||||
href: string;
|
||||
isPopular: boolean;
|
||||
onAction?: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface PricingProps {
|
||||
plans: PricingPlan[];
|
||||
title?: string;
|
||||
description?: string;
|
||||
isYearly?: boolean;
|
||||
onToggleBilling?: (yearly: boolean) => void;
|
||||
}
|
||||
|
||||
export function Pricing({
|
||||
plans,
|
||||
title = "Simple, Transparent Pricing",
|
||||
description = "Choose the plan that works for you\nAll plans include access to our SurfSense AI workspace and community support.",
|
||||
isYearly: isYearlyProp,
|
||||
onToggleBilling,
|
||||
}: PricingProps) {
|
||||
const [isMonthly, setIsMonthly] = useState(false);
|
||||
const [isYearlyLocal, setIsYearlyLocal] = useState(false);
|
||||
const isYearly = isYearlyProp !== undefined ? isYearlyProp : isYearlyLocal;
|
||||
const isMonthly = !isYearly;
|
||||
const isDesktop = useMediaQuery("(min-width: 768px)");
|
||||
const switchRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleToggle = (checked: boolean) => {
|
||||
setIsMonthly(!checked);
|
||||
const yearly = checked;
|
||||
if (onToggleBilling) {
|
||||
onToggleBilling(yearly);
|
||||
} else {
|
||||
setIsYearlyLocal(yearly);
|
||||
}
|
||||
if (checked && switchRef.current) {
|
||||
const rect = switchRef.current.getBoundingClientRect();
|
||||
const x = rect.left + rect.width / 2;
|
||||
|
|
@ -76,24 +89,27 @@ export function Pricing({
|
|||
<p className="text-muted-foreground text-lg whitespace-pre-line">{description}</p>
|
||||
</div>
|
||||
|
||||
{/* <div className="flex justify-center mb-10">
|
||||
<div className="flex justify-center mb-10">
|
||||
<label
|
||||
htmlFor="billing-toggle"
|
||||
className="relative inline-flex items-center cursor-pointer"
|
||||
className="relative inline-flex items-center cursor-pointer gap-3"
|
||||
>
|
||||
<span className={`font-semibold ${isMonthly ? "text-foreground" : "text-muted-foreground"}`}>
|
||||
Monthly
|
||||
</span>
|
||||
<Label>
|
||||
<Switch
|
||||
ref={switchRef as any}
|
||||
checked={!isMonthly}
|
||||
checked={isYearly}
|
||||
onCheckedChange={handleToggle}
|
||||
className="relative"
|
||||
/>
|
||||
</Label>
|
||||
<span className={`font-semibold ${isYearly ? "text-foreground" : "text-muted-foreground"}`}>
|
||||
Annual <span className="text-primary">(Save 25%)</span>
|
||||
</span>
|
||||
</label>
|
||||
<span className="ml-2 font-semibold">
|
||||
Annual billing <span className="text-primary">(Save 20%)</span>
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
|
|
@ -203,21 +219,42 @@ export function Pricing({
|
|||
|
||||
<hr className="w-full my-4" />
|
||||
|
||||
<Link
|
||||
href={plan.href}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: "outline",
|
||||
}),
|
||||
"group relative w-full gap-2 overflow-hidden text-lg font-semibold tracking-tighter",
|
||||
"transform-gpu ring-offset-current transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-1 hover:bg-primary hover:text-primary-foreground",
|
||||
plan.isPopular
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-background text-foreground"
|
||||
)}
|
||||
>
|
||||
{plan.buttonText}
|
||||
</Link>
|
||||
{plan.onAction ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={plan.onAction}
|
||||
disabled={plan.disabled}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: "outline",
|
||||
}),
|
||||
"group relative w-full gap-2 overflow-hidden text-lg font-semibold tracking-tighter",
|
||||
"transform-gpu ring-offset-current transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-1 hover:bg-primary hover:text-primary-foreground",
|
||||
plan.isPopular
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-background text-foreground",
|
||||
plan.disabled && "opacity-50 cursor-not-allowed hover:ring-0 hover:bg-inherit hover:text-inherit"
|
||||
)}
|
||||
>
|
||||
{plan.buttonText}
|
||||
</button>
|
||||
) : (
|
||||
<Link
|
||||
href={plan.href}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: "outline",
|
||||
}),
|
||||
"group relative w-full gap-2 overflow-hidden text-lg font-semibold tracking-tighter",
|
||||
"transform-gpu ring-offset-current transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-1 hover:bg-primary hover:text-primary-foreground",
|
||||
plan.isPopular
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-background text-foreground"
|
||||
)}
|
||||
>
|
||||
{plan.buttonText}
|
||||
</Link>
|
||||
)}
|
||||
<p className="mt-6 text-xs leading-5 text-muted-foreground">{plan.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue