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) => (
  • ))} {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, }, ], };