feat: conditionally show contact us or report issue based on plan (#20629)

* feat: conditionally show contact us or report issue based on plan

Co-Authored-By: peer@cal.com <peer@cal.com>

* fix: update icon name to triangle-alert to fix type error

Co-Authored-By: peer@cal.com <peer@cal.com>

* fix: check specific plan type instead of isPaidUser flag

Co-Authored-By: peer@cal.com <peer@cal.com>

* fix: check userBillingData.valid to ensure billing plan is active

Co-Authored-By: peer@cal.com <peer@cal.com>

* fix: convert plan to lowercase before comparison

Co-Authored-By: peer@cal.com <peer@cal.com>

* fixup: dont show contact card for free platform users

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: peer@cal.com <peer@cal.com>
Co-authored-by: amrit <iamamrit27@gmail.com>
Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com>

apps/web/components/settings/platform/dashboard/HelpCards.tsx

@@ -1,23 +1,39 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Card } from "@calcom/ui/components/card";
 import { Icon } from "@calcom/ui/components/icon";
 
 import { helpCards } from "@lib/settings/platform/utils";
 
+import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
+
 export const HelpCards = () => {
+  const { t } = useLocale();
+  const { userBillingData } = useGetUserAttributes();
+  const isPaidUser = userBillingData?.valid && userBillingData?.plan?.toLowerCase() !== "free";
+
   return (
     <>
       <div className="grid-col-1 mb-4 grid gap-2 md:grid-cols-3">
         {helpCards.map((card) => {
+          if (card.title === "Contact us" && !isPaidUser) return null;
+
+          if (card.title === "Report issue" && isPaidUser) return null;
+
+          const title = card.title === "Report issue" ? t("report_issue") : card.title;
+          const description =
+            card.title === "Report issue" ? t("report_issue_description") : card.description;
+          const actionButtonChild = card.title === "Report issue" ? t("open_issue") : card.actionButton.child;
+
           return (
             <div key={card.title}>
               <Card
                 icon={<Icon name={card.icon} className="h-5 w-5 text-green-700" />}
                 variant={card.variant}
-                title={card.title}
-                description={card.description}
+                title={title}
+                description={description}
                 actionButton={{
                   href: `${card.actionButton.href}`,
-                  child: `${card.actionButton.child}`,
+                  child: actionButtonChild,
                 }}
               />
             </div>

apps/web/lib/settings/platform/utils.ts

@@ -104,4 +104,15 @@ export const helpCards: HelpCardInfo[] = [
       child: "Schedule a call",
     },
   },
+  {
+    icon: "triangle-alert",
+    title: "Report issue",
+    description:
+      "You can submit a ticket on GitHub or upgrade your plan to receive real-time support with developer conferences",
+    variant: "basic",
+    actionButton: {
+      href: "https://github.com/calcom/cal.com/issues/new?template=platform.md",
+      child: "Open Issue",
+    },
+  },
 ];

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

@@ -3085,6 +3085,9 @@
   "disable_delegation_credential_description": "Once delegation credential is disabled, organization members who haven’t connected their calendars will need to do so manually.",
   "salesforce_on_cancel_write_to_event": "On cancelled booking, write to event record instead of deleting event",
   "salesforce_on_every_cancellation": "On every cancellation",
+  "report_issue": "Report issue",
+  "report_issue_description": "You can submit a ticket on GitHub or upgrade your plan to receive real-time support with developer conferences",
+  "open_issue": "Open Issue",
   "this_is_your_current_plan": "This is your current plan",
   "per_month": "per month",
   "schedule_a_time": "Schedule a time",