Web: Added bonus to the article component.

packages/client/src/components/Article/Body/BonusItem.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+
+import CatalogItem from "@docspace/components/catalog-item";
+import { combineUrl } from "@docspace/common/utils";
+import history from "@docspace/common/history";
+
+import GiftReactSvgUrl from "PUBLIC_DIR/images/gift.react.svg?url";
+
+const PROXY_BASE_URL = combineUrl(
+  window.DocSpaceConfig?.proxy?.url,
+  "/portal-settings"
+);
+
+const bonusUrl = combineUrl(PROXY_BASE_URL, "/bonus");
+const BonusItem = ({ showText, toggleArticleOpen }) => {
+  const { t } = useTranslation("Common");
+
+  const onClick = React.useCallback(() => {
+    history.push(bonusUrl);
+    toggleArticleOpen();
+  }, []);
+
+  return (
+    <CatalogItem
+      key="bonus"
+      text={t("Common:Bonus")}
+      icon={GiftReactSvgUrl}
+      showText={showText}
+      onClick={onClick}
+      folderId="document_catalog-bonus"
+      style={{ marginTop: "16px" }}
+    />
+  );
+};
+
+export default inject(({ auth }) => {
+  const { settingsStore } = auth;
+  const { showText, toggleArticleOpen } = settingsStore;
+  return {
+    showText,
+    toggleArticleOpen,
+  };
+})(observer(BonusItem));

packages/client/src/components/Article/Body/Items.js

@@ -23,6 +23,7 @@ import DragAndDrop from "@docspace/components/drag-and-drop";
 import { isMobile } from "react-device-detect";
 import SettingsItem from "./SettingsItem";
 import AccountsItem from "./AccountsItem";
+import BonusItem from "./BonusItem";
 
 const StyledDragAndDrop = styled(DragAndDrop)`
   display: contents;
@@ -173,6 +174,8 @@ const Items = ({
   deleteAction,
   startDrag,
   emptyTrashInProgress,
+  standalone,
+  isEnterprise,
 }) => {
   useEffect(() => {
     data.forEach((elem) => {
@@ -382,6 +385,9 @@ const Items = ({
       if (!isVisitor) items.splice(3, 0, <CatalogDivider key="other-header" />);
       else items.splice(2, 0, <CatalogDivider key="other-header" />);
 
+      if (standalone && !isEnterprise)
+        items.push(<BonusItem key="bonus-item" />);
+
       return items;
     },
     [
@@ -428,6 +434,9 @@ export default inject(
     uploadDataStore,
     dialogsStore,
   }) => {
+    const { isEnterprise, settingsStore } = auth;
+    const { showText, docSpace, standalone } = settingsStore;
+
     const {
       selection,
       bufferSelection,
@@ -458,6 +467,7 @@ export default inject(
     const { setEmptyTrashDialogVisible } = dialogsStore;
 
     return {
+      isEnterprise,
       isAdmin: auth.isAdmin,
       isVisitor: auth.userStore.user.isVisitor,
       isCollaborator: auth.userStore.user.isCollaborator,
@@ -465,8 +475,9 @@ export default inject(
       commonId: commonFolderId,
       isPrivacy: isPrivacyFolder,
       currentId: id,
-      showText: auth.settingsStore.showText,
-      docSpace: auth.settingsStore.docSpace,
+      showText,
+      docSpace,
+      standalone,
       pathParts,
       data: treeFolders,
       selectedTreeNode,

packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js

@@ -59,6 +59,10 @@ const getTreeItems = (data, path, t) => {
         return t("SMTPSettings");
       case "DeveloperTools":
         return t("DeveloperTools");
+      case "Bonus":
+        return t("Common:Bonus");
+      case "FreeProFeatures":
+        return "Common:FreeProFeatures";
       default:
         throw new Error("Unexpected translation key");
     }
@@ -123,12 +127,16 @@ class ArticleBodyContent extends React.Component {
       settingsTree
     );
 
-    if (link === "") {
+    if (CurrentSettingsCategoryKey && link === "") {
       link = getSelectedLinkByKey(CurrentSettingsCategoryKey, settingsTree);
     }
 
+    if (props.tReady) props.setIsLoadedArticleBody(true);
+
     this.state = {
-      selectedKeys: [CurrentSettingsCategoryKey],
+      selectedKeys: CurrentSettingsCategoryKey
+        ? [CurrentSettingsCategoryKey]
+        : [[], []],
     };
   }
 
@@ -169,6 +177,9 @@ class ArticleBodyContent extends React.Component {
       if (this.props.location.pathname.includes("payments")) {
         this.setState({ selectedKeys: ["7-0"] });
       }
+      if (this.props.location.pathname.includes("bonus")) {
+        this.setState({ selectedKeys: ["8-0"] });
+      }
     }
   }
 
@@ -199,6 +210,7 @@ class ArticleBodyContent extends React.Component {
 
   mapKeys = (tKey) => {
     const { t } = this.props;
+
     switch (tKey) {
       case "AccessRights":
         return t("Common:AccessRights");
@@ -234,6 +246,10 @@ class ArticleBodyContent extends React.Component {
         return t("PortalDeletion");
       case "DeveloperTools":
         return t("DeveloperTools");
+      case "Common:Bonus":
+        return t("Common:Bonus");
+      case "Common:FreeProFeatures":
+        return "Common:FreeProFeatures";
       default:
         throw new Error("Unexpected translation key");
     }
@@ -263,6 +279,12 @@ class ArticleBodyContent extends React.Component {
       });
     }
 
+    if (!standalone) {
+      const index = resultTree.findIndex((el) => el.tKey === "Common:Bonus");
+      if (index !== -1) {
+        resultTree.splice(index, 1);
+      }
+    }
     if (standalone && !isEnterprise) {
       resultTree = [...settingsTree].filter((e) => {
         return e.tKey !== "Common:PaymentsTitle";
@@ -288,7 +310,11 @@ class ArticleBodyContent extends React.Component {
           isActive={item.key === selectedKeys[0][0]}
           onClick={() => this.onSelect(item.key)}
           folderId={item.id}
-          style={{ marginTop: `${item.key.includes(7) ? "16px" : "0"}` }}
+          style={{
+            marginTop: `${
+              item.key.includes(7) || item.key.includes(8) ? "16px" : "0"
+            }`,
+          }}
         />
       );
     });

packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js

@@ -132,7 +132,9 @@ class SectionHeaderContent extends React.Component {
     const arrayOfParams = resultPath.split("/");
 
     const key = getKeyByLink(arrayOfParams, settingsTree);
-    const currKey = key.length > 3 ? key : key[0];
+    let currKey = key.length > 3 ? key : key[0];
+    if (key === "8" || key === "8-0") currKey = "8-0";
+
     const header = getTKeyByKey(currKey, settingsTree);
     const isCategory = checkPropertyByLink(
       arrayOfParams,
@@ -176,7 +178,10 @@ class SectionHeaderContent extends React.Component {
     const arrayOfParams = this.getArrayOfParams();
 
     const key = getKeyByLink(arrayOfParams, settingsTree);
-    const currKey = key.length > 3 ? key : key[0];
+    let currKey = key.length > 3 ? key : key[0];
+
+    if (key === "8" || key === "8-0") currKey = "8-0";
+
     const header = getTKeyByKey(currKey, settingsTree);
     const isCategory = checkPropertyByLink(
       arrayOfParams,

packages/client/src/pages/PortalSettings/index.js

@@ -63,6 +63,8 @@ const Backup = lazy(() => import("./categories/data-management/index"));
 const RestoreBackup = lazy(() =>
   import("./categories/data-management/backup/restore-backup/index")
 );
+
+const Bonus = lazy(() => import("../Bonus"));
 const DeleteDataPage = lazy(() => import("./categories/delete-data"));
 
 const WhiteLabel = lazy(() =>
@@ -170,6 +172,8 @@ const SSO_URL = combineUrl(PROXY_BASE_URL, "/integration/single-sign-on");
 
 const SMTP_Settings = combineUrl(PROXY_BASE_URL, "/integration/smtp-settings");
 
+const bonus_Settings = combineUrl(combineUrl(PROXY_BASE_URL, "/bonus"));
+
 const DELETE_DATA_URLS = [
   combineUrl(PROXY_BASE_URL, "/delete-data/deletion"),
   combineUrl(PROXY_BASE_URL, "/delete-data/deactivation"),
@@ -232,6 +236,7 @@ const Settings = () => {
           <Route exact path={BACKUP_URLS} component={Backup} />
           <Route exact path={DELETE_DATA_URLS} component={DeleteDataPage} />
           <Route path={RESTORE_DATA_URL} component={RestoreBackup} />
+          <Route path={bonus_Settings} component={Bonus} />
           <Redirect to={{ pathname: ERROR_404_URL }} />
         </Switch>
       </Suspense>

packages/client/src/pages/PortalSettings/utils/settingsTree.js

@@ -7,7 +7,7 @@ import DataManagementIconUrl from "PUBLIC_DIR/images/data-management.react.svg?u
 import RestoreIconUrl from "PUBLIC_DIR/images/restore.react.svg?url";
 import TrashIconUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 import DeveloperReactSvgUrl from "PUBLIC_DIR/images/catalog.developer.react.svg?url";
-
+import GiftReactSvgUrl from "PUBLIC_DIR/images/gift.react.svg?url";
 /**
  * Array for generation current settings tree.
  */
@@ -348,6 +348,24 @@ export const settingsTree = [
       },
     ],
   },
+  {
+    id: "portal-settings_catalog-bonus",
+    key: "8",
+    icon: GiftReactSvgUrl,
+    link: "bonus",
+    tKey: "Common:Bonus",
+    isHeader: true,
+    children: [
+      {
+        id: "portal-settings_catalog-portal-bonus",
+        key: "8-0",
+        icon: "",
+        link: "bonus",
+        tKey: "Common:FreeProFeatures",
+        isCategory: true,
+      },
+    ],
+  },
 ];
 
 /**

public/images/gift.react.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_42837_103993)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5C0 4.67157 0.671573 4 1.5 4H7H9H14.5C15.3284 4 16 4.67157 16 5.5V10H15V14.5C15 15.3284 14.3284 16 13.5 16H9H7H2.5C1.67157 16 1 15.3284 1 14.5V10H0V5.5ZM9 14H13V10H9V14ZM7 10V14H3V10H7ZM9 8H13.5H14V6H9V8ZM7 6V8H2.5H2V6H7Z" fill="#657077"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.89455 2.44742L3.90191 2.4324C3.92265 2.38961 3.92325 2.38836 3.99853 2.38383C4.16242 2.37396 4.45365 2.43104 4.87058 2.61424C5.68303 2.97124 6.55633 3.61658 7.03596 4.00001H8.96412C9.44386 3.61658 10.3173 2.97132 11.1298 2.61437C11.5468 2.43117 11.838 2.3741 12.0019 2.38398C12.0771 2.38851 12.0777 2.38973 12.0983 2.43236L12.1057 2.44746L12.1073 2.45052C12.1123 2.45967 12.1171 2.4685 12.1054 2.5133C12.086 2.58682 12.0244 2.72121 11.8668 2.91381C11.5864 3.25656 11.1303 3.63043 10.5781 4.00001H13.5539C14.0046 3.37994 14.3649 2.49368 13.8946 1.55302C13.5116 0.787025 12.8373 0.430704 12.1223 0.387603C11.4879 0.349364 10.8487 0.553341 10.3253 0.783279C9.43429 1.17474 8.55815 1.78869 8.00007 2.21524C7.44208 1.78867 6.5661 1.1747 5.67514 0.78321C5.1518 0.553248 4.5127 0.349247 3.87833 0.387442C3.16331 0.430493 2.48908 0.786703 2.10592 1.55254C1.63521 2.49335 1.99568 3.37986 2.44644 4.00001H5.42237C4.87001 3.63034 4.4138 3.25638 4.13334 2.91358C3.97577 2.72098 3.91424 2.58662 3.89491 2.51315C3.88315 2.46842 3.88794 2.45962 3.89293 2.45048L3.89455 2.44742Z" fill="#657077"/>
+</g>
+<defs>
+<clipPath id="clip0_42837_103993">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/locales/en/Common.json

@@ -21,6 +21,7 @@
   "Authorization": "Authorization",
   "BarMaintenanceDescription": "We apologize for any short-term technical issues in service functioning that may appear on {{targetDate}} during the update of {{productName}}.",
   "BarMaintenanceDisclaimer": "Please, make sure that all the changes are successfully saved during this day.",
+  "Bonus": "Bonus",
   "BookNow": "Book now",
   "BookTeamTraining": "Book a team training session with our best specialists",
   "BookTraining": "Book a training",
@@ -109,6 +110,7 @@
   "FirstName": "First name",
   "FreeStartupPlan": "Free {{planName}} plan",
   "FullAccess": "Full access",
+  "FreeProFeatures": "Free access to pro features",
   "GetMoreOptions": "Get more security and branding options",
   "Gigabyte": "GB",
   "GracePeriodActivated": "Grace period activated",