Function PricingView

src/components/PricingView.tsx:32–93

()

};

const PricingView = () => {
  const { t } = useTranslation();
  const { data: session, status } = useSession();

  const tiers = [
    {
      name: t("setting.plan.1-month"),
      priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_ID_PRO_1_MONTH_SUBSCRIPTION,
      priceMonthly: "$10",
      buyButton: t("setting.plan.purhcase-1-month"),
    },
    {
      name: t("setting.plan.n-months", {
        count: 3,
      }),
      priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_ID_PRO_3_MONTH_SUBSCRIPTION,
      priceMonthly: "$15",
      buyButton: t("setting.plan.purhcase-n-months", {
        count: 3,
      }),
    },
    {
      name: t("setting.plan.n-months", {
        count: 12,
      }),
      priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_ID_PRO_1_YEAR_SUBSCRIPTION,
      priceMonthly: "$30",
      buyButton: t("setting.plan.purhcase-n-months", {
        count: 12,
      }),
    },
  ];

  return (
    <div className="bg-white dark:bg-zinc-800 py-4">
      <div className="mx-auto max-w-4xl text-center">
        <p className="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">
          {t("setting.plan.n-question-per-month", {
            count: 1000,
          })}
        </p>
      </div>
      <div className="mt-12 flow-root">
        <div className="isolate -mt-16 grid max-w-sm grid-cols-1 gap-y-16 divide-y divide-gray-100 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-3 lg:divide-x lg:divide-y-0 xl:-mx-4">
          {tiers.map((tier) => (
            <div key={tier.priceId} className="pt-16 lg:px-8 lg:pt-0 xl:px-14 flex flex-col justify-center">
              <h3 id={tier.priceId} className="text-center text-3xl font-semibold leading-7">
                {tier.name} - {tier.priceMonthly}
              </h3>
              <button
                onClick={() => (session?.user?.email ? checkout(tier.priceId) : signIn())}
                className="mt-6 block rounded-md bg-indigo-600 px-4 py-2.5 text-center text-xl font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
              >
                {session?.user?.email ? tier.buyButton : t("payment.sign-in-to-buy")}
              </button>
            </div>
          ))}
        </div>