From 058844b6b8cac1683c60598bef271a11baeb26fe Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 20 Nov 2023 16:38:39 +0000
Subject: [PATCH] chore: paid support wip (#12419)

* paid support wip

* nit

* added upgrade box to intercom

* nit
---
 apps/web/public/static/locales/en/common.json |  2 ++
 .../ee/support/components/ContactMenuItem.tsx | 32 ++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index c3a505de55..378daac39d 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1111,6 +1111,8 @@
   "developer_documentation": "Developer Documentation",
   "get_in_touch": "Get in touch",
   "contact_support": "Contact Support",
+  "premium_support": "Premium Support",
+  "community_support": "Community Support",
   "feedback": "Feedback",
   "submitted_feedback": "Thank you for your feedback!",
   "feedback_error": "Error sending feedback",
diff --git a/packages/features/ee/support/components/ContactMenuItem.tsx b/packages/features/ee/support/components/ContactMenuItem.tsx
index 8fd8df6cb8..aa368fb369 100644
--- a/packages/features/ee/support/components/ContactMenuItem.tsx
+++ b/packages/features/ee/support/components/ContactMenuItem.tsx
@@ -1,3 +1,9 @@
+import { JOIN_DISCORD } from "@calcom/lib/constants";
+import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { UpgradeTeamsBadge } from "@calcom/ui";
+import { ExternalLink } from "@calcom/ui/components/icon";
+
 import FreshChatMenuItem from "../lib/freshchat/FreshChatMenuItem";
 import HelpscoutMenuItem from "../lib/helpscout/HelpscoutMenuItem";
 import IntercomMenuItem from "../lib/intercom/IntercomMenuItem";
@@ -8,13 +14,31 @@ interface ContactMenuItem {
 }
 
 export default function ContactMenuItem(props: ContactMenuItem) {
+  const { t } = useLocale();
   const { onHelpItemSelect } = props;
+  const { hasPaidPlan } = useHasPaidPlan();
   return (
     <>
-      <IntercomMenuItem onHelpItemSelect={onHelpItemSelect} />
-      <ZendeskMenuItem onHelpItemSelect={onHelpItemSelect} />
-      <HelpscoutMenuItem onHelpItemSelect={onHelpItemSelect} />
-      <FreshChatMenuItem onHelpItemSelect={onHelpItemSelect} />
+      {hasPaidPlan ? (
+        <>
+          <IntercomMenuItem onHelpItemSelect={onHelpItemSelect} />
+          <ZendeskMenuItem onHelpItemSelect={onHelpItemSelect} />
+          <HelpscoutMenuItem onHelpItemSelect={onHelpItemSelect} />
+          <FreshChatMenuItem onHelpItemSelect={onHelpItemSelect} />
+        </>
+      ) : (
+        <div className=" hover:text-emphasis text-default flex w-full cursor-not-allowed justify-between px-5 py-2 pr-4 text-sm font-medium">
+          {t("premium_support")}
+          <UpgradeTeamsBadge />
+        </div>
+      )}
+      <a
+        href={JOIN_DISCORD}
+        target="_blank"
+        className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
+        {t("community_support")}{" "}
+        <ExternalLink className="group-hover:text-subtle text-muted ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3" />
+      </a>
     </>
   );
 }