From 1acc15636383d1eb659f0d31ed81a60827e8529b Mon Sep 17 00:00:00 2001 From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com> Date: Sat, 9 May 2026 19:52:21 +0000 Subject: [PATCH] fix: payment upgrade issue (#918) --- .../components/add-document/connections.tsx | 8 +- apps/web/components/add-document/index.tsx | 12 +- .../integrations/plugins-detail.tsx | 11 +- apps/web/components/settings/account.tsx | 339 +++++++++--------- .../components/settings/connections-mcp.tsx | 11 +- apps/web/hooks/use-token-usage.ts | 2 + 6 files changed, 194 insertions(+), 189 deletions(-) diff --git a/apps/web/components/add-document/connections.tsx b/apps/web/components/add-document/connections.tsx index 955a0345..c8e748ad 100644 --- a/apps/web/components/add-document/connections.tsx +++ b/apps/web/components/add-document/connections.tsx @@ -243,13 +243,19 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) { const handleUpgrade = async () => { setIsUpgrading(true) try { - await autumn.attach({ + const result = await autumn.attach({ planId: "api_pro", successUrl: window.location.href, }) + if (result?.paymentUrl) { + window.open(result.paymentUrl, "_self") + return + } + autumn.refetch?.() } catch (error) { console.error("Upgrade error:", error) toast.error("Failed to start upgrade process") + } finally { setIsUpgrading(false) } } diff --git a/apps/web/components/add-document/index.tsx b/apps/web/components/add-document/index.tsx index eb286cff..12406853 100644 --- a/apps/web/components/add-document/index.tsx +++ b/apps/web/components/add-document/index.tsx @@ -393,13 +393,19 @@ export function AddDocument({ onClick={async () => { setIsUpgrading(true) try { - await autumn.attach({ + const result = await autumn.attach({ planId: "api_pro", - successUrl: "https://app.supermemory.ai/settings#account", + successUrl: `${window.location.origin}/settings#account`, }) - window.location.reload() + if (result?.paymentUrl) { + window.open(result.paymentUrl, "_self") + return + } + autumn.refetch?.() } catch (error) { console.error(error) + toast.error("Failed to start checkout. Please try again.") + } finally { setIsUpgrading(false) } }} diff --git a/apps/web/components/integrations/plugins-detail.tsx b/apps/web/components/integrations/plugins-detail.tsx index 1fff4441..c7b43f23 100644 --- a/apps/web/components/integrations/plugins-detail.tsx +++ b/apps/web/components/integrations/plugins-detail.tsx @@ -495,13 +495,18 @@ export function PluginsDetail() { const handleUpgrade = async () => { try { - await autumn.attach({ + const result = await autumn.attach({ planId: "api_pro", - successUrl: "https://app.supermemory.ai/?view=integrations", + successUrl: `${window.location.origin}/?view=integrations`, }) - window.location.reload() + if (result?.paymentUrl) { + window.open(result.paymentUrl, "_self") + return + } + autumn.refetch?.() } catch (error) { console.error(error) + toast.error("Failed to start checkout. Please try again.") } } diff --git a/apps/web/components/settings/account.tsx b/apps/web/components/settings/account.tsx index 43d6303d..bb447a6c 100644 --- a/apps/web/components/settings/account.tsx +++ b/apps/web/components/settings/account.tsx @@ -9,7 +9,6 @@ import { } from "@/hooks/use-account-settings" import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar" import { useTokenUsage } from "@/hooks/use-token-usage" -import { formatUsageNumber } from "@/lib/billing-utils" import { Dialog, DialogContent, @@ -57,36 +56,123 @@ function SettingsCard({ children }: { children: React.ReactNode }) { ) } -function PlanFeatureRow({ - icon, - text, - variant = "muted", +function PlanComparisonCard({ + name, + price, + period, + description, + credits, + features, + highlight, }: { - icon: "check" | "x" - text: string - variant?: "muted" | "highlight" + name: string + price: string + period: string + description: string + credits: string + features: string[] + highlight: boolean }) { return ( -
- {icon === "check" ? ( - - ) : ( - +
+
+

+ {name} +

+ {highlight && ( + + RECOMMENDED + + )} +
+ +
+ + {price} + + {period && ( + + {period} + + )} +
+ +

- {text} - + {description} +

+ +
+
+

+ {credits} +

+

+ of usage included +

+
+
+ +
    + {features.map((text) => ( +
  • + + {text} +
    • + ))} +
) } @@ -152,8 +238,8 @@ export default function Account() { } const { - tokensUsed, - searchesUsed, + usdIncluded, + usdSpent, planUsagePct, currentPlan, hasPaidPlan, @@ -161,6 +247,12 @@ export default function Account() { daysRemaining, } = useTokenUsage(autumn) + const formatUsd = (n: number) => + n.toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }) + const planDisplayNames: Record = { free: "Free", pro: "Pro", @@ -172,13 +264,19 @@ export default function Account() { const handleUpgrade = async () => { setIsUpgrading(true) try { - await autumn.attach({ + const result = await autumn.attach({ planId: "api_pro", - successUrl: "https://app.supermemory.ai/settings#account", + successUrl: `${window.location.origin}/settings#account`, }) - window.location.reload() + if (result?.paymentUrl) { + window.open(result.paymentUrl, "_self") + return + } + autumn.refetch?.() } catch (error) { console.error(error) + toast.error("Failed to start checkout. Please try again.") + } finally { setIsUpgrading(false) } } @@ -418,7 +516,7 @@ export default function Account() { ? "#ef4444" : "linear-gradient(to right, #4BA0FA 80%, #002757 100%)", }} - title={`${formatUsageNumber(tokensUsed)} tokens · ${formatUsageNumber(searchesUsed)} queries`} + title={`$${formatUsd(usdSpent)} of $${formatUsd(usdIncluded)} used`} />

- {formatUsageNumber(tokensUsed)} tokens ·{" "} - {formatUsageNumber(searchesUsed)} queries - {daysRemaining !== null && ( - <> - {" · resets in "} - {daysRemaining} day{daysRemaining !== 1 ? "s" : ""} - - )} + {daysRemaining !== null + ? `Resets in ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}` + : ""}

@@ -457,73 +550,6 @@ export default function Account() { Manage billing
- -
- {/* Free plan card */} -
-

- Free plan -

-
- - - - -
-
- - {/* Current plan card - highlighted */} -
-
-

- {planDisplayNames[currentPlan]} plan -

- - ACTIVE - -
-
- - - - -
-
-
-
) : ( <> @@ -576,7 +602,7 @@ export default function Account() { width: `${planUsagePct}%`, background: planUsagePct > 80 ? "#ef4444" : "#0054AD", }} - title={`${formatUsageNumber(tokensUsed)} tokens · ${formatUsageNumber(searchesUsed)} queries`} + title={`$${formatUsd(usdSpent)} of $${formatUsd(usdIncluded)} used`} />

- {formatUsageNumber(tokensUsed)} tokens ·{" "} - {formatUsageNumber(searchesUsed)} queries - {daysRemaining !== null && ( - <> - {" · resets in "} - {daysRemaining} day{daysRemaining !== 1 ? "s" : ""} - - )} + {daysRemaining !== null + ? `Resets in ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}` + : ""}

@@ -628,72 +649,32 @@ export default function Account() {
- {/* Free plan card */} -
-

- Free plan -

-
- - - - -
-
- - {/* Pro plan card */} -
- {/* Header with badge */} -
-

- Pro plan -

- - RECOMMENDED - -
-
- - - - -
- {/* Inset highlight */} -
-
+ +
)} diff --git a/apps/web/components/settings/connections-mcp.tsx b/apps/web/components/settings/connections-mcp.tsx index 27040298..8c881498 100644 --- a/apps/web/components/settings/connections-mcp.tsx +++ b/apps/web/components/settings/connections-mcp.tsx @@ -423,13 +423,18 @@ export default function ConnectionsMCP() { // Upgrade handler const handleUpgrade = async () => { try { - await autumn.attach({ + const result = await autumn.attach({ planId: "api_pro", - successUrl: "https://app.supermemory.ai/settings#connections", + successUrl: `${window.location.origin}/settings#connections`, }) - window.location.reload() + if (result?.paymentUrl) { + window.open(result.paymentUrl, "_self") + return + } + autumn.refetch?.() } catch (error) { console.error(error) + toast.error("Failed to start checkout. Please try again.") } } diff --git a/apps/web/hooks/use-token-usage.ts b/apps/web/hooks/use-token-usage.ts index 98956124..c903d7e7 100644 --- a/apps/web/hooks/use-token-usage.ts +++ b/apps/web/hooks/use-token-usage.ts @@ -54,6 +54,8 @@ export function useTokenUsage(autumn: ReturnType) { return { tokensUsed, searchesUsed, + usdIncluded, + usdSpent, planUsagePct, currentPlan, hasPaidPlan,