#3785: Converted billing settings page to v2. (#4795)

apps/web/middleware.ts

@@ -7,6 +7,7 @@ import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry
 
 const V2_WHITELIST = [
   "/settings/admin",
+  "/settings/billing",
   "/settings/developer/webhooks",
   "/settings/developer/api-keys",
   "/settings/my-account",

apps/web/pages/v2/settings/billing/index.tsx

@@ -0,0 +1,86 @@
+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;

apps/web/public/static/locales/en/common.json

@@ -1272,6 +1272,17 @@
   "format": "Format",
   "uppercase_for_letters": "Use uppercase for all letters",
   "replace_whitespaces_underscores": "Replace whitespaces with underscores",
+  "manage_billing": "Manage billing",
+  "manage_billing_description": "Manage all things billing",
+  "billing_freeplan_title": "You're currently on the FREE plan",
+  "billing_freeplan_description": "We work better in teams. Extend your workflows with round-robin and collective events and make advanced routing forms",
+  "billing_freeplan_cta": "Try now",
+  "billing_manage_details_title": "View and manage your billing details",
+  "billing_manage_details_description": "View and edit your billing details, as well as cancel your subscription.",
+  "billing_portal": "Billing portal",
+  "billing_help_title": "Need anything else?",
+  "billing_help_description": "If you need any further help with billing, our support team are here to help.",
+  "billing_help_cta": "Contact support",
   "ignore_special_characters": "Ignore special characters in your Additional Input label. Use only letters and numbers",
   "retry": "Retry",
   "fetching_calendars_error": "There was a problem fetching your calendars. Please <1>try again</1> or reach out to customer support.",

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -47,9 +47,7 @@ const tabs: VerticalTabItemProps[] = [
     name: "billing",
     href: "/settings/billing",
     icon: Icon.FiCreditCard,
-    children: [
-      { name: "Manage Billing", href: "/api/integrations/stripepayment/portal", isExternalLink: true },
-    ],
+    children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",