custom claim for pro state

Author: yujonglee

apps/desktop/package.json

@@ -86,6 +86,7 @@
     "dompurify": "^3.3.0",
     "effect": "^3.19.6",
     "json5": "^2.2.3",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.544.0",
     "motion": "^11.18.2",
     "mutative": "^1.3.0",

apps/desktop/src/billing.tsx

@@ -1,38 +1,18 @@
-import { useQuery } from "@tanstack/react-query";
 import { openUrl } from "@tauri-apps/plugin-opener";
+import { jwtDecode } from "jwt-decode";
 import {
   createContext,
   type ReactNode,
   useCallback,
   useContext,
   useMemo,
 } from "react";
-import type Stripe from "stripe";
 
 import { useAuth } from "./auth";
 import { env } from "./env";
 
-type BillingRow = {
-  id: string;
-  user_id: string;
-  created_at: string;
-  updated_at: string;
-  stripe_customer: Stripe.Customer | null;
-  stripe_subscription: Stripe.Subscription | null;
-};
-
-type BillingData = (BillingRow & { isPro: boolean }) | null;
-
 type BillingContextValue = {
-  data: BillingData;
   isPro: boolean;
-  isLoading: boolean;
-  isPending: boolean;
-  isFetching: boolean;
-  isRefetching: boolean;
-  isError: boolean;
-  error: unknown;
-  refetch: () => Promise<unknown>;
   upgradeToPro: () => void;
 };
 
@@ -43,75 +23,31 @@ const BillingContext = createContext<BillingContextValue | null>(null);
 export function BillingProvider({ children }: { children: ReactNode }) {
   const auth = useAuth();
 
-  const {
-    data: queryData,
-    isLoading,
-    isPending,
-    isFetching,
-    isRefetching,
-    isError,
-    error,
-    refetch,
-  } = useQuery({
-    enabled: !!auth?.supabase && !!auth?.session?.user?.id,
-    queryKey: ["billing", auth?.session?.user?.id],
-    queryFn: async (): Promise<BillingData> => {
-      if (!auth?.supabase || !auth?.session?.user?.id) {
-        return null;
-      }
-
-      const { data, error } = await auth.supabase
-        .from("billings")
-        .select("*")
-        .eq("user_id", auth.session.user.id)
-        .maybeSingle();
-
-      if (error) {
-        throw error;
-      }
-
-      if (!data) {
-        return null;
-      }
-
-      const billing = data as BillingRow;
-      return {
-        ...billing,
-        isPro: computeIsPro(billing.stripe_subscription),
-      };
-    },
-  });
-
-  const data = queryData ?? null;
+  const isPro = useMemo(() => {
+    if (!auth?.session?.access_token) {
+      return false;
+    }
+
+    try {
+      const decoded = jwtDecode<{ is_pro?: boolean }>(
+        auth.session.access_token,
+      );
+      return decoded.is_pro ?? false;
+    } catch {
+      return false;
+    }
+  }, [auth?.session?.access_token]);
 
   const upgradeToPro = useCallback(() => {
     openUrl(`${env.VITE_APP_URL}/app/checkout?period=monthly`);
-  }, [auth]);
+  }, []);
 
   const value = useMemo<BillingContextValue>(
     () => ({
-      data,
-      isPro: !!data?.isPro,
-      isLoading,
-      isPending,
-      isFetching,
-      isRefetching,
-      isError,
-      error,
-      refetch: () => refetch(),
+      isPro,
       upgradeToPro,
     }),
-    [
-      data,
-      error,
-      isError,
-      isFetching,
-      isLoading,
-      isPending,
-      isRefetching,
-      refetch,
-      upgradeToPro,
-    ],
+    [isPro, upgradeToPro],
   );
 
   return (
@@ -128,23 +64,3 @@ export function useBillingAccess() {
 
   return context;
 }
-
-function computeIsPro(
-  subscription: Stripe.Subscription | null | undefined,
-): boolean {
-  if (!subscription) {
-    return false;
-  }
-
-  const hasValidStatus = ["active", "trialing"].includes(subscription.status);
-
-  const hasProProduct = subscription.items.data.some((item) => {
-    const product = item.price.product;
-
-    return typeof product === "string"
-      ? product === env.VITE_PRO_PRODUCT_ID
-      : product.id === env.VITE_PRO_PRODUCT_ID;
-  });
-
-  return hasValidStatus && hasProProduct;
-}

apps/desktop/src/components/settings/account.tsx

@@ -1,20 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import { ExternalLinkIcon } from "lucide-react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
-import type Stripe from "stripe";
 
 import { Button } from "@hypr/ui/components/ui/button";
 import { Input } from "@hypr/ui/components/ui/input";
 
 import { useAuth } from "../../auth";
-import { useBillingAccess } from "../../billing";
 import { env } from "../../env";
 
 const WEB_APP_BASE_URL = env.VITE_APP_URL ?? "http://localhost:3000";
 
+type SubscriptionRow = {
+  stripe_customer_id: string | null;
+  subscription_id: string | null;
+  subscription_status: string | null;
+  current_period_start: string | null;
+  current_period_end: string | null;
+  cancel_at_period_end: boolean | null;
+};
+
 export function SettingsAccount() {
   const auth = useAuth();
-  const billing = useBillingAccess();
+
+  const { data: subscription } = useQuery({
+    enabled: !!auth?.supabase && !!auth?.session?.user?.id,
+    queryKey: ["subscription", auth?.session?.user?.id],
+    queryFn: async (): Promise<SubscriptionRow | null> => {
+      if (!auth?.supabase) {
+        return null;
+      }
+
+      const { data, error } = await auth.supabase
+        .from("billing_with_subscription")
+        .select(
+          "stripe_customer_id, subscription_id, subscription_status, current_period_start, current_period_end, cancel_at_period_end",
+        )
+        .maybeSingle();
+
+      if (error) {
+        throw error;
+      }
+
+      return data as SubscriptionRow | null;
+    },
+  });
 
   const isAuthenticated = !!auth?.session;
   const [isPending, setIsPending] = useState(false);
@@ -110,7 +140,7 @@ export function SettingsAccount() {
     );
   }
 
-  const hasStripeCustomer = !!billing.data?.stripe_customer;
+  const hasStripeCustomer = !!subscription?.stripe_customer_id;
 
   return (
     <div className="flex flex-col gap-4">
@@ -145,9 +175,11 @@ export function SettingsAccount() {
           ) : undefined
         }
       >
-        {billing.data?.stripe_subscription && (
+        {subscription?.subscription_id && (
           <SubscriptionDetails
-            subscription={billing.data.stripe_subscription}
+            status={subscription.subscription_status}
+            currentPeriodStart={subscription.current_period_start}
+            currentPeriodEnd={subscription.current_period_end}
           />
         )}
       </Container>
@@ -156,23 +188,32 @@ export function SettingsAccount() {
 }
 
 function SubscriptionDetails({
-  subscription,
+  status,
+  currentPeriodStart,
+  currentPeriodEnd,
 }: {
-  subscription: Stripe.Subscription;
+  status: string | null;
+  currentPeriodStart: string | null;
+  currentPeriodEnd: string | null;
 }) {
-  const {
-    status,
-    items: {
-      data: [{ current_period_end, current_period_start }],
-    },
-  } = subscription;
+  if (!status) {
+    return null;
+  }
+
+  if (!currentPeriodStart || !currentPeriodEnd) {
+    return (
+      <div className="flex flex-row gap-1 text-xs text-neutral-600">
+        <span className="capitalize">{status}</span>
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-row gap-1 text-xs text-neutral-600">
       <span className="capitalize">{status}:</span>
-      <span>{new Date(current_period_start * 1000).toLocaleDateString()}</span>
+      <span>{new Date(currentPeriodStart).toLocaleDateString()}</span>
       <span>~</span>
-      <span>{new Date(current_period_end * 1000).toLocaleDateString()}</span>
+      <span>{new Date(currentPeriodEnd).toLocaleDateString()}</span>
     </div>
   );
 }

apps/desktop/src/components/settings/ai/llm/health.tsx

@@ -127,9 +127,7 @@ function useAvailability() {
     if (llmProviderRequiresPro(current_llm_provider) && !billing.isPro) {
       return {
         available: false,
-        message: billing.isLoading
-          ? "Checking plan access for this provider..."
-          : "Upgrade to Pro to use this provider.",
+        message: "Upgrade to Pro to use this provider.",
       };
     }
 

apps/desktop/src/components/settings/ai/stt/health.tsx

@@ -91,9 +91,7 @@ function useAvailability():
   if (sttProviderRequiresPro(providerId) && !billing.isPro) {
     return {
       available: false,
-      message: billing.isLoading
-        ? "Checking plan access for this provider..."
-        : "Upgrade to Pro to use this provider.",
+      message: "Upgrade to Pro to use this provider.",
     };
   }