Skip to content

Commit

Permalink
feat: add table compare plans
Browse files Browse the repository at this point in the history
  • Loading branch information
mickasmt committed Jun 23, 2024
1 parent 9cbb432 commit a76c942
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 34 deletions.
2 changes: 1 addition & 1 deletion app/(dashboard)/dashboard/billing/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { redirect } from "next/navigation";

import { BillingInfo } from "@/components/billing-info";
import { BillingInfo } from "@/components/pricing/billing-info";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
import { Icons } from "@/components/shared/icons";
Expand Down
6 changes: 4 additions & 2 deletions app/(marketing)/pricing/page.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { PricingCards } from "@/components/pricing-cards";
import { PricingFaq } from "@/components/pricing-faq";
import { getCurrentUser } from "@/lib/session";
import { getUserSubscriptionPlan } from "@/lib/subscription";
import { constructMetadata } from "@/lib/utils";
import { ComparePlans } from "@/components/pricing/compare-plans";
import { PricingCards } from "@/components/pricing/pricing-cards";
import { PricingFaq } from "@/components/pricing/pricing-faq";

export const metadata = constructMetadata({
title: "Pricing – SaaS Starter",
Expand All @@ -21,6 +22,7 @@ export default async function PricingPage() {
<div className="flex w-full flex-col gap-16 py-8 md:py-8">
<PricingCards userId={user?.id} subscriptionPlan={subscriptionPlan} />
<hr className="container" />
<ComparePlans />
<PricingFaq />
</div>
);
Expand Down
File renamed without changes.
86 changes: 86 additions & 0 deletions components/pricing/compare-plans.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { PlansRow } from "@/types";
import { CircleCheck, CircleHelp } from "lucide-react";

import { comparePlans, plansColumns } from "@/config/subscriptions";
import {
Tooltip,
TooltipContent,
TooltipPortal,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { HeaderSection } from "@/components/shared/header-section";
import MaxWidthWrapper from "@/components/shared/max-width-wrapper";

export function ComparePlans() {
const renderCell = (value: string | boolean | null) => {
if (value === null) return "—";
if (typeof value === "boolean")
return value ? <CircleCheck className="mx-auto size-6" /> : "—";
return value;
};

return (
<MaxWidthWrapper>
<HeaderSection
label="Plans"
title="Compare Our Plans"
subtitle="Find the perfect plan tailored for your business needs!"
/>

<TooltipProvider delayDuration={200} skipDelayDuration={0}>
<div className="my-10 overflow-x-scroll max-lg:mx-[-0.8rem] md:overflow-x-visible">
<table className="w-full table-fixed">
<thead>
<tr className="divide-x divide-border border">
<th className="sticky left-0 z-10 w-40 bg-accent p-5 md:w-1/4 lg:top-14"></th>
{plansColumns.map((col) => (
<th
key={col}
className="sticky z-10 w-40 bg-accent p-5 font-heading text-xl capitalize tracking-wide md:w-auto lg:top-14 lg:text-2xl"
>
{col}
</th>
))}
</tr>
</thead>
<tbody className="divide-x divide-border border">
{comparePlans.map((row: PlansRow, index: number) => (
<tr key={index} className="divide-x divide-border border">
<td
data-tip={row.tooltip ? row.tooltip : ""}
className="sticky left-0 bg-accent md:bg-transparent"
>
<div className="flex items-center justify-between space-x-2 p-4 font-medium">
<span>{row.feature}</span>
{row.tooltip && (
<Tooltip>
<TooltipTrigger>
<CircleHelp className="size-[18px] text-muted-foreground" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent className="max-w-80">
<p>{row.tooltip}</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
)}
</div>
</td>
{plansColumns.map((col) => (
<td
key={col}
className="p-4 text-center text-muted-foreground"
>
{renderCell(row[col])}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</TooltipProvider>
</MaxWidthWrapper>
);
}
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";

import { HeaderSection } from "./shared/header-section";
import { HeaderSection } from "../shared/header-section";

const pricingFaqData = [
{
Expand Down
6 changes: 4 additions & 2 deletions components/ui/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipPortal = TooltipPrimitive.Portal

const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
Expand All @@ -19,12 +21,12 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
"z-[99999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
className
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
export { Tooltip, TooltipTrigger, TooltipContent, TooltipPortal, TooltipProvider }
148 changes: 121 additions & 27 deletions config/subscriptions.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { SubscriptionPlan } from "types"
import { env } from "@/env.mjs"
import { PlansRow, SubscriptionPlan } from "types";
import { env } from "@/env.mjs";

export const pricingData: SubscriptionPlan[] = [
{
title: 'Starter',
description: 'For Beginners',
title: "Starter",
description: "For Beginners",
benefits: [
'Up to 100 monthly posts',
'Basic analytics and reporting',
'Access to standard templates',
"Up to 100 monthly posts",
"Basic analytics and reporting",
"Access to standard templates",
],
limitations: [
'No priority access to new features.',
'Limited customer support',
'No custom branding',
'Limited access to business resources.',
"No priority access to new features.",
"Limited customer support",
"No custom branding",
"Limited access to business resources.",
],
prices: {
monthly: 0,
Expand All @@ -26,18 +26,18 @@ export const pricingData: SubscriptionPlan[] = [
},
},
{
title: 'Pro',
description: 'Unlock Advanced Features',
title: "Pro",
description: "Unlock Advanced Features",
benefits: [
'Up to 500 monthly posts',
'Advanced analytics and reporting',
'Access to business templates',
'Priority customer support',
'Exclusive webinars and training.',
"Up to 500 monthly posts",
"Advanced analytics and reporting",
"Access to business templates",
"Priority customer support",
"Exclusive webinars and training.",
],
limitations: [
'No custom branding',
'Limited access to business resources.',
"No custom branding",
"Limited access to business resources.",
],
prices: {
monthly: 15,
Expand All @@ -49,14 +49,14 @@ export const pricingData: SubscriptionPlan[] = [
},
},
{
title: 'Business',
description: 'For Power Users',
title: "Business",
description: "For Power Users",
benefits: [
'Unlimited posts',
'Real-time analytics and reporting',
'Access to all templates, including custom branding',
'24/7 business customer support',
'Personalized onboarding and account management.',
"Unlimited posts",
"Real-time analytics and reporting",
"Access to all templates, including custom branding",
"24/7 business customer support",
"Personalized onboarding and account management.",
],
limitations: [],
prices: {
Expand All @@ -69,3 +69,97 @@ export const pricingData: SubscriptionPlan[] = [
},
},
];

export const plansColumns = [
"starter",
"pro",
"business",
"enterprise",
] as const;

export const comparePlans: PlansRow[] = [
{
feature: "Access to Basic Analytics",
starter: true,
pro: true,
business: true,
enterprise: "Custom",
tooltip: "All plans include basic analytics for tracking performance.",
},
{
feature: "Custom Branding",
starter: null,
pro: "500/mo",
business: "1,500/mo",
enterprise: "Unlimited",
tooltip: "Custom branding is available from the Pro plan onwards.",
},
{
feature: "Priority Support",
starter: null,
pro: "Email",
business: "Email & Chat",
enterprise: "24/7 Support",
tooltip: "Higher plans provide more extensive support options.",
},
{
feature: "Advanced Reporting",
starter: null,
pro: null,
business: true,
enterprise: "Custom",
tooltip:
"Advanced reporting is available in Business and Enterprise plans.",
},
{
feature: "Dedicated Manager",
starter: null,
pro: null,
business: null,
enterprise: true,
tooltip: "Enterprise plan includes a dedicated account manager.",
},
{
feature: "API Access",
starter: "Limited",
pro: "Standard",
business: "Enhanced",
enterprise: "Full",
tooltip: "API access varies by plan level.",
},
{
feature: "Monthly Webinars",
starter: false,
pro: true,
business: true,
enterprise: "Custom",
tooltip: "Pro and higher plans include access to monthly webinars.",
},
{
feature: "Custom Integrations",
starter: false,
pro: false,
business: "Available",
enterprise: "Available",
tooltip:
"Custom integrations are available in Business and Enterprise plans.",
},
{
feature: "Roles and Permissions",
starter: null,
pro: "Basic",
business: "Advanced",
enterprise: "Advanced",
tooltip:
"User roles and permissions management improves with higher plans.",
},
{
feature: "Onboarding Assistance",
starter: false,
pro: "Self-service",
business: "Assisted",
enterprise: "Full Service",
tooltip: "Higher plans include more comprehensive onboarding assistance.",
},
// Add more rows as needed
];
8 changes: 7 additions & 1 deletion types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,10 @@ export type InfoLdg = {
image: string;
description: string;
list: InfoList[];
}
};

// compare plans
export type ColumnType = string | boolean | null;
export type PlansRow = { feature: string; tooltip?: string } & {
[key in (typeof plansColumns)[number]]: ColumnType;
};

0 comments on commit a76c942

Please sign in to comment.