partial patch of frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx

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

@@ -5,12 +5,23 @@ 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 { useSubscriptionState } from "@storyteller/subscription";
+import { invoke } from "@tauri-apps/api/core";
 
 const billingTabs = [
   { id: "yearly", label: "Yearly" },
   { id: "monthly", label: "Monthly" },
 ];
 
+const pricingConfig2 = {
+  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;
@@ -20,15 +31,38 @@ export function PricingModal({
   currentPlanId,
   hasActiveSubscription,
 }: PricingModalProps = {}) {
-  const { isOpen, closeModal, subscription } = usePricingModalStore();
+
+  const { isOpen, closeModal } = usePricingModalStore();
+
+  //const subscriptionStore = useSubscriptionState();
+  //const hasActiveSub = subscriptionStore.hasPaidPlan();
+  //const activePlanId = subscriptionStore.subscriptionInfo?.productSlug;
+
+  const hasActiveSub = false;
+  const activePlanId = "free";
+
+  //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 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 handleManageSubscription = async () => {
+    await invoke("storyteller_open_customer_portal_manage_plan_command");
+  }
+
+  const handleUpdatePaymentMethod = async () => {
+    await invoke("storyteller_open_customer_portal_update_payment_method_command");
+  }
+
   const handleUpgrade = async (tierId: string) => {
     // TODO: Implement Stripe checkout
     const tier = pricingConfig.tiers.find((t) => t.id === tierId);
@@ -50,10 +84,10 @@ export function PricingModal({
     // });
   };
 
-  const handleManageSubscription = () => {
-    // TODO: Redirect to Stripe customer portal
-    console.log("Managing subscription");
-  };
+  //const handleManageSubscription = () => {
+  //  // TODO: Redirect to Stripe customer portal
+  //  console.log("Managing subscription");
+  //};
 
   const tierHierarchy = { free: 0, basic: 1, pro: 2, max: 3 };
 

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

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

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

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