@buildbase/sdk 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -0
- package/dist/index.d.ts +148 -3
- package/dist/index.esm.js +4 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/saas-os.css +1 -1
- package/dist/types/api/types.d.ts +43 -0
- package/dist/types/components/pricing/PricingPage.d.ts +47 -0
- package/dist/types/components/pricing/index.d.ts +2 -0
- package/dist/types/index.d.ts +4 -2
- package/dist/types/providers/auth/hooks.d.ts +2 -1
- package/dist/types/providers/workspace/api.d.ts +16 -3
- package/dist/types/providers/workspace/subscription-hooks.d.ts +54 -1
- package/dist/types/providers/workspace/types.d.ts +2 -1
- package/dist/types/providers/workspace/ui/SettingsInvoices.d.ts +12 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ A React SDK for [BuildBase](https://www.buildbase.app/) that provides essential
|
|
|
12
12
|
- [Feature Flags](#️-feature-flags)
|
|
13
13
|
- [User Management](#-user-management)
|
|
14
14
|
- [Workspace Management](#-complete-workspace-management)
|
|
15
|
+
- [Public Pricing (No Login)](#-public-pricing-no-login)
|
|
15
16
|
- [Beta Form Component](#-beta-form-component)
|
|
16
17
|
- [Event System](#-event-system)
|
|
17
18
|
- [Error Handling](#️-error-handling)
|
|
@@ -406,6 +407,71 @@ function WorkspaceManager() {
|
|
|
406
407
|
}
|
|
407
408
|
```
|
|
408
409
|
|
|
410
|
+
## 💰 Public Pricing (No Login)
|
|
411
|
+
|
|
412
|
+
Display subscription plans and pricing on public pages (e.g. marketing site, pricing page) without requiring users to log in.
|
|
413
|
+
|
|
414
|
+
### usePublicPlans
|
|
415
|
+
|
|
416
|
+
Fetches public plans by slug. Returns `items` (features, limits, quotas) and `plans` (with pricing). You construct the layout from this data:
|
|
417
|
+
|
|
418
|
+
```tsx
|
|
419
|
+
import { usePublicPlans } from '@buildbase/sdk';
|
|
420
|
+
|
|
421
|
+
function PublicPricingPage() {
|
|
422
|
+
const { items, plans, loading, error } = usePublicPlans('main-pricing');
|
|
423
|
+
|
|
424
|
+
if (loading) return <Loading />;
|
|
425
|
+
if (error) return <Error message={error} />;
|
|
426
|
+
|
|
427
|
+
return (
|
|
428
|
+
<div>
|
|
429
|
+
{plans.map(plan => (
|
|
430
|
+
<PlanCard key={plan._id} plan={plan} items={items} />
|
|
431
|
+
))}
|
|
432
|
+
</div>
|
|
433
|
+
);
|
|
434
|
+
}
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
### PricingPage Component
|
|
438
|
+
|
|
439
|
+
Use the `PricingPage` component with a render-prop pattern:
|
|
440
|
+
|
|
441
|
+
```tsx
|
|
442
|
+
import { PricingPage } from '@buildbase/sdk';
|
|
443
|
+
|
|
444
|
+
function PublicPricingPage() {
|
|
445
|
+
return (
|
|
446
|
+
<PricingPage slug="main-pricing">
|
|
447
|
+
{({ loading, error, items, plans, refetch }) => {
|
|
448
|
+
if (loading) return <Loading />;
|
|
449
|
+
if (error) return <Error message={error} />;
|
|
450
|
+
|
|
451
|
+
return (
|
|
452
|
+
<div>
|
|
453
|
+
{plans.map(plan => (
|
|
454
|
+
<PlanCard key={plan._id} plan={plan} items={items} />
|
|
455
|
+
))}
|
|
456
|
+
</div>
|
|
457
|
+
);
|
|
458
|
+
}}
|
|
459
|
+
</PricingPage>
|
|
460
|
+
);
|
|
461
|
+
}
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
| Prop | Type | Description |
|
|
465
|
+
|------|------|-------------|
|
|
466
|
+
| `slug` | `string` | Plan group slug (e.g. 'main-pricing', 'enterprise') |
|
|
467
|
+
| `children` | `(details) => ReactNode` | Render prop receiving `{ loading, error, items, plans, refetch }` |
|
|
468
|
+
| `loadingFallback` | `ReactNode` | Custom loading UI (defaults to skeleton) |
|
|
469
|
+
| `errorFallback` | `(error: string) => ReactNode` | Custom error UI |
|
|
470
|
+
|
|
471
|
+
**Response shape**: `items` = subscription item definitions (features, limits, quotas with category); `plans` = plan versions with `pricing`, `quotas`, `features`, `limits`.
|
|
472
|
+
|
|
473
|
+
**Backend requirement**: `GET /api/v1/public/{orgId}/plans/{groupSlug}` must be implemented and allow unauthenticated access.
|
|
474
|
+
|
|
409
475
|
## 📝 Beta Form Component
|
|
410
476
|
|
|
411
477
|
Use the pre-built `BetaForm` component for signup/waitlist forms:
|
package/dist/index.d.ts
CHANGED
|
@@ -27,6 +27,12 @@ interface ISubscription {
|
|
|
27
27
|
cancelAtPeriodEnd: boolean;
|
|
28
28
|
createdAt: string;
|
|
29
29
|
updatedAt: string;
|
|
30
|
+
plan?: {
|
|
31
|
+
_id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
slug: string;
|
|
34
|
+
description?: string;
|
|
35
|
+
};
|
|
30
36
|
}
|
|
31
37
|
interface ISubscriptionItem {
|
|
32
38
|
_id: string;
|
|
@@ -205,10 +211,47 @@ interface ISubscriptionUpdateResponse {
|
|
|
205
211
|
createdAt: string;
|
|
206
212
|
updatedAt: string;
|
|
207
213
|
}
|
|
214
|
+
interface IPublicPlanItemCategory {
|
|
215
|
+
name: string;
|
|
216
|
+
slug: string;
|
|
217
|
+
}
|
|
218
|
+
interface IPublicPlanItem {
|
|
219
|
+
_id: string;
|
|
220
|
+
name: string;
|
|
221
|
+
slug: string;
|
|
222
|
+
description: string;
|
|
223
|
+
type: 'feature' | 'limit' | 'quota';
|
|
224
|
+
category: IPublicPlanItemCategory;
|
|
225
|
+
}
|
|
226
|
+
interface IPublicPlanPricing {
|
|
227
|
+
monthly: number;
|
|
228
|
+
yearly: number;
|
|
229
|
+
quarterly: number;
|
|
230
|
+
}
|
|
231
|
+
interface IPublicPlanQuotaValue {
|
|
232
|
+
included: number;
|
|
233
|
+
overage: number;
|
|
234
|
+
stripePriceId?: string;
|
|
235
|
+
}
|
|
236
|
+
interface IPublicPlanVersion {
|
|
237
|
+
_id: string;
|
|
238
|
+
name: string;
|
|
239
|
+
version: number;
|
|
240
|
+
status: 'draft' | 'published';
|
|
241
|
+
pricing: IPublicPlanPricing;
|
|
242
|
+
quotas: Record<string, IPublicPlanQuotaValue>;
|
|
243
|
+
features: Record<string, boolean>;
|
|
244
|
+
limits: Record<string, number>;
|
|
245
|
+
}
|
|
246
|
+
interface IPublicPlansResponse {
|
|
247
|
+
items: IPublicPlanItem[];
|
|
248
|
+
plans: IPublicPlanVersion[];
|
|
249
|
+
}
|
|
208
250
|
type InvoiceStatus = 'draft' | 'open' | 'paid' | 'uncollectible' | 'void';
|
|
209
251
|
interface IInvoice {
|
|
210
252
|
id: string;
|
|
211
253
|
amount_due: number;
|
|
254
|
+
number: string | null;
|
|
212
255
|
amount_paid: number;
|
|
213
256
|
currency: string;
|
|
214
257
|
status: InvoiceStatus;
|
|
@@ -238,6 +281,7 @@ interface IWorkspace {
|
|
|
238
281
|
roles: string[];
|
|
239
282
|
createdBy: string | IUser;
|
|
240
283
|
features: Record<string, boolean>;
|
|
284
|
+
subscription?: ISubscription | null;
|
|
241
285
|
}
|
|
242
286
|
interface IWorkspaceFeature {
|
|
243
287
|
_id: string;
|
|
@@ -422,6 +466,52 @@ interface BetaFormProps {
|
|
|
422
466
|
}
|
|
423
467
|
declare const BetaForm: react__default.FC<BetaFormProps>;
|
|
424
468
|
|
|
469
|
+
interface PricingPageDetails {
|
|
470
|
+
/** Whether plan data is being fetched */
|
|
471
|
+
loading: boolean;
|
|
472
|
+
/** Error message if fetch failed */
|
|
473
|
+
error: string | null;
|
|
474
|
+
/** Subscription items (features, limits, quotas) */
|
|
475
|
+
items: IPublicPlanItem[];
|
|
476
|
+
/** Plan versions with pricing, features, limits, quotas */
|
|
477
|
+
plans: IPublicPlanVersion[];
|
|
478
|
+
/** Refetch plan data */
|
|
479
|
+
refetch: () => Promise<void>;
|
|
480
|
+
}
|
|
481
|
+
interface PricingPageProps {
|
|
482
|
+
/** Plan group slug (e.g. 'main-pricing', 'enterprise') */
|
|
483
|
+
slug: string;
|
|
484
|
+
/** Render prop receiving plan details - construct layout from items and plans */
|
|
485
|
+
children: (details: PricingPageDetails) => ReactNode;
|
|
486
|
+
/** Custom loading UI. Defaults to skeleton. */
|
|
487
|
+
loadingFallback?: ReactNode;
|
|
488
|
+
/** Custom error UI. Receives error message. */
|
|
489
|
+
errorFallback?: (error: string) => ReactNode;
|
|
490
|
+
}
|
|
491
|
+
/**
|
|
492
|
+
* Fetches and provides plan/pricing details for public pricing pages (no login required).
|
|
493
|
+
* Returns items (features, limits, quotas) and plans (with pricing) - user constructs layout.
|
|
494
|
+
*
|
|
495
|
+
* @example
|
|
496
|
+
* ```tsx
|
|
497
|
+
* <PricingPage slug="main-pricing">
|
|
498
|
+
* {({ loading, error, items, plans, refetch }) => {
|
|
499
|
+
* if (loading) return <Loading />;
|
|
500
|
+
* if (error) return <Error message={error} />;
|
|
501
|
+
*
|
|
502
|
+
* return (
|
|
503
|
+
* <div>
|
|
504
|
+
* {plans.map(plan => (
|
|
505
|
+
* <PlanCard key={plan._id} plan={plan} items={items} />
|
|
506
|
+
* ))}
|
|
507
|
+
* </div>
|
|
508
|
+
* );
|
|
509
|
+
* }}
|
|
510
|
+
* </PricingPage>
|
|
511
|
+
* ```
|
|
512
|
+
*/
|
|
513
|
+
declare function PricingPage({ slug, children, loadingFallback, errorFallback, }: PricingPageProps): react_jsx_runtime.JSX.Element;
|
|
514
|
+
|
|
425
515
|
interface IProps$2 {
|
|
426
516
|
children: React.ReactNode;
|
|
427
517
|
}
|
|
@@ -688,6 +778,8 @@ declare const WhenUserFeatureEnabled: (props: IProps) => react.ReactNode;
|
|
|
688
778
|
*/
|
|
689
779
|
declare const WhenUserFeatureDisabled: (props: IProps) => react.ReactNode;
|
|
690
780
|
|
|
781
|
+
type WorkspaceSettingsSection = 'profile' | 'general' | 'users' | 'subscription' | 'features' | 'danger';
|
|
782
|
+
|
|
691
783
|
/**
|
|
692
784
|
* Main authentication hook for the SDK.
|
|
693
785
|
* Provides authentication state, user session, and auth actions.
|
|
@@ -752,7 +844,7 @@ declare const WhenUserFeatureDisabled: (props: IProps) => react.ReactNode;
|
|
|
752
844
|
declare function useSaaSAuth(): {
|
|
753
845
|
signIn: () => Promise<void>;
|
|
754
846
|
signOut: () => Promise<void>;
|
|
755
|
-
openWorkspaceSettings: (section?:
|
|
847
|
+
openWorkspaceSettings: (section?: WorkspaceSettingsSection) => void;
|
|
756
848
|
isAuthenticated: boolean;
|
|
757
849
|
isLoading: boolean;
|
|
758
850
|
isRedirecting: boolean;
|
|
@@ -1050,6 +1142,59 @@ declare function WorkspaceSwitcher(props: {
|
|
|
1050
1142
|
trigger: (isLoading: boolean, currentWorkspace: IWorkspace | null) => ReactNode;
|
|
1051
1143
|
}): react_jsx_runtime.JSX.Element;
|
|
1052
1144
|
|
|
1145
|
+
/**
|
|
1146
|
+
* Hook to get public plans by slug (no auth required).
|
|
1147
|
+
* Returns items (features, limits, quotas) and plans (with pricing).
|
|
1148
|
+
* Uses orgId from SaaSOSProvider - must be inside provider.
|
|
1149
|
+
*
|
|
1150
|
+
* @param slug - Plan group slug (e.g. 'main-pricing', 'enterprise')
|
|
1151
|
+
* @returns { items, plans, loading, error, refetch }
|
|
1152
|
+
*/
|
|
1153
|
+
declare const usePublicPlans: (slug: string) => {
|
|
1154
|
+
items: IPublicPlanItem[];
|
|
1155
|
+
plans: IPublicPlanVersion[];
|
|
1156
|
+
loading: boolean;
|
|
1157
|
+
error: string | null;
|
|
1158
|
+
refetch: () => Promise<void>;
|
|
1159
|
+
};
|
|
1160
|
+
/**
|
|
1161
|
+
* Hook to get a single plan group version by ID (no auth required).
|
|
1162
|
+
* Use this for public pricing pages when you have the groupVersionId (e.g. from config or URL).
|
|
1163
|
+
*
|
|
1164
|
+
* @param groupVersionId - The plan group version ID to fetch. Pass null/undefined to disable fetching.
|
|
1165
|
+
* @returns An object containing:
|
|
1166
|
+
* - `planGroupVersion`: Plan group version data (null if not loaded)
|
|
1167
|
+
* - `loading`: Boolean indicating if data is being fetched
|
|
1168
|
+
* - `error`: Error message string (null if no error)
|
|
1169
|
+
* - `refetch()`: Function to manually refetch
|
|
1170
|
+
*
|
|
1171
|
+
* @example
|
|
1172
|
+
* ```tsx
|
|
1173
|
+
* function PublicPricingPage() {
|
|
1174
|
+
* const groupVersionId = 'your-plan-group-version-id'; // from config or URL
|
|
1175
|
+
* const { planGroupVersion, loading } = usePublicPlanGroupVersion(groupVersionId);
|
|
1176
|
+
*
|
|
1177
|
+
* if (loading) return <Loading />;
|
|
1178
|
+
* if (!planGroupVersion) return null;
|
|
1179
|
+
*
|
|
1180
|
+
* const plans = Array.isArray(planGroupVersion.planVersionIds)
|
|
1181
|
+
* ? planGroupVersion.planVersionIds.filter((p): p is IPlanVersionWithPlan => typeof p !== 'string')
|
|
1182
|
+
* : [];
|
|
1183
|
+
*
|
|
1184
|
+
* return (
|
|
1185
|
+
* <div>
|
|
1186
|
+
* {plans.map(plan => <PlanCard key={plan._id} plan={plan} />)}
|
|
1187
|
+
* </div>
|
|
1188
|
+
* );
|
|
1189
|
+
* }
|
|
1190
|
+
* ```
|
|
1191
|
+
*/
|
|
1192
|
+
declare const usePublicPlanGroupVersion: (groupVersionId: string | null | undefined) => {
|
|
1193
|
+
planGroupVersion: IPlanGroupVersion | null;
|
|
1194
|
+
loading: boolean;
|
|
1195
|
+
error: string | null;
|
|
1196
|
+
refetch: () => Promise<void>;
|
|
1197
|
+
};
|
|
1053
1198
|
/**
|
|
1054
1199
|
* Hook to get and manage the current subscription for a workspace.
|
|
1055
1200
|
* Automatically fetches subscription when workspaceId changes.
|
|
@@ -1558,5 +1703,5 @@ declare class EventEmitter {
|
|
|
1558
1703
|
}
|
|
1559
1704
|
declare const eventEmitter: EventEmitter;
|
|
1560
1705
|
|
|
1561
|
-
export { ApiVersion, AuthStatus, BetaForm, SaaSOSProvider, WhenAuthenticated, WhenRoles, WhenUnauthenticated, WhenUserFeatureDisabled, WhenUserFeatureEnabled, WhenWorkspaceFeatureDisabled, WhenWorkspaceFeatureEnabled, WhenWorkspaceRoles, WorkspaceSwitcher, eventEmitter, useCreateCheckoutSession, useInvoice, useInvoices, usePlanGroup, usePlanGroupVersions, useSaaSAuth, useSaaSSettings, useSaaSWorkspaces, useSubscription, useSubscriptionManagement, useUpdateSubscription, useUserAttributes, useUserFeatures };
|
|
1562
|
-
export type { BillingInterval, EventData, EventType, IBasePricing, ICheckoutSessionRequest, ICheckoutSessionResponse, IEventCallbacks, IInvoice, IInvoiceListResponse, IInvoiceResponse, IPlan, IPlanGroup, IPlanGroupLatestVersion, IPlanGroupResponse, IPlanGroupVersion, IPlanGroupVersionWithPlans, IPlanGroupVersionsResponse, IPlanVersion, IPlanVersionWithPlan, IQuotaValue, ISubscription, ISubscriptionItem, ISubscriptionResponse, ISubscriptionUpdateRequest, ISubscriptionUpdateResponse, InvoiceStatus, OnWorkspaceChangeParams, UserCreatedEventData, UserUpdatedEventData, WorkspaceChangedEventData, WorkspaceCreatedEventData, WorkspaceDeletedEventData, WorkspaceUpdatedEventData, WorkspaceUserAddedEventData, WorkspaceUserRemovedEventData, WorkspaceUserRoleChangedEventData };
|
|
1706
|
+
export { ApiVersion, AuthStatus, BetaForm, PricingPage, SaaSOSProvider, WhenAuthenticated, WhenRoles, WhenUnauthenticated, WhenUserFeatureDisabled, WhenUserFeatureEnabled, WhenWorkspaceFeatureDisabled, WhenWorkspaceFeatureEnabled, WhenWorkspaceRoles, WorkspaceSwitcher, eventEmitter, useCreateCheckoutSession, useInvoice, useInvoices, usePlanGroup, usePlanGroupVersions, usePublicPlanGroupVersion, usePublicPlans, useSaaSAuth, useSaaSSettings, useSaaSWorkspaces, useSubscription, useSubscriptionManagement, useUpdateSubscription, useUserAttributes, useUserFeatures };
|
|
1707
|
+
export type { BillingInterval, EventData, EventType, IBasePricing, ICheckoutSessionRequest, ICheckoutSessionResponse, IEventCallbacks, IInvoice, IInvoiceListResponse, IInvoiceResponse, IPlan, IPlanGroup, IPlanGroupLatestVersion, IPlanGroupResponse, IPlanGroupVersion, IPlanGroupVersionWithPlans, IPlanGroupVersionsResponse, IPlanVersion, IPlanVersionWithPlan, IPublicPlanItem, IPublicPlanItemCategory, IPublicPlanPricing, IPublicPlanQuotaValue, IPublicPlanVersion, IPublicPlansResponse, IQuotaValue, ISubscription, ISubscriptionItem, ISubscriptionResponse, ISubscriptionUpdateRequest, ISubscriptionUpdateResponse, InvoiceStatus, OnWorkspaceChangeParams, PricingPageDetails, PricingPageProps, UserCreatedEventData, UserUpdatedEventData, WorkspaceChangedEventData, WorkspaceCreatedEventData, WorkspaceDeletedEventData, WorkspaceUpdatedEventData, WorkspaceUserAddedEventData, WorkspaceUserRemovedEventData, WorkspaceUserRoleChangedEventData };
|