2023-08-02 09:35:48 +00:00
|
|
|
import { usePathname } from "next/navigation";
|
2022-11-10 20:23:56 +00:00
|
|
|
|
|
|
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
2023-01-23 23:08:01 +00:00
|
|
|
import { Button, Meta } from "@calcom/ui";
|
2023-04-12 15:26:31 +00:00
|
|
|
import { ExternalLink } from "@calcom/ui/components/icon";
|
2023-01-05 17:00:16 +00:00
|
|
|
|
|
|
|
import { getLayout } from "../../../settings/layouts/SettingsLayout";
|
2022-11-10 20:23:56 +00:00
|
|
|
|
|
|
|
const BillingView = () => {
|
2023-08-02 09:35:48 +00:00
|
|
|
const pathname = usePathname();
|
2022-11-10 20:23:56 +00:00
|
|
|
const { t } = useLocale();
|
2023-08-02 09:35:48 +00:00
|
|
|
const returnTo = pathname;
|
2022-11-10 20:23:56 +00:00
|
|
|
const billingHref = `/api/integrations/stripepayment/portal?returnTo=${WEBAPP_URL}${returnTo}`;
|
|
|
|
return (
|
|
|
|
<>
|
2022-12-07 20:53:44 +00:00
|
|
|
<Meta title={t("team_billing")} description={t("team_billing_description")} />
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-default flex flex-col text-sm sm:flex-row">
|
2022-11-10 20:23:56 +00:00
|
|
|
<div>
|
2023-06-08 13:37:54 +00:00
|
|
|
<h2 className="font-medium">{t("view_and_manage_billing_details")}</h2>
|
|
|
|
<p>{t("view_and_edit_billing_details")}</p>
|
2022-11-10 20:23:56 +00:00
|
|
|
</div>
|
2023-06-22 22:25:37 +00:00
|
|
|
<div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
|
2023-04-12 15:26:31 +00:00
|
|
|
<Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
|
2022-11-10 20:23:56 +00:00
|
|
|
{t("billing_portal")}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
BillingView.getLayout = getLayout;
|
|
|
|
|
|
|
|
export default BillingView;
|