uncomment

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

@@ -156,13 +156,13 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
   const creditsStore = useCreditsState();
   const sumTotalCredits = creditsStore.totalCredits;
 
-  //const subscriptionStore = useSubscriptionState();
-  //const hasPaidPlan = subscriptionStore.hasPaidPlan();
-  const hasPaidPlan = false;
+  // Just calling this function kills the app:
+  const subscriptionStore = useSubscriptionState();
+  const hasPaidPlan = subscriptionStore.hasPaidPlan();
 
   useEffect(() => {
     creditsStore.fetchFromServer();
-    //subscriptionStore.fetchFromServer();
+    subscriptionStore.fetchFromServer();
   }, []);
 
   useCreditsBalanceChangedEvent(async () => {
@@ -170,7 +170,7 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
   });
 
   useSubscriptionPlanChangedEvent(async () => {
-    //subscriptionStore.fetchFromServer();
+    subscriptionStore.fetchFromServer();
   });
 
   const disableTabSwitcher = () => {

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

@@ -82,14 +82,12 @@ export function CreditsModal({
       return;
     }
 
-
     await invoke("storyteller_open_credits_purchase_command", {
       request: {
         credits_pack: pack.id,
       }
     });
 
-
     // Hook up Stripe/checkout here
     // Example: redirect to checkout with pack.priceId
     // await stripe.redirectToCheckout({ lineItems: [{ price: pack.priceId, quantity: 1 }], mode: 'payment', ... })

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

@@ -30,13 +30,11 @@ interface PricingModalProps {}
 export function PricingModal({}: PricingModalProps = {}) {
   const { isOpen, closeModal } = usePricingModalStore();
 
-  //const subscriptionStore = useSubscriptionState();
+  const subscriptionStore = useSubscriptionState();
 
-  //const hasActiveSub = subscriptionStore.hasPaidPlan();
-  const hasActiveSub = false;
+  const hasActiveSub = subscriptionStore.hasPaidPlan();
 
-  //const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
-  const activePlanId = "free";
+  const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
 
   const [billingType, setBillingType] = useState("yearly");
   const isYearly = billingType === "yearly";

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

@@ -23,36 +23,30 @@ interface BillingSettingsPaneProps {}
 export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
   const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
 
-  //const creditsStore = useCreditsState();
-  //const sumTotalCredits = creditsStore.totalCredits;
-  const sumTotalCredits = 100;
+  const creditsStore = useCreditsState();
 
-  //const subscriptionStore = useSubscriptionState();
+  const sumTotalCredits = creditsStore.totalCredits;
 
-  //const maybePlanSlug = subscriptionStore.subscriptionInfo?.productSlug;
-  const maybePlanSlug = "free";
+  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 canCancelPlan = false;
+  const canCancelPlan = subscriptionStore.canCancelPlan();
 
-  //const nextBillAt =
-  //  subscriptionStore.subscriptionInfo?.nextBillAt?.toLocaleDateString();
-  const nextBillAt = "";
-  //const subscriptionEndAt =
-  //  subscriptionStore.subscriptionInfo?.subscriptionEndAt?.toLocaleDateString();
-  const subscriptionEndAt = "";
+  const nextBillAt = subscriptionStore.subscriptionInfo?.nextBillAt?.toLocaleDateString();
+  const subscriptionEndAt = subscriptionStore.subscriptionInfo?.subscriptionEndAt?.toLocaleDateString();
 
   const changeOrUpgradePlanButtonLabel = canCancelPlan
     ? "Change plan"
     : "Upgrade plan";
 
   useEffect(() => {
-    //creditsStore.fetchFromServer();
-    //subscriptionStore.fetchFromServer();
+    creditsStore.fetchFromServer();
+    subscriptionStore.fetchFromServer();
   }, []);
 
   return (
@@ -123,7 +117,7 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
             </div>
           </div>
 
-          {/*<CreditsTally creditsStore={creditsStore} />*/}
+          <CreditsTally creditsStore={creditsStore} />
         </div>
       </div>
     </>

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

@@ -13,12 +13,14 @@ export interface CreditsState {
 
   // Total credits available
   totalCredits: number,
+}
 
+export type CreditsActions = {
   // Call to fetch credits from the server
   fetchFromServer: () => Promise<void>
 }
 
-export const useCreditsState = create<CreditsState>()((set) => ({
+export const useCreditsState = create<CreditsState & CreditsActions>((set) => ({
   freeCredits: 0,
   monthlyCredits: 0,
   bankedCredits: 0,
@@ -33,6 +35,7 @@ export const useCreditsState = create<CreditsState>()((set) => ({
       console.error("Error fetching credits", error);
       return;
     }
+    console.log("Fetched credits from server: ", data);
     if (!!data.payload) {
       set((state) => ({
         freeCredits: data.payload.free_credits,

frontend/libs/state/subscription/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@storyteller/subscription",
   "version": "0.0.1",
-  "private": true,
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

frontend/libs/state/subscription/src/index.ts

@@ -1,4 +1,4 @@
-export * from './lib/subscription-plan-details.js';
-export * from './lib/subscription-plans.js';
-export * from './lib/subscription-state.js';
+export * from './lib/subscription-plan-details';
+export * from './lib/subscription-plans';
+export * from './lib/subscription-state';
 

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

@@ -4,17 +4,6 @@ import { ArtcraftGetSubscription } from "@storyteller/tauri-api";
 export 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;
-
-  // Returns true if the user can cancel their plan.
-  // (The user can't cancel an already set to cancel/expire plan again)
-  canCancelPlan: () => boolean;
-
-  // Call to fetch credits from the server
-  fetchFromServer: () => Promise<void>
 }
 
 interface SubscriptionInfo {
@@ -35,7 +24,20 @@ interface SubscriptionInfo {
   subscriptionEndAt?: Date,
 }
 
-export const useSubscriptionState = create<SubscriptionState>()((set, get) => ({
+export type SubscriptionActions = {
+  // Returns true if the user has a paid plan.
+  // (We do not store "free" as a plan.)
+  hasPaidPlan: () => boolean;
+
+  // Returns true if the user can cancel their plan.
+  // (The user can't cancel an already set to cancel/expire plan again)
+  canCancelPlan: () => boolean;
+
+  // Call to fetch credits from the server
+  fetchFromServer: () => Promise<void>
+};
+
+export const useSubscriptionState = create<SubscriptionState & SubscriptionActions>((set, get) => ({
   subscriptionInfo: undefined,
 
   // Returns true if the user has a paid plan.
@@ -59,6 +61,7 @@ export const useSubscriptionState = create<SubscriptionState>()((set, get) => ({
       console.error("Error fetching subscription", error);
       return;
     }
+    console.log("Fetched subscription from server: ", data);
     if (!!data.payload) {
       let activeSubscription = undefined;
       if (!!data.payload.active_subscription) {

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

@@ -1,19 +1,28 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/vitest",
+    "outDir": "dist",
     "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
       "node",
-      "vitest"
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
     ],
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "forceConsistentCasingInFileNames": true
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
   },
-  "include": [
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
     "vite.config.ts",
     "vite.config.mts",
     "vitest.config.ts",
@@ -25,12 +34,17 @@
     "src/**/*.test.js",
     "src/**/*.spec.js",
     "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "../../tauri-api/tsconfig.lib.json"
     }
   ]
 }

frontend/libs/state/subscription/vite.config.ts

@@ -1,12 +1,13 @@
 /// <reference types='vitest' />
 import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
 
 export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../../node_modules/.vite/libs/state/subscription',
-  plugins: [dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
@@ -31,7 +32,7 @@ export default defineConfig(() => ({
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: []
+      external: ['react','react-dom','react/jsx-runtime']
     },
   },
   test: {