87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { useState } from "react";
|
|
import { HelpScout, useChat } from "react-live-chat-loader";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { Icon } from "@calcom/ui";
|
|
import { Button } from "@calcom/ui/v2";
|
|
import Meta from "@calcom/ui/v2/core/Meta";
|
|
import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
|
|
|
|
interface CtaRowProps {
|
|
title: string;
|
|
description: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
|
|
return (
|
|
<>
|
|
<section className={classNames("flex flex-col sm:flex-row", className)}>
|
|
<div>
|
|
<h2 className="font-medium">{title}</h2>
|
|
<p>{description}</p>
|
|
</div>
|
|
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
|
|
</section>
|
|
<hr className="border-neutral-200" />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const BillingView = () => {
|
|
const { t } = useLocale();
|
|
const { data: user } = trpc.useQuery(["viewer.me"]);
|
|
const isPro = user?.plan === "PRO";
|
|
const [, loadChat] = useChat();
|
|
const [showChat, setShowChat] = useState(false);
|
|
|
|
const onContactSupportClick = () => {
|
|
setShowChat(true);
|
|
loadChat({ open: true });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Meta title={t("billing")} description={t("manage_billing_description")} />
|
|
<div className="space-y-6 text-sm sm:space-y-8">
|
|
{!isPro && (
|
|
<CtaRow title={t("billing_freeplan_title")} description={t("billing_freeplan_description")}>
|
|
<form target="_blank" method="POST" action="/api/upgrade">
|
|
<Button type="submit" EndIcon={Icon.FiExternalLink}>
|
|
{t("billing_freeplan_cta")}
|
|
</Button>
|
|
</form>
|
|
</CtaRow>
|
|
)}
|
|
|
|
<CtaRow
|
|
className={classNames(!isPro && "pointer-events-none opacity-30")}
|
|
title={t("billing_manage_details_title")}
|
|
description={t("billing_manage_details_description")}>
|
|
<Button
|
|
color={isPro ? "primary" : "secondary"}
|
|
href="/api/integrations/stripepayment/portal"
|
|
target="_blank"
|
|
EndIcon={Icon.FiExternalLink}>
|
|
{t("billing_portal")}
|
|
</Button>
|
|
</CtaRow>
|
|
|
|
<CtaRow title={t("billing_help_title")} description={t("billing_help_description")}>
|
|
<Button color="secondary" onClick={onContactSupportClick}>
|
|
{t("billing_help_cta")}
|
|
</Button>
|
|
</CtaRow>
|
|
{showChat && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
BillingView.getLayout = getLayout;
|
|
|
|
export default BillingView;
|