@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/providers/sdk-provider.tsx

@@ -16,6 +16,8 @@ export type SDKContextType = {
   isLoading: boolean;
   error: Error | null;
   reinitialize: () => Promise<void>;
+  /** Optional explicit access token (used by embed mode where cookies aren't available) */
+  accessToken?: string | null;
 };
 
 /**
@@ -154,13 +156,16 @@ export function useSDKOptional() {
 
 /**
  * Get access token from SDK context (helper for WLSubscriptionProvider)
+ * Checks context.accessToken first (set by embed mode), then falls back to cookies
  */
 export function useAccessToken(): string | null {
   const context = useContext(SDKContext);
   if (!context?.sdk) return null;
 
-  // Access token is stored in SDK configuration
-  // We need to get it from the auth cookie since SDK doesn't expose it directly
+  // Embed mode passes token explicitly via context
+  if (context.accessToken) return context.accessToken;
+
+  // Normal mode: read from auth cookie
   const token = getCookie(AUTH_COOKIES.TOKEN);
   return token ?? null;
 }

package/src/providers/white-label-provider.tsx

@@ -1,3 +1,4 @@
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import type { ReactNode } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
@@ -44,7 +45,9 @@ export function WhiteLabelProvider({ children, apiBaseUrl = "" }: WhiteLabelProv
   useEffect(() => {
     const fetchConfig = async () => {
       try {
-        const response = await fetch(`${apiBaseUrl}/white-labels/current`);
+        const response = await fetch(`${apiBaseUrl}/white-labels/current`, {
+          headers: apiBaseUrl ? getClientHeaders("ui") : undefined,
+        });
         if (response.ok) {
           const data = await response.json();
           // Map snake_case API response to camelCase internal state

package/src/providers/wl-subscription-provider.tsx

@@ -1,3 +1,4 @@
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import type { ReactNode } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useEntitiesOptional } from "./entities-context";
@@ -9,6 +10,8 @@ import { useAccessToken } from "./sdk-provider";
 
 export type PlanLimits = {
   documents_per_month: number | null;
+  invoices_per_month: number | null;
+  overage_price_cents: number | null;
 } | null;
 
 export type WhiteLabelPlan = {
@@ -26,6 +29,8 @@ export type WhiteLabelPlan = {
 export type UsageStats = {
   documents_count: number;
   documents_limit: number | null;
+  invoices_count: number;
+  invoices_limit: number | null;
   period_start: string;
   period_end: string;
 };
@@ -36,6 +41,14 @@ export type CurrentSubscription = {
   billing_interval: string | null;
   current_period_start: string;
   current_period_end: string;
+  trial_ends_at: string | null;
+  trial_days_remaining: number | null;
+  cancel_at: string | null;
+  payment_method: {
+    last4: string | null;
+    brand: string | null;
+    has_card: boolean;
+  } | null;
   usage: UsageStats;
 };
 
@@ -49,7 +62,8 @@ export type GatedFeature =
   | "custom_templates"
   | "api_access"
   | "webhooks"
-  | "priority_support";
+  | "priority_support"
+  | "e_invoicing";
 
 // ============================================
 // CONTEXT
@@ -63,12 +77,19 @@ type WLSubscriptionContextType = {
   isLoading: boolean;
   error: string | null;
 
+  // Trial state
+  isTrialActive: boolean;
+  isTrialExpired: boolean;
+  trialDaysRemaining: number | null;
+  needsPayment: boolean;
+
   // Feature/limit checks
   hasFeature: (feature: GatedFeature | string) => boolean;
   isOverLimit: (resource: "documents") => boolean;
   getUsagePercentage: (resource: "documents") => number;
 
-  // Refresh data
+  // Actions
+  createCheckout: (planSlug: string, billingInterval?: "monthly" | "yearly") => Promise<string>;
   refresh: () => Promise<void>;
 };
 
@@ -97,9 +118,19 @@ const DEFAULT_SUBSCRIPTION: CurrentSubscription = {
   billing_interval: null,
   current_period_start: new Date().toISOString(),
   current_period_end: new Date().toISOString(),
+  trial_ends_at: null,
+  trial_days_remaining: null,
+  cancel_at: null,
+  payment_method: {
+    last4: null,
+    brand: null,
+    has_card: false,
+  },
   usage: {
     documents_count: 0,
     documents_limit: null,
+    invoices_count: 0,
+    invoices_limit: null,
     period_start: new Date().toISOString(),
     period_end: new Date().toISOString(),
   },
@@ -146,6 +177,7 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       const headers = {
         Authorization: `Bearer ${accessToken}`,
         "x-entity-id": entityId,
+        ...getClientHeaders("ui"),
         "Content-Type": "application/json",
       };
 
@@ -232,6 +264,42 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
     [subscription],
   );
 
+  // Return the in-app billing page URL for plan activation.
+  const createCheckout = useCallback(
+    async (planSlug: string, billingInterval: "monthly" | "yearly" = "monthly"): Promise<string> => {
+      if (!entityId || !accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      const url = new URL(`/app/${entityId}/settings/billing`, window.location.origin);
+      url.searchParams.set("plan", planSlug);
+      url.searchParams.set("interval", billingInterval);
+      return url.toString();
+    },
+    [entityId, accessToken],
+  );
+
+  // Compute trial state
+  const isTrialActive =
+    subscription.status === "trialing" &&
+    subscription.trial_ends_at != null &&
+    new Date(subscription.trial_ends_at) > new Date();
+
+  const isTrialExpiredState =
+    subscription.status === "trialing" &&
+    subscription.trial_ends_at != null &&
+    new Date(subscription.trial_ends_at) <= new Date();
+
+  const trialDaysRemaining = subscription.trial_days_remaining;
+
+  // needsPayment: trial expired, or no free plan and no active Stripe subscription
+  const needsPayment =
+    isTrialExpiredState ||
+    (subscription.status === "active" &&
+      !subscription.plan.is_free &&
+      subscription.billing_interval === null &&
+      subscription.plan.slug !== "unlimited");
+
   const value = useMemo(
     () => ({
       subscription,
@@ -240,12 +308,31 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       availablePlans,
       isLoading,
       error,
+      isTrialActive,
+      isTrialExpired: isTrialExpiredState,
+      trialDaysRemaining,
+      needsPayment,
       hasFeature,
       isOverLimit,
       getUsagePercentage,
+      createCheckout,
       refresh: fetchSubscription,
     }),
-    [subscription, availablePlans, isLoading, error, hasFeature, isOverLimit, getUsagePercentage, fetchSubscription],
+    [
+      subscription,
+      availablePlans,
+      isLoading,
+      error,
+      isTrialActive,
+      isTrialExpiredState,
+      trialDaysRemaining,
+      needsPayment,
+      hasFeature,
+      isOverLimit,
+      getUsagePercentage,
+      createCheckout,
+      fetchSubscription,
+    ],
   );
 
   return <WLSubscriptionContext.Provider value={value}>{children}</WLSubscriptionContext.Provider>;