From 246fce3ab8c052bceee4b9c22ce849ce6b05cd94 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Wed, 5 Oct 2022 00:54:15 +0200
Subject: [PATCH] #3785: Converted billing settings page to v2. (#4795)

---
 apps/web/middleware.ts                        |  1 +
 apps/web/pages/v2/settings/billing/index.tsx  | 86 +++++++++++++++++++
 apps/web/public/static/locales/en/common.json | 11 +++
 .../ui/v2/core/layouts/SettingsLayout.tsx     |  4 +-
 4 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/pages/v2/settings/billing/index.tsx

diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index f5c7e99586..5ab3a34476 100644
--- a/apps/web/middleware.ts
+++ b/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",
diff --git a/apps/web/pages/v2/settings/billing/index.tsx b/apps/web/pages/v2/settings/billing/index.tsx
new file mode 100644
index 0000000000..7df75f2895
--- /dev/null
+++ b/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;
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 8b41315736..7a0021750b 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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.",
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index ab3b2cfbf3..b429372087 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/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",