ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

use hooks on plans page

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-28 20:16:51 +00:00
parent 99987e35bb
commit 65964d64f6
2 changed files with 22 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/main.tsx
View File

@@ -13,7 +13,6 @@ import Issues from "@/pages/Issues";
import Landing from "@/pages/Landing"; import Landing from "@/pages/Landing";
import NotFound from "@/pages/NotFound"; import NotFound from "@/pages/NotFound";
import Plans from "@/pages/Plans"; import Plans from "@/pages/Plans";
import StripeTest from "@/pages/StripeTest";
import Test from "@/pages/Test"; import Test from "@/pages/Test";
import Timeline from "@/pages/Timeline"; import Timeline from "@/pages/Timeline";
@@ -54,14 +53,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
</RequireAuth> </RequireAuth>
} }
/> />
<Route
path="/stripe-test"
element={
<RequireAuth>
<StripeTest />
</RequireAuth>
}
/>
<Route <Route
path="/timeline" path="/timeline"
element={ element={

55
packages/frontend/src/pages/Plans.tsx
View File

@@ -1,5 +1,4 @@
import type { SubscriptionResponse } from "@sprint/shared"; import { useState } from "react";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { LoginModal } from "@/components/login-modal"; import { LoginModal } from "@/components/login-modal";
import { PricingCard, pricingTiers } from "@/components/pricing-card"; import { PricingCard, pricingTiers } from "@/components/pricing-card";
@@ -7,9 +6,7 @@ import { useSession } from "@/components/session-provider";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import Icon from "@/components/ui/icon"; import Icon from "@/components/ui/icon";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { createCheckoutSession } from "@/lib/server/subscription/createCheckoutSession"; import { useCreateCheckoutSession, useCreatePortalSession, useSubscription } from "@/lib/query/hooks";
import { createPortalSession } from "@/lib/server/subscription/createPortalSession";
import { getSubscription } from "@/lib/server/subscription/getSubscription";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export default function Plans() { export default function Plans() {
@@ -17,27 +14,13 @@ export default function Plans() {
const navigate = useNavigate(); const navigate = useNavigate();
const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("annual"); const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("annual");
const [loginModalOpen, setLoginModalOpen] = useState(false); const [loginModalOpen, setLoginModalOpen] = useState(false);
const [subscription, setSubscription] = useState<SubscriptionResponse | null>(null);
const [processingTier, setProcessingTier] = useState<string | null>(null); const [processingTier, setProcessingTier] = useState<string | null>(null);
// fetch subscription if user is logged in const { data: subscriptionData } = useSubscription();
useEffect(() => { const createCheckoutSession = useCreateCheckoutSession();
if (user) { const createPortalSession = useCreatePortalSession();
getSubscription()
.then((result) => {
const data = result.data as { subscription?: SubscriptionResponse } | null;
if (data?.subscription) {
setSubscription(data.subscription);
} else {
setSubscription(null);
}
})
.catch(() => {
setSubscription(null);
});
}
}, [user]);
const subscription = subscriptionData?.subscription ?? null;
const hasProSubscription = subscription?.status === "active"; const hasProSubscription = subscription?.status === "active";
const handleTierAction = async (tierName: string) => { const handleTierAction = async (tierName: string) => {
@@ -50,21 +33,27 @@ export default function Plans() {
if (hasProSubscription) { if (hasProSubscription) {
// open customer portal // open customer portal
setProcessingTier(tierName); setProcessingTier(tierName);
const result = await createPortalSession(); try {
const portalData = result.data as { url?: string } | null; const result = await createPortalSession.mutateAsync();
if (portalData?.url) { if (result.url) {
window.location.href = portalData.url; window.location.href = result.url;
} else { } else {
setProcessingTier(null);
}
} catch {
setProcessingTier(null); setProcessingTier(null);
} }
} else { } else {
// start checkout // start checkout
setProcessingTier(tierName); setProcessingTier(tierName);
const result = await createCheckoutSession({ billingPeriod }); try {
const checkoutData = result.data as { url?: string } | null; const result = await createCheckoutSession.mutateAsync({ billingPeriod });
if (checkoutData?.url) { if (result.url) {
window.location.href = checkoutData.url; window.location.href = result.url;
} else { } else {
setProcessingTier(null);
}
} catch {
setProcessingTier(null); setProcessingTier(null);
} }
} }