add subscription info

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]">

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';
 

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";
+}

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])
+);