add price fetching in FE & fix linting etc in backend changes

Author: emma-sg

backend/btrixcloud/subs.py

@@ -382,6 +382,7 @@ async def get_billing_portal_url(
         return SubscriptionPortalUrlResponse()
 
     async def get_execution_minutes_price(self, org: Organization):
+        """Fetch price for addon execution minutes from external subscription app"""
         if not org.subscription:
             raise HTTPException(
                 status_code=404, detail="Organization has no subscription"
@@ -399,10 +400,12 @@ async def get_execution_minutes_price(self, org: Organization):
                     ) as resp:
                         text = await resp.text()
                         return AddonMinutesPricing.model_validate_json(text)
+            # pylint: disable=broad-exception-caught
             except Exception as exc:
                 print("Error fetching checkout url", exc)
 
     async def get_checkout_url(self, org: Organization, minutes: int | None):
+        """Create checkout url for additional minutes"""
         if not org.subscription:
             raise HTTPException(
                 status_code=404, detail="Organization has no subscription"
@@ -426,11 +429,12 @@ async def get_checkout_url(self, org: Organization, minutes: int | None):
                     ) as resp:
                         text = await resp.text()
                         return CheckoutAddonMinutesResponse.model_validate_json(text)
+            # pylint: disable=broad-exception-caught
             except Exception as exc:
                 print("Error fetching checkout url", exc)
 
 
-# pylint: disable=invalid-name,too-many-arguments
+# pylint: disable=invalid-name,too-many-arguments,too-many-locals
 def init_subs_api(
     app,
     mdb,
@@ -555,7 +559,7 @@ async def get_billing_portal_url(
     @org_ops.router.get(
         "/price/execution-minutes",
         tags=["organizations"],
-        response_model=PriceResponse,
+        response_model=AddonMinutesPricing,
     )
     async def get_execution_minutes_price(
         org: Organization = Depends(org_ops.org_owner_dep),
@@ -567,7 +571,7 @@ async def get_execution_minutes_price(
         tags=["organizations"],
         response_model=CheckoutAddonMinutesResponse,
     )
-    async def get_billing_portal_url(
+    async def get_execution_minutes_checkout_url(
         minutes: int | None = None,
         org: Organization = Depends(org_ops.org_owner_dep),
     ):

frontend/src/pages/org/settings/components/billing-addon-link.ts

@@ -9,15 +9,37 @@ import { type BillingAddonCheckout } from "@/types/billing";
 import appState from "@/utils/state";
 
 const PRESET_MINUTES = [600, 1500, 3000];
-const PRICE_PER_MINUTE: { value: number; currency: string } | undefined =
-  undefined;
+
+type Price = {
+  value: number;
+  currency: string;
+};
 
 @customElement("btrix-org-settings-billing-addon-link")
 @localized()
 export class OrgSettingsBillingAddonLink extends BtrixElement {
+  static _price: Price | undefined;
+
   @state()
   private lastClickedMinutesPreset: number | undefined = undefined;
 
+  private readonly price = new Task(this, {
+    task: async () => {
+      if (OrgSettingsBillingAddonLink._price)
+        return OrgSettingsBillingAddonLink._price;
+      try {
+        const price = await this.api.fetch<Price>(
+          `/orgs/${this.orgId}/prices/execution-minutes`,
+        );
+        OrgSettingsBillingAddonLink._price = price;
+        return price;
+      } catch (error) {
+        console.log("Failed to fetch price", error);
+        return;
+      }
+    },
+  });
+
   private readonly checkoutUrl = new Task(this, {
     task: async ([minutes]) => {
       if (!appState.settings?.billingEnabled || !appState.org?.subscription)
@@ -73,10 +95,10 @@ export class OrgSettingsBillingAddonLink extends BtrixElement {
 
   render() {
     const priceForMinutes = (minutes: number) => {
-      if (!PRICE_PER_MINUTE) return;
-      return this.localize.number(minutes * PRICE_PER_MINUTE.value, {
+      if (!this.price.value) return;
+      return this.localize.number(minutes * this.price.value.value, {
         style: "currency",
-        currency: PRICE_PER_MINUTE.currency,
+        currency: this.price.value.currency,
       });
     };
     const price = priceForMinutes(1);