now it works - it was reverting the pricing modal:

frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import {
   faGear,
   faImages,
@@ -18,6 +18,7 @@ import {
 } from "@fortawesome/pro-regular-svg-icons";
 import { Button } from "@storyteller/ui-button";
 import { PopoverMenu } from "@storyteller/ui-popover";
+import { AuthButtons } from "./AuthButtons";
 import { SceneTitleInput } from "./SceneTitleInput";
 import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
 import {
@@ -57,10 +58,6 @@ import {
   usePricingModalStore,
   useCreditsModalStore,
 } from "@storyteller/ui-pricing-modal";
-import { useCreditsBalanceChangedEvent } from "@storyteller/tauri-events"
-import { useSubscriptionPlanChangedEvent } from "@storyteller/tauri-events"
-import { useCreditsState } from "@storyteller/credits"
-import { useSubscriptionState } from "@storyteller/subscription"
 
 interface Props {
   pageName: string;
@@ -153,25 +150,6 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
   const [disableSwitcher, setDisableSwitcher] = useState(false);
   const switcherThrottle = useRef(false);
 
-  const creditsStore = useCreditsState();
-  const sumTotalCredits = creditsStore.totalCredits;
-
-  const subscriptionStore = useSubscriptionState();
-  const hasPaidPlan = subscriptionStore.hasPaidPlan();
-
-  useEffect(() => {
-    creditsStore.fetchFromServer();
-    subscriptionStore.fetchFromServer();
-  }, []);
-
-  useCreditsBalanceChangedEvent(async () => {
-    creditsStore.fetchFromServer();
-  });
-
-  useSubscriptionPlanChangedEvent(async () => {
-    subscriptionStore.fetchFromServer();
-  });
-
   const disableTabSwitcher = () => {
     return (
       disableSwitcher ||
@@ -240,7 +218,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
 
   const pageTitle = getPageTitle();
 
-  const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
+  const { toggleModal } = usePricingModalStore();
   const { toggleModal: toggleCreditsModal } = useCreditsModalStore();
 
   return (
@@ -322,7 +300,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                 }
                 triggerLabel={
                   <span className="whitespace-nowrap text-sm font-medium">
-                    {sumTotalCredits} Credits
+                    180 Credits
                   </span>
                 }
                 buttonClassName="h-[30px] px-2 ps-1.5 bg-transparent hover:bg-white/10"
@@ -349,7 +327,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                         icon={faCoinFront}
                         className="text-2xl text-primary"
                       />
-                      {sumTotalCredits}
+                      180
                     </div>
                     <div className="mt-3 flex gap-2">
                       <Button
@@ -367,7 +345,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                         className="h-9 grow"
                         onClick={() => {
                           close();
-                          toggleSubscriptionModal();
+                          toggleModal();
                         }}
                         icon={faGem}
                       >
@@ -378,16 +356,14 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
                 )}
               </PopoverMenu>
 
-              {!hasPaidPlan && (
-                <Button
-                  variant="primary"
-                  icon={faGem}
-                  onClick={toggleSubscriptionModal}
-                  className="h-[38px] shadow-md shadow-primary-500/50 transition-all duration-300 hover:shadow-md hover:shadow-primary-500/75"
-                >
-                  Upgrade
-                </Button>
-              )}
+              <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
@@ -415,11 +391,9 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
 
               <Activity />
             </div>
-
             <div className="no-drag">
-              {/* TODO(bt,2025-09-12): This was the old auth buttons that didn't work. We need to remove this and clean up the DOM. */}
+              <AuthButtons loginSignUpPressed={loginSignUpPressed} />
             </div>
-
             {isDesktop && platform !== "macos" && (
               <div className="no-drag flex items-center">
                 <Button

frontend/apps/editor3d/tsconfig.json

@@ -52,9 +52,6 @@
     {
       "path": "../../libs/components/button-dropdown"
     },
-    {
-      "path": "../../libs/components/pricing-modal"
-    },
     {
       "path": "../../libs/components/toaster"
     },
@@ -64,6 +61,9 @@
     {
       "path": "../../libs/soundboard"
     },
+    {
+      "path": "../../libs/tauri-events"
+    },
     {
       "path": "../../libs/components/slider-v2"
     },
@@ -85,17 +85,17 @@
     {
       "path": "../../libs/model-list"
     },
-    {
-      "path": "../../libs/components/popover"
-    },
     {
       "path": "../../libs/common"
     },
     {
-      "path": "../../libs/state/credits"
+      "path": "../../libs/components/pricing-modal"
     },
     {
-      "path": "../../libs/state/subscription"
+      "path": "../../libs/components/provider-billing-modal"
+    },
+    {
+      "path": "../../libs/components/provider-setup-modal"
     },
     {
       "path": "../../libs/analytics/google-analytics"
@@ -109,6 +109,9 @@
     {
       "path": "../../libs/components/settings-modal"
     },
+    {
+      "path": "../../libs/components/popover"
+    },
     {
       "path": "../../libs/components/gravatar"
     },
@@ -121,12 +124,6 @@
     {
       "path": "../../libs/components/upload-modal"
     },
-    {
-      "path": "../../libs/components/provider-setup-modal"
-    },
-    {
-      "path": "../../libs/components/provider-billing-modal"
-    },
     {
       "path": "../../libs/components/modal"
     },
@@ -148,9 +145,6 @@
     {
       "path": "../../libs/tauri-utils"
     },
-    {
-      "path": "../../libs/tauri-events"
-    },
     {
       "path": "../../libs/api"
     }

frontend/libs/components/pricing-modal/package.json

@@ -13,8 +13,5 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
-  },
-  "dependencies": {
-    "@tauri-apps/api": "^2.4.0"
   }
 }

frontend/libs/components/pricing-modal/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./lib/pricing-modal";
+export * from "./lib/pricing-config";
 export * from "./lib/pricing-modal-store";
 export * from "./lib/credits-modal";
 export * from "./lib/credits-modal-store";

frontend/libs/components/pricing-modal/src/lib/pricing-config.ts

@@ -0,0 +1,95 @@
+export interface PricingFeature {
+  text: string;
+  included: boolean;
+  tooltip?: string;
+}
+
+export interface PricingTier {
+  id: string;
+  name: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  originalMonthlyPrice?: number;
+  originalYearlyPrice?: number;
+  monthlyPriceId?: string;
+  yearlyPriceId?: string;
+  features: PricingFeature[];
+  isPopular?: boolean;
+  colorScheme: "dark" | "green" | "purple" | "orange";
+}
+
+export const pricingConfig = {
+  header: {
+    title: "Purchase a subscription",
+    subtitle:
+      "Upgrade to gain access to Pro features and generate more, faster.",
+  },
+  yearlyDiscount: 20,
+  tiers: [
+    {
+      id: "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,
+    },
+    {
+      id: "plus",
+      name: "Plus",
+      monthlyPrice: 8,
+      yearlyPrice: 96,
+      originalMonthlyPrice: 10,
+      originalYearlyPrice: 120,
+      monthlyPriceId: "price_1234567890abcdef", //dummy
+      yearlyPriceId: "price_abcdef1234567890", //dummy
+      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,
+    },
+    {
+      id: "pro",
+      name: "Pro",
+      monthlyPrice: 28,
+      yearlyPrice: 336,
+      originalMonthlyPrice: 35,
+      originalYearlyPrice: 420,
+      monthlyPriceId: "price_fedcba0987654321", //dummy
+      yearlyPriceId: "price_123456789fedcba0", //dummy
+      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,
+    },
+    {
+      id: "max",
+      name: "Max",
+      monthlyPrice: 48,
+      yearlyPrice: 576,
+      originalMonthlyPrice: 60,
+      originalYearlyPrice: 720,
+      monthlyPriceId: "price_9876543210fedcba", //dummy
+      yearlyPriceId: "price_abcdef9876543210", //dummy
+      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,
+    },
+  ] as PricingTier[],
+};

frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx

@@ -2,92 +2,67 @@ import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
+import { pricingConfig, PricingTier } from "./pricing-config";
 import { usePricingModalStore } from "./pricing-modal-store";
 import { TabSelector } from "@storyteller/ui-tab-selector";
-import { invoke } from "@tauri-apps/api/core";
-import { SUBSCRIPTION_PLANS, SubscriptionPlanDetails } from "@storyteller/subscription";
-import { useSubscriptionState } from "@storyteller/subscription";
 
 const billingTabs = [
   { id: "yearly", label: "Yearly" },
   { id: "monthly", label: "Monthly" },
 ];
 
-const pricingConfig = {
-  header: {
-    title: "Purchase a subscription",
-    subtitle:
-      "Upgrade to gain access to Pro features and generate more, faster.",
-  },
-  yearlyDiscount: 20,
-}
-
 interface PricingModalProps {
+  currentPlanId?: string;
+  hasActiveSubscription?: boolean;
 }
 
-export function PricingModal({}: PricingModalProps = {}) {
-  const { isOpen, closeModal } = usePricingModalStore();
-
-  const subscriptionStore = useSubscriptionState();
-
-  const hasActiveSub = subscriptionStore.hasPaidPlan();
-
-  const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
+export function PricingModal({
+  currentPlanId,
+  hasActiveSubscription,
+}: PricingModalProps = {}) {
+  const { isOpen, closeModal, subscription } = usePricingModalStore();
 
+  // Use props if provided or fall back to store
+  const activePlanId = currentPlanId ?? subscription.currentPlanId;
+  const hasActiveSub =
+    hasActiveSubscription ?? subscription.hasActiveSubscription;
   const [billingType, setBillingType] = useState("yearly");
   const isYearly = billingType === "yearly";
 
-  const handleUnsubscribe = async () => {
-    await invoke("storyteller_open_customer_portal_cancel_plan_command");
-  }
+  const handleUpgrade = async (tierId: string) => {
+    // TODO: Implement Stripe checkout
+    const tier = pricingConfig.tiers.find((t) => t.id === tierId);
+    const priceId = isYearly ? tier?.yearlyPriceId : tier?.monthlyPriceId;
 
-  const handleManageSubscription = async () => {
-    await invoke("storyteller_open_customer_portal_manage_plan_command");
+    console.log(
+      `Upgrading to ${tierId} plan with ${
+        isYearly ? "yearly" : "monthly"
+      } billing`,
+      { priceId, tierId }
+    );
+
+    // Example Stripe checkout implementation:
+    // await stripe.redirectToCheckout({
+    //   lineItems: [{ price: priceId, quantity: 1 }],
+    //   mode: 'subscription',
+    //   successUrl: `${window.location.origin}/success`,
+    //   cancelUrl: `${window.location.origin}/cancel`,
+    // });
   };
 
-  const handleUpdatePaymentMethod = async () => {
-    await invoke("storyteller_open_customer_portal_update_payment_method_command");
+  const handleManageSubscription = () => {
+    // TODO: Redirect to Stripe customer portal
+    console.log("Managing subscription");
   };
 
-  const handleSetPlan = async (tierSlug: string) => {
-    const tier = SUBSCRIPTION_PLANS.find((t) => t.slug === tierSlug);
-    const planSlug = tier?.slug;
-    const cadence = isYearly? "yearly" : "monthly";
-
-    if (planSlug === "free") {
-      if (hasActiveSub) {
-        await handleUnsubscribe();
-        return;
-      } else {
-        return;
-      }
-    }
-
-    if (hasActiveSub) {
-      await invoke("storyteller_open_customer_portal_switch_plan_command", {
-        request: {
-          plan: planSlug,
-          cadence: cadence,
-        }
-      });
-    } else {
-      await invoke("storyteller_open_subscription_purchase_command", {
-        request: {
-          plan: planSlug,
-          cadence: cadence,
-        }
-      });
-    }
-  };
-
-  const tierHierarchy = { free: 0, artcraft_basic: 1, artcraft_pro: 2, artcraft_max: 3 };
+  const tierHierarchy = { free: 0, basic: 1, pro: 2, max: 3 };
 
   const isCurrentPlan = (tierId: string) => {
     return tierId === activePlanId;
   };
 
-  const getButtonText = (tier: SubscriptionPlanDetails) => {
-    if (isCurrentPlan(tier.slug)) {
+  const getButtonText = (tier: PricingTier) => {
+    if (isCurrentPlan(tier.id)) {
       return "Current Plan";
     }
 
@@ -95,12 +70,9 @@ export function PricingModal({}: PricingModalProps = {}) {
       const currentTierLevel =
         tierHierarchy[activePlanId as keyof typeof tierHierarchy];
       const thisTierLevel =
-        tierHierarchy[tier.slug as keyof typeof tierHierarchy];
+        tierHierarchy[tier.id as keyof typeof tierHierarchy];
 
       if (thisTierLevel < currentTierLevel) {
-        if (tier.slug === "free") {
-          return "Cancel Plan";
-        }
         return "Switch Plan";
       }
     }
@@ -109,7 +81,7 @@ export function PricingModal({}: PricingModalProps = {}) {
   };
 
   const getColorSchemeClasses = (
-    colorScheme: SubscriptionPlanDetails["colorScheme"],
+    colorScheme: PricingTier["colorScheme"],
     isCurrent: boolean
   ) => {
     const baseClasses =
@@ -156,8 +128,8 @@ export function PricingModal({}: PricingModalProps = {}) {
     }
   };
 
-  const formatPrice = (plan: SubscriptionPlanDetails) => {
-    if (plan.monthlyPrice === 0) {
+  const formatPrice = (tier: PricingTier) => {
+    if (tier.monthlyPrice === 0) {
       return {
         current: "$0",
         original: null,
@@ -165,9 +137,9 @@ export function PricingModal({}: PricingModalProps = {}) {
     }
 
     if (isYearly) {
-      const discountedMonthlyPrice = Math.round(plan.yearlyPrice / 12);
-      const originalMonthlyPrice = plan.originalYearlyPrice
-        ? Math.round(plan.originalYearlyPrice / 12)
+      const discountedMonthlyPrice = Math.round(tier.yearlyPrice / 12);
+      const originalMonthlyPrice = tier.originalYearlyPrice
+        ? Math.round(tier.originalYearlyPrice / 12)
         : null;
 
       return {
@@ -175,7 +147,7 @@ export function PricingModal({}: PricingModalProps = {}) {
         original: originalMonthlyPrice ? `$${originalMonthlyPrice}` : null,
       };
     } else {
-      const monthlyPrice = plan.originalMonthlyPrice || plan.monthlyPrice;
+      const monthlyPrice = tier.originalMonthlyPrice || tier.monthlyPrice;
 
       return {
         current: `$${monthlyPrice}`,
@@ -224,19 +196,19 @@ export function PricingModal({}: PricingModalProps = {}) {
 
         {/* Pricing Tiers */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
-          {SUBSCRIPTION_PLANS.map((plan) => {
-            const pricing = formatPrice(plan);
+          {pricingConfig.tiers.map((tier) => {
+            const pricing = formatPrice(tier);
 
             return (
               <div
-                key={plan.slug}
+                key={tier.id}
                 className={getColorSchemeClasses(
-                  plan.colorScheme,
-                  isCurrentPlan(plan.slug)
+                  tier.colorScheme,
+                  isCurrentPlan(tier.id)
                 )}
               >
                 {/* Current Plan Badge */}
-                {isCurrentPlan(plan.slug) && (
+                {isCurrentPlan(tier.id) && (
                   <div className="absolute -top-4 right-5 bg-white text-black px-3 py-1 rounded-full text-md font-semibold shadow-xl">
                     Active
                   </div>
@@ -245,7 +217,7 @@ export function PricingModal({}: PricingModalProps = {}) {
                 {/* Tier Header */}
                 <div className="text-center mb-8">
                   <h3 className="text-4xl font-bold text-white mb-4">
-                    {plan.name}
+                    {tier.name}
                   </h3>
                   <div className="flex items-baseline justify-center gap-2">
                     {pricing.original && (
@@ -266,7 +238,7 @@ export function PricingModal({}: PricingModalProps = {}) {
 
                 {/* Features */}
                 <div className="flex-1 space-y-3 mb-6">
-                  {plan.features.map((feature, index) => (
+                  {tier.features.map((feature, index) => (
                     <div key={index} className="flex items-start gap-3">
                       <div
                         className={twMerge(
@@ -304,11 +276,11 @@ export function PricingModal({}: PricingModalProps = {}) {
 
                 {/* CTA Button */}
                 <Button
-                  onClick={() => handleSetPlan(plan.slug)}
-                  disabled={isCurrentPlan(plan.slug)}
+                  onClick={() => handleUpgrade(tier.id)}
+                  disabled={isCurrentPlan(tier.id)}
                   className="w-full bg-white text-black hover:bg-white/90 h-12 rounded-xl"
                 >
-                  {getButtonText(plan)}
+                  {getButtonText(tier)}
                 </Button>
               </div>
             );
@@ -318,15 +290,9 @@ export function PricingModal({}: PricingModalProps = {}) {
         {/* Manage Subscription Button - only show if user has a paid plan */}
         {hasActiveSub && activePlanId !== "free" && (
           <div className="flex justify-center mt-8">
-            <Button
-              onClick={handleUpdatePaymentMethod}
-              className="bg-transparent border border-white/25 text-white hover:bg-white/10 px-8 py-3 mx-3 rounded-xl"
-            >
-              Update your payment method
-            </Button>
             <Button
               onClick={handleManageSubscription}
-              className="bg-transparent border border-white/25 text-white hover:bg-white/10 px-8 py-3 mx-3 rounded-xl"
+              className="bg-transparent border border-white/25 text-white hover:bg-white/10 px-8 py-3 rounded-xl"
             >
               Manage your subscription
             </Button>

frontend/libs/components/pricing-modal/tsconfig.json

@@ -2,9 +2,6 @@
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "../../tauri-api"
-    },
     {
       "path": "../tab-selector"
     },

frontend/libs/components/pricing-modal/tsconfig.lib.json

@@ -43,9 +43,6 @@
     "src/**/*.tsx"
   ],
   "references": [
-    {
-      "path": "../../tauri-api/tsconfig.lib.json"
-    },
     {
       "path": "../tab-selector/tsconfig.lib.json"
     },

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "@storyteller/ui-button";
 import { Label } from "@storyteller/ui-label";
 import {
@@ -9,39 +9,46 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { usePricingModalStore } from "@storyteller/ui-pricing-modal";
 import { useCreditsModalStore } from "@storyteller/ui-pricing-modal";
-import { useCreditsState, CreditsState } from "@storyteller/credits";
-import { FREE_PLAN, SubscriptionPlanDetails, useSubscriptionState } from "@storyteller/subscription";
-import { SUBSCRIPTION_PLANS_BY_SLUG } from "@storyteller/subscription";
-import { invoke } from "@tauri-apps/api/core";
 
 interface BillingSettingsPaneProps {}
 
+interface BillingInfo {
+  credits: {
+    remaining: number;
+    total: number;
+  };
+  plan: string;
+  nextPayment: {
+    amount: string;
+    date: string;
+  };
+}
+
 export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
-  const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
-
-  const creditsStore = useCreditsState();
-  const sumTotalCredits = creditsStore.totalCredits;
-
-  const subscriptionStore = useSubscriptionState();
-
-  const maybePlanSlug = subscriptionStore.subscriptionInfo?.productSlug;
-
-  const currentPlanDetails : SubscriptionPlanDetails = maybePlanSlug ? 
-    SUBSCRIPTION_PLANS_BY_SLUG.get(maybePlanSlug) || FREE_PLAN : 
-    FREE_PLAN;
-
-  const canCancelPlan = subscriptionStore.canCancelPlan();
-
-  const nextBillAt = subscriptionStore.subscriptionInfo?.nextBillAt?.toLocaleDateString();
-  const subscriptionEndAt = subscriptionStore.subscriptionInfo?.subscriptionEndAt?.toLocaleDateString();
-
-  const changeOrUpgradePlanButtonLabel = canCancelPlan ? "Change plan" : "Upgrade plan";
+  const [billingInfo] = useState<BillingInfo>({
+    credits: {
+      remaining: 180,
+      total: 1000,
+    },
+    plan: "Pro Plan",
+    nextPayment: {
+      amount: "$99",
+      date: "Oct 18",
+    },
+  });
 
   useEffect(() => {
-    creditsStore.fetchFromServer();
-    subscriptionStore.fetchFromServer();
+    const fetchBillingData = async () => {
+      // TODO: Replace with actual API call - BFlat
+      // const data = await GetBillingInfo();
+      // setBillingInfo(data.payload);
+    };
+    fetchBillingData();
   }, []);
 
+  const { toggleModal } = usePricingModalStore();
+  const { toggleModal: toggleCreditsModal } = useCreditsModalStore();
+
   return (
     <>
       <div className="space-y-4">
@@ -53,48 +60,30 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
                 icon={faStar}
                 className="text-[#C03FFF] text-lg"
               />
-              {currentPlanDetails.name}
+              {billingInfo.plan}
             </div>
             <div className="flex gap-2">
-              {canCancelPlan && (
-                <CancelPlanButton />
-              )}
-
+              <Button variant="secondary" className="h-[30px]">
+                Cancel plan
+              </Button>
               <Button
                 variant="primary"
                 className="h-[30px]"
-                onClick={() => toggleSubscriptionModal()}
+                onClick={() => {
+                  toggleModal();
+                }}
               >
-                {changeOrUpgradePlanButtonLabel}
+                Upgrade plan
               </Button>
-
             </div>
           </div>
         </div>
 
-        {/* TODO(bt): expose this information via API
         <div className="flex items-center gap-2 text-white/50">
           <FontAwesomeIcon icon={faInfoCircle} />
           Next {billingInfo.nextPayment.amount} payment due{" "}
           {billingInfo.nextPayment.date}
         </div>
-        */}
-
-        {subscriptionEndAt && (
-          <div className="flex items-center gap-2 text-white/50">
-            <FontAwesomeIcon icon={faInfoCircle} />
-            Subscription ends on{" "}
-            {subscriptionEndAt}
-          </div>
-        )}
-
-        {nextBillAt && (
-          <div className="flex items-center gap-2 text-white/50">
-            <FontAwesomeIcon icon={faInfoCircle} />
-            Next payment on{" "}
-            {nextBillAt}
-          </div>
-        )}
 
         <hr className="border-white/10" />
 
@@ -109,59 +98,21 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
                 className="text-primary text-lg"
               />
               <span className="text-2xl font-bold">
-                {sumTotalCredits}
+                {billingInfo.credits.remaining}
               </span>
             </div>
             <div className="flex gap-2">
-              <BuyCreditsButton />
+              <Button
+                variant="primary"
+                className="h-[30px]"
+                onClick={() => toggleCreditsModal()}
+              >
+                Buy credits
+              </Button>
             </div>
           </div>
-
-          <CreditsTally creditsStore={creditsStore} />
-
         </div>
       </div>
     </>
   );
 };
-
-const CancelPlanButton = () => {
-  const handleClick = async () => {
-    await invoke("storyteller_open_customer_portal_cancel_plan_command");
-  }
-
-  return (
-    <Button 
-      variant="secondary" 
-      className="h-[30px]"
-      onClick={handleClick}
-    >
-      Cancel plan
-    </Button>
-  )
-}
-
-const BuyCreditsButton = () => {
-  const { toggleModal: toggleCreditsModal } = useCreditsModalStore();
-
-  return (
-    <Button
-      variant="primary"
-      className="h-[30px]"
-      onClick={() => toggleCreditsModal()}
-    >
-      Buy credits
-    </Button>
-  )
-}
-
-const CreditsTally = ({creditsStore}: {creditsStore: CreditsState}) => {
-  return (
-    <div className="flex pl-5 pt-3">
-      <ul className="list-disc">
-        <li> {creditsStore.monthlyCredits} monthly credits (refilled monthly) </li>
-        <li> {creditsStore.bankedCredits} purchased credits </li>
-      </ul>
-    </div>
-  )
-}

frontend/libs/components/settings-modal/tsconfig.json

@@ -8,6 +8,9 @@
     {
       "path": "../modal"
     },
+    {
+      "path": "../../model-list"
+    },
     {
       "path": "../pricing-modal"
     },
@@ -41,12 +44,6 @@
     {
       "path": "../../tauri-api"
     },
-    {
-      "path": "../../state/credits"
-    },
-    {
-      "path": "../../state/subscription"
-    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/components/settings-modal/tsconfig.lib.json

@@ -49,6 +49,9 @@
     {
       "path": "../modal/tsconfig.lib.json"
     },
+    {
+      "path": "../../model-list/tsconfig.lib.json"
+    },
     {
       "path": "../pricing-modal/tsconfig.lib.json"
     },
@@ -81,12 +84,6 @@
     },
     {
       "path": "../../tauri-api/tsconfig.lib.json"
-    },
-    {
-      "path": "../../state/credits/tsconfig.lib.json"
-    },
-    {
-      "path": "../../state/subscription/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/state/credits/tsconfig.json

@@ -5,12 +5,6 @@
     {
       "path": "../../tauri-api"
     },
-    {
-      "path": "../../tauri-utils"
-    },
-    {
-      "path": "../../tauri-events"
-    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/state/credits/tsconfig.lib.json

@@ -45,12 +45,6 @@
   "references": [
     {
       "path": "../../tauri-api/tsconfig.lib.json"
-    },
-    {
-      "path": "../../tauri-utils/tsconfig.lib.json"
-    },
-    {
-      "path": "../../tauri-events/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/state/subscription/tsconfig.json

@@ -6,12 +6,6 @@
     {
       "path": "../../tauri-api"
     },
-    {
-      "path": "../../tauri-utils"
-    },
-    {
-      "path": "../../tauri-events"
-    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/state/subscription/tsconfig.lib.json

@@ -34,12 +34,6 @@
   "references": [
     {
       "path": "../../tauri-api/tsconfig.lib.json"
-    },
-    {
-      "path": "../../tauri-utils/tsconfig.lib.json"
-    },
-    {
-      "path": "../../tauri-events/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/tauri-events/src/index.ts

@@ -1,12 +1,10 @@
 export * from "./lib/common/BasicEventWrapper";
-export * from "./lib/events/functional/CreditsBalanceChangedEvent";
 export * from "./lib/events/functional/ImageEditCompleteEvent";
-export * from "./lib/events/functional/ImageToVideoGenerationCompleteEvent";
 export * from "./lib/events/functional/RefreshAccountStateEvent";
 export * from "./lib/events/functional/ShowProviderBillingModalEvent";
 export * from "./lib/events/functional/ShowProviderLoginModalEvent";
 export * from "./lib/events/functional/TextToImageGenerationCompleteEvent";
-export * from "./lib/events/functional/SubscriptionPlanChangedEvent";
+export * from "./lib/events/functional/ImageToVideoGenerationCompleteEvent";
 export * from "./lib/events/generation/useGenerationCompleteEvent";
 export * from "./lib/events/generation/useGenerationEnqueueFailureEvent";
 export * from "./lib/events/generation/useGenerationEnqueueSuccessEvent";

frontend/tsconfig.json

@@ -163,10 +163,10 @@
       "path": "./libs/components/provider-billing-modal"
     },
     {
-      "path": "./libs/state/credits"
+      "path": "./libs/state/subscription"
     },
     {
-      "path": "./libs/state/subscription"
+      "path": "./libs/state/credits"
     }
   ]
 }