Files
myeasycms-v2/apps/web/content/documentation/billing/pricing-plans.mdoc
Giancarlo Buomprisco 116d41a284 Changelog (#399)
* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.
2025-11-01 11:59:52 +07:00

187 lines
3.5 KiB
Plaintext

---
title: "Pricing Plans"
description: "How to configure and customize pricing plans for your SaaS application."
publishedAt: 2024-04-11
order: 1
status: "published"
---
> **Note:** This is mock/placeholder content for demonstration purposes.
Configure your pricing structure to match your business model.
## Plan Structure
Each pricing plan consists of:
- **ID** - Unique identifier
- **Name** - Display name
- **Price** - Amount in your currency
- **Interval** - Billing frequency (month, year)
- **Features** - List of included features
- **Limits** - Usage constraints
## Example Configuration
```typescript
// config/billing.config.ts
export const billingConfig = {
provider: 'stripe', // or 'paddle'
currency: 'usd',
plans: [
{
id: 'free',
name: 'Free',
description: 'Perfect for getting started',
price: 0,
features: [
'5 projects',
'Basic analytics',
'Community support',
],
limits: {
projects: 5,
members: 1,
},
},
{
id: 'starter',
name: 'Starter',
description: 'For small teams',
price: 19,
interval: 'month',
features: [
'25 projects',
'Advanced analytics',
'Email support',
'API access',
],
limits: {
projects: 25,
members: 5,
},
},
{
id: 'pro',
name: 'Professional',
description: 'For growing businesses',
price: 49,
interval: 'month',
popular: true,
features: [
'Unlimited projects',
'Advanced analytics',
'Priority support',
'API access',
'Custom integrations',
],
limits: {
projects: -1, // unlimited
members: 20,
},
},
],
};
```
## Feature Gating
Restrict features based on subscription plan:
```typescript
import { hasFeature } from '~/lib/billing/features';
async function createProject() {
const subscription = await getSubscription(accountId);
if (!hasFeature(subscription, 'api_access')) {
throw new Error('API access requires Pro plan');
}
// Create project
}
```
## Usage Limits
Enforce usage limits per plan:
```typescript
import { checkLimit } from '~/lib/billing/limits';
async function addTeamMember() {
const canAdd = await checkLimit(accountId, 'members');
if (!canAdd) {
throw new Error('Member limit reached. Upgrade to add more members.');
}
// Add member
}
```
## Annual Billing
Offer discounted annual plans:
```typescript
{
id: 'pro-annual',
name: 'Professional Annual',
price: 470, // ~20% discount
interval: 'year',
discount: '20% off',
features: [ /* same as monthly */ ],
}
```
## Trial Periods
Configure free trial periods:
```typescript
export const trialConfig = {
enabled: true,
duration: 14, // days
plans: ['starter', 'pro'], // plans eligible for trial
requirePaymentMethod: true,
};
```
## Customizing the Pricing Page
The pricing page automatically generates from your configuration:
```tsx
import { billingConfig } from '~/config/billing.config';
export default function PricingPage() {
return (
<PricingTable
plans={billingConfig.plans}
currency={billingConfig.currency}
/>
);
}
```
## Adding Custom Features
Extend plan features with custom attributes:
```typescript
{
id: 'enterprise',
name: 'Enterprise',
price: null, // Contact for pricing
custom: true,
features: [
'Everything in Pro',
'Dedicated support',
'Custom SLA',
'On-premise deployment',
],
ctaText: 'Contact Sales',
ctaUrl: '/contact',
}
```