@metrifox/react-sdk 0.0.8 → 0.0.10

package/README.md

@@ -39,7 +39,9 @@ metrifoxInit({
 
 ---
 
-## Core Widget: `CustomerPortal`
+## Widgets
+
+## `CustomerPortal`
 
 Displays a customizable customer dashboard with plans, subscriptions, billing, credits, and more.
 
@@ -64,7 +66,7 @@ export default function MyPortalPage() {
 
 ---
 
-## Section Configuration
+#### Section Configuration
 
 The `sectionsConfig` prop controls what appears in the portal.
 
@@ -75,7 +77,7 @@ The `sectionsConfig` prop controls what appears in the portal.
 | `component` | `React.ComponentType`     | Replace the default section with your own component |
 | `props`     | `Record<string, unknown>` | Extra props passed to the custom or default section |
 
-### Built-in Section Keys
+#### Built-in Section Keys
 
 | Key                | Description                   |
 | ------------------ | ----------------------------- |
@@ -87,7 +89,7 @@ The `sectionsConfig` prop controls what appears in the portal.
 | `billingHistory`   | List of past transactions     |
 | `plan`             | Current plan details          |
 
-### Section Anchors
+#### Section Anchors
 
 Each portal section now renders inside a `<section id="...">` wrapper so you can link directly to segments of a customer portal view. The default anchor IDs are:
 
@@ -105,184 +107,158 @@ Use these anchors when embedding the SDK or sharing deep links (e.g., `https://a
 
 ---
 
-## Core Widget: `PriceCard`
+## Pricing Table
 
-Display individual pricing plan cards with detailed pricing information, entitlements, and call-to-action buttons. Ideal for pricing pages, plan comparison views, or standalone plan displays.
+Displays subscription plans and one-time purchases in a configurable pricing table component.
 
 ```tsx
-import { PriceCard } from "@metrifox/react-sdk"
+import { PricingTable } from "@metrifox/react-sdk"
 
 export default function PricingPage() {
-  const plan = {
-    id: "plan-123",
-    name: "Professional Plan",
-    description: "Perfect for growing teams",
-    is_visible: true,
-    is_free: false,
-    is_custom: false,
-    is_current_plan: false,
-    price_options: [
-      {
-        id: "price-1",
-        amount: 2900, // $29.00 in cents
-        currency: "USD",
-        interval: "monthly",
-      },
-    ],
-    entitlements: [
-      {
-        id: "ent-1",
-        feature_id: "users",
-        feature_key: "users",
-        feature_name: "Team Members",
-        limit_value: 10,
-        is_visible: true,
-      },
-    ],
-    // ... other plan properties
-  }
-
-  const featureOrderMap = new Map([
-    ["users", 0],
-    ["storage", 1],
-  ])
-
-  return (
-    <PriceCard
-      plan={plan}
-      interval="monthly"
-      featureOrderMap={featureOrderMap}
-      buttonText="Start Free Trial"
-      buttonAction={() => window.open(plan.checkout_url, "_blank")}
-      isPricePage={true}
+  return( 
+    <PricingTable 
+      checkoutUsername="your-checkout-username" 
+      productKey="your-product-key" 
     />
   )
 }
 ```
 
-### PriceCard Props
+---
 
-| Property           | Type                  | Required | Description                                                  |
-| ------------------ | --------------------- | -------- | ------------------------------------------------------------ |
-| `plan`             | `Offering`            | ✅       | The plan/offering object containing pricing and feature data |
-| `interval`         | `string`              | ✅       | Billing interval to display (e.g., "monthly", "yearly")      |
-| `featureOrderMap`  | `Map<string, number>` | ✅       | Map defining the display order of features                   |
-| `isPricePage`      | `boolean`             | ❌       | Enable pricing page mode with enhanced styling               |
-| `isCustomerPortal` | `boolean`             | ❌       | Enable customer portal mode for subscription management      |
-| `buttonText`       | `string`              | ❌       | Custom text for the action button                            |
-| `buttonAction`     | `() => void`          | ❌       | Function called when action button is clicked                |
-| `isCurrentPlan`    | `boolean`             | ❌       | Highlight card as the customer's current plan                |
-| `statusTag`        | `React.ReactNode`     | ❌       | Custom status indicator (e.g., "Popular", "Recommended")     |
-| `addPriceButton`   | `React.ReactNode`     | ❌       | Additional custom button element                             |
-| `planActions`      | `React.ReactNode`     | ❌       | Custom actions area (e.g., edit, delete buttons)             |
-| `cardAction`       | `() => void`          | ❌       | Function called when the entire card is clicked              |
+#### Props
 
-### Plan Data Structure (Offering)
+The props control how the pricing table is configured.
 
-The `plan` prop expects an object with the following structure:
+| Property              | Type      | Required | Default | Description                                                                      |
+| --------------------- | --------- | -------- | ------- | -------------------------------------------------------------------------------- |
+| `checkoutUsername`    | `string`  | Yes      | —       | Unique username used for checkout. This can be found in **Settings → Checkout**. |
+| `productKey`          | `string`  | Yes      | —       | Unique product identifier. This can be found on the product page.                |
+| `plansOnly`           | `boolean` | No       | `false` | Controls whether only subscription plans are rendered.                           |
+| `singlePurchasesOnly` | `boolean` | No       | `false` | Controls whether only single purchases are rendered.                             |
+| `showTabHeader`       | `boolean` | No       | `true`  | Controls whether the tab header for switching between offerings is rendered.     |
 
-```tsx
-interface Offering {
-  id: string
-  name: string
-  description: string
-  is_visible: boolean
-  is_free: boolean
-  is_custom: boolean
-  is_current_plan: boolean
-  checkout_url?: string
-  custom_cta_text?: string
-  trial_duration_unit?: string
-  trial_duration_value?: number
-
-  // Pricing options for different intervals
-  price_options: PriceOption[]
-  entitlement_price_options: PriceOption[]
-  credit_attachment_price_options: PriceOption[]
-
-  // Features and entitlements
-  entitlements: Entitlement[]
-  credit_attachments?: CreditSystemProps[]
-  base_entitlements_plan_name?: string
-
-  // Metadata
-  version_id: string
-  status: string
-  // ... other properties
-}
-```
+> **Note:** If both `plansOnly` and `singlePurchasesOnly` are `false` or undefined, both plans and single purchases are displayed.
 
-### Usage Patterns
+## Styling
 
-#### Basic Pricing Page
+Import the SDK’s global styles into your app entry (e.g., `src/index.tsx` or `_app.tsx`):
 
 ```tsx
-const plans = [
-  { /* Basic plan data */ },
-  { /* Pro plan data */ },
-  { /* Enterprise plan data */ }
-]
-
-const featureOrderMap = new Map([
-  ["users", 0],
-  ["storage", 1],
-  ["api_calls", 2]
-])
-
-return (
-  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-    {plans.map(plan => (
-      <PriceCard
-        key={plan.id}
-        plan={plan}
-        interval={selectedInterval}
-        featureOrderMap={featureOrderMap}
-        isPricePage={true}
-        buttonAction={() => handlePlanSelection(plan)}
-      />
-    ))}
-  </div>
-)
+import "@metrifox/react-sdk/dist/styles.css"
 ```
 
-#### Customer Portal Integration
+> This is required for proper styling of all widgets.
 
-```tsx
-<PriceCard
-  plan={plan}
-  interval={selectedInterval}
-  featureOrderMap={featureOrderMap}
-  isCustomerPortal={true}
-  isCurrentPlan={plan.is_current_plan}
-  buttonText={plan.is_current_plan ? "Current Plan" : "Upgrade"}
-  buttonAction={() => handleUpgrade(plan.checkout_url)}
-/>
-```
+#### Pricing Table
+The SDK accepts an optional `pricingTableTheme` object during initialization. This theme is applied to Pricing Table component and UI elements within it to match your brand styles.
+
+Any values not provided will fall back to the default theme.
+
+```ts
+// Pricing table theme configuration
+pricingTableTheme?: {
+  card?: {
+    background?: string
+    borderColor?: string
+    descriptionColor?: string
+
+    header?: {
+      background?: string
+      textColor?: string
+    }
+
+    description?: {
+      textColor?: string
+      textButtonColor?: string
+    }
+
+    price?: {
+      amountColor?: string
+      primaryTextColor?: string
+      secondaryTextColor?: string
+      textButtonColor?: string
+      background?: string
+      borderColor?: string
+    }
+  }
 
-#### With Custom Status Tags
+  button?: {
+    background?: string
+    textColor?: string
+    secondaryBackground?: string
+    secondaryTextColor?: string
+    textButtonColor?: string
+  }
 
-```tsx
-<PriceCard
-  plan={plan}
-  interval="monthly"
-  featureOrderMap={featureOrderMap}
-  statusTag={<span className="bg-blue-500 text-white px-2 py-1 rounded text-xs">Most Popular</span>}
-  buttonAction={() => selectPlan(plan)}
-/>
-```
+  featureList?: {
+    textColor?: string
+    iconColor?: string
+  }
 
----
+  tabs?: {
+    inactiveText?: string
+    activeText?: string
+    indicator?: string
+    borderColor?: string
+  }
 
-## Styling
+  intervalToggle?: {
+    background?: string
+    activeBackground?: string
+    activeText?: string
+    inactiveText?: string
+  }
 
-Import the SDK’s global styles into your app entry (e.g., `src/index.tsx` or `_app.tsx`):
+  currentSubscriptionCard?: {
+    header?: {
+      background?: string
+      textColor?: string
+    }
+    gradientColor?: string
+  }
 
-```tsx
-import "@metrifox/react-sdk/dist/styles.css"
+  freeTrialTag?: {
+    background?: string
+    textColor?: string
+  }
+
+  checkoutBar?: {
+    background?: string
+    borderColor?: string
+    textColor?: string
+    buttonBackground?: string
+    buttonTextColor?: string
+  }
+}
 ```
+###### Example usage
+```tsx
+import { metrifoxInit } from "@metrifox/react-sdk"
 
-> This is required for proper styling of all widgets.
+const pricingTableTheme = {
+  pricingTable: {
+    card: {
+      background: "#ffffff",
+      price: {
+        amountColor: "#111827",
+        textButtonColor: "#2563eb",
+      },
+    },
+    button: {
+      background: "#2563eb",
+    },
+    tabs: {
+      activeText: "#2563eb",
+    },
+  },
+}
 
+metrifoxInit({
+  clientKey: "your-client-key",
+  pricingTableTheme,
+})
+```
 ---
 
 ## Local Development