77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { ExternalLinkIcon } from "@heroicons/react/solid";
|
|
import { ReactNode } from "react";
|
|
import { useIntercom } from "react-use-intercom";
|
|
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
|
|
|
import SettingsShell from "@components/SettingsShell";
|
|
import Shell, { useMeQuery } from "@components/Shell";
|
|
import Button from "@components/ui/Button";
|
|
|
|
type CardProps = { title: string; description: string; className?: string; children: ReactNode };
|
|
const Card = ({ title, description, className = "", children }: CardProps): JSX.Element => (
|
|
<div className={`border bg-white sm:rounded-sm ${className}`}>
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
|
|
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
|
<p>{description}</p>
|
|
</div>
|
|
<div className="mt-5">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default function Billing() {
|
|
const { t } = useLocale();
|
|
const query = useMeQuery();
|
|
const { data } = query;
|
|
const { boot, show } = useIntercom();
|
|
|
|
return (
|
|
<Shell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
|
|
<SettingsShell>
|
|
<div className="py-6 lg:col-span-9 lg:pb-8">
|
|
{data?.plan && ["FREE", "TRIAL"].includes(data.plan) && (
|
|
<Card
|
|
title={t("plan_description", { plan: data.plan })}
|
|
description={t("plan_upgrade_invitation")}
|
|
className="mb-4">
|
|
<form method="POST" action={`/api/upgrade`}>
|
|
<Button type="submit">
|
|
{t("upgrade_now")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
)}
|
|
|
|
<Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
|
|
<form method="POST" action={`/api/integrations/stripepayment/portal`}>
|
|
<Button type="submit" color="secondary">
|
|
{t("go_to_billing_portal")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
</Card>
|
|
<div className="mt-4 border bg-gray-50 sm:rounded-sm">
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<h3 className="text-lg font-medium leading-6 text-gray-900">{t("need_anything_else")}</h3>
|
|
<div className="mt-2 max-w-xl text-sm text-gray-500">
|
|
<p>{t("further_billing_help")}</p>
|
|
</div>
|
|
<div className="mt-5">
|
|
<Button
|
|
onClick={() => {
|
|
boot();
|
|
show();
|
|
}}
|
|
color="secondary">
|
|
{t("contact_our_support_team")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SettingsShell>
|
|
</Shell>
|
|
);
|
|
}
|