mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-08 03:08:21 +00:00
fix: billing page (#416)
This commit is contained in:
MaheshtheDev
parent
84fea4a698
commit
99fd62d5f1
1 changed files with 211 additions and 176 deletions
|
|
@ -2,11 +2,6 @@
|
|||
|
||||
import { authClient } from "@lib/auth"
|
||||
import { useAuth } from "@lib/auth-context"
|
||||
import {
|
||||
fetchConnectionsFeature,
|
||||
fetchMemoriesFeature,
|
||||
fetchSubscriptionStatus,
|
||||
} from "@lib/queries"
|
||||
import { Button } from "@repo/ui/components/button"
|
||||
import { HeadingH3Bold } from "@repo/ui/text/heading/heading-h3-bold"
|
||||
import { useCustomer } from "autumn-js/react"
|
||||
|
|
@ -20,34 +15,57 @@ import {
|
|||
} from "lucide-react"
|
||||
import { motion } from "motion/react"
|
||||
import Link from "next/link"
|
||||
import { usePathname, useRouter } from "next/navigation"
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useEffect, useState } from "react"
|
||||
import { analytics } from "@/lib/analytics"
|
||||
|
||||
export function ProfileView() {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const { user: session, org } = useAuth()
|
||||
const organizations = org
|
||||
const autumn = useCustomer()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const { data: memoriesCheck } = fetchMemoriesFeature(autumn as any)
|
||||
const memoriesUsed = memoriesCheck?.usage ?? 0
|
||||
const memoriesLimit = memoriesCheck?.included_usage ?? 0
|
||||
|
||||
const { data: connectionsCheck } = fetchConnectionsFeature(autumn as any)
|
||||
const connectionsUsed = connectionsCheck?.usage ?? 0
|
||||
|
||||
// Fetch subscription status with React Query
|
||||
const { user: session } = useAuth()
|
||||
const {
|
||||
data: status = {
|
||||
consumer_pro: null,
|
||||
},
|
||||
isLoading: isCheckingStatus,
|
||||
} = fetchSubscriptionStatus(autumn as any)
|
||||
customer,
|
||||
isLoading: isCustomerLoading,
|
||||
openBillingPortal,
|
||||
attach,
|
||||
} = useCustomer()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [billingData, setBillingData] = useState<{
|
||||
isPro: boolean
|
||||
memoriesUsed: number
|
||||
memoriesLimit: number
|
||||
connectionsUsed: number
|
||||
connectionsLimit: number
|
||||
}>({
|
||||
isPro: false,
|
||||
memoriesUsed: 0,
|
||||
memoriesLimit: 0,
|
||||
connectionsUsed: 0,
|
||||
connectionsLimit: 0,
|
||||
})
|
||||
|
||||
const isPro = status.consumer_pro
|
||||
useEffect(() => {
|
||||
if (!isCustomerLoading) {
|
||||
const memoriesFeature = customer?.features?.memories ?? {
|
||||
usage: 0,
|
||||
included_usage: 0,
|
||||
}
|
||||
const connectionsFeature = customer?.features?.connections ?? {
|
||||
usage: 0,
|
||||
included_usage: 0,
|
||||
}
|
||||
|
||||
setBillingData({
|
||||
isPro:
|
||||
customer?.products?.some(
|
||||
(product) => product.id === "consumer_pro",
|
||||
) ?? false,
|
||||
memoriesUsed: memoriesFeature?.usage ?? 0,
|
||||
memoriesLimit: memoriesFeature?.included_usage ?? 0,
|
||||
connectionsUsed: connectionsFeature?.usage ?? 0,
|
||||
connectionsLimit: connectionsFeature?.included_usage ?? 0,
|
||||
})
|
||||
}
|
||||
}, [isCustomerLoading, customer])
|
||||
|
||||
const handleLogout = () => {
|
||||
analytics.userSignedOut()
|
||||
|
|
@ -58,7 +76,7 @@ export function ProfileView() {
|
|||
const handleUpgrade = async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await autumn.attach({
|
||||
await attach({
|
||||
productId: "consumer_pro",
|
||||
successUrl: "https://app.supermemory.ai/",
|
||||
})
|
||||
|
|
@ -71,7 +89,7 @@ export function ProfileView() {
|
|||
|
||||
// Handle manage billing
|
||||
const handleManageBilling = async () => {
|
||||
await autumn.openBillingPortal({
|
||||
await openBillingPortal({
|
||||
returnUrl: "https://app.supermemory.ai",
|
||||
})
|
||||
}
|
||||
|
|
@ -117,160 +135,177 @@ export function ProfileView() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Billing Section */}
|
||||
<div className="bg-white/5 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center">
|
||||
<CreditCard className="w-5 h-5 text-white/80" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<HeadingH3Bold className="text-white text-sm">
|
||||
{isPro ? "Pro Plan" : "Free Plan"}
|
||||
{isPro && (
|
||||
<span className="ml-2 text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded-full">
|
||||
Active
|
||||
{isCustomerLoading ? (
|
||||
<div className="bg-white/5 rounded-lg p-4 space-y-3 flex items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
Loading...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Billing Section */}
|
||||
<div className="bg-white/5 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center">
|
||||
<CreditCard className="w-5 h-5 text-white/80" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<HeadingH3Bold className="text-white text-sm">
|
||||
{billingData.isPro ? "Pro Plan" : "Free Plan"}
|
||||
{billingData.isPro && (
|
||||
<span className="ml-2 text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded-full">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</HeadingH3Bold>
|
||||
<p className="text-white/60 text-xs">
|
||||
{billingData.isPro
|
||||
? "Expanded memory capacity"
|
||||
: "Basic plan"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Stats */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-white/70">Memories</span>
|
||||
<span
|
||||
className={`text-sm ${billingData.memoriesUsed >= billingData.memoriesLimit ? "text-red-400" : "text-white/90"}`}
|
||||
>
|
||||
{billingData.memoriesUsed} / {billingData.memoriesLimit}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all ${
|
||||
billingData.memoriesUsed >= billingData.memoriesLimit
|
||||
? "bg-red-500"
|
||||
: billingData.isPro
|
||||
? "bg-green-500"
|
||||
: "bg-blue-500"
|
||||
}`}
|
||||
style={{
|
||||
width: `${Math.min((billingData.memoriesUsed / billingData.memoriesLimit) * 100, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{billingData.isPro && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-white/70">Connections</span>
|
||||
<span className="text-sm text-white/90">
|
||||
{billingData.connectionsUsed} / 10
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Billing Actions */}
|
||||
<div className="pt-2">
|
||||
{billingData.isPro ? (
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-white/10 hover:bg-white/20 text-white border-white/20"
|
||||
onClick={handleManageBilling}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Manage Billing
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white border-0"
|
||||
disabled={isLoading || isCustomerLoading}
|
||||
onClick={handleUpgrade}
|
||||
size="sm"
|
||||
>
|
||||
{isLoading || isCustomerLoading ? (
|
||||
<>
|
||||
<LoaderIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
Upgrading...
|
||||
</>
|
||||
) : (
|
||||
"Upgrade to Pro - $15/month"
|
||||
)}
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</HeadingH3Bold>
|
||||
<p className="text-white/60 text-xs">
|
||||
{isPro ? "Expanded memory capacity" : "Basic plan"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Usage Stats */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-white/70">Memories</span>
|
||||
<span
|
||||
className={`text-sm ${memoriesUsed >= memoriesLimit ? "text-red-400" : "text-white/90"}`}
|
||||
>
|
||||
{memoriesUsed} / {memoriesLimit}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all ${
|
||||
memoriesUsed >= memoriesLimit
|
||||
? "bg-red-500"
|
||||
: isPro
|
||||
? "bg-green-500"
|
||||
: "bg-blue-500"
|
||||
}`}
|
||||
style={{
|
||||
width: `${Math.min((memoriesUsed / memoriesLimit) * 100, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Plan Comparison - Only show for free users */}
|
||||
{!billingData.isPro && (
|
||||
<div className="bg-white/5 rounded-lg p-4 space-y-4">
|
||||
<HeadingH3Bold className="text-white text-sm">
|
||||
Upgrade to Pro
|
||||
</HeadingH3Bold>
|
||||
|
||||
{isPro && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-white/70">Connections</span>
|
||||
<span className="text-sm text-white/90">
|
||||
{connectionsUsed} / 10
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Free Plan */}
|
||||
<div className="p-3 bg-white/5 rounded-lg border border-white/10">
|
||||
<h4 className="font-medium text-white/90 mb-3 text-sm">
|
||||
Free Plan
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
200 memories
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<X className="h-4 w-4 text-red-400" />
|
||||
No connections
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Basic search
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Billing Actions */}
|
||||
<div className="pt-2">
|
||||
{isPro ? (
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Button
|
||||
className="w-full bg-white/10 hover:bg-white/20 text-white border-white/20"
|
||||
onClick={handleManageBilling}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Manage Billing
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white border-0"
|
||||
disabled={isLoading || isCheckingStatus}
|
||||
onClick={handleUpgrade}
|
||||
size="sm"
|
||||
>
|
||||
{isLoading || isCheckingStatus ? (
|
||||
<>
|
||||
<LoaderIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
Upgrading...
|
||||
</>
|
||||
) : (
|
||||
"Upgrade to Pro - $15/month"
|
||||
)}
|
||||
</Button>
|
||||
</motion.div>
|
||||
{/* Pro Plan */}
|
||||
<div className="p-3 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-lg border border-blue-500/20">
|
||||
<h4 className="font-medium text-white mb-3 flex items-center gap-2 text-sm">
|
||||
Pro Plan
|
||||
<span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded-full">
|
||||
Recommended
|
||||
</span>
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
5000 memories
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
10 connections
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Advanced search
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Priority support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-white/50 text-center">
|
||||
$15/month (only for first 100 users) • Cancel anytime. No
|
||||
questions asked.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Plan Comparison - Only show for free users */}
|
||||
{!isPro && (
|
||||
<div className="bg-white/5 rounded-lg p-4 space-y-4">
|
||||
<HeadingH3Bold className="text-white text-sm">
|
||||
Upgrade to Pro
|
||||
</HeadingH3Bold>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Free Plan */}
|
||||
<div className="p-3 bg-white/5 rounded-lg border border-white/10">
|
||||
<h4 className="font-medium text-white/90 mb-3 text-sm">
|
||||
Free Plan
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
200 memories
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<X className="h-4 w-4 text-red-400" />
|
||||
No connections
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/70">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Basic search
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Pro Plan */}
|
||||
<div className="p-3 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-lg border border-blue-500/20">
|
||||
<h4 className="font-medium text-white mb-3 flex items-center gap-2 text-sm">
|
||||
Pro Plan
|
||||
<span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded-full">
|
||||
Recommended
|
||||
</span>
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
5000 memories
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
10 connections
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Advanced search
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-white/90">
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
Priority support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-white/50 text-center">
|
||||
$15/month (only for first 100 users) • Cancel anytime. No questions
|
||||
asked.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue