feat(portal-plugin-billing): add new billing plugin with subscription management and Stripe integration

.git-town.toml

@@ -0,0 +1,4 @@
+# See https://www.git-town.com/configuration-file for details
+
+[branches]
+main = "develop"

apps/portal-app-shell/package.json

@@ -17,6 +17,7 @@
     "@lumeweb/portal-framework-core": "workspace:*",
     "@lumeweb/portal-framework-ui": "workspace:*",
     "@lumeweb/portal-framework-ui-core": "workspace:*",
+    "@lumeweb/advanced-rest-provider": "workspace:*",
     "@lumeweb/portal-sdk": "workspace:*",
     "@t3-oss/env-core": "^0.12.0",
     "@tanstack/react-query": "^4.36.1",

apps/portal-app-shell/src/App.tsx

@@ -1,6 +1,7 @@
 import { AppComponent, AppComponentProps } from "@lumeweb/portal-framework-ui";
 import "@fontsource-variable/manrope";
 import "@lumeweb/portal-framework-ui-core/tailwind.css";
+import "@lumeweb/advanced-rest-provider";
 import React from "react";
 
 import { env } from "./env";

libs/portal-plugin-billing/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@lumeweb/portal-plugin-billing",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@lumeweb/advanced-rest-provider": "workspace:*",
+    "@lumeweb/portal-framework-auth": "workspace:*",
+    "@lumeweb/portal-framework-core": "workspace:*",
+    "@lumeweb/portal-framework-ui": "workspace:*",
+    "@lumeweb/portal-framework-ui-core": "workspace:*",
+    "@lumeweb/portal-plugin-dashboard": "workspace:*",
+    "@refinedev/core": "^4.47.0",
+    "@refinedev/react-router": "^2.0.2",
+    "@tanstack/react-query": "4.36.1",
+    "lucide-react": "^0.543.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.54.0",
+    "react-router": "7.5.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

libs/portal-plugin-billing/plugin.config.ts

@@ -0,0 +1,15 @@
+import type { PluginConfig } from "@lumeweb/portal-framework-core/vite";
+
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  dir: __dirname,
+  exposes: {
+    ".": "./src/index",
+    "./account/subscriptions": "./src/ui/routes/account.subscriptions",
+  },
+  name: "core:billing",
+} satisfies PluginConfig;

libs/portal-plugin-billing/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@lumeweb/portal-framework-ui-core/postcss.config");

libs/portal-plugin-billing/src/capabilities/index.ts

@@ -0,0 +1 @@
+export { Capability } from './refineConfig';

libs/portal-plugin-billing/src/capabilities/refineConfig.ts

@@ -0,0 +1,39 @@
+import type { RefineProps } from "@refinedev/core";
+import {
+  Framework,
+  mergeRefineConfig,
+  RefineConfigCapability,
+} from "@lumeweb/portal-framework-core";
+
+export class Capability implements RefineConfigCapability {
+  readonly id: string = "billing:refine-config";
+  status;
+  readonly type = "core:refine-config";
+  version: string;
+  #apiUrl: string;
+  dependencies = ["dashboard:refine-config"];
+
+  async destroy() {}
+
+  getConfig(existing?: Partial<RefineProps>) {
+    return mergeRefineConfig(existing, {});
+  }
+
+  async initialize(framework: Framework) {
+    // Get the dashboard refine capability
+    const dashboardCapability = await framework.getCapability<
+      RefineConfigCapability & { apiUrl: string }
+    >("dashboard:refine-config");
+
+    if (!dashboardCapability) {
+      throw new Error("Dashboard refine capability not found");
+    }
+
+    // Get the API URL from the dashboard capability
+    this.#apiUrl = dashboardCapability.apiUrl;
+
+    if (!this.#apiUrl) {
+      throw new Error("API URL not found in dashboard capability");
+    }
+  }
+}

libs/portal-plugin-billing/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useSubscription';
+export * from './useCustomerPortal';

libs/portal-plugin-billing/src/hooks/useCustomerPortal.ts

@@ -0,0 +1,48 @@
+import { useCustomMutation, type HttpError } from "@refinedev/core";
+import type { CustomerPortalResponse } from "@/types/subscription";
+import type { UseCustomMutationProps } from "@refinedev/core";
+import { DATA_PROVIDER_NAME } from "@lumeweb/portal-framework-auth";
+
+interface UseCustomerPortalConfig {
+  return_url?: string;
+  mutationOptions?: UseCustomMutationProps<
+    CustomerPortalResponse,
+    HttpError,
+    unknown
+  >["mutationOptions"];
+}
+
+interface UseCustomerPortalResult {
+  mutate: () => void;
+  isLoading: boolean;
+  data?: CustomerPortalResponse;
+  error?: HttpError | null;
+}
+
+export function useCustomerPortal(
+  config: UseCustomerPortalConfig = {},
+): UseCustomerPortalResult {
+  const { return_url, mutationOptions } = config;
+
+  const mutation = useCustomMutation<CustomerPortalResponse>({
+    mutationOptions,
+  });
+
+  const mutate = () => {
+    mutation.mutate({
+      url: "/account/billing/customer-portal",
+      method: "post",
+      values: {
+        return_url,
+      },
+      dataProviderName: DATA_PROVIDER_NAME,
+    });
+  };
+
+  return {
+    mutate,
+    isLoading: mutation.isLoading,
+    data: mutation.data?.data,
+    error: mutation.error,
+  };
+}

libs/portal-plugin-billing/src/hooks/useSubscription.ts

@@ -0,0 +1,28 @@
+import { useCustom } from "@refinedev/core";
+import type { SubscriptionStatusResponse } from "@/types/subscription";
+import type { UseCustomProps } from "@refinedev/core";
+import { DATA_PROVIDER_NAME } from "@lumeweb/portal-framework-auth";
+
+interface UseSubscriptionConfig {
+  queryOptions?: UseCustomProps<
+    SubscriptionStatusResponse,
+    unknown,
+    unknown,
+    unknown,
+    SubscriptionStatusResponse
+  >["queryOptions"];
+}
+
+export function useSubscription(config: UseSubscriptionConfig = {}) {
+  const { queryOptions } = config;
+
+  return useCustom<SubscriptionStatusResponse>({
+    url: "/account/billing/subscription",
+    method: "get",
+    dataProviderName: DATA_PROVIDER_NAME,
+    queryOptions: {
+      // Apply user-provided query options last to allow overrides
+      ...queryOptions,
+    },
+  });
+}

libs/portal-plugin-billing/src/index.ts

@@ -0,0 +1,26 @@
+export * from "./ui";
+export * from "./hooks";
+export * from "./types";
+
+import {
+  createNamespacedId,
+  Framework,
+  type Plugin,
+} from "@lumeweb/portal-framework-core";
+import { Capability as RefineConfigCapability } from "./capabilities";
+import routes from "./routes";
+
+export default function (): Plugin {
+  return {
+    dependencies: [{ id: "core:dashboard" }],
+    capabilities: [new RefineConfigCapability()],
+    async destroy(_framework: Framework) {
+      console.log("Plugin Billing destroyed");
+    },
+    id: createNamespacedId("core", "billing"),
+    async initialize(_framework: Framework) {
+      console.log("Plugin Billing initialized");
+    },
+    routes,
+  } satisfies Plugin;
+}

libs/portal-plugin-billing/src/routes.tsx

@@ -0,0 +1,16 @@
+import type { RouteDefinition } from "@lumeweb/portal-framework-core";
+import { CreditCard } from "lucide-react";
+
+const routes = [
+  {
+    component: "account/subscriptions",
+    id: "account_subscription",
+    navigation: {
+      icon: CreditCard,
+      label: "Subscription",
+    },
+    path: "/subscription",
+  },
+] satisfies RouteDefinition[];
+
+export default routes;

libs/portal-plugin-billing/src/types/index.ts

@@ -0,0 +1 @@
+export * from './subscription';

libs/portal-plugin-billing/src/types/subscription.ts

@@ -0,0 +1,16 @@
+export interface SubscriptionStatusResponse {
+  is_subscribed: boolean;
+  gateway_type?: string;
+  plan_id?: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface CustomerPortalResponse {
+  url: string;
+}
+
+export interface BillingPluginMeta {
+  stripe_pricing_table_id?: string;
+  stripe_publishable_key?: string;
+}

libs/portal-plugin-billing/src/ui/components/StripePricingTable.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+interface StripePricingTableProps {
+  pricingTableId: string;
+  publishableKey: string;
+  customerEmail?: string;
+  clientReferenceId?: string;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "stripe-pricing-table": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export const StripePricingTable: React.FC<StripePricingTableProps> = ({
+  pricingTableId,
+  publishableKey,
+  customerEmail,
+  clientReferenceId
+}) => {
+  React.useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://js.stripe.com/v3/pricing-table.js";
+    script.async = true;
+    document.body.appendChild(script);
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <stripe-pricing-table
+      pricing-table-id={pricingTableId}
+      publishable-key={publishableKey}
+      {...(customerEmail && { "customer-email": customerEmail })}
+      {...(clientReferenceId && { "client-reference-id": clientReferenceId })}
+    />
+  );
+};

libs/portal-plugin-billing/src/ui/components/index.ts

@@ -0,0 +1 @@
+export * from './StripePricingTable';

libs/portal-plugin-billing/src/ui/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './routes';