remove polling for deploymentId in fetching user subscription

Author: raheeliftikhar5

client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

@@ -307,8 +307,6 @@ export function HomeLayout(props: HomeLayoutProps) {
 
   const { breadcrumb = [], elements = [], localMarketplaceApps = [], globalMarketplaceApps = [], mode } = props;
 
-  console.log("HomeLayout props: ", props);
-
   const categoryOptions = [
     { label: <FilterMenuItem>{trans("home.allCategories")}</FilterMenuItem>, value: 'All' },
     ...Object.entries(ApplicationCategoriesEnum).map(([key, value]) => ({

client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

@@ -34,7 +34,7 @@ import {
   EnterpriseIcon,
   UserIcon,
 } from "lowcoder-design";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
 import { fetchSubscriptionsAction } from "redux/reduxActions/subscriptionActions";
 import { getHomeOrg, normalAppListSelector } from "redux/selectors/applicationSelector";
@@ -66,13 +66,14 @@ import { Support } from "pages/support";
 // import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { isEE } from "util/envUtils";
 import { getSubscriptions } from 'redux/selectors/subscriptionSelectors';
-import { SubscriptionProducts } from '@lowcoder-ee/api/subscriptionApi';
+import { SubscriptionProductsEnum } from '@lowcoder-ee/constants/subscriptionConstants';
 import { ReduxActionTypes } from '@lowcoder-ee/constants/reduxActionConstants';
 
 // adding App Editor, so we can show Apps inside the Admin Area
 import AppEditor from "../editor/AppEditor";
 import { set } from "lodash";
 import { fetchDeploymentIdAction } from "@lowcoder-ee/redux/reduxActions/configActions";
+import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 
 const TabLabel = styled.div`
   font-weight: 500;
@@ -166,18 +167,28 @@ export default function ApplicationHome() {
   const orgHomeId = "root";
   const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
   const subscriptions = useSelector(getSubscriptions);
+  const deploymentId = useSelector(getDeploymentId);
 
   const isOrgAdmin = org?.createdBy == user.id ? true : false;
 
   useEffect(() => {
     if (user.currentOrgId) {
-      dispatch(fetchSubscriptionsAction());
       dispatch(fetchDeploymentIdAction());
     }
     dispatch(fetchHomeData({}));
   }, [user.currentOrgId]);
 
-  const supportSubscription = subscriptions.some(sub => sub.product === SubscriptionProducts.SUPPORT && sub.status === 'active');
+  useEffect(() => {
+    if(Boolean(deploymentId)) {
+      dispatch(fetchSubscriptionsAction())
+    }
+  }, [deploymentId]);
+
+  const supportSubscription = useMemo(() => {
+    return subscriptions.some(
+      sub => sub.product === SubscriptionProductsEnum.SUPPORT && sub.status === 'active'
+    );
+  }, [subscriptions])
 
   useEffect(() => {
     if (!org) {

client/packages/lowcoder/src/pages/setting/subscriptions/subscriptionInfo.tsx

@@ -12,6 +12,7 @@ import { CheckCircleOutlined } from '@ant-design/icons';
 import { Level1SettingPageContent } from "../styled";
 import { TacoMarkDown } from "lowcoder-design";
 import ProductDescriptions, {Translations} from "./ProductDescriptions";
+import { SubscriptionProductsEnum } from "@lowcoder-ee/constants/subscriptionConstants";
 
 const { Meta } = Card;
 
@@ -66,10 +67,10 @@ const useMarkdown = (productId: string | null, userLanguage: string) => {
       let descriptionContent : Translations | false;
 
       switch (productId) {
-        case "QW8L3WPMiNjQjI": 
+        case SubscriptionProductsEnum.SUPPORT: 
           descriptionContent = ProductDescriptions["SupportProduct"];
           break;
-        case "QW8MpIBHxieKXd": 
+        case SubscriptionProductsEnum.MEDIAPACKAGE: 
           descriptionContent = ProductDescriptions["MediaPackageProduct"];
           break;
         default:

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

@@ -12,7 +12,7 @@ const initialState: SubscriptionsReduxState = {
     fetchingSubscriptions: false,
     fetchSubscriptionsFinished: false,
   },
-  error: "",
+  error: undefined,
 };
 
 const subscriptionReducer = createReducer(initialState, {
@@ -22,6 +22,7 @@ const subscriptionReducer = createReducer(initialState, {
       ...state.loadingStates,
       fetchingSubscriptions: true,
     },
+    error: undefined,
   }),
 
   [ReduxActionTypes.FETCH_SUBSCRIPTIONS_SUCCESS]: (
@@ -35,6 +36,7 @@ const subscriptionReducer = createReducer(initialState, {
       fetchingSubscriptions: false,
       fetchSubscriptionsFinished: true,
     },
+    error: undefined,
   }),
 
   [ReduxActionErrorTypes.FETCH_SUBSCRIPTIONS_ERROR]: (
@@ -57,7 +59,7 @@ export interface SubscriptionsReduxState {
     fetchingSubscriptions: boolean;
     fetchSubscriptionsFinished: boolean;
   };
-  error: string;
+  error?: string;
 }
 
 export default subscriptionReducer;

client/packages/lowcoder/src/redux/reduxActions/subscriptionActions.ts

@@ -1,4 +1,4 @@
-import { ReduxActionTypes } from "constants/reduxActionConstants";
+import { ReduxActionErrorTypes, ReduxActionTypes } from "constants/reduxActionConstants";
 import { Subscription } from 'api/subscriptionApi';
 
 // Action Creators
@@ -12,6 +12,6 @@ export const fetchSubscriptionsSuccess = (subscriptions: Subscription[]) => ({
 });
 
 export const fetchSubscriptionsError = (error: string) => ({
-  type: ReduxActionTypes.FETCH_SUBSCRIPTIONS_FAILURE,
+  type: ReduxActionErrorTypes.FETCH_SUBSCRIPTIONS_ERROR,
   payload: { error },
 });

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

@@ -9,24 +9,12 @@ import { CurrentUser, User } from '@lowcoder-ee/constants/userConstants';
 import { ReduxActionTypes } from '@lowcoder-ee/constants/reduxActionConstants';
 
 function* fetchSubscriptionsSaga(action: ReturnType<typeof fetchSubscriptionsAction>) {
-
   try {
-
-    // wait for deploymentId to be available
-    yield take(ReduxActionTypes.FETCH_DEPLOYMENT_ID_SUCCESS);
-
     const user: User = yield select(getUser);
     const currentUser: CurrentUser = yield select(getCurrentUser); 
     const orgID = user.currentOrgId;
     const domain = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
-    
-    let hostIdenticator : string = yield select(getDeploymentId);
-
-    // Poll until deploymentId is available
-    while (!hostIdenticator) {
-      yield delay(100); // wait for 100ms
-      hostIdenticator = yield select(getDeploymentId);
-    }
+    const hostIdenticator: string = yield select(getDeploymentId);
 
     const subscriptionSearchCustomer: LowcoderSearchCustomer = {
       hostname: domain,

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

@@ -9,6 +9,10 @@ export const checkSubscriptionsLoading = (state: AppState) : boolean => {
     return state.ui.subscriptions.loadingStates.fetchingSubscriptions;
 };
 
-export const checkSubscriptionsError = (state: AppState) : string | null => {
+export const getFetchSubscriptionsFinished = (state: AppState) : boolean => {
+    return state.ui.subscriptions.loadingStates.fetchSubscriptionsFinished;
+};
+
+export const getSubscriptionsError = (state: AppState) : string | undefined => {
     return state.ui.subscriptions.error;
-}; 
+};