only show upgrade if there's no paid plan

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -156,6 +156,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
   const sumTotalCredits = creditsStore.totalCredits;
 
   const subscriptionStore = useSubscriptionState();
+  const hasPaidPlan = subscriptionStore.hasPaidPlan();
 
   useEffect(() => {
     creditsStore.fetchFromServer();
@@ -372,14 +373,16 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                 )}
               </PopoverMenu>
 
-              <Button
-                variant="primary"
-                icon={faGem}
-                onClick={toggleModal}
-                className="h-[38px] shadow-md shadow-primary-500/50 transition-all duration-300 hover:shadow-md hover:shadow-primary-500/75"
-              >
-                Upgrade
-              </Button>
+              {!hasPaidPlan && (
+                <Button
+                  variant="primary"
+                  icon={faGem}
+                  onClick={toggleModal}
+                  className="h-[38px] shadow-md shadow-primary-500/50 transition-all duration-300 hover:shadow-md hover:shadow-primary-500/75"
+                >
+                  Upgrade
+                </Button>
+              )}
 
               <Tooltip content="Settings" position="bottom" delay={300}>
                 <Button

frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx

@@ -28,7 +28,7 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
     SUBSCRIPTION_PLANS_BY_SLUG.get(maybePlanSlug) || FREE_PLAN : 
     FREE_PLAN;
   
-  const isPaidPlan = currentPlan.slug !== "free";
+  const isPaidPlan = currentPlan.isPaidPlan;
 
   useEffect(() => {
     creditsStore.fetchFromServer();

frontend/libs/state/subscription/src/lib/subscription-plan-details.ts

@@ -8,6 +8,7 @@ export interface SubscriptionPlanDetails {
   slug: string;
   name: string;
 
+  isPaidPlan: boolean;
   monthlyPrice: number;
   yearlyPrice: number;
 

frontend/libs/state/subscription/src/lib/subscription-plans.ts

@@ -3,6 +3,7 @@ import { SubscriptionPlanDetails } from "./subscription-plan-details.js";
 export const FREE_PLAN : SubscriptionPlanDetails = {
   slug: "free",
   name: "Free",
+  isPaidPlan: false,
   monthlyPrice: 0,
   yearlyPrice: 0,
   features: [
@@ -17,6 +18,7 @@ export const SUBSCRIPTION_PLANS : SubscriptionPlanDetails[] = [
   {
     slug: "artcraft_basic",
     name: "Basic",
+    isPaidPlan: true,
     monthlyPrice: 8,
     yearlyPrice: 96,
     originalMonthlyPrice: 10,
@@ -33,6 +35,7 @@ export const SUBSCRIPTION_PLANS : SubscriptionPlanDetails[] = [
   {
     slug: "artcraft_pro",
     name: "Pro",
+    isPaidPlan: true,
     monthlyPrice: 28,
     yearlyPrice: 336,
     originalMonthlyPrice: 35,
@@ -49,6 +52,7 @@ export const SUBSCRIPTION_PLANS : SubscriptionPlanDetails[] = [
   {
     slug: "artcraft_max",
     name: "Max",
+    isPaidPlan: true,
     monthlyPrice: 48,
     yearlyPrice: 576,
     originalMonthlyPrice: 60,

frontend/libs/state/subscription/src/lib/subscription-state.ts

@@ -5,6 +5,10 @@ interface SubscriptionState {
   /// If the user doesn't have a subscription, this will be undefined.
   subscriptionInfo?: SubscriptionInfo,
 
+  // Returns true if the user has a paid plan.
+  // (We do not store "free" as a plan.)
+  hasPaidPlan: () => boolean;
+
   // Call to fetch credits from the server
   fetchFromServer: () => Promise<void>
 }
@@ -21,9 +25,13 @@ interface SubscriptionInfo {
   namespace: string,
 }
 
-export const useSubscriptionState = create<SubscriptionState>()((set) => ({
+export const useSubscriptionState = create<SubscriptionState>()((set, get) => ({
   subscriptionInfo: undefined,
 
+  // Returns true if the user has a paid plan.
+  // (We do not store "free" as a plan.)
+  hasPaidPlan: () => get().subscriptionInfo?.subscriptionToken !== undefined,
+
   // Call to fetch credits from the server
   fetchFromServer: async () => {
     const data = await ArtcraftGetSubscription();