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.
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
a920dea2b3
commit
116d41a284
186
apps/web/content/documentation/billing/pricing-plans.mdoc
Normal file
186
apps/web/content/documentation/billing/pricing-plans.mdoc
Normal file
@@ -0,0 +1,186 @@
|
||||
---
|
||||
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',
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user