Start adding identity based pricing logic

frontend/src/hooks/api/subscriptions/types.ts

@@ -2,6 +2,8 @@ export type SubscriptionPlan = {
   id: string;
   membersUsed: number;
   memberLimit: number;
+  identitiesUsed: number;
+  identityLimit: number;
   auditLogs: boolean;
   dynamicSecret: boolean;
   auditLogsRetentionDays: number;

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -652,19 +652,19 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
-                      {(window.location.origin.includes("https://app.infisical.com") ||
-                        window.location.origin.includes("https://gamma.infisical.com")) && (
-                        <Link href={`/org/${currentOrg?.id}/billing`} passHref>
-                          <a>
-                            <MenuItem
-                              isSelected={router.asPath === `/org/${currentOrg?.id}/billing`}
-                              icon="system-outline-103-coin-cash-monetization"
-                            >
-                              Usage & Billing
-                            </MenuItem>
-                          </a>
-                        </Link>
-                      )}
+                      {/* {(window.location.origin.includes("https://app.infisical.com") ||
+                        window.location.origin.includes("https://gamma.infisical.com")) && ( */}
+                      <Link href={`/org/${currentOrg?.id}/billing`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?.id}/billing`}
+                            icon="system-outline-103-coin-cash-monetization"
+                          >
+                            Usage & Billing
+                          </MenuItem>
+                        </a>
+                      </Link>
+                      {/* )} */}
                       <Link href={`/org/${currentOrg?.id}/settings`} passHref>
                         <a>
                           <MenuItem

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -4,8 +4,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
 import { withPermission } from "@app/hoc";
 import { useDeleteIdentity } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -17,10 +22,10 @@ import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthC
 
 export const IdentitySection = withPermission(
   () => {
+    const { subscription } = useSubscription();
     const { currentOrg } = useOrganization();
     const orgId = currentOrg?.id || "";
 
-    
     const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "identity",
@@ -31,6 +36,10 @@ export const IdentitySection = withPermission(
       "upgradePlan"
     ] as const);
 
+    const isMoreIdentitiesAllowed = subscription?.identityLimit
+      ? subscription.identitiesUsed < subscription.identityLimit
+      : true;
+
     const onDeleteIdentitySubmit = async (identityId: string) => {
       try {
         await deleteMutateAsync({
@@ -81,7 +90,15 @@ export const IdentitySection = withPermission(
                 colorSchema="primary"
                 type="submit"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => handlePopUpOpen("identity")}
+                onClick={() => {
+                  if (!isMoreIdentitiesAllowed) {
+                    handlePopUpOpen("upgradePlan", {
+                      description: "You can add more identities if you upgrade your Infisical plan."
+                    });
+                    return;
+                  }
+                  handlePopUpOpen("identity");
+                }}
                 isDisabled={!isAllowed}
               >
                 Create identity
@@ -118,6 +135,11 @@ export const IdentitySection = withPermission(
             )
           }
         />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
       </div>
     );
   },

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -23,7 +23,6 @@ import { AddOrgMemberModal } from "./AddOrgMemberModal";
 import { OrgMembersTable } from "./OrgMembersTable";
 
 export const OrgMembersSection = () => {
-  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id ?? "";
@@ -39,9 +38,13 @@ export const OrgMembersSection = () => {
 
   const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership();
 
-  const isMoreUsersNotAllowed = subscription?.memberLimit
-    ? subscription.membersUsed >= subscription.memberLimit
-    : false;
+  const isMoreUsersAllowed = subscription?.memberLimit
+    ? subscription.membersUsed < subscription.memberLimit
+    : true;
+
+  const isMoreIdentitiesAllowed = subscription?.identityLimit
+    ? subscription.identitiesUsed < subscription.identityLimit
+    : true;
 
   const handleAddMemberModal = () => {
     if (currentOrg?.authEnforced) {
@@ -52,13 +55,14 @@ export const OrgMembersSection = () => {
       return;
     }
 
-    if (isMoreUsersNotAllowed) {
+    if (!isMoreUsersAllowed || !isMoreIdentitiesAllowed) {
       handlePopUpOpen("upgradePlan", {
         description: "You can add more members if you upgrade your Infisical plan."
       });
-    } else {
-      handlePopUpOpen("addMember");
+      return;
     }
+
+    handlePopUpOpen("addMember");
   };
 
   const onRemoveMemberSubmit = async (orgMembershipId: string) => {