@spaceinvoices/react-ui 0.4.11 → 0.4.31

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

@@ -1,25 +1,57 @@
 import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import type { ReactNode } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import {
+  getEffectiveWhiteLabelHiddenFeatures,
+  isWhiteLabelCapabilityVisible,
+  isWhiteLabelUiControlVisible,
+  type WhiteLabelActionControlId,
+  type WhiteLabelCapabilityId,
+} from "@/ui/lib/white-label-capabilities";
+import { useEntitiesOptional } from "./entities-context";
 
 export type WhiteLabelConfig = {
   slug: string;
   name: string;
+  appName: string | null;
+  shortName: string | null;
+  logoUrl: string | null;
+  faviconUrl: string | null;
+  themeColor: string | null;
   hiddenFeatures: string[]; // Features hidden from UI (still available via API)
+  hideNewFeaturesByDefault: boolean;
+  reviewedFeatureCatalogIds: string[];
+  billingEnabled: boolean; // Whether billing-related UI should be available
+  accountUsersFullUiEnabled: boolean; // Whether account users bypass white-label UI hiding
   halAppId: string | null; // Hal app ID for chat widget (null = no Hal integration)
+  supportEmail: string | null; // White-label support contact email
 };
 
 // Default config until API responds (Space Invoices = all features visible)
 const DEFAULT_CONFIG: WhiteLabelConfig = {
   slug: "space-invoices",
   name: "Space Invoices",
+  appName: "Space Invoices",
+  shortName: "Space Invoices",
+  logoUrl: null,
+  faviconUrl: null,
+  themeColor: null,
   hiddenFeatures: [],
+  hideNewFeaturesByDefault: false,
+  reviewedFeatureCatalogIds: [],
+  billingEnabled: false,
+  accountUsersFullUiEnabled: true,
   halAppId: null,
+  supportEmail: null,
 };
 
 type WhiteLabelContextType = WhiteLabelConfig & {
   /** Check if a feature is visible (not hidden) for this white-label */
   isFeatureVisible: (feature: string) => boolean;
+  /** Check if a capability is visible after country/entity and white-label rules are applied */
+  isCapabilityVisible: (capability: WhiteLabelCapabilityId) => boolean;
+  /** Check if a standalone UI control is visible after white-label and parent capability rules are applied */
+  isUiControlVisible: (control: WhiteLabelActionControlId) => boolean;
   isLoading: boolean;
 };
 
@@ -32,13 +64,16 @@ type WhiteLabelProviderProps = {
   children: ReactNode;
   /** Optional API base URL (defaults to empty string for same-origin) */
   apiBaseUrl?: string;
+  /** Whether the current authenticated user is an account user without an attached account_id */
+  isAccountUser?: boolean;
 };
 
 /**
  * WhiteLabelProvider component
  * Fetches white-label configuration from the API and provides it to the application
  */
-export function WhiteLabelProvider({ children, apiBaseUrl = "" }: WhiteLabelProviderProps) {
+export function WhiteLabelProvider({ children, apiBaseUrl = "", isAccountUser = false }: WhiteLabelProviderProps) {
+  const entitiesContext = useEntitiesOptional();
   const [config, setConfig] = useState<WhiteLabelConfig>(DEFAULT_CONFIG);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -54,8 +89,18 @@ export function WhiteLabelProvider({ children, apiBaseUrl = "" }: WhiteLabelProv
           setConfig({
             slug: data.slug,
             name: data.name,
+            appName: data.app_name ?? data.name,
+            shortName: data.short_name ?? data.name,
+            logoUrl: data.logo_url ?? null,
+            faviconUrl: data.favicon_url ?? null,
+            themeColor: data.theme_color ?? null,
             hiddenFeatures: data.hidden_features,
+            hideNewFeaturesByDefault: data.hide_new_features_by_default ?? false,
+            reviewedFeatureCatalogIds: data.reviewed_feature_catalog_ids ?? [],
+            billingEnabled: data.billing_enabled ?? false,
+            accountUsersFullUiEnabled: data.account_users_full_ui_enabled ?? true,
             halAppId: data.hal_app_id ?? null,
+            supportEmail: data.support_email ?? null,
           });
         }
       } catch {
@@ -68,18 +113,65 @@ export function WhiteLabelProvider({ children, apiBaseUrl = "" }: WhiteLabelProv
     fetchConfig();
   }, [apiBaseUrl]);
 
+  const accountUsersBypassUiRestrictions = config.accountUsersFullUiEnabled && isAccountUser;
+  const effectiveHiddenFeatures = useMemo(
+    () =>
+      getEffectiveWhiteLabelHiddenFeatures({
+        hiddenFeatures: config.hiddenFeatures,
+        hideNewFeaturesByDefault: config.hideNewFeaturesByDefault,
+        reviewedFeatureCatalogIds: config.reviewedFeatureCatalogIds,
+      }),
+    [config.hiddenFeatures, config.hideNewFeaturesByDefault, config.reviewedFeatureCatalogIds],
+  );
+
   const isFeatureVisible = useCallback(
-    (feature: string) => !config.hiddenFeatures.includes(feature),
-    [config.hiddenFeatures],
+    (feature: string) => accountUsersBypassUiRestrictions || !effectiveHiddenFeatures.includes(feature),
+    [accountUsersBypassUiRestrictions, effectiveHiddenFeatures],
+  );
+
+  const isCapabilityVisible = useCallback(
+    (capability: WhiteLabelCapabilityId) =>
+      accountUsersBypassUiRestrictions ||
+      isWhiteLabelCapabilityVisible({
+        capability,
+        hiddenFeatures: effectiveHiddenFeatures,
+        entity: entitiesContext?.activeEntity ?? null,
+        entityCount: entitiesContext?.entities.length ?? 0,
+      }),
+    [
+      accountUsersBypassUiRestrictions,
+      effectiveHiddenFeatures,
+      entitiesContext?.activeEntity,
+      entitiesContext?.entities.length,
+    ],
+  );
+
+  const isUiControlVisible = useCallback(
+    (control: WhiteLabelActionControlId) =>
+      accountUsersBypassUiRestrictions ||
+      isWhiteLabelUiControlVisible({
+        control,
+        hiddenFeatures: effectiveHiddenFeatures,
+        entity: entitiesContext?.activeEntity ?? null,
+        entityCount: entitiesContext?.entities.length ?? 0,
+      }),
+    [
+      accountUsersBypassUiRestrictions,
+      effectiveHiddenFeatures,
+      entitiesContext?.activeEntity,
+      entitiesContext?.entities.length,
+    ],
   );
 
   const value = useMemo(
     () => ({
       ...config,
       isFeatureVisible,
+      isCapabilityVisible,
+      isUiControlVisible,
       isLoading,
     }),
-    [config, isLoading, isFeatureVisible],
+    [config, isLoading, isFeatureVisible, isCapabilityVisible, isUiControlVisible],
   );
 
   return <WhiteLabelContext.Provider value={value}>{children}</WhiteLabelContext.Provider>;

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

@@ -2,7 +2,8 @@ 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";
-import { useAccessToken } from "./sdk-provider";
+import { useAccessToken } from "./space-invoices-provider";
+import { useWhiteLabel } from "./white-label-provider";
 
 // ============================================
 // TYPES
@@ -12,6 +13,20 @@ export type PlanLimits = {
   documents_per_month: number | null;
   invoices_per_month: number | null;
   overage_price_cents: number | null;
+  annual_price_cents: number | null;
+  included_store_count: number | null;
+  extra_store_price_cents: number | null;
+  extra_store_annual_price_cents: number | null;
+  extra_store_invoices_per_month: number | null;
+} | null;
+
+export type StoreBilling = {
+  connected_stores: number;
+  included_stores: number;
+  billable_extra_stores: number;
+  invoices_included_from_extra_stores: number;
+  extra_store_price_cents_monthly: number | null;
+  extra_store_price_cents_yearly: number | null;
 } | null;
 
 export type WhiteLabelPlan = {
@@ -41,14 +56,24 @@ export type CurrentSubscription = {
   billing_interval: string | null;
   current_period_start: string;
   current_period_end: string;
+  payment_provider: "stripe" | "paypal" | "bank" | "braintree";
+  bank_reference: string | null;
+  billing_email: string | null;
+  coupon_code: string | null;
   trial_ends_at: string | null;
   trial_days_remaining: number | null;
   cancel_at: string | null;
+  scheduled_change: {
+    plan: WhiteLabelPlan;
+    billing_interval: string | null;
+    effective_at: string;
+  } | null;
   payment_method: {
     last4: string | null;
     brand: string | null;
     has_card: boolean;
   } | null;
+  store_billing: StoreBilling;
   usage: UsageStats;
 };
 
@@ -90,6 +115,13 @@ type WLSubscriptionContextType = {
 
   // Actions
   createCheckout: (planSlug: string, billingInterval?: "monthly" | "yearly") => Promise<string>;
+  createSetupIntent: () => Promise<{ client_secret: string }>;
+  savePaymentMethod: (paymentMethodId: string) => Promise<void>;
+  activateSubscription: (
+    planSlug: string,
+    billingInterval: "monthly" | "yearly",
+    couponCode?: string | null,
+  ) => Promise<{ invoice_id?: string | null; scheduled?: boolean }>;
   refresh: () => Promise<void>;
 };
 
@@ -118,14 +150,20 @@ const DEFAULT_SUBSCRIPTION: CurrentSubscription = {
   billing_interval: null,
   current_period_start: new Date().toISOString(),
   current_period_end: new Date().toISOString(),
+  payment_provider: "stripe",
+  bank_reference: null,
+  billing_email: null,
+  coupon_code: null,
   trial_ends_at: null,
   trial_days_remaining: null,
   cancel_at: null,
+  scheduled_change: null,
   payment_method: {
     last4: null,
     brand: null,
     has_card: false,
   },
+  store_billing: null,
   usage: {
     documents_count: 0,
     documents_limit: null,
@@ -149,12 +187,13 @@ type WLSubscriptionProviderProps = {
 /**
  * WLSubscriptionProvider component
  * Fetches white-label subscription data and provides limit/feature checks.
- * Must be nested inside EntitiesProvider and SDKProvider.
+ * Must be nested inside SpaceInvoicesProvider and an entity source.
  */
 export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionProviderProps) {
   // Get entity and access token from existing context
   const entitiesContext = useEntitiesOptional();
   const accessToken = useAccessToken();
+  const whiteLabel = useWhiteLabel();
 
   const entityId = entitiesContext?.activeEntity?.id ?? null;
   const [subscription, setSubscription] = useState<CurrentSubscription>(DEFAULT_SUBSCRIPTION);
@@ -163,9 +202,15 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
   const [error, setError] = useState<string | null>(null);
 
   const fetchSubscription = useCallback(async () => {
-    if (!entityId || !accessToken) {
+    if (whiteLabel.isLoading) {
+      setIsLoading(true);
+      return;
+    }
+
+    if (whiteLabel.slug === "space-invoices" || !entityId || !accessToken) {
       setSubscription(DEFAULT_SUBSCRIPTION);
       setAvailablePlans([]);
+      setError(null);
       setIsLoading(false);
       return;
     }
@@ -209,7 +254,7 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
     } finally {
       setIsLoading(false);
     }
-  }, [apiBaseUrl, entityId, accessToken]);
+  }, [apiBaseUrl, entityId, accessToken, whiteLabel.isLoading, whiteLabel.slug]);
 
   useEffect(() => {
     fetchSubscription();
@@ -236,13 +281,14 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       if (resource !== "documents") return false;
 
       const { usage, plan } = subscription;
-      const limit = plan.limits?.documents_per_month;
+      const limit = plan.limits?.invoices_per_month ?? plan.limits?.documents_per_month;
+      const count = plan.limits?.invoices_per_month != null ? usage.invoices_count : usage.documents_count;
 
       if (limit === null || limit === undefined) {
         return false; // No limit = never over
       }
 
-      return usage.documents_count >= limit;
+      return count >= limit;
     },
     [subscription],
   );
@@ -253,13 +299,14 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       if (resource !== "documents") return 0;
 
       const { usage, plan } = subscription;
-      const limit = plan.limits?.documents_per_month;
+      const limit = plan.limits?.invoices_per_month ?? plan.limits?.documents_per_month;
+      const count = plan.limits?.invoices_per_month != null ? usage.invoices_count : usage.documents_count;
 
       if (limit === null || limit === undefined || limit === 0) {
         return 0; // No limit = 0%
       }
 
-      return Math.min(100, Math.round((usage.documents_count / limit) * 100));
+      return Math.min(100, Math.round((count / limit) * 100));
     },
     [subscription],
   );
@@ -271,12 +318,98 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
         throw new Error("Not authenticated");
       }
 
-      const url = new URL(`/app/${entityId}/settings/billing`, window.location.origin);
+      const url = new URL(`/app/${entityId}/subscription`, window.location.origin);
+      if (entitiesContext?.environment === "sandbox") {
+        url.searchParams.set("env", "sandbox");
+      }
       url.searchParams.set("plan", planSlug);
       url.searchParams.set("interval", billingInterval);
       return url.toString();
     },
-    [entityId, accessToken],
+    [entityId, accessToken, entitiesContext?.environment],
+  );
+
+  const createSetupIntent = useCallback(async (): Promise<{ client_secret: string }> => {
+    if (!entityId || !accessToken) {
+      throw new Error("Not authenticated");
+    }
+
+    const response = await fetch(`${apiBaseUrl}/white-label-subscriptions/setup-intent`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "x-entity-id": entityId,
+        ...getClientHeaders("ui"),
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(errorData.message || `Failed to create setup intent: ${response.status}`);
+    }
+
+    return response.json();
+  }, [apiBaseUrl, entityId, accessToken]);
+
+  const savePaymentMethod = useCallback(
+    async (paymentMethodId: string): Promise<void> => {
+      if (!entityId || !accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      const response = await fetch(`${apiBaseUrl}/white-label-subscriptions/payment-method`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "x-entity-id": entityId,
+          ...getClientHeaders("ui"),
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ payment_method_id: paymentMethodId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || `Failed to save payment method: ${response.status}`);
+      }
+    },
+    [apiBaseUrl, entityId, accessToken],
+  );
+
+  const activateSubscription = useCallback(
+    async (
+      planSlug: string,
+      billingInterval: "monthly" | "yearly",
+      couponCode?: string | null,
+    ): Promise<{ invoice_id?: string | null; scheduled?: boolean }> => {
+      if (!entityId || !accessToken) {
+        throw new Error("Not authenticated");
+      }
+
+      const response = await fetch(`${apiBaseUrl}/white-label-subscriptions/activate`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "x-entity-id": entityId,
+          ...getClientHeaders("ui"),
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          plan_slug: planSlug,
+          billing_interval: billingInterval,
+          ...(couponCode !== undefined ? { coupon_code: couponCode } : {}),
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || `Failed to activate subscription: ${response.status}`);
+      }
+
+      return response.json();
+    },
+    [apiBaseUrl, entityId, accessToken],
   );
 
   // Compute trial state
@@ -316,6 +449,9 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       isOverLimit,
       getUsagePercentage,
       createCheckout,
+      createSetupIntent,
+      savePaymentMethod,
+      activateSubscription,
       refresh: fetchSubscription,
     }),
     [
@@ -331,6 +467,9 @@ export function WLSubscriptionProvider({ children, apiBaseUrl }: WLSubscriptionP
       isOverLimit,
       getUsagePercentage,
       createCheckout,
+      createSetupIntent,
+      savePaymentMethod,
+      activateSubscription,
       fetchSubscription,
     ],
   );