Update Home Page

lowcoder-org · FalkWolsky · Sep 15, 2024 · Aug 10, 2024 · Aug 12, 2024 · Aug 17, 2024
commit d5e1c645c5b09ea2a95ca40a8e6953863a515a17
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -127,6 +127,7 @@ export { ReactComponent as HomeListIcon } from "./v1/icon-application-list.svg";
 export { ReactComponent as HomeCardIcon } from "./v1/icon-application-card.svg";
 export { ReactComponent as APIDocsIcon } from "./remix/instance-line.svg";
 export { ReactComponent as SubscriptionIcon } from "./remix/award-fill.svg";
+export { ReactComponent as SupportIcon } from "./remix/user-heart-line.svg";
 // export { ReactComponent as AllAppIcon } from "./v1/icon-all-app.svg";
 
 

diff --git a/client/packages/lowcoder/src/api/subscriptionApi.ts b/client/packages/lowcoder/src/api/subscriptionApi.ts
@@ -94,6 +94,29 @@
   quantity: number;
 }
 
+export interface Subscription {
+  id: string;
+  collection_method: string;
+  current_period_end: number;
+  current_period_start: number;
+  product: string;
+  currency: string;
+  interval: string;
+  tiers_mode: string;
+  status: string;
+  start_date: number;
+  quantity: number;
+  billing_scheme: string;
+  price: string;
+}
+
+export interface SubscriptionsData {
+  subscriptions: Subscription[];
+  subscriptionDataLoaded: boolean;
+  subscriptionDataError: boolean;
+  loading: boolean;
+}
+
 export type ResponseType = {
   response: any;
 };
@@ -398,18 +421,34 @@
   };
 };
 
+export enum SubscriptionProducts {
+  SUPPORT = "QW8L3WPMiNjQjI",
+  MEDIAPACKAGE = 'standard',
+  AZUREAPIS = 'premium',
+  GOOGLEAPIS = 'enterprise',
+  AWSAPIS = 'enterprise-global',
+  PRIVATECLOUD = 'private-cloud',
+  MATRIXCLOUD = 'matrix-cloud',
+  AGORATOKENSERVER = 'agora-tokenserver',
+  SIGNALSERVER = 'signal-server',
+  DATABASE = 'database',
+  STORAGE = 'storage',
+  IOSAPP = 'ios-app',
+  ANDROIDAPP = 'android-app',
+  AUDITLOG = 'audit-log',
+  APPLOG = 'app-log',
+  ENVIRONMENTS = 'environments',
+  GITREPOS = 'git-repos',
+}
 
-
-export const CheckSubscriptions = () => {
-  const [customer, setCustomer] = useState<StripeCustomer | null>(null);
-  const [customerDataError, setCustomerDataError] = useState<boolean>(false);
-  const [subscriptions, setSubscriptions] = useState<SubscriptionItem[]>([]);
+export const checkSubscriptions = () => {
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
   const [subscriptionDataLoaded, setSubscriptionDataLoaded] = useState<boolean>(false);
   const [subscriptionDataError, setSubscriptionDataError] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);

  const user = useSelector(getUser);
  const currentUser = useSelector(getCurrentUser);
  const orgID = user.currentOrgId;
  const domain = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');

@@ -420,7 +459,7 @@
    userId: user.id,
  };

  useEffect(() => {
    const fetchCustomerAndSubscriptions = async () => {
      try {
        const subs = await searchCustomersSubscriptions(subscriptionSearchCustomer);
@@ -433,7 +472,7 @@
       }
     };
     fetchCustomerAndSubscriptions();
-  }, []);
+  }, [subscriptionSearchCustomer]);
 
   return {
     subscriptions,

diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -10,6 +10,7 @@ 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 PERMISSION_SETTING = "/setting/permission";
 export const ORGANIZATION_SETTING = "/setting/organization";
 export const SUBSCRIPTION_SETTING = "/setting/subscription";

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -3020,7 +3020,7 @@ export const en = {
     "appMarketplace": "Application Marketplace",
     "allApplications": "Your Apps",
     "allModules": "Your Modules",
-    "allFolders": "All Folders",
+    "allFolders": "Your Folders",
     "yourFolders" : "Your Folders",
     "modules": "Modules",
     "module": "Module",
@@ -3109,6 +3109,9 @@ export const en = {
     "chooseNavType": "Please choose navigation type",
     "createNavigation": "Create Navigation",
     "howToUseAPI": "How to use the Open Rest API",
+    "support": "Support",
+    "supportTitle": "Lowcoder Support",
+    "supportContent": "If you have any questions or need help, please use the ticket system get your issue solved fast.",
   },
   "carousel": {
     "dotPosition": "Navigation Dots position",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -9,6 +9,7 @@
   MODULE_APPLICATIONS_URL,
   QUERY_LIBRARY_URL,
   SETTING,
+  SUPPORT,
   TRASH_URL,
   // ADMIN_APP_URL,
   NEWS_URL,
@@ -26,6 +27,7 @@
   HomeModuleIcon,
   HomeQueryLibraryIcon,
   HomeSettingIcon,
+  SupportIcon,
   PlusIcon,
   PointIcon,
   RecyclerIcon,
@@ -34,7 +36,7 @@
   EnterpriseIcon,
   UserIcon,
 } from "lowcoder-design";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { fetchAllApplications, fetchHomeData } from "redux/reduxActions/applicationActions";
 import { getHomeOrg, normalAppListSelector } from "redux/selectors/applicationSelector";
 import { DatasourceHome } from "../datasource";
@@ -64,6 +66,7 @@
 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";
 
 // adding App Editor, so we can show Apps inside the Admin Area
 import AppEditor from "../editor/AppEditor";
@@ -149,24 +152,20 @@
   );
 };
 
-const MoreFoldersWrapper = styled.div<{ $selected: boolean }>`
+const MoreFoldersWrapper = styled.div`
   ${(props) => {
-    if (props.$selected) {
-      return css`
-        font-weight: 500;
-      `;
-    }
+    return css` font-weight: 500;`;
   }}
 `;
 
-const MoreFoldersIcon = styled(PointIcon)<{ $selected: boolean }>`
+/* const MoreFoldersIcon = styled(PointIcon)<{ $selected: boolean }>`
   cursor: pointer;
   flex-shrink: 0;
 
   g {
     fill: ${(props) => (props.$selected ? "#4965f2" : "#8b8fa3")};
   }
-`;
+`; */
 
 const PopoverIcon = styled(PointIcon)`
   cursor: pointer;
@@ -188,26 +187,6 @@
   }
 `;
 
-const InviteUser = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  left: 10px;
-  top: calc(100vh - 60px);
-  padding: 12px 26px;
-  font-size: 14px;
-  cursor: pointer;
-  width: 219px;
-
-  &:hover {
-    color: #315efb;
-
-    svg g g {
-      stroke: #315efb;
-    }
-  }
-`;
-
 const CreateFolderIcon = styled.div`
   margin-left: auto;
   cursor: pointer;
@@ -259,15 +238,34 @@
   const orgHomeId = "root";
   const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
 
-  const handleFolderCreate = useCreateFolder();
+  const subscriptions = useSelector(state => state.subscriptions.subscriptions);
+  const subscriptionDataLoaded = useSelector(state => !state.subscriptions.loading);
+  const subscriptionDataError = useSelector(state => state.subscriptions.error);
+
+  // 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]);
+
+  // Early return if data is still loading or there was an error
+  if (fetchingUser || !subscriptionDataLoaded || subscriptionDataError) {
+    return <ProductLoading />;
+  }
+
   useEffect(() => {
     dispatch(fetchHomeData({}));
   }, [user.currentOrgId]);

  useEffect(() => {
    if (!org) {
      return;
    }
@@ -280,7 +278,7 @@
    setIsPreloadCompleted(true);
  }, [org, orgHomeId]);

  useEffect(() => {
    if (allAppCount !== 0) {
      return;
    }
@@ -298,52 +296,8 @@
     return <ProductLoading />;
   }
 
-  let folderItems: SideBarItemType[] = allFolders
-    .sort((a, b) => {
-      if (a.createAt === b.createAt) {
-        return 0;
-      }
-      return a.createAt < b.createAt ? 1 : -1;
-    })
-    .slice(0, 5)
-    .map((folder) => {
-      const path = FOLDER_URL_PREFIX + `/${folder.folderId}`;
-      return {
-        onSelected: (_, currentPath) => currentPath === path,
-        text: (props: { selected?: boolean }) => (
-          <FolderNameWrapper $selected={Boolean(props.selected)}>
-            <FolderName name={folder.name} id={folder.folderId} />
-          </FolderNameWrapper>
-        ),
-        routePath: FOLDER_URL,
-        routePathExact: false,
-        routeComp: FolderView,
-        icon: FolderIcon,
-        size: "small",
-        onClick: (currentPath) => currentPath !== path && history.push(path),
-      };
-    });
-
-  if (allFolders.length > 1) {
-    folderItems = [
-      ...folderItems,
-      {
-        text: (props: { selected?: boolean }) => (
-          <MoreFoldersWrapper $selected={Boolean(props.selected)}>{trans("home.allFolders")}</MoreFoldersWrapper>
-        ),
-        routePath: FOLDERS_URL,
-        routeComp: RootFolderListView,
-        icon: MoreFoldersIcon,
-        size: "small",
-      },
-    ];
-  }
-
-  if (folderItems.length > 0) {
-    folderItems[folderItems.length - 1] = {
-      ...folderItems[folderItems.length - 1],
-      style: { marginBottom: "4px" },
-    };
+  if (fetchingUser || !isPreloadCompleted || !subscriptionDataLoaded || subscriptionDataError) {
+    return <ProductLoading />;
   }
 
   return (
@@ -386,41 +340,21 @@
 
           {
             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"}/>,
               },
-              {
-                text: <TabLabel>{trans("home.allModules")}</TabLabel>,
-                routePath: MODULE_APPLICATIONS_URL,
-                routeComp: ModuleView,
-                icon: ({ selected, ...otherProps }) => selected ? <HomeModuleIcon {...otherProps} width={"24px"}/> : <HomeModuleIcon {...otherProps} width={"24px"}/>,
-                visible: ({ user }) => isOrgAdmin,
-              },
-
             ],
           },
-
-          allFolders.length > 0
-            ? {
-                title: (
-                  <FolderSectionLabel>
-                    {trans("home.yourFolders")}
-                    <FolderCountLabel>{`(${allFolders.length})`}</FolderCountLabel>
-                    {user.orgDev && (
-                      <CreateFolderIcon onClick={handleFolderCreate}>
-                        <PlusIcon />
-                      </CreateFolderIcon>
-                    )}
-                  </FolderSectionLabel>
-                ),
-                items: folderItems,
-                style: { marginTop: "8px" },
-              }
-            : { items: [] },
-
+
           {
             items: [
 
@@ -455,6 +389,17 @@
             ],
           } : { items: [] },
 
+          supportSubscription ? {
+            items: [
+              {
+                text: <TabLabel>{trans("home.trash")}</TabLabel>,
+                routePath: TRASH_URL,
+                routeComp: TrashView,
+                icon: ({ selected, ...otherProps }) => selected ? <RecyclerIcon {...otherProps} width={"24px"}/> : <RecyclerIcon {...otherProps} width={"24px"}/>,
+              },
+            ],
+          } : { items: [] },
+
           {
             items: [
               {
@@ -465,7 +410,7 @@
                 icon: ({ selected, ...otherProps }) => selected ? <HomeSettingIcon {...otherProps} width={"24px"}/> : <HomeSettingIcon {...otherProps} width={"24px"}/>,
                 visible: ({ user }) => user.orgDev,
                 onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
-              },
+              }
             ]
           },
 
@@ -483,20 +428,6 @@
 
         ]}
       />
-
-      {/* 
-        // we have the invite dialog in the Admin Area, so we don't need it here
-        {user.orgDev && (
-        <InviteDialog
-          trigger={
-            <InviteUser>
-              <InviteUserIcon style={{ marginRight: "8px" }} />
-              {trans("home.inviteUser")}
-            </InviteUser>
-          }
-          style={{ marginLeft: "auto" }}
-        />
-      )} */}
     </DivStyled>
   );
 }