Move custom role paywall to assignment step

2026-10-16 08:14:06 +00:00 · 2023-11-26 13:18:49 +07:00
parent 5b923c25b5
commit 32f5c96dd2
12 changed files with 73 additions and 77 deletions
@@ -57,7 +57,9 @@ export const OrgMembersSection = () => {
        }

        if (isMoreUsersNotAllowed) {
-            handlePopUpOpen("upgradePlan");
+            handlePopUpOpen("upgradePlan", {
+                description: "You can add more members if you upgrade your Infisical plan."
+            });
        } else {
            handlePopUpOpen("addMember");
        }
@@ -134,7 +136,7 @@ export const OrgMembersSection = () => {
          <UpgradePlanModal
            isOpen={popUp.upgradePlan.isOpen}
            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            text="You can add more members if you upgrade your Infisical plan."
+            text={(popUp.upgradePlan?.data as { description: string })?.description}
        />
        <EmailServiceSetupModal
            isOpen={popUp.setUpEmail?.isOpen}
@@ -28,8 +28,8 @@ import {
    OrgPermissionActions,
    OrgPermissionSubjects,
    useOrganization,
-    useUser
-} from "@app/context";
+    useSubscription,
+    useUser} from "@app/context";
 import {
    useAddUserToOrg,
    useFetchServerStatus,
@@ -41,10 +41,11 @@ import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["removeMember"]>,
+      popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
      data?: {
        orgMembershipId?: string;
        email?: string;
+        description?: string;
      }
    ) => void;
    setCompleteInviteLink: (link: string) => void;
@@ -55,6 +56,7 @@ export const OrgMembersTable = ({
    setCompleteInviteLink
 }: Props) => {
    const { createNotification } = useNotificationContext();
+    const { subscription } = useSubscription();
    const { currentOrg } = useOrganization();
    const { user } = useUser();
    const userId = user?._id || "";
@@ -63,7 +65,7 @@ export const OrgMembersTable = ({
    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
        orgId
    });
-
+    
    const [searchMemberFilter, setSearchMemberFilter] = useState("");

    const { data: serverDetails } = useFetchServerStatus();
@@ -76,10 +78,21 @@ export const OrgMembersTable = ({
        if (!currentOrg?._id) return;
    
        try {
+          // TODO: replace hardcoding default role
+          const isCustomRole = !["admin", "member"].includes(role);
+          
+          if (isCustomRole && subscription && !subscription?.rbac) {
+            handlePopUpOpen("upgradePlan", {
+              description: "You can assign custom roles to members if you upgrade your Infisical plan."
+            });
+            return;
+          }
+        
          await updateUserOrgRole({ 
-              organizationId: currentOrg?._id, 
-              membershipId, role 
-        });
+            organizationId: currentOrg?._id, 
+            membershipId, role 
+          });
+
          createNotification({
            text: "Successfully updated user role",
            type: "success"
@@ -169,7 +182,6 @@ export const OrgMembersTable = ({
                  ({ user: u, inviteEmail, role, customRole, _id: orgMembershipId, status }) => {
                    const name = u ? `${u.firstName} ${u.lastName}` : "-";
                    const email = u?.email || inviteEmail;
-
                    return (
                      <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
                        <Td>{name}</Td>
@@ -183,7 +195,7 @@ export const OrgMembersTable = ({
                              <>
                                {status === "accepted" && (
                                  <Select
-                                    defaultValue={
+                                    value={
                                      role === "custom" ? findRoleFromId(customRole)?.slug : role
                                    }
                                    isDisabled={userId === u?._id || !isAllowed}
@@ -13,9 +13,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
-import { useOrganization, useSubscription } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { useCreateRole, useUpdateRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";

@@ -85,9 +84,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
 ] as const;

 export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
-  const { subscription } = useSubscription();
-  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
-
  const isNonEditable = ["owner", "admin", "member"].includes(role?.slug || "");
  const isNewRole = !role?.slug;

@@ -127,11 +123,6 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
  };

  const handleFormSubmit = async (el: TFormSchema) => {
-    if (subscription && !subscription?.rbac) {
-      handlePopUpOpen("upgradePlan");
-      return;
-    }
-
    if (!isNewRole) {
      await handleRoleUpdate(el);
      return;
@@ -235,17 +226,6 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
          </Button>
        </div>
      </form>
-      {subscription && (
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={
-            subscription.slug === null
-              ? "You can use RBAC under an Enterprise license"
-              : "You can use RBAC if you switch to Infisical's Team Plan."
-          }
-        />
-      )}
    </div>
  );
 };