changed icons

apps/web/pages/settings/developer/api-keys.tsx

@@ -57,7 +57,7 @@ const ApiKeysView = () => {
           <div>
             {isLoading ? null : data?.length ? (
               <>
-                <div className="mb-8 mt-6 rounded-md border">
+                <div className="border-subtle mb-8 mt-6 rounded-md border">
                   {data.map((apiKey, index) => (
                     <ApiKeyListItem
                       key={apiKey.id}

apps/web/pages/settings/developer/self-hosting.tsx

@@ -0,0 +1,103 @@
+// TODO: this page is a duplicate of API keys and should, of course,
+// use the correct License Key generation setup page, not the API key setup page
+import { useState } from "react";
+
+import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
+import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
+import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
+import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  EmptyScreen,
+  Meta,
+  AppSkeletonLoader as SkeletonLoader,
+} from "@calcom/ui";
+import { Server as ServerIcon } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
+
+const SelfHostingView = () => {
+  const { t } = useLocale();
+
+  const { data, isLoading } = trpc.viewer.apiKeys.list.useQuery();
+
+  const [apiKeyModal, setApiKeyModal] = useState(false);
+  const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | undefined>(
+    undefined
+  );
+
+  const ContinueButton = () => {
+    return (
+      <Button
+        color="primary"
+        onClick={() => {
+          setApiKeyToEdit(undefined);
+          setApiKeyModal(true);
+        }}>
+        {t("continue")}
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      <Meta title={t("self_hosting")} description={t("self_hosting_description")} />
+
+      <LicenseRequired>
+        <>
+          {isLoading && <SkeletonLoader />}
+          <div>
+            {isLoading ? null : data?.length ? (
+              <>
+                <div className="border-subtle mb-8 mt-6 rounded-md border">
+                  {data.map((apiKey, index) => (
+                    <ApiKeyListItem
+                      key={apiKey.id}
+                      apiKey={apiKey}
+                      lastItem={data.length === index + 1}
+                      onEditClick={() => {
+                        setApiKeyToEdit(apiKey);
+                        setApiKeyModal(true);
+                      }}
+                    />
+                  ))}
+                </div>
+                <ContinueButton />
+              </>
+            ) : (
+              <EmptyScreen
+                Icon={ServerIcon}
+                headline={t("host_calcom_title")}
+                description={t("host_calcom_description")}
+                buttonRaw={
+                  <div className="flex space-x-2">
+                    <ContinueButton />
+                    <Button href="https://cal.com/sales" color="secondary">
+                      {t("contact_sales")}
+                    </Button>
+                  </div>
+                }
+              />
+            )}
+          </div>
+        </>
+      </LicenseRequired>
+
+      <Dialog open={apiKeyModal} onOpenChange={setApiKeyModal}>
+        <DialogContent type="creation">
+          <ApiKeyDialogForm handleClose={() => setApiKeyModal(false)} defaultValues={apiKeyToEdit} />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+SelfHostingView.getLayout = getLayout;
+SelfHostingView.PageWrapper = PageWrapper;
+
+export default SelfHostingView;

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

@@ -973,6 +973,10 @@
   "booking_full": "No more seats available",
   "api_keys": "API keys",
   "api_key": "API key",
+  "self_hosting": "Self-Hosting",
+  "self_hosting_description": "Generate and manage commercial license keys",
+  "host_calcom_title": "Host Cal.com on your own server",
+  "host_calcom_description": "To host the commercial license of cal.com you can generate and manage your license key here",
   "test_api_key": "Test API key",
   "test_passed": "Test passed!",
   "test_failed": "Test failed",

packages/features/settings/layouts/SettingsLayout.tsx

@@ -70,6 +70,7 @@ const tabs: VerticalTabItemProps[] = [
       //
       { name: "webhooks", href: "/settings/developer/webhooks" },
       { name: "api_keys", href: "/settings/developer/api-keys" },
+      { name: "self_hosting", href: "/settings/developer/self-hosting" },
       // TODO: Add profile level for embeds
       // { name: "embeds", href: "/v2/settings/developer/embeds" },
     ],