entitlements FE

client/src/components/common/HeaderCreate.tsx

@@ -0,0 +1,60 @@
+import Stack from "@mui/material/Stack";
+import { Button } from "@/components/inputs";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import Tooltip from "@mui/material/Tooltip";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/store";
+import { useMemo } from "react";
+import type { EntitlemenstKey } from "@/types/entitlements";
+export const HeaderCreate = ({
+  label,
+  isLoading,
+  path,
+  entitlement,
+  entitlementCount,
+}: {
+  label?: string;
+  isLoading: boolean;
+  path: string;
+  entitlement: EntitlemenstKey | null;
+  entitlementCount: number;
+}) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const ent = useSelector((s: RootState) => s.auth.user?.entitlements);
+  const limitReached = useMemo(() => {
+    if (!entitlement) return false;
+    if (!ent || typeof ent[entitlement] !== "number") return false;
+    return entitlementCount < ent[entitlement] ? false : true;
+  }, [ent, entitlementCount]);
+  return (
+    <Stack
+      direction="row"
+      justifyContent="end"
+      alignItems="center"
+      gap={theme.spacing(6)}
+    >
+      <Tooltip
+        title={limitReached ? "Upgrade your plan to create more teams" : ""}
+        disableHoverListener={!limitReached}
+      >
+        <span>
+          <Button
+            loading={isLoading}
+            variant="contained"
+            color="accent"
+            disabled={limitReached}
+            onClick={() => navigate(path)}
+          >
+            {limitReached
+              ? "Your plan's limit has been reached"
+              : label || t("createNew")}
+          </Button>
+        </span>
+      </Tooltip>
+    </Stack>
+  );
+};

client/src/components/common/index.tsx

@@ -0,0 +1 @@
+export { HeaderCreate } from "./HeaderCreate";

client/src/components/monitors/HeaderCreate.tsx

@@ -1,35 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { Button } from "@/components/inputs";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router";
-export const HeaderCreate = ({
-  label,
-  isLoading,
-  path,
-}: {
-  label?: string;
-  isLoading: boolean;
-  path: string;
-}) => {
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  return (
-    <Stack
-      direction="row"
-      justifyContent="end"
-      alignItems="center"
-      gap={theme.spacing(6)}
-    >
-      <Button
-        loading={isLoading}
-        variant="contained"
-        color="accent"
-        onClick={() => navigate(path)}
-      >
-        {label || t("createNew")}
-      </Button>
-    </Stack>
-  );
-};

client/src/components/monitors/index.tsx

@@ -1,4 +1,3 @@
-export { HeaderCreate } from "./HeaderCreate";
 export { HistogramStatus } from "./HistogramStatus";
 export { ChartAvgResponse } from "./ChartAvgResponse";
 export { HeaderRange } from "../common/HeaderRange";

client/src/components/notification-channels/HeaderCreate.tsx

@@ -1 +0,0 @@
-export { HeaderCreate } from "@/components/monitors/HeaderCreate";

client/src/components/teams/HeaderCreate.tsx

@@ -1 +0,0 @@
-export { HeaderCreate } from "@/components/monitors/HeaderCreate";