Moving Context to make sure Subscription is initialized at Admin Portal

Author: FalkWolsky

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

@@ -65,7 +65,6 @@ class SubscriptionApi extends Api {
       response = await axiosInstance.request(requestConfig);
     } catch (error) {
       if (axios.isCancel(error)) {
-        console.warn("Request cancelled due to timeout:", error.message);
         // Retry once after timeout cancellation
         try {
           // Reset the cancel token and retry
@@ -81,11 +80,11 @@ class SubscriptionApi extends Api {
 
           clearTimeout(retryTimeoutId);
         } catch (retryError) {
-          console.error("Retry failed:", retryError);
+          console.warn("Error at Secure Flow Request. Retry failed:", retryError);
           throw retryError;
         }
       } else {
-        console.error("Error at Secure Flow Request:", error);
+        console.warn("Error at Secure Flow Request:", error);
         throw error;
       }
     } finally {

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

@@ -74,6 +74,7 @@ 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";
+import { SubscriptionContextProvider } from '@lowcoder-ee/util/context/SubscriptionContext';
 
 const TabLabel = styled.div`
   font-weight: 500;
@@ -223,145 +224,147 @@ export default function ApplicationHome() {
 
   return (
     <DivStyled>
-      <Layout
-        sections={[
-          {
-            items: [
-              {
-                text: <TabLabel>{trans("home.profile")}</TabLabel>,
-                routePath: USER_PROFILE_URL,
-                routeComp: UserProfileView,
-                icon: ({ selected, ...otherProps }) => selected ? <UserIcon {...otherProps} width={"24px"}/> : <UserIcon {...otherProps} width={"24px"}/>,
-              },
-              {
-                text: <TabLabel>{trans("home.news")}</TabLabel>,
-                routePath: NEWS_URL,
-                routeComp: NewsView,
-                icon: ({ selected, ...otherProps }) => selected ? <NewsIcon {...otherProps} width={"24px"}/> : <NewsIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => user.orgDev,
-                style: { color: "red" },
-              },
-              {
-                text: <TabLabel>{trans("home.orgHome")}</TabLabel>,
-                routePath: ORG_HOME_URL,
-                routePathExact: false,
-                routeComp: OrgView,
-                icon: ({ selected, ...otherProps }) => selected ? <WorkspacesIcon {...otherProps} width={"24px"}/> : <WorkspacesIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => !user.orgDev,
-              },
-              {
-                text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
-                routePath: MARKETPLACE_URL,
-                routePathExact: false,
-                routeComp: MarketplaceView,
-                icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
-              },
-            ]
-          },
+      <SubscriptionContextProvider>
+        <Layout
+          sections={[
+            {
+              items: [
+                {
+                  text: <TabLabel>{trans("home.profile")}</TabLabel>,
+                  routePath: USER_PROFILE_URL,
+                  routeComp: UserProfileView,
+                  icon: ({ selected, ...otherProps }) => selected ? <UserIcon {...otherProps} width={"24px"}/> : <UserIcon {...otherProps} width={"24px"}/>,
+                },
+                {
+                  text: <TabLabel>{trans("home.news")}</TabLabel>,
+                  routePath: NEWS_URL,
+                  routeComp: NewsView,
+                  icon: ({ selected, ...otherProps }) => selected ? <NewsIcon {...otherProps} width={"24px"}/> : <NewsIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => user.orgDev,
+                  style: { color: "red" },
+                },
+                {
+                  text: <TabLabel>{trans("home.orgHome")}</TabLabel>,
+                  routePath: ORG_HOME_URL,
+                  routePathExact: false,
+                  routeComp: OrgView,
+                  icon: ({ selected, ...otherProps }) => selected ? <WorkspacesIcon {...otherProps} width={"24px"}/> : <WorkspacesIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => !user.orgDev,
+                },
+                {
+                  text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
+                  routePath: MARKETPLACE_URL,
+                  routePathExact: false,
+                  routeComp: MarketplaceView,
+                  icon: ({ selected, ...otherProps }) => selected ? <MarketplaceIcon {...otherProps} width={"24px"}/> : <MarketplaceIcon {...otherProps} width={"24px"}/>,
+                },
+              ]
+            },
 
-          {
-            items: [
-              {
-                text: <MoreFoldersWrapper>{trans("home.allFolders")}</MoreFoldersWrapper>,
-                routePath: FOLDERS_URL,
-                routeComp: RootFolderListView,
-                icon: ({ selected, ...otherProps }) => selected ? <FolderIcon {...otherProps} width={"24px"}/> : <FolderIcon {...otherProps} width={"24px"}/>,
-              },
-              {
-                text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
-                routePath: ALL_APPLICATIONS_URL,
-                routeComp: HomeView,
-                icon: ({ selected, ...otherProps }) => selected ? <AppsIcon {...otherProps} width={"24px"}/> : <AppsIcon {...otherProps} width={"24px"}/>,
-              },
-            ],
-          },
-  
-          {
-            items: [
-              
-              {
-                text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
-                routePath: QUERY_LIBRARY_URL,
-                routeComp: QueryLibraryEditor,
-                icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => user.orgDev,
-              },
-              {
-                text: <TabLabel>{trans("home.datasource")}</TabLabel>,
-                routePath: DATASOURCE_URL,
-                routePathExact: false,
-                routeComp: DatasourceHome,
-                icon: ({ selected, ...otherProps }) => selected ? <HomeDataSourceIcon {...otherProps} width={"24px"}/> : <HomeDataSourceIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => user.orgDev,
-                onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
-              },
-            ],
-          },
-          isEE() ? {
-            items: [
-              {
-                text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
-                routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
-                routePathExact: false,
-                routeComp: AppEditor,
-                icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
-                visible: ({ user }) => user.orgDev,
-              },
-            ],
-          } : { items: [] },
+            {
+              items: [
+                {
+                  text: <MoreFoldersWrapper>{trans("home.allFolders")}</MoreFoldersWrapper>,
+                  routePath: FOLDERS_URL,
+                  routeComp: RootFolderListView,
+                  icon: ({ selected, ...otherProps }) => selected ? <FolderIcon {...otherProps} width={"24px"}/> : <FolderIcon {...otherProps} width={"24px"}/>,
+                },
+                {
+                  text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
+                  routePath: ALL_APPLICATIONS_URL,
+                  routeComp: HomeView,
+                  icon: ({ selected, ...otherProps }) => selected ? <AppsIcon {...otherProps} width={"24px"}/> : <AppsIcon {...otherProps} width={"24px"}/>,
+                },
+              ],
+            },
+    
+            {
+              items: [
+                
+                {
+                  text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
+                  routePath: QUERY_LIBRARY_URL,
+                  routeComp: QueryLibraryEditor,
+                  icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => user.orgDev,
+                },
+                {
+                  text: <TabLabel>{trans("home.datasource")}</TabLabel>,
+                  routePath: DATASOURCE_URL,
+                  routePathExact: false,
+                  routeComp: DatasourceHome,
+                  icon: ({ selected, ...otherProps }) => selected ? <HomeDataSourceIcon {...otherProps} width={"24px"}/> : <HomeDataSourceIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => user.orgDev,
+                  onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
+                },
+              ],
+            },
+            isEE() ? {
+              items: [
+                {
+                  text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
+                  routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
+                  routePathExact: false,
+                  routeComp: AppEditor,
+                  icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
+                  visible: ({ user }) => user.orgDev,
+                },
+              ],
+            } : { items: [] },
 
-          supportSubscription ? {
-            items: [
-              {
-                text: <TabLabel>{trans("home.support")}</TabLabel>,
-                routePath: SUPPORT_URL,
-                routeComp: Support,
-                routePathExact: false,
-                icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
-              },
-            ],
-          } : { items: [] },
+            supportSubscription ? {
+              items: [
+                {
+                  text: <TabLabel>{trans("home.support")}</TabLabel>,
+                  routePath: SUPPORT_URL,
+                  routeComp: Support,
+                  routePathExact: false,
+                  icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
+                },
+              ],
+            } : { items: [] },
 
-          {
-            items: [
-              {
-                text: <TabLabel>{trans("settings.title")}</TabLabel>,
-                routePath: SETTING_URL,
-                routePathExact: false,
-                routeComp: Setting,
-                icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => user.orgDev,
-                onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
-              }
-            ]
-          },
+            {
+              items: [
+                {
+                  text: <TabLabel>{trans("settings.title")}</TabLabel>,
+                  routePath: SETTING_URL,
+                  routePathExact: false,
+                  routeComp: Setting,
+                  icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => user.orgDev,
+                  onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
+                }
+              ]
+            },
 
-          {
-            items: [
-              {
-                text: <TabLabel>{trans("home.trash")}</TabLabel>,
-                routePath: TRASH_URL,
-                routeComp: TrashView,
-                icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => user.orgDev,
-              },
-            ],
-          },
+            {
+              items: [
+                {
+                  text: <TabLabel>{trans("home.trash")}</TabLabel>,
+                  routePath: TRASH_URL,
+                  routeComp: TrashView,
+                  icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
+                  visible: ({ user }) => user.orgDev,
+                },
+              ],
+            },
 
-          // this we need to show the Folders view in the Admin Area
-          {
-            items: [
-              {
-                text: "",
-                routePath: FOLDER_URL,
-                routeComp: FolderView,
-                visible: () => false,
-              }
-            ]
-          }
+            // this we need to show the Folders view in the Admin Area
+            {
+              items: [
+                {
+                  text: "",
+                  routePath: FOLDER_URL,
+                  routeComp: FolderView,
+                  visible: () => false,
+                }
+              ]
+            }
 
-        ]}
-      />
+          ]}
+        />
+      </SubscriptionContextProvider>
     </DivStyled>
   );
 }

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

@@ -11,15 +11,13 @@ import { SubscriptionContextProvider } from '@lowcoder-ee/util/context/Subscript
 
 export const Subscription = () => {
   return (
-    <SubscriptionContextProvider>
-      <Switch>
-        <Route path={SUBSCRIPTION_DETAIL} component={SubscriptionDetail} exact />
-        <Route path={SUBSCRIPTION_INFO} component={SubscriptionInfo} exact />
-        <Route path={SUBSCRIPTION_SUCCESS} component={SubscriptionSuccess} exact />
-        <Route path={SUBSCRIPTION_CANCEL} component={SubscriptionCancel} exact />
-        <Route path={SUBSCRIPTION_ERROR} component={SubscriptionError} exact />
-        <Route path={SUBSCRIPTION_SETTING} component={SubscriptionSetting} exact />
-      </Switch>
-    </SubscriptionContextProvider>
+    <Switch>
+      <Route path={SUBSCRIPTION_DETAIL} component={SubscriptionDetail} exact />
+      <Route path={SUBSCRIPTION_INFO} component={SubscriptionInfo} exact />
+      <Route path={SUBSCRIPTION_SUCCESS} component={SubscriptionSuccess} exact />
+      <Route path={SUBSCRIPTION_CANCEL} component={SubscriptionCancel} exact />
+      <Route path={SUBSCRIPTION_ERROR} component={SubscriptionError} exact />
+      <Route path={SUBSCRIPTION_SETTING} component={SubscriptionSetting} exact />
+    </Switch>
   );
 };

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

@@ -121,7 +121,7 @@ export const SubscriptionContextProvider = (props: {
     if (Boolean(deploymentId) && !customer) {
       initializeCustomer();
     }
-  }, [deploymentId, customer]);
+  }, [deploymentId]);
 
   useEffect(() => {
     const prepareCheckout = async () => {