fixed to use hooks

packages/frontend/src/lib/query/hooks/index.ts

@@ -4,5 +4,6 @@ export * from "@/lib/query/hooks/issues";
 export * from "@/lib/query/hooks/organisations";
 export * from "@/lib/query/hooks/projects";
 export * from "@/lib/query/hooks/sprints";
+export * from "@/lib/query/hooks/subscriptions";
 export * from "@/lib/query/hooks/timers";
 export * from "@/lib/query/hooks/users";

packages/frontend/src/lib/query/hooks/subscriptions.ts

@@ -0,0 +1,44 @@
+import type {
+  CreateCheckoutSessionRequest,
+  CreateCheckoutSessionResponse,
+  CreatePortalSessionResponse,
+  GetSubscriptionResponse,
+} from "@sprint/shared";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { queryKeys } from "@/lib/query/keys";
+import { apiClient } from "@/lib/server";
+
+export function useSubscription() {
+  return useQuery<GetSubscriptionResponse>({
+    queryKey: queryKeys.subscription.current(),
+    queryFn: async () => {
+      const { data, error } = await apiClient.subscriptionGet();
+      if (error) throw new Error(error);
+      return (data ?? { subscription: null }) as GetSubscriptionResponse;
+    },
+  });
+}
+
+export function useCreateCheckoutSession() {
+  return useMutation<CreateCheckoutSessionResponse, Error, CreateCheckoutSessionRequest>({
+    mutationKey: ["subscription", "checkout"],
+    mutationFn: async (input) => {
+      const { data, error } = await apiClient.subscriptionCreateCheckoutSession({ body: input });
+      if (error) throw new Error(error);
+      if (!data) throw new Error("failed to create checkout session");
+      return data as CreateCheckoutSessionResponse;
+    },
+  });
+}
+
+export function useCreatePortalSession() {
+  return useMutation<CreatePortalSessionResponse, Error>({
+    mutationKey: ["subscription", "portal"],
+    mutationFn: async () => {
+      const { data, error } = await apiClient.subscriptionCreatePortalSession({ body: {} });
+      if (error) throw new Error(error);
+      if (!data) throw new Error("failed to create portal session");
+      return data as CreatePortalSessionResponse;
+    },
+  });
+}

packages/frontend/src/lib/query/keys.ts

@@ -39,4 +39,8 @@ export const queryKeys = {
     all: ["users"] as const,
     byUsername: (username: string) => [...queryKeys.users.all, "by-username", username] as const,
   },
+  subscription: {
+    all: ["subscription"] as const,
+    current: () => [...queryKeys.subscription.all, "current"] as const,
+  },
 };

packages/frontend/src/lib/server/subscription/createCheckoutSession.ts

@@ -1,38 +0,0 @@
-import { getServerURL } from "@/lib/utils";
-
-interface CreateCheckoutParams {
-  billingPeriod: "monthly" | "annual";
-  csrfToken: string;
-  onSuccess?: (url: string) => void;
-  onError?: (error: string) => void;
-}
-
-export async function createCheckoutSession({
-  billingPeriod,
-  csrfToken,
-  onSuccess,
-  onError,
-}: CreateCheckoutParams) {
-  try {
-    const response = await fetch(`${getServerURL()}/subscription/create-checkout-session`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": csrfToken,
-      },
-      credentials: "include",
-      body: JSON.stringify({ billingPeriod }),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      onError?.(data.error || "Failed to create checkout session");
-      return;
-    }
-
-    onSuccess?.(data.url);
-  } catch (error) {
-    onError?.("Network error");
-  }
-}

packages/frontend/src/lib/server/subscription/createPortalSession.ts

@@ -1,31 +0,0 @@
-import { getServerURL } from "@/lib/utils";
-
-interface CreatePortalParams {
-  csrfToken: string;
-  onSuccess?: (url: string) => void;
-  onError?: (error: string) => void;
-}
-
-export async function createPortalSession({ csrfToken, onSuccess, onError }: CreatePortalParams) {
-  try {
-    const response = await fetch(`${getServerURL()}/subscription/create-portal-session`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": csrfToken,
-      },
-      credentials: "include",
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      onError?.(data.error || "Failed to create portal session");
-      return;
-    }
-
-    onSuccess?.(data.url);
-  } catch (error) {
-    onError?.("Network error");
-  }
-}

packages/frontend/src/lib/server/subscription/getSubscription.ts

@@ -1,27 +0,0 @@
-import type { SubscriptionRecord } from "@sprint/shared";
-import { getServerURL } from "@/lib/utils";
-
-interface GetSubscriptionParams {
-  onSuccess?: (subscription: SubscriptionRecord | null) => void;
-  onError?: (error: string) => void;
-}
-
-export async function getSubscription({ onSuccess, onError }: GetSubscriptionParams) {
-  try {
-    const response = await fetch(`${getServerURL()}/subscription/get`, {
-      method: "GET",
-      credentials: "include",
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      onError?.(data.error || "Failed to fetch subscription");
-      return;
-    }
-
-    onSuccess?.(data.subscription);
-  } catch (error) {
-    onError?.("Network error");
-  }
-}

packages/frontend/src/pages/Plans.tsx

@@ -1,3 +1,4 @@
+import type { SubscriptionResponse } from "@sprint/shared";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { LoginModal } from "@/components/login-modal";
@@ -9,44 +10,37 @@ import { Switch } from "@/components/ui/switch";
 import { createCheckoutSession } from "@/lib/server/subscription/createCheckoutSession";
 import { createPortalSession } from "@/lib/server/subscription/createPortalSession";
 import { getSubscription } from "@/lib/server/subscription/getSubscription";
-import { cn, getCsrfToken } from "@/lib/utils";
-
-interface SubscriptionData {
-  status: string;
-  currentPeriodEnd: Date | null;
-  quantity: number;
-}
+import { cn } from "@/lib/utils";
 
 export default function Plans() {
   const { user, isLoading } = useSession();
   const navigate = useNavigate();
   const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("annual");
   const [loginModalOpen, setLoginModalOpen] = useState(false);
-  const [subscription, setSubscription] = useState<SubscriptionData | null>(null);
-  const [loadingSubscription, setLoadingSubscription] = useState(false);
+  const [subscription, setSubscription] = useState<SubscriptionResponse | null>(null);
   const [processingTier, setProcessingTier] = useState<string | null>(null);
 
   // fetch subscription if user is logged in
   useEffect(() => {
     if (user) {
-      setLoadingSubscription(true);
-      getSubscription({
-        onSuccess: (data) => {
-          setSubscription(data);
-          setLoadingSubscription(false);
-        },
-        onError: () => {
+      getSubscription()
+        .then((result) => {
+          const data = result.data as { subscription?: SubscriptionResponse } | null;
+          if (data?.subscription) {
+            setSubscription(data.subscription);
+          } else {
+            setSubscription(null);
+          }
+        })
+        .catch(() => {
           setSubscription(null);
-          setLoadingSubscription(false);
-        },
-      });
+        });
     }
   }, [user]);
 
   const hasProSubscription = subscription?.status === "active";
-  const csrfToken = getCsrfToken() || "";
 
-  const handleTierAction = (tierName: string) => {
+  const handleTierAction = async (tierName: string) => {
     if (!user) {
       setLoginModalOpen(true);
       return;
@@ -56,28 +50,23 @@ export default function Plans() {
       if (hasProSubscription) {
         // open customer portal
         setProcessingTier(tierName);
-        createPortalSession({
-          csrfToken,
-          onSuccess: (url) => {
-            window.location.href = url;
-          },
-          onError: () => {
-            setProcessingTier(null);
-          },
-        });
+        const result = await createPortalSession();
+        const portalData = result.data as { url?: string } | null;
+        if (portalData?.url) {
+          window.location.href = portalData.url;
+        } else {
+          setProcessingTier(null);
+        }
       } else {
         // start checkout
         setProcessingTier(tierName);
-        createCheckoutSession({
-          billingPeriod,
-          csrfToken,
-          onSuccess: (url) => {
-            window.location.href = url;
-          },
-          onError: () => {
-            setProcessingTier(null);
-          },
-        });
+        const result = await createCheckoutSession({ billingPeriod });
+        const checkoutData = result.data as { url?: string } | null;
+        if (checkoutData?.url) {
+          window.location.href = checkoutData.url;
+        } else {
+          setProcessingTier(null);
+        }
       }
     }
     // starter tier - just go to issues if not already there
@@ -220,6 +209,33 @@ export default function Plans() {
               <p className="text-sm text-muted-foreground">30-day no-risk policy</p>
             </div>
           </div>
+
+          {/* FAQ */}
+          <div className="max-w-2xl mx-auto space-y-8 border-t pt-16">
+            <h2 className="text-3xl font-basteleur font-700 text-center">Frequently Asked Questions</h2>
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <h3 className="font-700">Can I switch plans?</h3>
+                <p className="text-muted-foreground">
+                  Yes, you can upgrade or downgrade at any time. Changes take effect immediately.
+                </p>
+              </div>
+              <div className="space-y-2">
+                <h3 className="font-700">What happens when I add team members?</h3>
+                <p className="text-muted-foreground">
+                  Pro plan pricing scales with your team. Add or remove users anytime, and we'll adjust your
+                  billing automatically.
+                </p>
+              </div>
+              <div className="space-y-2">
+                <h3 className="font-700">Can I cancel my subscription?</h3>
+                <p className="text-muted-foreground">
+                  Absolutely. Cancel anytime with no questions asked. You'll keep access until the end of your
+                  billing period.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </main>