-
- Taxonomy is a demo app.{" "}
- You can test the upgrade and won't be charged.
-
+
+ {/* FAQ or Additional Info */}
+
+
Frequently Asked Questions
+
+
+
Can I cancel anytime?
+
+ Yes, you can cancel your subscription at any time. You'll
+ continue to have access until the end of your billing period.
+
+
+
+
What happens when I upgrade?
+
+ You'll immediately get access to all Pro features. Your
+ billing will be prorated for the remainder of the month.
+
+
+
+
What payment methods do you accept?
+
+ We accept all major credit cards through Stripe, including Visa,
+ Mastercard, and American Express.
+
+
+
+
Is there a free trial?
+
+ The Free plan lets you try CalendarSync with 1 calendar and 1
+ destination. Upgrade to Pro when you're ready for more.
+
+
+
);
diff --git a/packages/web/config/subscriptions.ts b/packages/web/config/subscriptions.ts
index f56dc50..51e30e9 100644
--- a/packages/web/config/subscriptions.ts
+++ b/packages/web/config/subscriptions.ts
@@ -1,28 +1,52 @@
import { env } from "@/web-env";
-import { Plan } from "shared/src/types/plan";
+import { Plan, getPlanLimits } from "shared/src/types/plan";
import { assertNever } from "shared/src/utils";
import { SubscriptionPlan } from "types";
export const freePlan: SubscriptionPlan = {
name: "Free",
description:
- "The free plan is limited to 3 posts. Upgrade to the PRO plan for unlimited posts.",
+ "1 calendar, 1 destination, and daily sync. Perfect for getting started.",
stripePriceId: "",
};
export const proPlan: SubscriptionPlan = {
- name: "PRO",
- description: "The PRO plan has unlimited posts.",
+ name: "Pro",
+ description:
+ "Unlimited calendars, unlimited destinations, 15-minute sync, and priority support.",
stripePriceId: env.STRIPE_PRO_MONTHLY_PLAN_ID || "",
};
+export const PRO_PLAN_PRICE_MONTHLY = 8; // $8/month
+
export function planToSubscriptionPlan(plan: Plan): SubscriptionPlan {
switch (plan) {
case Plan.FREE:
return freePlan;
- case Plan.PAID:
+ case Plan.PRO:
return proPlan;
default:
assertNever(plan);
}
}
+
+export function getPlanFeatures(plan: Plan): string[] {
+ const limits = getPlanLimits(plan);
+
+ if (plan === Plan.FREE) {
+ return [
+ `${limits.maxCalendars} calendar connection`,
+ `${limits.maxDestinations} destination`,
+ "Daily sync",
+ "30-day history",
+ ];
+ }
+
+ return [
+ "Unlimited calendar connections",
+ "Unlimited destinations",
+ "15-minute sync interval",
+ "Unlimited history",
+ "Priority support",
+ ];
+}
diff --git a/packages/web/custom-components/icons.tsx b/packages/web/custom-components/icons.tsx
index 533eb64..838761d 100644
--- a/packages/web/custom-components/icons.tsx
+++ b/packages/web/custom-components/icons.tsx
@@ -18,6 +18,7 @@ import {
Pizza,
Plus,
Settings,
+ Sparkles,
SunMedium,
Trash,
Twitter,
@@ -72,4 +73,6 @@ export const Icons = {
),
twitter: Twitter,
check: Check,
+ x: X,
+ sparkles: Sparkles,
};
diff --git a/packages/web/custom-components/org-billing-form.tsx b/packages/web/custom-components/org-billing-form.tsx
index 5b62bd9..c35d438 100644
--- a/packages/web/custom-components/org-billing-form.tsx
+++ b/packages/web/custom-components/org-billing-form.tsx
@@ -2,8 +2,11 @@
import * as React from "react";
+import { getPlanFeatures, PRO_PLAN_PRICE_MONTHLY } from "@/config/subscriptions";
+import { Icons } from "@/custom-components/icons";
import { clientFetch } from "@/lib/fetch";
import { cn } from "components/lib/utils";
+import { Badge } from "components/ui/badge";
import { Button } from "components/ui/button";
import {
Card,
@@ -13,56 +16,239 @@ import {
CardHeader,
CardTitle,
} from "components/ui/card";
-import { Plan } from "shared/src/types/plan";
+import { Progress } from "components/ui/progress";
+import { Separator } from "components/ui/separator";
+import { Plan, isPaidPlan, getPlanLimits } from "shared/src/types/plan";
import { SubscriptionPlan } from "types";
interface BillingFormProps extends React.HTMLAttributes
{
orgName: string;
orgPlan: Plan;
subscriptionPlan: SubscriptionPlan;
+ currentPeriodEnd?: Date | null;
+ calendarsCount?: number;
+ destinationsCount?: number;
+}
+
+function formatDate(date: Date): string {
+ return new Intl.DateTimeFormat("en-US", {
+ month: "long",
+ day: "numeric",
+ year: "numeric",
+ }).format(date);
+}
+
+function formatSyncInterval(minutes: number): string {
+ if (minutes >= 1440) {
+ return "Daily";
+ } else if (minutes >= 60) {
+ const hours = Math.floor(minutes / 60);
+ return `Every ${hours} hour${hours === 1 ? "" : "s"}`;
+ } else {
+ return `Every ${minutes} minute${minutes === 1 ? "" : "s"}`;
+ }
}
export function OrgBillingForm({
orgName,
subscriptionPlan,
orgPlan,
+ currentPeriodEnd,
+ calendarsCount = 0,
+ destinationsCount = 0,
className,
...props
}: BillingFormProps) {
const [isLoading, setIsLoading] = React.useState(false);
+ const isPro = isPaidPlan(orgPlan);
+ const limits = getPlanLimits(orgPlan);
+ const features = getPlanFeatures(orgPlan);
- async function onSubmit(event) {
+ async function onSubmit(event: React.FormEvent) {
event.preventDefault();
clientFetch<{ url: string }>(`/api/orgs/${orgName}/stripe`, undefined, {
- beforeRequestStart: () => setIsLoading(!isLoading),
+ beforeRequestStart: () => setIsLoading(true),
afterRequestFinish: () => setIsLoading(false),
onRequestSuccess: (response) => {
- // Redirect to the Stripe session.
- // This could be a checkout page for initial upgrade.
- // Or portal to manage existing subscription.
window.location.href = response.url;
},
defaultErrorMessage: "Please refresh the page and try again.",
});
}
+ const calendarsProgress =
+ limits.maxCalendars === Infinity
+ ? 0
+ : (calendarsCount / limits.maxCalendars) * 100;
+ const destinationsProgress =
+ limits.maxDestinations === Infinity
+ ? 0
+ : (destinationsCount / limits.maxDestinations) * 100;
+
return (
-