first commit

calcom/apps/web/components/settings/platform/pricing/billing-card/index.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@calcom/ui";
+
+type PlatformBillingCardProps = {
+  plan: string;
+  description: string;
+  pricing?: number;
+  includes: string[];
+  isLoading?: boolean;
+  handleSubscribe?: () => void;
+};
+
+export const PlatformBillingCard = ({
+  plan,
+  description,
+  pricing,
+  includes,
+  isLoading,
+  handleSubscribe,
+}: PlatformBillingCardProps) => {
+  return (
+    <div className="border-subtle mx-4 w-auto rounded-md border p-5 ">
+      <div className="pb-5">
+        <h1 className="pb-3 pt-3 text-xl font-semibold">{plan}</h1>
+        <p className="pb-5 text-base">{description}</p>
+        <h1 className="text-3xl font-semibold">
+          {pricing && (
+            <>
+              US${pricing} <span className="text-sm">per month</span>
+            </>
+          )}
+        </h1>
+      </div>
+      <div>
+        <Button
+          loading={isLoading}
+          onClick={handleSubscribe}
+          className="flex w-[100%] items-center justify-center">
+          {pricing ? "Subscribe" : "Schedule a time"}
+        </Button>
+      </div>
+      <div className="mt-5">
+        <p>This includes:</p>
+        {includes.map((feature) => {
+          return (
+            <div key={feature} className="my-2 flex">
+              <div className="pr-2">&bull;</div>
+              <div>{feature}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

calcom/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx

@@ -0,0 +1,55 @@
+import { useRouter } from "next/navigation";
+
+import { ErrorCode } from "@calcom/lib/errorCodes";
+import { showToast } from "@calcom/ui";
+
+import { useSubscribeTeamToStripe } from "@lib/hooks/settings/platform/oauth-clients/usePersistOAuthClient";
+
+import { platformPlans } from "@components/settings/platform/platformUtils";
+import { PlatformBillingCard } from "@components/settings/platform/pricing/billing-card";
+
+type PlatformPricingProps = { teamId?: number | null };
+
+export const PlatformPricing = ({ teamId }: PlatformPricingProps) => {
+  const router = useRouter();
+  const { mutateAsync, isPending } = useSubscribeTeamToStripe({
+    onSuccess: (redirectUrl: string) => {
+      router.push(redirectUrl);
+    },
+    onError: () => {
+      showToast(ErrorCode.UnableToSubscribeToThePlatform, "error");
+    },
+    teamId,
+  });
+
+  return (
+    <div className="flex h-auto flex-col items-center justify-center px-5 py-10 md:px-10 lg:h-[100%]">
+      <div className="mb-5 text-center text-2xl font-semibold">
+        <h1>Subscribe to Platform</h1>
+      </div>
+      <div className="container mx-auto p-4">
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
+          {platformPlans.map((plan) => {
+            return (
+              <div key={plan.plan}>
+                <PlatformBillingCard
+                  plan={plan.plan}
+                  description={plan.description}
+                  pricing={plan.pricing}
+                  includes={plan.includes}
+                  isLoading={isPending}
+                  handleSubscribe={() => {
+                    !!teamId &&
+                      (plan.plan === "Enterprise"
+                        ? router.push("https://i.cal.com/sales/exploration")
+                        : mutateAsync({ plan: plan.plan.toLocaleUpperCase() }));
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};