Showing Support Product Page

lowcoder-org · FalkWolsky · Sep 15, 2024 · Aug 10, 2024 · Aug 12, 2024 · Aug 17, 2024
commit 3e0450cd16c5fd800b47c35aabe7034d2e268be9
diff --git a/client/packages/lowcoder/src/api/subscriptionApi.ts b/client/packages/lowcoder/src/api/subscriptionApi.ts
@@ -441,7 +441,7 @@ export enum SubscriptionProducts {
   GITREPOS = 'git-repos',
 }
 
-export const checkSubscriptions = () => {
+export const CheckSubscriptions = () => {
   const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
   const [subscriptionDataLoaded, setSubscriptionDataLoaded] = useState<boolean>(false);
   const [subscriptionDataError, setSubscriptionDataError] = useState<boolean>(false);

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -21,7 +21,7 @@ import {
   ORG_AUTH_LOGIN_URL,
   ORG_AUTH_REGISTER_URL,
   QUERY_LIBRARY_URL,
-  SETTING,
+  SETTING_URL,
   TRASH_URL,
   USER_AUTH_URL,
   ADMIN_APP_URL,
@@ -324,7 +324,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                   FOLDERS_URL,
                   FOLDER_URL,
                   TRASH_URL,
-                  SETTING,
+                  SETTING_URL,
                   MARKETPLACE_URL,
                   ADMIN_APP_URL
                 ]}

diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -9,8 +9,8 @@ export const USER_PROFILE_URL = "/user/profile";
 export const NEWS_URL = "/news";
 export const ORG_HOME_URL = "/org/home";
 export const COMPONENT_DOC_URL = "/components";
-export const SETTING = "/setting";
-export const SUPPORT = `/support`;
+export const SETTING_URL = "/setting";
+export const SUPPORT_URL = `/support`;
 export const PERMISSION_SETTING = "/setting/permission";
 export const ORGANIZATION_SETTING = "/setting/organization";
 export const SUBSCRIPTION_SETTING = "/setting/subscription";

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -8,10 +8,9 @@ import {
   MARKETPLACE_URL,
   MODULE_APPLICATIONS_URL,
   QUERY_LIBRARY_URL,
-  SETTING,
-  SUPPORT,
+  SETTING_URL,
+  SUPPORT_URL,
   TRASH_URL,
-  // ADMIN_APP_URL,
   NEWS_URL,
   ORG_HOME_URL,
 } from "constants/routesURL";
@@ -47,7 +46,6 @@ import { Layout } from "../../components/layout/Layout";
 import { HomeView } from "./HomeView";
 import { UserProfileView } from "./UserProfileView";
 import { NewsView } from "./NewsView";
-// import { ApiDocView } from "./ApiDocView";
 import { OrgView } from "./OrgView";
 import styled, { css } from "styled-components";
 import history from "../../util/history";
@@ -66,10 +64,11 @@ import Setting from "pages/setting";
 import { TypographyText } from "../../components/TypographyText";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { isEE } from "util/envUtils";
-import { checkSubscriptions, SubscriptionProducts } from "@lowcoder-ee/api/subscriptionApi";
+import { CheckSubscriptions, SubscriptionProducts, Subscription } from "@lowcoder-ee/api/subscriptionApi";
 
 // adding App Editor, so we can show Apps inside the Admin Area
 import AppEditor from "../editor/AppEditor";
+import { set } from "lodash";
 
 const TabLabel = styled.div`
   font-weight: 500;
@@ -237,32 +236,22 @@ export default function ApplicationHome() {
   const allFoldersCount = allFolders.length;
   const orgHomeId = "root";
   const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
-
-  const subscriptions = useSelector(state => state.subscriptions.subscriptions);
-  const subscriptionDataLoaded = useSelector(state => !state.subscriptions.loading);
-  const subscriptionDataError = useSelector(state => state.subscriptions.error);
+  const [supportSubscription, setSupportSubscription] = useState(true);
 
   // const handleFolderCreate = useCreateFolder();
-
-  const isOrgAdmin = org?.createdBy == user.id ? true : false;
-
-  // Fetch subscriptions once on component mount
-  useEffect(() => {
-    dispatch(checkSubscriptions());
-  }, [dispatch]);
 
-  // Calculate support subscription status
-  const supportSubscription = useMemo(() => {
-    return subscriptions.some((sub: { product: SubscriptionProducts; }) => sub.product === SubscriptionProducts.SUPPORT);
-  }, [subscriptions]);
+   // we also want to check the subscription
+   /* const { subscriptions: subscriptionData, subscriptionDataLoaded, subscriptionDataError } = dispatch(CheckSubscriptions());
 
-  // Early return if data is still loading or there was an error
-  if (fetchingUser || !subscriptionDataLoaded || subscriptionDataError) {
-    return <ProductLoading />;
-  }
+   if (subscriptionDataLoaded && !subscriptionDataError) {
+     setSupportSubscription(subscriptionData.some(sub => sub.product === SubscriptionProducts.SUPPORT));
+   } */
+
+  const isOrgAdmin = org?.createdBy == user.id ? true : false;
 
   useEffect(() => {
     dispatch(fetchHomeData({}));
+
   }, [user.currentOrgId]);
 
   useEffect(() => {
@@ -296,10 +285,6 @@ export default function ApplicationHome() {
     return <ProductLoading />;
   }
 
-  if (fetchingUser || !isPreloadCompleted || !subscriptionDataLoaded || subscriptionDataError) {
-    return <ProductLoading />;
-  }
-
   return (
     <DivStyled>
       <Layout
@@ -392,10 +377,10 @@ export default function ApplicationHome() {
           supportSubscription ? {
             items: [
               {
-                text: <TabLabel>{trans("home.trash")}</TabLabel>,
-                routePath: TRASH_URL,
+                text: <TabLabel>{trans("home.support")}</TabLabel>,
+                routePath: SUPPORT_URL,
                 routeComp: TrashView,
-                icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
+                icon: ({ selected, ...otherProps }) => selected ? <SupportIcon {...otherProps} width={"24px"}/> : <SupportIcon {...otherProps} width={"24px"}/>,
               },
             ],
           } : { items: [] },
@@ -404,7 +389,7 @@ export default function ApplicationHome() {
             items: [
               {
                 text: <TabLabel>{trans("settings.title")}</TabLabel>,
-                routePath: SETTING,
+                routePath: SETTING_URL,
                 routePathExact: false,
                 routeComp: Setting,
                 icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,

diff --git a/client/packages/lowcoder/src/pages/setting/index.tsx b/client/packages/lowcoder/src/pages/setting/index.tsx
@@ -1,4 +1,4 @@
-import { BASE_URL, SETTING } from "constants/routesURL";
+import { BASE_URL, SETTING_URL } from "constants/routesURL";
 import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import { currentOrgAdminOrDev } from "util/permissionUtils";
@@ -15,7 +15,7 @@ export function Setting() {
 
   return (
     <Switch>
-      <Route path={[`${SETTING}/:setting`, SETTING]} component={SettingHome} />
+      <Route path={[`${SETTING_URL}/:setting`, SETTING_URL]} component={SettingHome} />
     </Switch>
   );
 }

diff --git a/client/packages/lowcoder/src/pages/setting/permission/index.tsx b/client/packages/lowcoder/src/pages/setting/permission/index.tsx
@@ -1,12 +1,12 @@
 import { Route, Switch } from "react-router";
 import PermissionList from "./permissionList";
 import PermissionDetail from "./permissionDetail";
-import { PERMISSION_SETTING, PERMISSION_SETTING_DETAIL, SETTING } from "constants/routesURL";
+import { PERMISSION_SETTING, PERMISSION_SETTING_DETAIL, SETTING_URL } from "constants/routesURL";
 
 export default () => {
   return (
     <Switch>
-      <Route path={[SETTING, PERMISSION_SETTING]} component={PermissionList} exact />
+      <Route path={[SETTING_URL, PERMISSION_SETTING]} component={PermissionList} exact />
       <Route path={PERMISSION_SETTING_DETAIL} component={PermissionDetail} />
     </Switch>
   );