@buildbase/sdk 0.0.14 → 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 +137 -2
- package/dist/index.esm.js +3 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/saas-os.css +1 -1
- package/dist/types/api/types.d.ts +36 -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/workspace/api.d.ts +16 -3
- package/dist/types/providers/workspace/subscription-hooks.d.ts +54 -1
- 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
|
@@ -211,6 +211,42 @@ interface ISubscriptionUpdateResponse {
|
|
|
211
211
|
createdAt: string;
|
|
212
212
|
updatedAt: string;
|
|
213
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
|
+
}
|
|
214
250
|
type InvoiceStatus = 'draft' | 'open' | 'paid' | 'uncollectible' | 'void';
|
|
215
251
|
interface IInvoice {
|
|
216
252
|
id: string;
|
|
@@ -430,6 +466,52 @@ interface BetaFormProps {
|
|
|
430
466
|
}
|
|
431
467
|
declare const BetaForm: react__default.FC<BetaFormProps>;
|
|
432
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
|
+
|
|
433
515
|
interface IProps$2 {
|
|
434
516
|
children: React.ReactNode;
|
|
435
517
|
}
|
|
@@ -1060,6 +1142,59 @@ declare function WorkspaceSwitcher(props: {
|
|
|
1060
1142
|
trigger: (isLoading: boolean, currentWorkspace: IWorkspace | null) => ReactNode;
|
|
1061
1143
|
}): react_jsx_runtime.JSX.Element;
|
|
1062
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
|
+
};
|
|
1063
1198
|
/**
|
|
1064
1199
|
* Hook to get and manage the current subscription for a workspace.
|
|
1065
1200
|
* Automatically fetches subscription when workspaceId changes.
|
|
@@ -1568,5 +1703,5 @@ declare class EventEmitter {
|
|
|
1568
1703
|
}
|
|
1569
1704
|
declare const eventEmitter: EventEmitter;
|
|
1570
1705
|
|
|
1571
|
-
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 };
|
|
1572
|
-
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 };
|