Added Bonus page for Spaces. Added page redirection.

packages/client/webpack.config.js

@@ -355,6 +355,7 @@ module.exports = (env, argv) => {
         "./RestorePage":
           "./src/pages/PortalSettings/categories/data-management/backup/restore-backup",
         "./PaymentsPage": "./src/pages/PortalSettings/categories/payments",
+        "./BonusPage": "./src/pages/Bonus",
         "./ChangeStorageQuotaDialog":
           "./src/components/dialogs/ChangeStorageQuotaDialog",
       },

packages/management/src/App.tsx

@@ -26,7 +26,7 @@
 
 import { observer } from "mobx-react";
 import React, { useEffect } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { isMobileOnly } from "react-device-detect";
 
 import { ThemeKeys } from "@docspace/shared/enums";
@@ -53,10 +53,14 @@ declare global {
   }
 }
 
+let isPaymentPageUnavailable = true;
+let isBonusPageUnavailable = true;
+
 const App = observer(() => {
   const { authStore, userStore, settingsStore } = useStore();
+  const location = useLocation();
 
-  const { init } = authStore;
+  const { init, isCommunity, isLoaded } = authStore;
   const { setTheme, limitedAccessSpace, timezone } = settingsStore;
 
   window.timezone = timezone;
@@ -77,6 +81,21 @@ const App = observer(() => {
     if (userTheme) setTheme(userTheme);
   }, [userTheme]);
 
+  isPaymentPageUnavailable = location.pathname === "/payments" && isCommunity;
+  isBonusPageUnavailable = location.pathname === "/bonus" && !isCommunity;
+
+  useEffect(() => {
+    if (!isLoaded) return;
+
+    if (isPaymentPageUnavailable) {
+      window.location.replace("/management/bonus");
+    }
+
+    if (isBonusPageUnavailable) {
+      window.location.replace("/management/payments");
+    }
+  }, [isLoaded]);
+
   const rootElement = document.getElementById("root") as HTMLElement;
 
   const toast = isMobileOnly ? (
@@ -85,10 +104,12 @@ const App = observer(() => {
     <Toast />
   );
 
-  if (!settingsStore?.isLoaded) return <AppLoader />;
+  if (!isLoaded || isPaymentPageUnavailable || isBonusPageUnavailable)
+    return <AppLoader />;
 
   if ((userStore?.user && !userStore?.user?.isAdmin) || limitedAccessSpace)
     return <Error403 />;
+
   if (userStore?.isLoaded && !userStore?.user)
     return tryRedirectTo(window.location.origin);
 

packages/management/src/Layout/Article/Body/index.tsx

@@ -52,8 +52,9 @@ const ArticleBodyContent = () => {
 
   const { t } = useTranslation(["Settings", "Common"]);
 
-  const { settingsStore } = useStore();
+  const { settingsStore, authStore } = useStore();
 
+  const { isCommunity } = authStore;
   const { toggleArticleOpen, setIsBurgerLoading, currentColorScheme } =
     settingsStore;
 
@@ -86,6 +87,14 @@ const ArticleBodyContent = () => {
 
     let resultTree = settingsTree.filter((item) => item?.isHeader);
 
+    const deletionTKey = isCommunity ? "Common:PaymentsTitle" : "Common:Bonus";
+
+    const index = resultTree.findIndex((el) => el.tKey === deletionTKey);
+
+    if (index !== -1) {
+      resultTree.splice(index, 1);
+    }
+
     resultTree.map((item) => {
       items.push(
         <ArticleItem

packages/management/src/categories/bonus/index.tsx

@@ -0,0 +1,34 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import React from "react";
+import BonusPage from "client/BonusPage";
+
+const Bonus = () => {
+  return <BonusPage />;
+};
+
+export default Bonus;

packages/management/src/router.tsx

@@ -37,7 +37,7 @@ import AdditionalResPage from "client/AdditionalResPage";
 import Backup from "./categories/backup";
 import Restore from "./categories/restore";
 import Payments from "./categories/payments";
-
+import Bonus from "./categories/bonus";
 import ErrorBoundary from "./components/ErrorBoundaryWrapper";
 
 import Error404 from "@docspace/shared/components/errors/Error404";
@@ -95,6 +95,10 @@ const routes = [
         path: "payments",
         element: <Payments />,
       },
+      {
+        path: "bonus",
+        element: <Bonus />,
+      },
       {
         path: "preparation-portal",
         element: <PreparationPortal />,

packages/management/src/utils/settingsTree.ts

@@ -29,6 +29,7 @@ import BrandingSvgUrl from "PUBLIC_DIR/images/branding.react.svg?url";
 import DataManagementIconUrl from "PUBLIC_DIR/images/icons/16/catalog-settings-data-management.svg?url";
 import RestoreIconUrl from "PUBLIC_DIR/images/icons/16/catalog-settings-restore.svg?url";
 import PaymentIconUrl from "PUBLIC_DIR/images/icons/16/catalog-settings-payment.svg?url";
+import CatalogSettingsGiftReactSvgUrl from "PUBLIC_DIR/images/gift.react.svg?url";
 
 export const settingsTree = [
   {
@@ -92,4 +93,12 @@ export const settingsTree = [
     tKey: "Common:PaymentsTitle",
     isHeader: true,
   },
+  {
+    id: "management-settings_catalog-bonus",
+    key: "5",
+    icon: CatalogSettingsGiftReactSvgUrl,
+    link: "bonus",
+    tKey: "Common:Bonus",
+    isHeader: true,
+  },
 ];

packages/shared/store/AuthStore.ts

@@ -84,6 +84,8 @@ class AuthStore {
 
   clientError = false;
 
+  isPortalInfoLoaded = false;
+
   constructor(
     userStoreConst: UserStore,
     currentTariffStatusStoreConst: CurrentTariffStatusStore,
@@ -255,6 +257,8 @@ class AuthStore {
 
     this.currentQuotaStore?.setPortalQuotaValue(quota);
     this.currentTariffStatusStore?.setPortalTariffValue(tariff);
+
+    this.isPortalInfoLoaded = true;
   };
 
   setLanguage() {
@@ -274,7 +278,10 @@ class AuthStore {
     let success = false;
     if (this.isAuthenticated) {
       success =
-        (this.userStore?.isLoaded && this.settingsStore?.isLoaded) ?? false;
+        (this.userStore?.isLoaded &&
+          this.settingsStore?.isLoaded &&
+          this.isPortalInfoLoaded) ??
+        false;
 
       if (success) this.setLanguage();
     } else {