cal.pub0.org/apps/web/pages/settings/billing.tsx

81 lines
2.9 KiB
TypeScript
Raw Normal View History

import { useState } from "react";
2022-01-29 00:46:35 +00:00
import { ReactNode } from "react";
import { HelpScout, useChat } from "react-live-chat-loader";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button";
2022-07-27 02:24:00 +00:00
import { Icon } from "@calcom/ui/Icon";
2022-05-04 21:13:01 +00:00
import useMeQuery from "@lib/hooks/useMeQuery";
import SettingsShell from "@components/SettingsShell";
2021-06-16 12:44:25 +00:00
2022-01-29 00:46:35 +00:00
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}`}>
2022-01-29 00:46:35 +00:00
<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">
2022-01-29 00:46:35 +00:00
<p>{description}</p>
</div>
<div className="mt-5">{children}</div>
</div>
</div>
);
2021-08-02 17:29:34 +00:00
export default function Billing() {
2021-10-13 09:34:55 +00:00
const { t } = useLocale();
2022-01-29 00:46:35 +00:00
const query = useMeQuery();
const { data } = query;
const [active, setActive] = useState(false);
const [, loadChat] = useChat();
const handleClick = () => {
setActive(true);
loadChat({ open: true });
};
2021-10-13 09:34:55 +00:00
2021-06-16 12:44:25 +00:00
return (
<SettingsShell heading={t("billing")} subtitle={t("manage_your_billing_info")}>
<>
<div className="py-6 lg:col-span-9 lg:pb-8">
2022-01-29 00:46:35 +00:00
{data?.plan && ["FREE", "TRIAL"].includes(data.plan) && (
<Card
title={t("plan_description", { plan: data.plan })}
description={t("plan_upgrade_invitation")}
className="mb-4">
2022-07-12 17:50:04 +00:00
<form method="POST" action="/api/upgrade">
2022-01-29 00:46:35 +00:00
<Button type="submit">
{t("upgrade_now")} <Icon.FiExternalLink className="ml-2 h-4 w-4" />
2022-01-29 00:46:35 +00:00
</Button>
</form>
</Card>
)}
<Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
2022-07-12 17:50:04 +00:00
<form method="POST" action="/api/integrations/stripepayment/portal">
<Button type="submit" color="secondary">
{t("go_to_billing_portal")} <Icon.FiExternalLink className="ml-2 h-4 w-4" />
2022-01-29 00:46:35 +00:00
</Button>
</form>
</Card>
<div className="mt-4 border bg-gray-50 sm:rounded-sm">
2021-09-28 10:27:46 +00:00
<div className="px-4 py-5 sm:p-6">
2022-01-29 00:46:35 +00:00
<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">
2021-10-13 09:34:55 +00:00
<p>{t("further_billing_help")}</p>
2021-09-28 10:27:46 +00:00
</div>
<div className="mt-5">
<Button onClick={handleClick} color="secondary">
2021-10-13 09:34:55 +00:00
{t("contact_our_support_team")}
2021-09-28 14:07:33 +00:00
</Button>
2021-09-28 10:27:46 +00:00
</div>
</div>
2021-06-16 12:44:25 +00:00
</div>
</div>
{active && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
</>
</SettingsShell>
2021-06-16 12:44:25 +00:00
);
}