chore: added help cards to platform dashboard (#15218)

* added cards to platform dashboard

* nit

* move help cards into its own component

* help cards component

* utils for platform

* fix icon type prop

* fix icon

---------

Co-authored-by: Rajiv Sahal <rajivsahal@Rajivs-MacBook-Pro.local>
Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>

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

@@ -0,0 +1,28 @@
+import { Card, Icon } from "@calcom/ui";
+
+import { helpCards } from "@lib/settings/platform/utils";
+
+export const HelpCards = () => {
+  return (
+    <>
+      <div className="grid-col-1 mb-4 grid gap-2 md:grid-cols-3">
+        {helpCards.map((card) => {
+          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}
+                actionButton={{
+                  href: `${card.actionButton.href}`,
+                  child: `${card.actionButton.child}`,
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,106 @@
+import type { IconName } from "@calcom/ui";
+
+type IndividualPlatformPlan = {
+  plan: string;
+  description: string;
+  pricing?: number;
+  includes: string[];
+};
+
+type HelpCardInfo = {
+  icon: IconName;
+  variant: "basic" | "ProfileCard" | "SidebarCard" | null;
+  title: string;
+  description: string;
+  actionButton: {
+    href: string;
+    child: string;
+  };
+};
+
+// if pricing or plans change in future modify this
+export const platformPlans: IndividualPlatformPlan[] = [
+  {
+    plan: "Starter",
+    description:
+      "Perfect for just getting started with community support and access to hosted platform APIs, Cal.com Atoms (React components) and more.",
+    pricing: 99,
+    includes: [
+      "Up to 100 bookings a month",
+      "Community Support",
+      "Cal Atoms (React Library)",
+      "Platform APIs",
+      "Admin APIs",
+    ],
+  },
+  {
+    plan: "Essentials",
+    description:
+      "Your essential package with sophisticated support, hosted platform APIs, Cal.com Atoms (React components) and more.",
+    pricing: 299,
+    includes: [
+      "Up to 500 bookings a month. $0,60 overage beyond",
+      "Everything in Starter",
+      "Cal Atoms (React Library)",
+      "User Management and Analytics",
+      "Technical Account Manager and Onboarding Support",
+    ],
+  },
+  {
+    plan: "Scale",
+    description:
+      "The best all-in-one plan to scale your company. Everything you need to provide scheduling for the masses, without breaking things.",
+    pricing: 2499,
+    includes: [
+      "Up to 5000 bookings a month. $0.50 overage beyond",
+      "Everything in Essentials",
+      "Credential import from other platforms",
+      "Compliance Check SOC2, HIPAA",
+      "One-on-one developer calls",
+      "Help with Credentials Verification (Zoom, Google App Store)",
+      "Expedited features and integrations",
+      "SLA (99.999% uptime)",
+    ],
+  },
+  {
+    plan: "Enterprise",
+    description: "Everything in Scale with generous volume discounts beyond 50,000 bookings a month.",
+    includes: ["Beyond 50,000 bookings a month", "Everything in Scale", "Up to 50% discount on overages"],
+  },
+];
+
+export const helpCards: HelpCardInfo[] = [
+  {
+    icon: "rocket",
+    title: "Try our Platform Starter Kit",
+    description:
+      "If you are building a marketplace or platform from scratch, our Platform Starter Kit has everything you need.",
+    variant: "basic",
+    actionButton: {
+      href: "https://experts.cal.com",
+      child: "Try the Demo",
+    },
+  },
+  {
+    icon: "github",
+    title: "Get the Source code",
+    description:
+      "Our Platform Starter Kit is being used in production by Cal.com itself. You can find the ready-to-rock source code on GitHub.",
+    variant: "basic",
+    actionButton: {
+      href: "https://github.com/calcom/examples",
+      child: "GitHub",
+    },
+  },
+  {
+    icon: "calendar-check-2",
+    title: "Contact us",
+    description:
+      "Book our engineering team for a 15 minute onboarding call and debug a problem. Please come prepared with questions.",
+    variant: "basic",
+    actionButton: {
+      href: "https://i.cal.com/platform",
+      child: "Schedule a call",
+    },
+  },
+];

apps/web/pages/settings/platform/index.tsx

@@ -11,6 +11,7 @@ import {
 import { useDeleteOAuthClient } from "@lib/hooks/settings/platform/oauth-clients/usePersistOAuthClient";
 
 import PageWrapper from "@components/PageWrapper";
+import { HelpCards } from "@components/settings/platform/dashboard/HelpCards";
 import { ManagedUserList } from "@components/settings/platform/dashboard/managed-user-list";
 import { OAuthClientsList } from "@components/settings/platform/dashboard/oauth-clients-list";
 import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
@@ -68,6 +69,7 @@ export default function Platform() {
             withoutMain={false}
             subtitle="Manage everything related to platform."
             isPlatformUser={true}>
+            <HelpCards />
             <OAuthClientsList oauthClients={data} isDeleting={isDeleting} handleDelete={handleDelete} />
             <ManagedUserList
               oauthClients={data}