zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changelog (#399)

Browse Source 
* 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
2025-11-01 11:59:52 +07:00
committed by GitHub
parent a920dea2b3
commit 116d41a284
73 changed files with 5638 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/content/documentation/billing/billing.mdoc Normal file
View File

@@ -0,0 +1,15 @@
---
title: "Billing & Payments"
description: "Learn how to set up billing and payment processing in your MakerKit application."
publishedAt: 2024-04-11
order: 5
status: "published"
---
MakerKit integrates with popular payment providers to handle subscriptions and billing.
This section covers:
- Setting up payment providers
- Managing subscriptions
- Handling webhooks
- Pricing plans and tiers

186
apps/web/content/documentation/billing/pricing-plans.mdoc Normal file
View 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',
}
```

143
apps/web/content/documentation/billing/subscriptions.mdoc Normal file
View File

@@ -0,0 +1,143 @@
---
title: "Billing Overview"
description: "Learn how to manage subscriptions and billing in your application."
publishedAt: 2024-04-11
order: 0
status: "published"
---
> **Note:** This is mock/placeholder content for demonstration purposes.
The billing system supports subscription-based pricing with multiple tiers and payment providers.
## Supported Providers
### Stripe
Industry-standard payment processing with comprehensive features:
- Credit card payments
- Subscription management
- Invoice generation
- Tax calculation
- Customer portal
### Paddle
Merchant of record solution that handles:
- Global tax compliance
- Payment processing
- Subscription billing
- Revenue recovery
## Subscription Tiers
Define your subscription tiers in the billing configuration:
```typescript
export const plans = [
{
id: 'free',
name: 'Free',
price: 0,
features: ['Feature 1', 'Feature 2'],
},
{
id: 'pro',
name: 'Professional',
price: 29,
interval: 'month',
features: ['All Free features', 'Feature 3', 'Feature 4'],
},
{
id: 'enterprise',
name: 'Enterprise',
price: 99,
interval: 'month',
features: ['All Pro features', 'Feature 5', 'Priority support'],
},
];
```
## Subscription Lifecycle
1. **Customer selects plan** - User chooses subscription tier
2. **Payment processed** - Provider handles payment collection
3. **Webhook received** - Your app receives confirmation
4. **Subscription activated** - User gains access to features
5. **Recurring billing** - Automatic renewal each period
6. **Cancellation** - User can cancel anytime
## Managing Subscriptions
### Creating a Subscription
```typescript
import { createCheckoutSession } from '~/lib/billing/checkout';
const session = await createCheckoutSession({
accountId: user.accountId,
planId: 'pro',
returnUrl: '/dashboard',
});
// Redirect user to payment page
redirect(session.url);
```
### Checking Subscription Status
```typescript
import { getSubscription } from '~/lib/billing/subscription';
const subscription = await getSubscription(accountId);
if (subscription.status === 'active') {
// User has active subscription
}
```
### Canceling a Subscription
```typescript
import { cancelSubscription } from '~/lib/billing/subscription';
await cancelSubscription(subscriptionId);
```
## Webhook Handling
Webhooks notify your application of billing events:
```typescript
export async function POST(request: Request) {
const signature = request.headers.get('stripe-signature');
const payload = await request.text();
const event = stripe.webhooks.constructEvent(
payload,
signature,
process.env.STRIPE_WEBHOOK_SECRET
);
switch (event.type) {
case 'customer.subscription.created':
await handleSubscriptionCreated(event.data.object);
break;
case 'customer.subscription.updated':
await handleSubscriptionUpdated(event.data.object);
break;
case 'customer.subscription.deleted':
await handleSubscriptionCanceled(event.data.object);
break;
}
return new Response('OK');
}
```
## Testing
Use test mode credentials for development:
- Test card: 4242 4242 4242 4242
- Any future expiry date
- Any CVC
All test transactions will appear in your provider's test dashboard.

194
apps/web/content/documentation/billing/webhooks.mdoc Normal file
View File

@@ -0,0 +1,194 @@
---
title: "Webhook Integration"
description: "Setting up and handling payment provider webhooks for subscription events."
publishedAt: 2024-04-11
order: 2
status: "published"
---
> **Note:** This is mock/placeholder content for demonstration purposes.
Webhooks notify your application when billing events occur, ensuring your app stays synchronized with your payment provider.
## Why Webhooks?
Webhooks are essential for:
- **Real-time updates** - Instant notification of payment events
- **Reliability** - Handles events even if users close their browser
- **Security** - Server-to-server communication
- **Automation** - Automatic subscription status updates
## Webhook Endpoint
Your webhook endpoint receives events from the payment provider:
```typescript
// app/api/billing/webhook/route.ts
export async function POST(request: Request) {
const body = await request.text();
const signature = request.headers.get('stripe-signature');
// Verify webhook signature
const event = stripe.webhooks.constructEvent(
body,
signature,
process.env.STRIPE_WEBHOOK_SECRET
);
// Handle the event
await handleBillingEvent(event);
return new Response('OK', { status: 200 });
}
```
## Common Events
### Subscription Created
```typescript
case 'customer.subscription.created':
await prisma.subscription.create({
data: {
id: event.data.object.id,
accountId: event.data.object.metadata.accountId,
status: 'active',
planId: event.data.object.items.data[0].price.id,
currentPeriodEnd: new Date(event.data.object.current_period_end * 1000),
},
});
break;
```
### Subscription Updated
```typescript
case 'customer.subscription.updated':
await prisma.subscription.update({
where: { id: event.data.object.id },
data: {
status: event.data.object.status,
planId: event.data.object.items.data[0].price.id,
currentPeriodEnd: new Date(event.data.object.current_period_end * 1000),
},
});
break;
```
### Subscription Deleted
```typescript
case 'customer.subscription.deleted':
await prisma.subscription.update({
where: { id: event.data.object.id },
data: {
status: 'canceled',
canceledAt: new Date(),
},
});
break;
```
### Payment Failed
```typescript
case 'invoice.payment_failed':
const subscription = await prisma.subscription.findUnique({
where: { id: event.data.object.subscription },
});
// Send payment failure notification
await sendPaymentFailureEmail(subscription.accountId);
break;
```
## Setting Up Webhooks
### Stripe
1. **Local Development** (using Stripe CLI):
```bash
stripe listen --forward-to localhost:3000/api/billing/webhook
```
2. **Production**:
- Go to Stripe Dashboard → Developers → Webhooks
- Add endpoint: `https://yourdomain.com/api/billing/webhook`
- Select events to listen to
- Copy webhook signing secret to your `.env`
### Paddle
1. **Configure webhook URL** in Paddle dashboard
2. **Add webhook secret** to environment variables
3. **Verify webhook signature**:
```typescript
const signature = request.headers.get('paddle-signature');
const verified = paddle.webhooks.verify(body, signature);
if (!verified) {
return new Response('Invalid signature', { status: 401 });
}
```
## Security Best Practices
1. **Always verify signatures** - Prevents unauthorized requests
2. **Use HTTPS** - Encrypts webhook data in transit
3. **Validate event data** - Check for required fields
4. **Handle idempotently** - Process duplicate events safely
5. **Return 200 quickly** - Acknowledge receipt, process async
## Error Handling
```typescript
async function handleBillingEvent(event: Event) {
try {
await processEvent(event);
} catch (error) {
// Log error for debugging
console.error('Webhook error:', error);
// Store failed event for retry
await prisma.failedWebhook.create({
data: {
eventId: event.id,
type: event.type,
payload: event,
error: error.message,
},
});
// Throw to trigger provider retry
throw error;
}
}
```
## Testing Webhooks
### Using Provider's CLI Tools
```bash
# Stripe
stripe trigger customer.subscription.created
# Test specific scenarios
stripe trigger payment_intent.payment_failed
```
### Manual Testing
```bash
curl -X POST https://your-app.com/api/billing/webhook \
-H "Content-Type: application/json" \
-H "stripe-signature: test_signature" \
-d @test-event.json
```
## Monitoring
Track webhook delivery:
- Response times
- Success/failure rates
- Event processing duration
- Failed events requiring manual intervention
Most providers offer webhook monitoring dashboards showing delivery attempts and failures.