Merge pull request #1286 from lowcoder-org/subscription-users-count

Subscription user count to include admins & developers

Author: FalkWolsky

client/packages/lowcoder/src/api/apiResponses.ts

@@ -12,6 +12,13 @@ export interface GenericApiResponse<T> {
   data: T;
 }
 
+export interface FetchGroupApiResponse<T> extends GenericApiResponse<T> {
+  totalAdmins: number,
+  totalAdminsAndDevelopers: number,
+  totalDevelopersOnly: number,
+  totalOtherMembers: number,
+}
+
 // NO_DATASOURCES_FOUND, 1000, "Unable to find {0} with id {1}"
 // INVALID_PARAMTER, 4000, "Invalid parameter {0} provided in the input"
 // PLUGIN_NOT_INSTALLED, 4001, "Plugin {0} not installed"

client/packages/lowcoder/src/api/subscriptionApi.ts

@@ -3,7 +3,7 @@ import axios, { AxiosInstance, AxiosRequestConfig, CancelToken } from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState} from "react";
 import { calculateFlowCode }  from "./apiUtils";
-import { fetchOrgUsersAction } from "redux/reduxActions/orgActions";
+import { fetchGroupsAction, fetchOrgUsersAction } from "redux/reduxActions/orgActions";
 import { getOrgUsers } from "redux/selectors/orgSelectors";
 import { AppState } from "@lowcoder-ee/redux/reducers";
 import type {
@@ -289,28 +289,4 @@ export const getCustomerPortalSession = async (customerId: string) => {
   }
 };
 
-// Hooks
-
-export const useOrgUserCount = (orgId: string) => {
-  const dispatch = useDispatch();
-  const orgUsers = useSelector((state: AppState) => getOrgUsers(state)); // Use selector to get orgUsers from state
-  const [userCount, setUserCount] = useState<number>(0);
-
-  useEffect(() => {
-    // Dispatch action to fetch organization users
-    if (orgId) {
-      dispatch(fetchOrgUsersAction(orgId));
-    }
-  }, [dispatch, orgId]);
-
-  useEffect(() => {
-    // Update user count when orgUsers state changes
-    if (orgUsers && orgUsers.length > 0) {
-      setUserCount(orgUsers.length);
-    }
-  }, [orgUsers]);
-
-  return userCount;
-};
-
 export default SubscriptionApi;

client/packages/lowcoder/src/redux/reducers/uiReducers/orgReducer.ts

@@ -28,15 +28,17 @@ const initialState: OrgReduxState = {
   orgCreateStatus: "init",
   apiUsage: 0,
   lastMonthApiUsage: 0,
+  orgUserStats: {},
 };
 
 const orgReducer = createImmerReducer(initialState, {
   [ReduxActionTypes.FETCH_ORG_GROUPS_SUCCESS]: (
     state: OrgReduxState,
-    action: ReduxAction<{ orgGroups: OrgGroup[] }>
+    action: ReduxAction<{ orgGroups: OrgGroup[], orgUserStats: Record<string, number> }>
   ): OrgReduxState => ({
     ...state,
     orgGroups: action.payload.orgGroups,
+    orgUserStats: action.payload.orgUserStats,
     fetchOrgGroupsFinished: true,
   }),
   [ReduxActionErrorTypes.FETCH_ORG_GROUPS_ERROR]: (state: OrgReduxState): OrgReduxState => ({
@@ -137,6 +139,7 @@ export interface OrgReduxState {
   orgCreateStatus: ApiRequestStatus;
   apiUsage: number;
   lastMonthApiUsage: number;
+  orgUserStats: Record<string, number>;
 }
 
 export default orgReducer;

client/packages/lowcoder/src/redux/sagas/orgSagas.ts

@@ -1,6 +1,6 @@
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 
-import { ApiResponse, GenericApiResponse } from "api/apiResponses";
+import { ApiResponse, FetchGroupApiResponse, GenericApiResponse } from "api/apiResponses";
 import OrgApi, { CreateOrgResponse, GroupUsersResponse, OrgAPIUsageResponse, OrgUsersResponse } from "api/orgApi";
 import { AxiosResponse } from "axios";
 import { OrgGroup } from "constants/orgConstants";
@@ -49,14 +49,20 @@ export function* updateGroupSaga(action: ReduxAction<UpdateGroupActionPayload>)
 
 export function* fetchGroupsSaga(action: ReduxAction<{ orgId: string }>) {
   try {
-    const response: AxiosResponse<GenericApiResponse<OrgGroup[]>> = yield call(OrgApi.fetchGroup);
+    const response: AxiosResponse<FetchGroupApiResponse<OrgGroup[]>> = yield call(OrgApi.fetchGroup);
     const isValidResponse: boolean = validateResponse(response);
     if (isValidResponse) {
       const groups = response.data.data;
       yield put({
         type: ReduxActionTypes.FETCH_ORG_GROUPS_SUCCESS,
         payload: {
           orgGroups: groups,
+          orgUserStats: {
+            totalAdmins: response.data.totalAdmins,
+            totalAdminsAndDevelopers: response.data.totalAdminsAndDevelopers,
+            totalDevelopersOnly: response.data.totalDevelopersOnly,
+            totalOtherMembers: response.data.totalOtherMembers,
+          }
         },
       });
     }

client/packages/lowcoder/src/redux/selectors/orgSelectors.ts

@@ -8,6 +8,10 @@ export const getOrgGroups = (state: AppState) => {
   return state.ui.org.orgGroups;
 };
 
+export const getOrgUserStats = (state: AppState) => {
+  return state.ui.org.orgUserStats;
+};
+
 export const getFetchOrgGroupsFinished = (state: AppState) => {
   return state.ui.org.fetchOrgGroupsFinished;
 };

client/packages/lowcoder/src/util/context/SubscriptionContext.tsx

@@ -1,10 +1,11 @@
-import { createCheckoutLink, createCustomer, getProducts, searchCustomer, useOrgUserCount } from "@lowcoder-ee/api/subscriptionApi";
+import { createCheckoutLink, createCustomer, getProducts, searchCustomer } from "@lowcoder-ee/api/subscriptionApi";
 import { StripeCustomer, SubscriptionProduct, InitSubscriptionProducts, LowcoderSearchCustomer, LowcoderNewCustomer, Subscription } from "@lowcoder-ee/constants/subscriptionConstants";
 import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 import { getFetchSubscriptionsFinished, getSubscriptions, getSubscriptionsError } from "@lowcoder-ee/redux/selectors/subscriptionSelectors";
 import { getCurrentUser, getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
 import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import { useOrgUserCount } from "../hooks";
 
 export interface SubscriptionContextType {
   products: SubscriptionProduct[];

client/packages/lowcoder/src/util/hooks.ts

@@ -27,8 +27,8 @@ import { ThemeDetail } from "@lowcoder-ee/api/commonSettingApi";
 import { uniq } from "lodash";
 import { constantColors } from "components/colorSelect/colorUtils";
 import { AppState } from "@lowcoder-ee/redux/reducers";
-import { getOrgUsers } from "@lowcoder-ee/redux/selectors/orgSelectors";
-import { fetchOrgUsersAction } from "@lowcoder-ee/redux/reduxActions/orgActions";
+import { getOrgUserStats } from "@lowcoder-ee/redux/selectors/orgSelectors";
+import { fetchGroupsAction } from "@lowcoder-ee/redux/reduxActions/orgActions";
 
 export const ForceViewModeContext = React.createContext<boolean>(false);
 
@@ -188,7 +188,7 @@ export function useMergeCompStyles(
   const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
   const { preventStyleOverwriting, appliedThemeId } = props;
 
-  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style' || 'styles'));
+  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style') || key.toLowerCase().endsWith('styles'));
   const styleProps: Record<string, any> = {};
   styleKeys.forEach((key: string) => {
     styleProps[key] = (props as any)[key];
@@ -263,22 +263,22 @@ export function useThemeColors(allowGradient?: boolean) {
 
 export const useOrgUserCount = (orgId: string) => {
   const dispatch = useDispatch();
-  const orgUsers = useSelector((state: AppState) => getOrgUsers(state)); // Use selector to get orgUsers from state
+  const orgUserStats = useSelector((state: AppState) => getOrgUserStats(state)); // Use selector to get orgUsers from state
   const [userCount, setUserCount] = useState<number>(0);
 
   useEffect(() => {
     // Dispatch action to fetch organization users
     if (orgId) {
-      dispatch(fetchOrgUsersAction(orgId));
+      dispatch(fetchGroupsAction(orgId));
     }
   }, [dispatch, orgId]);
 
   useEffect(() => {
     // Update user count when orgUsers state changes
-    if (orgUsers && orgUsers.length > 0) {
-      setUserCount(orgUsers.length);
+    if (Object.values(orgUserStats).length && orgUserStats.hasOwnProperty('totalAdminsAndDevelopers')) {
+      setUserCount(orgUserStats.totalAdminsAndDevelopers);
     }
-  }, [orgUsers]);
+  }, [orgUserStats]);
 
   return userCount;
 };