@umituz/web-dashboard 3.1.10 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "3.1.10",
+  "version": "3.2.0",
   "description": "Dashboard Layout System - Comprehensive analytics, calendar, customizable layouts, and config-based architecture",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -63,7 +63,8 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
     "firebase": "^10.0.0 || ^11.0.0 || ^12.0.0",
-    "@umituz/web-firebase": "^3.0.0"
+    "@umituz/web-firebase": "^3.0.0",
+    "@umituz/web-polar-payment": "^1.0.20"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",

package/src/domains/billing/components/BillingPage.tsx

@@ -0,0 +1,49 @@
+/**
+ * BillingPage Component
+ *
+ * Complete billing page for displaying subscription, invoices, and plan management
+ * Data fetching should be handled by passing billing summary
+ *
+ * @example
+ * ```tsx
+ * <BillingPage
+ *   billing={billingData}
+ *   loading={false}
+ *   activeTab="overview"
+ *   onTabChange={(tab) => setActiveTab(tab)}
+ * />
+ * ```
+ */
+
+import { BillingLayout, BillingPortal } from ".";
+import type { BillingPortalProps } from "../types/billing";
+
+export interface BillingPageProps extends Omit<BillingPortalProps, "showTabs"> {
+  /** Billing configuration */
+  config?: {
+    brandName?: string;
+    supportEmail?: string;
+  };
+}
+
+/**
+ * BillingPage Component
+ *
+ * Ready-to-use billing page component
+ * Combine BillingLayout with BillingPortal
+ */
+export const BillingPage = ({ config, ...portalProps }: BillingPageProps) => {
+  const billingConfig = {
+    brandName: config?.brandName || "Growth Factory",
+    supportEmail: config?.supportEmail,
+    plans: [],
+  };
+
+  return (
+    <BillingLayout config={billingConfig}>
+      <BillingPortal showTabs={true} {...portalProps} />
+    </BillingLayout>
+  );
+};
+
+export default BillingPage;

package/src/domains/billing/components/index.ts

@@ -10,3 +10,4 @@ export { InvoiceCard } from "./InvoiceCard";
 export { UsageCard } from "./UsageCard";
 export { BillingPortal } from "./BillingPortal";
 export { BillingLayout } from "./BillingLayout";
+export { BillingPage } from "./BillingPage";

package/src/domains/billing/types/billing.ts

@@ -23,9 +23,9 @@ export type SubscriptionStatus = typeof SUBSCRIPTION_STATUS[keyof typeof SUBSCRI
 export type InvoiceStatus = typeof INVOICE_STATUS[keyof typeof INVOICE_STATUS];
 
 /**
- * Plan type
+ * Plan type - dynamic string from product provider
  */
-export type PlanType = "free" | "basic" | "pro" | "enterprise" | "custom";
+export type PlanType = string;
 
 /**
  * Currency
@@ -38,8 +38,8 @@ export type Currency = typeof CURRENCY[keyof typeof CURRENCY];
 export interface PlanTier {
   /** Plan ID */
   id: string;
-  /** Plan type */
-  type: PlanType;
+  /** Plan type - optional, from product metadata */
+  type?: PlanType;
   /** Plan name */
   name: string;
   /** Plan description */

package/src/domains/billing/utils/index.ts

@@ -27,3 +27,5 @@ export {
   isPopularPlan,
   getTrialDaysText,
 } from "./billing";
+
+export { transformPolarProductToPlan, transformPolarProducts } from "./polar";

package/src/domains/billing/utils/polar.ts

@@ -0,0 +1,63 @@
+/**
+ * Polar.sh Integration Helpers
+ *
+ * Utility functions to transform Polar.sh data to billing types
+ *
+ * Note: These utilities require @umituz/web-polar-payment to be installed
+ */
+
+import type { PlanTier } from "../types/billing";
+
+// Polar types - will be resolved if package is installed
+type PolarProduct = {
+  id: string;
+  name: string;
+  description: string | null;
+  is_archived: boolean;
+  prices: PolarPrice[];
+  benefits: Array<{ description: string | null }>;
+};
+
+type PolarPrice = {
+  amount?: number;
+  currency: string;
+  recurring_interval?: string;
+  is_archived: boolean;
+};
+
+/**
+ * Transform Polar product to billing plan format
+ */
+export function transformPolarProductToPlan(
+  product: PolarProduct,
+  price: PolarPrice
+): PlanTier {
+  const amount = price.amount || 0;
+  const monthlyAmount = price.recurring_interval === "month" ? amount : amount / 12;
+
+  return {
+    id: product.id,
+    name: product.name,
+    description: product.description || "",
+    monthlyPrice: Math.round(monthlyAmount),
+    yearlyPrice: Math.round(amount),
+    currency: price.currency.toUpperCase() as PlanTier["currency"],
+    features: product.benefits
+      .map((b: { description: string | null }) => b.description || "")
+      .filter(Boolean),
+  };
+}
+
+/**
+ * Transform multiple Polar products to billing plans
+ */
+export function transformPolarProducts(products: PolarProduct[]): PlanTier[] {
+  return products
+    .filter((product) => !product.is_archived)
+    .flatMap((product) => {
+      const activePrices = product.prices.filter((p: PolarPrice) => !p.is_archived);
+      return activePrices.map((price: PolarPrice) =>
+        transformPolarProductToPlan(product, price)
+      );
+    });
+}