add /subscriptions endpoint

Author: jnsdls

apps/dashboard/src/@/api/team-subscription.ts

@@ -0,0 +1,106 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+// keep in line with product SKUs in the backend
+type ProductSKU =
+  | "plan:starter"
+  | "plan:growth"
+  | "plan:custom"
+  | "product:ecosystem_wallets"
+  | "product:engine_standard"
+  | "product:engine_premium"
+  | "usage:storage"
+  | "usage:in_app_wallet"
+  | "usage:aa_sponsorship"
+  | "usage:aa_sponsorship_op_grant"
+  | null;
+
+type InvoiceLine = {
+  // amount for this line item
+  amount: number;
+  // statement descriptor
+  description: string | null;
+  // the thirdweb product sku or null if it is not recognized
+  thirdwebSku: ProductSKU | null;
+};
+
+type Invoice = {
+  // total amount excluding tax
+  amount: number | null;
+  // the ISO currency code (e.g. USD)
+  currency: string;
+  // the line items on the invoice
+  lines: InvoiceLine[];
+};
+
+export type TeamSubscription = {
+  id: string;
+  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT";
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | "paused";
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  trialStart: string | null;
+  trialEnd: string | null;
+  upcomingInvoice: Invoice;
+};
+
+export async function getTeamSubscriptions(slug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(
+    `${API_SERVER_URL}/v1/teams/${slug}/subscriptions`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as TeamSubscription[];
+  }
+  return null;
+}
+
+// util fn:
+
+export function parseThirdwebSKU(sku: ProductSKU) {
+  if (!sku) {
+    return null;
+  }
+  switch (sku) {
+    case "plan:starter":
+      return "Starter Plan";
+    case "plan:growth":
+      return "Growth Plan";
+    case "plan:custom":
+      return "Custom Plan";
+    case "product:ecosystem_wallets":
+      return "Ecosystem Wallets";
+    case "product:engine_standard":
+      return "Engine Standard";
+    case "product:engine_premium":
+      return "Engine Premium";
+    case "usage:storage":
+      return "Storage";
+    case "usage:in_app_wallet":
+      return "In-App Wallet";
+    case "usage:aa_sponsorship":
+      return "AA Sponsorship";
+    case "usage:aa_sponsorship_op_grant":
+      return "AA Sponsorship Op Grant";
+    default:
+      return null;
+  }
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  createDashboardAccountStub,
+  teamStub,
+  teamSubscriptionsStub,
+} from "stories/stubs";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../../stories/utils";
+import { PlanInfoCard } from "./PlanInfoCard";
+
+const meta = {
+  title: "Billing/PlanInfoCard",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  const team = teamStub("foo", "growth");
+  const zeroUsageOnDemandSubs = teamSubscriptionsStub("plan:growth");
+  const subsWith1Usage = teamSubscriptionsStub("plan:growth", {
+    storage: {
+      amount: 10000,
+      quantity: 4,
+    },
+  });
+
+  const subsWith4Usage = teamSubscriptionsStub("plan:growth", {
+    storage: {
+      amount: 10000,
+      quantity: 4,
+    },
+    aaSponsorshipAmount: {
+      amount: 7500,
+      quantity: 4,
+    },
+    aaSponsorshipOpGrantAmount: {
+      amount: 2500,
+      quantity: 4,
+    },
+    inAppWalletAmount: {
+      amount: 40000,
+      quantity: 100,
+    },
+  });
+
+  const account = createDashboardAccountStub("foo");
+
+  return (
+    <div className="container flex max-w-[1130px] flex-col gap-12 lg:p-10">
+      <BadgeContainer label="On-demand Subscriptions with 0 usage">
+        <PlanInfoCard
+          team={team}
+          subscriptions={zeroUsageOnDemandSubs}
+          account={account}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="On-demand Subscriptions with 1 usage">
+        <PlanInfoCard
+          team={team}
+          subscriptions={subsWith1Usage}
+          account={account}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="On-demand Subscriptions with 4 usage">
+        <PlanInfoCard
+          team={team}
+          subscriptions={subsWith4Usage}
+          account={account}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}