import { HiCheck } from "react-icons/hi";
import * as Panelbear from "@panelbear/panelbear-js";
import clsx from "clsx";
import useSubscription from "../../hooks/use-subscription";
export default function Plans() {
const { subscription, subscribe } = useSubscription();
return (
{pricing.tiers.map((tier) => {
const isCurrentTier =
!subscription?.paddlePlanId && tier.planId === "free"
? true
: subscription?.paddlePlanId === tier.planId;
const cta = isCurrentTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe";
return (
{tier.title}
{tier.yearly ? (
Get 2 months free!
) : null}
{tier.price}€
{tier.frequency}
{tier.yearly ? (
Billed yearly ({tier.price * 12}€)
) : null}
{tier.description}
{tier.features.map((feature) => (
-
{feature}
))}
{tier.unavailableFeatures.map((feature) => (
-
{~feature.indexOf("(coming soon)")
? feature.slice(0, feature.indexOf("(coming soon)"))
: feature}
))}
);
})}
);
}
const paidFeatures = [
"SMS",
"MMS (coming soon)",
"Calls",
"SMS forwarding (coming soon)",
"Call forwarding (coming soon)",
"Voicemail (coming soon)",
"Call recording (coming soon)",
];
const pricing = {
tiers: [
{
title: "Free",
planId: "free",
price: 0,
frequency: "",
description: "The essentials to let you try Shellphone.",
features: ["SMS (send only)"],
unavailableFeatures: paidFeatures.slice(1),
cta: "Subscribe",
yearly: false,
},
{
title: "Monthly",
planId: "727540",
price: 15,
frequency: "/month",
description: "Text and call anyone, anywhere in the world.",
features: paidFeatures,
unavailableFeatures: [],
cta: "Subscribe",
yearly: false,
},
{
title: "Yearly",
planId: "727544",
price: 12.5,
frequency: "/month",
description: "Text and call anyone, anywhere in the world, all year long.",
features: paidFeatures,
unavailableFeatures: [],
cta: "Subscribe",
yearly: true,
},
],
};