fix: proper cancellation handling

packages/frontend/package.json

@@ -14,6 +14,7 @@
     "@ts-rest/core": "^3.52.1",
     "@nsmr/pixelart-react": "^2.0.0",
     "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

packages/frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,131 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn("fixed inset-0 z-50 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=closed]:zoom-out-95",
+          "data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%]",
+          "z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+          "gap-4 border p-4 shadow-lg duration-200 outline-none w-sm",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Omit<React.ComponentProps<typeof Button>, "asChild">;
+
+function AlertDialogAction({ className, ...props }: AlertDialogActionProps) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button className={className} {...props} />
+    </AlertDialogPrimitive.Action>
+  );
+}
+
+type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Omit<React.ComponentProps<typeof Button>, "asChild">;
+
+function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button variant="outline" className={className} {...props} />
+    </AlertDialogPrimitive.Cancel>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

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

@@ -1,10 +1,11 @@
 import type {
+  CancelSubscriptionResponse,
   CreateCheckoutSessionRequest,
   CreateCheckoutSessionResponse,
   CreatePortalSessionResponse,
   GetSubscriptionResponse,
 } from "@sprint/shared";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "@/lib/query/keys";
 import { apiClient } from "@/lib/server";
 
@@ -42,3 +43,20 @@ export function useCreatePortalSession() {
     },
   });
 }
+
+export function useCancelSubscription() {
+  const queryClient = useQueryClient();
+
+  return useMutation<CancelSubscriptionResponse, Error>({
+    mutationKey: ["subscription", "cancel"],
+    mutationFn: async () => {
+      const { data, error } = await apiClient.subscriptionCancel({ body: {} });
+      if (error) throw new Error(error);
+      if (!data) throw new Error("failed to cancel subscription");
+      return data as CancelSubscriptionResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.subscription.current() });
+    },
+  });
+}

packages/frontend/src/pages/Plans.tsx

@@ -1,12 +1,29 @@
-import { useState } from "react";
+import { format } from "date-fns";
+import { useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { LoginModal } from "@/components/login-modal";
 import { PricingCard, pricingTiers } from "@/components/pricing-card";
 import { useSession } from "@/components/session-provider";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import Icon from "@/components/ui/icon";
 import { Switch } from "@/components/ui/switch";
-import { useCreateCheckoutSession, useCreatePortalSession, useSubscription } from "@/lib/query/hooks";
+import {
+  useCancelSubscription,
+  useCreateCheckoutSession,
+  useCreatePortalSession,
+  useSubscription,
+} from "@/lib/query/hooks";
 import { cn } from "@/lib/utils";
 
 export default function Plans() {
@@ -19,9 +36,21 @@ export default function Plans() {
   const { data: subscriptionData } = useSubscription();
   const createCheckoutSession = useCreateCheckoutSession();
   const createPortalSession = useCreatePortalSession();
+  const cancelSubscription = useCancelSubscription();
 
   const subscription = subscriptionData?.subscription ?? null;
-  const hasProSubscription = subscription?.status === "active";
+  const isProUser =
+    user?.plan === "pro" || subscription?.status === "active" || subscription?.status === "trialing";
+  const isCancellationScheduled = Boolean(subscription?.cancelAtPeriodEnd);
+  const isCanceled = subscription?.status === "canceled";
+  const cancellationEndDate = useMemo(() => {
+    if (!subscription?.currentPeriodEnd) return null;
+    const date = new Date(subscription.currentPeriodEnd);
+    if (Number.isNaN(date.getTime())) return null;
+    return format(date, "d MMM yyyy");
+  }, [subscription?.currentPeriodEnd]);
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [cancelError, setCancelError] = useState<string | null>(null);
 
   const handleTierAction = async (tierName: string) => {
     if (!user) {
@@ -30,7 +59,7 @@ export default function Plans() {
     }
 
     if (tierName === "Pro") {
-      if (hasProSubscription) {
+      if (isProUser) {
         // open customer portal
         setProcessingTier(tierName);
         try {
@@ -64,14 +93,25 @@ export default function Plans() {
     }
   };
 
+  const handleCancelSubscription = async () => {
+    setCancelError(null);
+    try {
+      await cancelSubscription.mutateAsync();
+      setCancelDialogOpen(false);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "failed to cancel subscription";
+      setCancelError(message);
+    }
+  };
+
   // modify pricing tiers based on user's current plan
   const modifiedTiers = pricingTiers.map((tier) => {
-    const isCurrentPlan = tier.name === "Pro" && hasProSubscription;
-    const isStarterCurrent = tier.name === "Starter" && !hasProSubscription;
+    const isCurrentPlan = tier.name === "Pro" && isProUser;
+    const isStarterCurrent = tier.name === "Starter" && !!user && !isProUser;
 
     return {
       ...tier,
-      highlighted: isCurrentPlan || (!hasProSubscription && tier.name === "Pro"),
+      highlighted: isCurrentPlan || (!isProUser && tier.name === "Pro"),
       cta: isCurrentPlan
         ? "Manage subscription"
         : isStarterCurrent
@@ -120,7 +160,7 @@ export default function Plans() {
             </h1>
             <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
               {user
-                ? hasProSubscription
+                ? isProUser
                   ? "You are currently on the Pro plan. Manage your subscription or switch plans below."
                   : "You are currently on the Starter plan. Upgrade to Pro for unlimited access."
                 : "Choose the plan that fits your team. Scale as you grow."}
@@ -175,6 +215,54 @@ export default function Plans() {
             ))}
           </div>
 
+          {user && isProUser && (
+            <div className="w-full max-w-4xl mx-auto border rounded-md p-6">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div className="space-y-1">
+                  <p className="font-700">Cancel subscription</p>
+                  <p className="text-sm text-muted-foreground">
+                    {isCancellationScheduled || isCanceled
+                      ? `Cancelled, benefits end on ${cancellationEndDate ?? "your billing end date"}.`
+                      : "Canceling will keep access until the end of your billing period."}
+                  </p>
+                </div>
+                <AlertDialog
+                  open={cancelDialogOpen}
+                  onOpenChange={(open: boolean) => {
+                    setCancelDialogOpen(open);
+                    if (!open) setCancelError(null);
+                  }}
+                >
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="destructive"
+                      disabled={cancelSubscription.isPending || isCancellationScheduled || isCanceled}
+                    >
+                      {isCancellationScheduled || isCanceled
+                        ? "Cancellation scheduled"
+                        : "Cancel subscription"}
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Cancel subscription?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        You will keep Pro access until the end of your current billing period.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Keep subscription</AlertDialogCancel>
+                      <AlertDialogAction variant="destructive" onClick={handleCancelSubscription}>
+                        {cancelSubscription.isPending ? "Canceling..." : "Confirm cancel"}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                    {cancelError && <p className="text-sm text-destructive">{cancelError}</p>}
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </div>
+          )}
+
           {/* trust signals */}
           <div className="grid md:grid-cols-3 gap-8 w-full border-t pt-16 pb-8 max-w-4xl mx-auto">
             <div className="flex flex-col items-center text-center gap-2">