From ffad39e6b74f03112e549881be0a1140d0a7bc79 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sun, 14 Sep 2025 20:26:22 -0400
Subject: [PATCH] add subscription info

---
 .../src/lib/panes/BillingSettingsPane.tsx     | 38 +++-------
 frontend/libs/state/subscription/src/index.ts |  2 +
 .../src/lib/subscription-plan-details.ts      | 23 +++++++
 .../src/lib/subscription-plans.ts             | 69 +++++++++++++++++++
 4 files changed, 104 insertions(+), 28 deletions(-)
 create mode 100644 frontend/libs/state/subscription/src/lib/subscription-plan-details.ts
 create mode 100644 frontend/libs/state/subscription/src/lib/subscription-plans.ts

diff --git a/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
index 9b8a22c4b3..a7bbfc0b22 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
@@ -10,43 +10,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePricingModalStore } from "@storyteller/ui-pricing-modal";
 import { useCreditsModalStore } from "@storyteller/ui-pricing-modal";
 import { useCreditsState } from "@storyteller/credits";
-import { useSubscriptionState } from "@storyteller/subscription";
+import { FREE_PLAN, SubscriptionPlanDetails, useSubscriptionState } from "@storyteller/subscription";
+import { SUBSCRIPTION_PLANS_BY_SLUG } from "@storyteller/subscription";
 
 interface BillingSettingsPaneProps {}
 
-interface BillingInfo {
-  credits: {
-    remaining: number;
-    total: number;
-  };
-  plan: string;
-  nextPayment: {
-    amount: string;
-    date: string;
-  };
-}
-
 export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
-  const [billingInfo] = useState<BillingInfo>({
-    credits: {
-      remaining: 180,
-      total: 1000,
-    },
-    plan: "Pro Plan",
-    nextPayment: {
-      amount: "$99",
-      date: "Oct 18",
-    },
-  });
 
   const creditsStore = useCreditsState();
   const sumTotalCredits = creditsStore.totalCredits;
 
   const subscriptionStore = useSubscriptionState();
 
-  // TODO: Clean this up
-  const maybePlanName = subscriptionStore.subscriptionInfo?.productSlug;
-  const planName = maybePlanName || "Free Plan";
+  const maybePlanSlug = subscriptionStore.subscriptionInfo?.productSlug;
+
+  const currentPlan : SubscriptionPlanDetails = maybePlanSlug ? 
+    SUBSCRIPTION_PLANS_BY_SLUG.get(maybePlanSlug) || FREE_PLAN : 
+    FREE_PLAN;
+  
+  const isPaidPlan = currentPlan.slug !== "free";
 
   useEffect(() => {
     creditsStore.fetchFromServer();
@@ -67,7 +49,7 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
                 icon={faStar}
                 className="text-[#C03FFF] text-lg"
               />
-              {planName}
+              {currentPlan.name}
             </div>
             <div className="flex gap-2">
               <Button variant="secondary" className="h-[30px]">
diff --git a/frontend/libs/state/subscription/src/index.ts b/frontend/libs/state/subscription/src/index.ts
index bb4c8e2481..e557558cab 100644
--- a/frontend/libs/state/subscription/src/index.ts
+++ b/frontend/libs/state/subscription/src/index.ts
@@ -1,2 +1,4 @@
+export * from './lib/subscription-plan-details.js';
+export * from './lib/subscription-plans.js';
 export * from './lib/subscription-state.js';
 
diff --git a/frontend/libs/state/subscription/src/lib/subscription-plan-details.ts b/frontend/libs/state/subscription/src/lib/subscription-plan-details.ts
new file mode 100644
index 0000000000..8c6c65b637
--- /dev/null
+++ b/frontend/libs/state/subscription/src/lib/subscription-plan-details.ts
@@ -0,0 +1,23 @@
+export interface PricingFeature {
+  text: string;
+  included: boolean;
+  tooltip?: string;
+}
+
+export interface SubscriptionPlanDetails {
+  slug: string;
+  name: string;
+
+  monthlyPrice: number;
+  yearlyPrice: number;
+
+  originalMonthlyPrice?: number;
+  originalYearlyPrice?: number;
+
+  //monthlyPriceId?: string;
+  //yearlyPriceId?: string;
+
+  features: PricingFeature[];
+  isPopular?: boolean;
+  colorScheme: "dark" | "green" | "purple" | "orange";
+}
diff --git a/frontend/libs/state/subscription/src/lib/subscription-plans.ts b/frontend/libs/state/subscription/src/lib/subscription-plans.ts
new file mode 100644
index 0000000000..9de7588923
--- /dev/null
+++ b/frontend/libs/state/subscription/src/lib/subscription-plans.ts
@@ -0,0 +1,69 @@
+import { SubscriptionPlanDetails } from "./subscription-plan-details.js";
+
+export const FREE_PLAN : SubscriptionPlanDetails = {
+  slug: "free",
+  name: "Free",
+  monthlyPrice: 0,
+  yearlyPrice: 0,
+  features: [
+    { text: "Free daily generations", included: true },
+    { text: "Limited access to ArtCraft tools", included: true },
+  ],
+  colorScheme: "dark" as const,
+};
+
+export const SUBSCRIPTION_PLANS : SubscriptionPlanDetails[] = [
+  FREE_PLAN,
+  {
+    slug: "artcraft_basic",
+    name: "Basic",
+    monthlyPrice: 8,
+    yearlyPrice: 96,
+    originalMonthlyPrice: 10,
+    originalYearlyPrice: 120,
+    features: [
+      { text: "~1,010 Flux images", included: true },
+      { text: "~36,000 real-time images", included: true },
+      { text: "~180 enhanced images", included: true },
+      { text: "~6 training jobs", included: true },
+      { text: "Commercial license", included: true },
+    ],
+    colorScheme: "green" as const,
+  },
+  {
+    slug: "artcraft_pro",
+    name: "Pro",
+    monthlyPrice: 28,
+    yearlyPrice: 336,
+    originalMonthlyPrice: 35,
+    originalYearlyPrice: 420,
+    features: [
+      { text: "~5,048 Flux images", included: true },
+      { text: "~180,000 real-time images", included: true },
+      { text: "~900 enhanced images", included: true },
+      { text: "~30 training jobs", included: true },
+      { text: "Commercial license", included: true },
+    ],
+    colorScheme: "purple" as const,
+  },
+  {
+    slug: "artcraft_max",
+    name: "Max",
+    monthlyPrice: 48,
+    yearlyPrice: 576,
+    originalMonthlyPrice: 60,
+    originalYearlyPrice: 720,
+    features: [
+      { text: "~15,142 Flux images", included: true },
+      { text: "~540,000 real-time images", included: true },
+      { text: "~2,700 enhanced images", included: true },
+      { text: "~90 training jobs", included: true },
+      { text: "Commercial license", included: true },
+    ],
+    colorScheme: "orange" as const,
+  },
+]
+
+export const SUBSCRIPTION_PLANS_BY_SLUG : Map<string, SubscriptionPlanDetails> = new Map(
+  SUBSCRIPTION_PLANS.map((plan) => [plan.slug, plan])
+);