save org user stats and use totalAdminsAndDevelopers count for subscription

Author: raheeliftikhar5

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/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/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 { getOrgGroups, getOrgUsers } from "@lowcoder-ee/redux/selectors/orgSelectors";
-import { fetchGroupsAction, 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,7 +263,7 @@ export function useThemeColors(allowGradient?: boolean) {
 
 export const useOrgUserCount = (orgId: string) => {
   const dispatch = useDispatch();
-  const orgGroups = useSelector((state: AppState) => getOrgGroups(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(() => {
@@ -275,10 +275,10 @@ export const useOrgUserCount = (orgId: string) => {
 
   useEffect(() => {
     // Update user count when orgUsers state changes
-    if (orgGroups && orgGroups.length > 0) {
-      setUserCount(orgGroups.length);
+    if (Object.values(orgUserStats).length && orgUserStats.hasOwnProperty('totalAdminsAndDevelopers')) {
+      setUserCount(orgUserStats.totalAdminsAndDevelopers);
     }
-  }, [orgGroups]);
+  }, [orgUserStats]);
 
   return userCount;
 };