Merge pull request #515 from ONLYOFFICE/feature/update-react-router-dom

Feature/update react router dom

packages/client/src/Client.jsx

@@ -191,7 +191,7 @@ const ClientContent = (props) => {
   );
 };
 
-const Client = inject(
+export const Client = inject(
   ({
     authStore,
     clientLoadingStore,
@@ -262,5 +262,3 @@ const Client = inject(
     };
   },
 )(withTranslation("Common")(observer(ClientContent)));
-
-export default () => <Client />;

packages/client/src/components/Error520Wrapper/index.tsx

@@ -33,17 +33,19 @@ const Error520Wrapper = (props: Error520Props) => {
   return <Error520 {...props} />;
 };
 
-export default inject<TStore>(({ authStore, settingsStore, userStore }) => {
-  const { firebaseHelper, currentDeviceType, currentColorScheme } =
-    settingsStore;
-  const { user } = userStore;
-  const version = authStore.version;
+export const Error520Component = inject<TStore>(
+  ({ authStore, settingsStore, userStore }) => {
+    const { firebaseHelper, currentDeviceType, currentColorScheme } =
+      settingsStore;
+    const { user } = userStore;
+    const version = authStore.version;
 
-  return {
-    user,
-    version,
-    firebaseHelper,
-    currentDeviceType,
-    currentColorScheme,
-  };
-})(observer(Error520Wrapper));
+    return {
+      user,
+      version,
+      firebaseHelper,
+      currentDeviceType,
+      currentColorScheme,
+    };
+  },
+)(observer(Error520Wrapper));

packages/client/src/components/ErrorUnavailableWrapper/index.tsx

@@ -33,7 +33,7 @@ const ErrorUnavailableWrapper = (props: ErrorUnavailableProps) => {
   return <ErrorUnavailable {...props} />;
 };
 
-export default inject<TStore>(({ settingsStore }) => {
+export const Component = inject<TStore>(({ settingsStore }) => {
   const { whiteLabelLogoUrls } = settingsStore;
 
   return {

packages/client/src/components/System/index.js

@@ -29,7 +29,7 @@ import AppLoader from "@docspace/common/components/AppLoader";
 import Error404 from "@docspace/shared/components/errors/Error404";
 
 import ErrorBoundary from "../ErrorBoundaryWrapper";
-import Error520 from "../Error520Wrapper";
+import { Error520Component } from "../Error520Wrapper";
 
 function loadComponent(scope, module) {
   return async () => {
@@ -115,7 +115,7 @@ const System = (props) => {
 
   if (failed) {
     console.log(`Failed to load dynamic script: ${props.system.url}`);
-    return <Error520 />;
+    return <Error520Component />;
   }
 
   const Component = React.lazy(

packages/client/src/components/dialogs/PreparationPortalDialog/index.js

@@ -28,7 +28,7 @@ import React from "react";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-import PreparationPortal from "@docspace/shared/pages/PreparationPortal";
+import { PreparationPortal } from "@docspace/shared/pages/PreparationPortal";
 import StyledPreparationPortalDialog from "./StyledPreparationPortalDialog";
 
 const PreparationPortalDialog = (props) => {

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

@@ -49,7 +49,7 @@ const BodyWrapper = inject(({ settingsStore }) => {
   };
 })(withTranslation(["About", "Common"])(observer(Body)));
 
-const About = (props) => {
+export const About = (props) => {
   return (
     <SectionWrapper>
       <Section.SectionHeader>
@@ -61,5 +61,3 @@ const About = (props) => {
     </SectionWrapper>
   );
 };
-
-export default About;

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

@@ -62,7 +62,7 @@ const Bonus = ({ standaloneInit, isInitPaymentPage }) => {
   );
 };
 
-export default inject(({ paymentStore }) => {
+export const Component = inject(({ paymentStore }) => {
   const { standaloneInit, isInitPaymentPage } = paymentStore;
   return {
     standaloneInit,

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

@@ -24,13 +24,16 @@
 // 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 { Outlet } from "react-router-dom";
 
-const Confirm = () => {
+import ErrorBoundaryWrapper from "SRC_DIR/components/ErrorBoundaryWrapper";
+
+export const Component = () => {
   //console.log("Confirm render");
 
-  return <Outlet />;
+  return (
+    <ErrorBoundaryWrapper>
+      <Outlet />
+    </ErrorBoundaryWrapper>
+  );
 };
-
-export default Confirm;

packages/client/src/pages/Confirm/sub-components/activateEmail.js

@@ -26,12 +26,14 @@
 
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
+import { inject, observer } from "mobx-react";
+
 import { Loader } from "@docspace/shared/components/loader";
 import Section from "@docspace/shared/components/section";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import tryRedirectTo from "@docspace/shared/utils/tryRedirectTo";
-import { inject, observer } from "mobx-react";
 import { EmployeeActivationStatus } from "@docspace/shared/enums";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 import SectionWrapper from "SRC_DIR/components/Section";
 
 const ActivateEmail = ({ updateEmailActivationStatus, linkData }) => {
@@ -89,9 +91,17 @@ const ActivateEmailForm = (props) => (
   </SectionWrapper>
 );
 
-export default inject(({ userStore }) => {
+const ComponentWrapper = inject(({ userStore }) => {
   const { updateEmailActivationStatus } = userStore;
   return {
     updateEmailActivationStatus,
   };
 })(observer(ActivateEmailForm));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/activateUser.js

@@ -52,6 +52,8 @@ import {
 } from "./StyledCreateUser";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
 import GreetingUserContainer from "./GreetingUserContainer";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
+import { AuthenticatedAction } from "SRC_DIR/helpers/enums";
 
 const ActivateUserForm = (props) => {
   const { t, settings, linkData, hashSettings, defaultPage, login } = props;
@@ -278,7 +280,7 @@ const ActivateUserForm = (props) => {
   );
 };
 
-export default inject(({ authStore, settingsStore }) => {
+const ComponentWrapper = inject(({ authStore, settingsStore }) => {
   const {
     greetingSettings,
     hashSettings,
@@ -299,3 +301,11 @@ export default inject(({ authStore, settingsStore }) => {
     withLoader(observer(ActivateUserForm)),
   ),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute doAuthenticated={AuthenticatedAction.Redirect}>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/auth.js

@@ -34,6 +34,8 @@ import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { toastr } from "@docspace/shared/components/toast";
 import { frameCallEvent } from "@docspace/shared/utils/common";
 import SectionWrapper from "SRC_DIR/components/Section";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
+import { AuthenticatedAction } from "SRC_DIR/helpers/enums";
 const Auth = (props) => {
   //console.log("Auth render");
   const { linkData } = props;
@@ -99,4 +101,10 @@ const AuthPage = (props) => (
   </SectionWrapper>
 );
 
-export default AuthPage;
+export const Component = () => {
+  return (
+    <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
+      <AuthPage />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/changeEmail.js

@@ -32,6 +32,7 @@ import Section from "@docspace/shared/components/section";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import tryRedirectTo from "@docspace/shared/utils/tryRedirectTo";
 import SectionWrapper from "SRC_DIR/components/Section";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 class ChangeEmail extends React.PureComponent {
   componentDidMount() {
     const { changeEmail, isLoaded, linkData } = this.props;
@@ -107,7 +108,7 @@ const ChangeEmailForm = (props) => (
   </SectionWrapper>
 );
 
-export default inject(({ authStore, settingsStore, userStore }) => {
+const ComponentWrapper = inject(({ authStore, settingsStore, userStore }) => {
   const { isLoaded } = authStore;
   return {
     isLoaded,
@@ -115,3 +116,11 @@ export default inject(({ authStore, settingsStore, userStore }) => {
     defaultPage: settingsStore.defaultPage,
   };
 })(observer(ChangeEmailForm));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/changeOwner.js

@@ -42,6 +42,7 @@ import { toastr } from "@docspace/shared/components/toast";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
 import { ownerChange } from "@docspace/shared/api/settings";
 import { getUserFromConfirm } from "@docspace/shared/api/people";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const ChangeOwnerForm = (props) => {
   const { t, greetingTitle, linkData, history } = props;
@@ -128,9 +129,17 @@ const ChangeOwnerForm = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
   defaultPage: settingsStore.defaultPage,
 }))(
   withTranslation(["Confirm", "Common"])(withLoader(observer(ChangeOwnerForm))),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/changePassword.js

@@ -42,6 +42,7 @@ import { getPasswordErrorMessage } from "@docspace/shared/utils/getPasswordError
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
 import withLoader from "../withLoader";
 import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 import { ALLOWED_PASSWORD_CHARACTERS } from "@docspace/shared/constants";
 
 const ChangePasswordForm = (props) => {
@@ -207,7 +208,7 @@ const ChangePasswordForm = (props) => {
   );
 };
 
-export default inject(({ authStore, settingsStore, setup }) => {
+const ComponentWrapper = inject(({ authStore, settingsStore, setup }) => {
   const {
     greetingSettings,
     hashSettings,
@@ -233,3 +234,11 @@ export default inject(({ authStore, settingsStore, setup }) => {
     withLoader(observer(ChangePasswordForm)),
   ),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/changePhone.js

@@ -35,6 +35,7 @@ import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm";
 import withLoader from "../withLoader";
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const ChangePhoneForm = (props) => {
   const { t, greetingTitle } = props;
@@ -90,6 +91,14 @@ const ChangePhoneForm = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
 }))(withTranslation("Confirm")(withLoader(observer(ChangePhoneForm))));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/continuePortal.js

@@ -44,6 +44,8 @@ import withLoader from "../withLoader";
 
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
+import { AuthenticatedAction } from "SRC_DIR/helpers/enums";
 
 const ContinuePortal = (props) => {
   const { t, greetingTitle, linkData } = props;
@@ -118,9 +120,17 @@ const ContinuePortal = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
   theme: settingsStore.theme,
 }))(
   withTranslation(["Confirm", "Common"])(withLoader(observer(ContinuePortal))),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -74,6 +74,8 @@ import LanguageComboboxWrapper from "./LanguageCombobox";
 import withCultureNames from "SRC_DIR/HOCs/withCultureNames";
 
 import { setCookie } from "@docspace/shared/utils/cookie";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
+import { AuthenticatedAction } from "SRC_DIR/helpers/enums";
 
 const DEFAULT_ROOM_TEXT =
   "<strong>{{firstName}} {{lastName}}</strong> invites you to join the room <strong>{{roomName}}</strong> for secure document collaboration.";
@@ -727,7 +729,7 @@ const CreateUserForm = (props) => {
   );
 };
 
-export default inject(({ settingsStore, authStore }) => {
+const ComponentWrapper = inject(({ settingsStore, authStore }) => {
   const { providers, thirdPartyLogin, capabilities } = authStore;
   const {
     passwordSettings,
@@ -760,3 +762,11 @@ export default inject(({ settingsStore, authStore }) => {
     ),
   ),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute doAuthenticated={AuthenticatedAction.None}>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/deactivatePortal.js

@@ -44,6 +44,8 @@ import withLoader from "../withLoader";
 
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
+import { AuthenticatedAction } from "SRC_DIR/helpers/enums";
 
 const DeactivatePortal = (props) => {
   const { t, greetingTitle, linkData, companyInfoSettingsData } = props;
@@ -122,7 +124,7 @@ const DeactivatePortal = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
   theme: settingsStore.theme,
   companyInfoSettingsData: settingsStore.companyInfoSettingsData,
@@ -131,3 +133,11 @@ export default inject(({ settingsStore }) => ({
     withLoader(observer(DeactivatePortal)),
   ),
 );
+
+export const Component = () => {
+  return (
+    <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/profileRemove.js

@@ -37,6 +37,7 @@ import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm";
 import withLoader from "../withLoader";
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const ProfileRemoveForm = (props) => {
   const { t, greetingTitle, linkData, legalTerms, currentColorScheme } = props;
@@ -151,9 +152,17 @@ const ProfileRemoveForm = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
   theme: settingsStore.theme,
   legalTerms: settingsStore.legalTerms,
   currentColorScheme: settingsStore.currentColorScheme,
 }))(withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm))));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/removePortal.js

@@ -45,6 +45,7 @@ import withLoader from "../withLoader";
 
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const RemovePortal = (props) => {
   const { t, greetingTitle, linkData, companyInfoSettingsData } = props;
@@ -123,8 +124,16 @@ const RemovePortal = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => ({
+const ComponentWrapper = inject(({ settingsStore }) => ({
   greetingTitle: settingsStore.greetingSettings,
   theme: settingsStore.theme,
   companyInfoSettingsData: settingsStore.companyInfoSettingsData,
 }))(withTranslation(["Confirm", "Common"])(withLoader(observer(RemovePortal))));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/tfaActivation.js

@@ -49,6 +49,7 @@ import {
 } from "@docspace/shared/api/settings";
 import { loginWithTfaCode } from "@docspace/shared/api/user";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const StyledForm = styled(Box)`
   margin: 56px auto;
@@ -342,7 +343,7 @@ const TfaActivationWrapper = (props) => {
   );
 };
 
-export default inject(({ settingsStore, confirm, tfaStore }) => ({
+const ComponentWrapper = inject(({ settingsStore, confirm, tfaStore }) => ({
   setIsLoaded: confirm.setIsLoaded,
   setIsLoading: confirm.setIsLoading,
   tfaAndroidAppUrl: tfaStore.tfaAndroidAppUrl,
@@ -350,3 +351,11 @@ export default inject(({ settingsStore, confirm, tfaStore }) => ({
   tfaWinAppUrl: tfaStore.tfaWinAppUrl,
   currentColorScheme: settingsStore.currentColorScheme,
 }))(withTranslation(["Confirm", "Common"])(observer(TfaActivationWrapper)));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

packages/client/src/pages/Confirm/sub-components/tfaAuth.js

@@ -42,6 +42,7 @@ import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo";
 import { StyledPage, StyledContent } from "./StyledConfirm";
 import { validateTfaCode } from "@docspace/shared/api/settings";
 import { loginWithTfaCode } from "@docspace/shared/api/user";
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const StyledForm = styled(Box)`
   margin: 56px auto;
@@ -205,9 +206,17 @@ const TfaAuthFormWrapper = (props) => {
   return <TfaAuthForm {...props} />;
 };
 
-export default inject(({ settingsStore, confirm }) => ({
+const ComponentWrapper = inject(({ settingsStore, confirm }) => ({
   setIsLoaded: confirm.setIsLoaded,
   setIsLoading: confirm.setIsLoading,
 
   defaultPage: settingsStore.defaultPage,
 }))(withTranslation(["Confirm", "Common"])(observer(TfaAuthFormWrapper)));
+
+export const Component = () => {
+  return (
+    <ConfirmRoute>
+      <ComponentWrapper />
+    </ConfirmRoute>
+  );
+};

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

@@ -127,7 +127,7 @@ const FormGallery = ({
   );
 };
 
-export default inject(({ oformsStore }) => ({
+export const WrappedComponent = inject(({ oformsStore }) => ({
   oformsLoadError: oformsStore.oformsLoadError,
 
   currentCategory: oformsStore.currentCategory,

packages/client/src/pages/Home/Hooks/useInsideGroup.js

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import { matchPath } from "react-router";
+import { matchPath } from "react-router-dom";
 
 import AccountsFilter from "@docspace/shared/api/people/filter";
 

packages/client/src/pages/Home/Section/SettingsBody/index.js

@@ -28,7 +28,7 @@ import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 
-import Error520 from "../../../../components/Error520Wrapper";
+import { Error520Component } from "../../../../components/Error520Wrapper";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import config from "PACKAGE_FILE";
@@ -87,7 +87,7 @@ const SectionBodyContent = ({ isErrorSettings, user }) => {
   //const showAdminSettings = user.isAdmin || user.isOwner;
 
   return isErrorSettings ? (
-    <Error520 />
+    <Error520Component />
   ) : (
     <StyledContainer>
       <PersonalSettings

packages/client/src/pages/Home/View/Accounts.js

@@ -29,7 +29,7 @@ import { Consumer } from "@docspace/shared/utils";
 
 import { AccountsSectionBodyContent } from "../Section";
 
-const AccountsView = () => {
+export const AccountsView = () => {
   return (
     <Consumer>
       {(context) => (
@@ -40,5 +40,3 @@ const AccountsView = () => {
     </Consumer>
   );
 };
-
-export default AccountsView;

packages/client/src/pages/Home/View/Files.js

@@ -29,7 +29,7 @@ import { Consumer } from "@docspace/shared/utils";
 
 import { SectionBodyContent } from "../Section";
 
-const FilesView = () => {
+export const FilesView = () => {
   return (
     <Consumer>
       {(context) => (
@@ -42,5 +42,3 @@ const FilesView = () => {
     </Consumer>
   );
 };
-
-export default FilesView;

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

@@ -430,7 +430,7 @@ const PureHome = (props) => {
 
 const Home = withTranslation(["Files", "People"])(PureHome);
 
-export default inject(
+export const Component = inject(
   ({
     authStore,
     filesStore,

packages/client/src/pages/PortalSettings/categories/common/Branding/additionalResources.js

@@ -84,7 +84,7 @@ const StyledComponent = styled.div`
   }
 `;
 
-const AdditionalResources = (props) => {
+const AdditionalResourcesComponent = (props) => {
   const {
     t,
     tReady,
@@ -318,32 +318,36 @@ const AdditionalResources = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
-  const { setIsLoadedAdditionalResources, isLoadedAdditionalResources } =
-    common;
+export const AdditionalResources = inject(
+  ({ settingsStore, common, currentQuotaStore }) => {
+    const { setIsLoadedAdditionalResources, isLoadedAdditionalResources } =
+      common;
 
-  const {
-    getAdditionalResources,
+    const {
+      getAdditionalResources,
 
-    additionalResourcesData,
-    additionalResourcesIsDefault,
-    deviceType,
-  } = settingsStore;
+      additionalResourcesData,
+      additionalResourcesIsDefault,
+      deviceType,
+    } = settingsStore;
 
-  const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
+    const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
 
-  return {
-    getAdditionalResources,
+    return {
+      getAdditionalResources,
 
-    additionalResourcesData,
-    additionalResourcesIsDefault,
-    setIsLoadedAdditionalResources,
-    isLoadedAdditionalResources,
-    isSettingPaid: isBrandingAndCustomizationAvailable,
-    deviceType,
-  };
-})(
+      additionalResourcesData,
+      additionalResourcesIsDefault,
+      setIsLoadedAdditionalResources,
+      isLoadedAdditionalResources,
+      isSettingPaid: isBrandingAndCustomizationAvailable,
+      deviceType,
+    };
+  },
+)(
   withLoading(
-    withTranslation(["Settings", "Common"])(observer(AdditionalResources)),
+    withTranslation(["Settings", "Common"])(
+      observer(AdditionalResourcesComponent),
+    ),
   ),
 );

packages/client/src/pages/PortalSettings/categories/common/Branding/companyInfoSettings.js

@@ -78,7 +78,7 @@ const StyledComponent = styled.div`
   }
 `;
 
-const CompanyInfoSettings = (props) => {
+const CompanyInfoSettingsComponent = (props) => {
   const {
     t,
     isSettingPaid,
@@ -495,38 +495,42 @@ const CompanyInfoSettings = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
-  const {
-    setIsLoadedCompanyInfoSettingsData,
-    isLoadedCompanyInfoSettingsData,
-  } = common;
+export const CompanyInfoSettings = inject(
+  ({ settingsStore, common, currentQuotaStore }) => {
+    const {
+      setIsLoadedCompanyInfoSettingsData,
+      isLoadedCompanyInfoSettingsData,
+    } = common;
 
-  const {
-    getCompanyInfoSettings,
+    const {
+      getCompanyInfoSettings,
 
-    companyInfoSettingsIsDefault,
+      companyInfoSettingsIsDefault,
 
-    companyInfoSettingsData,
-    buildVersionInfo,
-    deviceType,
-  } = settingsStore;
+      companyInfoSettingsData,
+      buildVersionInfo,
+      deviceType,
+    } = settingsStore;
 
-  const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
+    const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
 
-  return {
-    getCompanyInfoSettings,
+    return {
+      getCompanyInfoSettings,
 
-    companyInfoSettingsIsDefault,
+      companyInfoSettingsIsDefault,
 
-    companyInfoSettingsData,
-    setIsLoadedCompanyInfoSettingsData,
-    isLoadedCompanyInfoSettingsData,
-    buildVersionInfo,
-    isSettingPaid: isBrandingAndCustomizationAvailable,
-    deviceType,
-  };
-})(
+      companyInfoSettingsData,
+      setIsLoadedCompanyInfoSettingsData,
+      isLoadedCompanyInfoSettingsData,
+      buildVersionInfo,
+      isSettingPaid: isBrandingAndCustomizationAvailable,
+      deviceType,
+    };
+  },
+)(
   withLoading(
-    withTranslation(["Settings", "Common"])(observer(CompanyInfoSettings)),
+    withTranslation(["Settings", "Common"])(
+      observer(CompanyInfoSettingsComponent),
+    ),
   ),
 );

packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js

@@ -54,7 +54,7 @@ import {
 import isEqual from "lodash/isEqual";
 import { DeviceType, WhiteLabelLogoType } from "@docspace/shared/enums";
 
-const WhiteLabel = (props) => {
+const WhiteLabelComponent = (props) => {
   const {
     t,
     isSettingPaid,
@@ -562,48 +562,54 @@ const WhiteLabel = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
-  const {
-    setLogoText,
-    whiteLabelLogoText,
-    getWhiteLabelLogoText,
-    restoreWhiteLabelSettings,
-    initSettings,
-    saveWhiteLabelSettings,
-    logoUrlsWhiteLabel,
-    setLogoUrlsWhiteLabel,
-    defaultLogoTextWhiteLabel,
-    enableRestoreButton,
-    resetIsInit,
-    isWhitelableLoaded,
-  } = common;
+export const WhiteLabel = inject(
+  ({ settingsStore, common, currentQuotaStore }) => {
+    const {
+      setLogoText,
+      whiteLabelLogoText,
+      getWhiteLabelLogoText,
+      restoreWhiteLabelSettings,
+      initSettings,
+      saveWhiteLabelSettings,
+      logoUrlsWhiteLabel,
+      setLogoUrlsWhiteLabel,
+      defaultLogoTextWhiteLabel,
+      enableRestoreButton,
+      resetIsInit,
+      isWhitelableLoaded,
+    } = common;
 
-  const {
-    whiteLabelLogoUrls: defaultWhiteLabelLogoUrls,
-    deviceType,
-    standalone,
-  } = settingsStore;
-  const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
+    const {
+      whiteLabelLogoUrls: defaultWhiteLabelLogoUrls,
+      deviceType,
+      standalone,
+    } = settingsStore;
+    const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
 
-  return {
-    setLogoText,
-    theme: settingsStore.theme,
-    logoText: whiteLabelLogoText,
-    getWhiteLabelLogoText,
-    saveWhiteLabelSettings,
-    restoreWhiteLabelSettings,
-    defaultWhiteLabelLogoUrls,
-    isSettingPaid: isBrandingAndCustomizationAvailable,
-    initSettings,
-    logoUrlsWhiteLabel,
-    setLogoUrlsWhiteLabel,
-    defaultLogoTextWhiteLabel,
-    enableRestoreButton,
+    return {
+      setLogoText,
+      theme: settingsStore.theme,
+      logoText: whiteLabelLogoText,
+      getWhiteLabelLogoText,
+      saveWhiteLabelSettings,
+      restoreWhiteLabelSettings,
+      defaultWhiteLabelLogoUrls,
+      isSettingPaid: isBrandingAndCustomizationAvailable,
+      initSettings,
+      logoUrlsWhiteLabel,
+      setLogoUrlsWhiteLabel,
+      defaultLogoTextWhiteLabel,
+      enableRestoreButton,
 
-    deviceType,
-    resetIsInit,
-    standalone,
+      deviceType,
+      resetIsInit,
+      standalone,
 
-    isWhitelableLoaded,
-  };
-})(withTranslation(["Settings", "Profile", "Common"])(observer(WhiteLabel)));
+      isWhitelableLoaded,
+    };
+  },
+)(
+  withTranslation(["Settings", "Profile", "Common"])(
+    observer(WhiteLabelComponent),
+  ),
+);

packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js

@@ -66,7 +66,7 @@ const buttonProps = {
   primary: true,
 };
 let timerId = null;
-const DNSSettings = (props) => {
+const DNSSettingsComponent = (props) => {
   const {
     t,
     isMobileView,
@@ -317,46 +317,52 @@ const DNSSettings = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
-  const {
-    helpLink,
-    currentColorScheme,
-    standalone,
-    dnsSettingsUrl,
-    currentDeviceType,
-  } = settingsStore;
-  const {
-    isLoaded,
-    setIsLoadedDNSSettings,
-    initSettings,
-    setIsLoaded,
-    dnsSettings,
-    setIsEnableDNS,
-    setDNSName,
-    saveDNSSettings,
-    isDefaultDNS,
-  } = common;
+export const DNSSettings = inject(
+  ({ settingsStore, common, currentQuotaStore }) => {
+    const {
+      helpLink,
+      currentColorScheme,
+      standalone,
+      dnsSettingsUrl,
+      currentDeviceType,
+    } = settingsStore;
+    const {
+      isLoaded,
+      setIsLoadedDNSSettings,
+      initSettings,
+      setIsLoaded,
+      dnsSettings,
+      setIsEnableDNS,
+      setDNSName,
+      saveDNSSettings,
+      isDefaultDNS,
+    } = common;
 
-  const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
-  const { customObj } = dnsSettings;
-  const { dnsName, enable } = customObj;
+    const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
+    const { customObj } = dnsSettings;
+    const { dnsName, enable } = customObj;
 
-  return {
-    isDefaultDNS,
-    dnsName: dnsName || "",
-    enable,
-    setDNSName,
-    isLoaded,
-    setIsLoadedDNSSettings,
-    helpLink,
-    initSettings,
-    setIsLoaded,
-    isSettingPaid: isBrandingAndCustomizationAvailable,
-    currentColorScheme,
-    standalone,
-    setIsEnableDNS,
-    saveDNSSettings,
-    dnsSettingsUrl,
-    currentDeviceType,
-  };
-})(withLoading(withTranslation(["Settings", "Common"])(observer(DNSSettings))));
+    return {
+      isDefaultDNS,
+      dnsName: dnsName || "",
+      enable,
+      setDNSName,
+      isLoaded,
+      setIsLoadedDNSSettings,
+      helpLink,
+      initSettings,
+      setIsLoaded,
+      isSettingPaid: isBrandingAndCustomizationAvailable,
+      currentColorScheme,
+      standalone,
+      setIsEnableDNS,
+      saveDNSSettings,
+      dnsSettingsUrl,
+      currentDeviceType,
+    };
+  },
+)(
+  withLoading(
+    withTranslation(["Settings", "Common"])(observer(DNSSettingsComponent)),
+  ),
+);

packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js

@@ -78,7 +78,7 @@ let timezoneDefaultFromSessionStorage = "";
 
 const settingNames = ["language", "timezone"];
 
-const LanguageAndTimeZone = (props) => {
+const LanguageAndTimeZoneComponent = (props) => {
   const {
     i18n,
     language,
@@ -557,46 +557,50 @@ const LanguageAndTimeZone = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup, common, userStore }) => {
-  const {
-    culture,
-    timezone,
-    timezones,
-    nameSchemaId,
-    greetingSettings,
-    cultures,
-    currentColorScheme,
-    languageAndTimeZoneSettingsUrl,
-    deviceType,
-  } = settingsStore;
+export const LanguageAndTimeZoneSettings = inject(
+  ({ settingsStore, setup, common, userStore }) => {
+    const {
+      culture,
+      timezone,
+      timezones,
+      nameSchemaId,
+      greetingSettings,
+      cultures,
+      currentColorScheme,
+      languageAndTimeZoneSettingsUrl,
+      deviceType,
+    } = settingsStore;
 
-  const { user } = userStore;
+    const { user } = userStore;
 
-  const { setLanguageAndTime } = setup;
-  const { isLoaded, setIsLoadedLngTZSettings, initSettings, setIsLoaded } =
-    common;
-  return {
-    user,
-    portalLanguage: culture,
-    portalTimeZoneId: timezone,
-    language: culture,
-    rawTimezones: timezones,
-    greetingSettings,
-    nameSchemaId,
-    setLanguageAndTime,
-    isLoaded,
-    setIsLoadedLngTZSettings,
-    cultures,
-    initSettings,
-    setIsLoaded,
-    currentColorScheme,
-    languageAndTimeZoneSettingsUrl,
-    deviceType,
-  };
-})(
+    const { setLanguageAndTime } = setup;
+    const { isLoaded, setIsLoadedLngTZSettings, initSettings, setIsLoaded } =
+      common;
+    return {
+      user,
+      portalLanguage: culture,
+      portalTimeZoneId: timezone,
+      language: culture,
+      rawTimezones: timezones,
+      greetingSettings,
+      nameSchemaId,
+      setLanguageAndTime,
+      isLoaded,
+      setIsLoadedLngTZSettings,
+      cultures,
+      initSettings,
+      setIsLoaded,
+      currentColorScheme,
+      languageAndTimeZoneSettingsUrl,
+      deviceType,
+    };
+  },
+)(
   withCultureNames(
     withLoading(
-      withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone)),
+      withTranslation(["Settings", "Common"])(
+        observer(LanguageAndTimeZoneComponent),
+      ),
     ),
   ),
 );

packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js

@@ -43,7 +43,7 @@ import { PortalRenamingDialog } from "SRC_DIR/components/dialogs";
 import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
 
-const PortalRenaming = (props) => {
+const PortalRenamingComponent = (props) => {
   const {
     t,
     setPortalRename,
@@ -374,7 +374,7 @@ const PortalRenaming = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup, common }) => {
+export const PortalRenaming = inject(({ settingsStore, setup, common }) => {
   const {
     theme,
     tenantAlias,
@@ -410,6 +410,6 @@ export default inject(({ settingsStore, setup, common }) => {
   };
 })(
   withLoading(
-    withTranslation(["Settings", "Common"])(observer(PortalRenaming)),
+    withTranslation(["Settings", "Common"])(observer(PortalRenamingComponent)),
   ),
 );

packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js

@@ -47,7 +47,7 @@ let greetingTitleFromSessionStorage = "";
 let greetingTitleDefaultFromSessionStorage = "";
 const settingNames = ["greetingTitle"];
 
-const WelcomePageSettings = (props) => {
+const WelcomePageSettingsComponent = (props) => {
   const {
     t,
     greetingSettings,
@@ -376,39 +376,44 @@ const WelcomePageSettings = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup, common }) => {
-  const {
-    greetingSettings,
-    theme,
-    currentColorScheme,
-    welcomePageSettingsUrl,
-  } = settingsStore;
-  const { setGreetingTitle, restoreGreetingTitle } = setup;
-  const {
-    isLoaded,
-    setIsLoadedWelcomePageSettings,
-    initSettings,
-    setIsLoaded,
-    greetingSettingsIsDefault,
-    getGreetingSettingsIsDefault,
-  } = common;
+export const WelcomePageSettings = inject(
+  ({ settingsStore, setup, common }) => {
+    const {
+      greetingSettings,
 
-  return {
-    theme,
-    greetingSettings,
-    setGreetingTitle,
-    restoreGreetingTitle,
-    isLoaded,
-    setIsLoadedWelcomePageSettings,
-    greetingSettingsIsDefault,
-    getGreetingSettingsIsDefault,
-    initSettings,
-    setIsLoaded,
-    currentColorScheme,
-    welcomePageSettingsUrl,
-  };
-})(
+      theme,
+      currentColorScheme,
+      welcomePageSettingsUrl,
+    } = settingsStore;
+    const { setGreetingTitle, restoreGreetingTitle } = setup;
+    const {
+      isLoaded,
+      setIsLoadedWelcomePageSettings,
+      initSettings,
+      setIsLoaded,
+      greetingSettingsIsDefault,
+      getGreetingSettingsIsDefault,
+    } = common;
+
+    return {
+      theme,
+      greetingSettings,
+      setGreetingTitle,
+      restoreGreetingTitle,
+      isLoaded,
+      setIsLoadedWelcomePageSettings,
+      greetingSettingsIsDefault,
+      getGreetingSettingsIsDefault,
+      initSettings,
+      setIsLoaded,
+      currentColorScheme,
+      welcomePageSettingsUrl,
+    };
+  },
+)(
   withLoading(
-    withTranslation(["Settings", "Common"])(observer(WelcomePageSettings)),
+    withTranslation(["Settings", "Common"])(
+      observer(WelcomePageSettingsComponent),
+    ),
   ),
 );

packages/client/src/pages/PortalSettings/categories/common/branding.js

@@ -31,10 +31,10 @@ import { inject, observer } from "mobx-react";
 
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
-import Whitelabel from "./Branding/whitelabel";
-import CompanyInfoSettings from "./Branding/companyInfoSettings";
+import { WhiteLabel } from "./Branding/whitelabel";
+import { CompanyInfoSettings } from "./Branding/companyInfoSettings";
 import styled from "styled-components";
-import AdditionalResources from "./Branding/additionalResources";
+import { AdditionalResources } from "./Branding/additionalResources";
 import { isManagement } from "@docspace/shared/utils/common";
 import LoaderBrandingDescription from "./sub-components/loaderBrandingDescription";
 
@@ -118,7 +118,7 @@ const Branding = ({
 
   return (
     <StyledComponent isSettingPaid={isSettingPaid}>
-      <Whitelabel />
+      <WhiteLabel />
       {showSettings && (
         <>
           <hr />

packages/client/src/pages/PortalSettings/categories/common/customization.js

@@ -28,10 +28,10 @@ import React, { useEffect, useState } from "react";
 import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { inject, observer } from "mobx-react";
-import LanguageAndTimeZone from "./Customization/language-and-time-zone";
-import WelcomePageSettings from "./Customization/welcome-page-settings";
-import PortalRenaming from "./Customization/portal-renaming";
-import DNSSettings from "./Customization/dns-settings";
+import { LanguageAndTimeZoneSettings } from "./Customization/language-and-time-zone";
+import { WelcomePageSettings } from "./Customization/welcome-page-settings";
+import { PortalRenaming } from "./Customization/portal-renaming";
+import { DNSSettings } from "./Customization/dns-settings";
 import CustomizationNavbar from "./customization-navbar";
 import { Base } from "@docspace/shared/themes";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
@@ -130,7 +130,7 @@ const Customization = (props) => {
           {t("Settings:CustomizationDescription")}
         </div>
       )}
-      <LanguageAndTimeZone isMobileView={viewMobile} />
+      <LanguageAndTimeZoneSettings isMobileView={viewMobile} />
       <StyledSettingsSeparator />
       <WelcomePageSettings isMobileView={viewMobile} />
       <StyledSettingsSeparator />

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

@@ -125,7 +125,7 @@ const TabsCommon = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common }) => {
+export const Component = inject(({ settingsStore, common }) => {
   const {
     isLoaded,
     setIsLoadedSubmenu,

packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.tsx

@@ -82,28 +82,31 @@ const GoogleWorkspace = (props: WorkspaceProps) => {
   );
 };
 
-export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const {
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migrationPhase,
-    migratingWorkspace,
-    isMigrationInit,
-    setIsMigrationInit,
-  } = importAccountsStore;
-  const { theme } = settingsStore;
+export const Component = inject<TStore>(
+  ({ settingsStore, importAccountsStore }) => {
+    const {
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migrationPhase,
+      migratingWorkspace,
+      isMigrationInit,
+      setIsMigrationInit,
+    } = importAccountsStore;
+    const { theme } = settingsStore;
 
-  return {
-    theme,
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migrationPhase,
-    migratingWorkspace,
-    isMigrationInit,
-    setIsMigrationInit,
-  };
-})(observer(GoogleWorkspace));
+    return {
+      theme,
+
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migrationPhase,
+      migratingWorkspace,
+      isMigrationInit,
+      setIsMigrationInit,
+    };
+  },
+)(observer(GoogleWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/NextcloudWorkspace/index.tsx

@@ -82,28 +82,30 @@ const NextcloudWorkspace = (props: WorkspaceProps) => {
   );
 };
 
-export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const {
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migratingWorkspace,
-    migrationPhase,
-    isMigrationInit,
-    setIsMigrationInit,
-  } = importAccountsStore;
-  const { theme } = settingsStore;
+export const Component = inject<TStore>(
+  ({ settingsStore, importAccountsStore }) => {
+    const {
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migratingWorkspace,
+      migrationPhase,
+      isMigrationInit,
+      setIsMigrationInit,
+    } = importAccountsStore;
+    const { theme } = settingsStore;
 
-  return {
-    theme,
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migratingWorkspace,
-    migrationPhase,
-    isMigrationInit,
-    setIsMigrationInit,
-  };
-})(observer(NextcloudWorkspace));
+    return {
+      theme,
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migratingWorkspace,
+      migrationPhase,
+      isMigrationInit,
+      setIsMigrationInit,
+    };
+  },
+)(observer(NextcloudWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/index.tsx

@@ -82,28 +82,30 @@ const OnlyofficeWorkspace = (props: WorkspaceProps) => {
   );
 };
 
-export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const {
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migrationPhase,
-    migratingWorkspace,
-    isMigrationInit,
-    setIsMigrationInit,
-  } = importAccountsStore;
-  const { theme } = settingsStore;
+export const Component = inject<TStore>(
+  ({ settingsStore, importAccountsStore }) => {
+    const {
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migrationPhase,
+      migratingWorkspace,
+      isMigrationInit,
+      setIsMigrationInit,
+    } = importAccountsStore;
+    const { theme } = settingsStore;
 
-  return {
-    theme,
-    filteredUsers,
-    step,
-    setStep,
-    setWorkspace,
-    migrationPhase,
-    migratingWorkspace,
-    isMigrationInit,
-    setIsMigrationInit,
-  };
-})(observer(OnlyofficeWorkspace));
+    return {
+      theme,
+      filteredUsers,
+      step,
+      setStep,
+      setWorkspace,
+      migrationPhase,
+      migratingWorkspace,
+      isMigrationInit,
+      setIsMigrationInit,
+    };
+  },
+)(observer(OnlyofficeWorkspace));

packages/client/src/pages/PortalSettings/categories/data-import/components/Providers.tsx

@@ -114,18 +114,20 @@ const Providers = (props: ProvidersProps) => {
     </WorkspacesContainer>
   );
 };
-export default inject<TStore>(({ settingsStore, importAccountsStore }) => {
-  const { services, setServices, getMigrationList, setWorkspace } =
-    importAccountsStore;
+export const Component = inject<TStore>(
+  ({ settingsStore, importAccountsStore }) => {
+    const { services, setServices, getMigrationList, setWorkspace } =
+      importAccountsStore;
 
-  const { theme } = settingsStore;
+    const { theme } = settingsStore;
 
-  return {
-    services,
-    setServices,
-    getMigrationList,
+    return {
+      services,
+      setServices,
+      getMigrationList,
 
-    theme,
-    setWorkspace,
-  };
-})(observer(Providers));
+      theme,
+      setWorkspace,
+    };
+  },
+)(observer(Providers));

packages/client/src/pages/PortalSettings/categories/data-import/index.tsx

@@ -33,10 +33,10 @@ import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
 
 import { DataImportProps, InjectedDataImportProps } from "./types";
 
-import Providers from "./components/Providers";
-import NextcloudWorkspace from "./NextcloudWorkspace";
-import GoogleWorkspace from "./GoogleWorkspace";
-import OnlyofficeWorkspace from "./OnlyofficeWorkspace";
+import { Component as Providers } from "./components/Providers";
+import { Component as NextcloudWorkspace } from "./NextcloudWorkspace";
+import { Component as GoogleWorkspace } from "./GoogleWorkspace";
+import { Component as OnlyofficeWorkspace } from "./OnlyofficeWorkspace";
 
 const DataImport = (props: DataImportProps) => {
   const {
@@ -137,7 +137,7 @@ const DataImport = (props: DataImportProps) => {
   );
 };
 
-export default inject<TStore>(
+export const Component = inject<TStore>(
   ({ settingsStore, setup, importAccountsStore }) => {
     const {
       getMigrationStatus,

packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js

@@ -296,30 +296,32 @@ const RestoreBackup = (props) => {
   );
 };
 
-export default inject(({ settingsStore, backup, currentQuotaStore }) => {
-  const { currentDeviceType, standalone } = settingsStore;
-  const { isRestoreAndAutoBackupAvailable } = currentQuotaStore;
-  const {
-    getProgress,
-    clearProgressInterval,
-    setStorageRegions,
-    setThirdPartyStorage,
-    setConnectedThirdPartyAccount,
-    setRestoreResource,
-  } = backup;
+export const Component = inject(
+  ({ settingsStore, backup, currentQuotaStore }) => {
+    const { currentDeviceType, standalone } = settingsStore;
+    const { isRestoreAndAutoBackupAvailable } = currentQuotaStore;
+    const {
+      getProgress,
+      clearProgressInterval,
+      setStorageRegions,
+      setThirdPartyStorage,
+      setConnectedThirdPartyAccount,
+      setRestoreResource,
+    } = backup;
 
-  const buttonSize =
-    currentDeviceType !== DeviceType.desktop ? "normal" : "small";
+    const buttonSize =
+      currentDeviceType !== DeviceType.desktop ? "normal" : "small";
 
-  return {
-    standalone,
-    isEnableRestore: isRestoreAndAutoBackupAvailable,
-    setStorageRegions,
-    setThirdPartyStorage,
-    buttonSize,
-    setConnectedThirdPartyAccount,
-    clearProgressInterval,
-    getProgress,
-    setRestoreResource,
-  };
-})(withTranslation(["Settings", "Common"])(observer(RestoreBackup)));
+    return {
+      standalone,
+      isEnableRestore: isRestoreAndAutoBackupAvailable,
+      setStorageRegions,
+      setThirdPartyStorage,
+      buttonSize,
+      setConnectedThirdPartyAccount,
+      clearProgressInterval,
+      getProgress,
+      setRestoreResource,
+    };
+  },
+)(withTranslation(["Settings", "Common"])(observer(RestoreBackup)));

packages/client/src/pages/PortalSettings/categories/data-management/index.js

@@ -149,7 +149,7 @@ const DataManagementWrapper = (props) => {
   );
 };
 
-export default inject(
+export const Component = inject(
   ({ settingsStore, setup, backup, currentTariffStatusStore }) => {
     const { initSettings } = setup;
 

packages/client/src/pages/PortalSettings/categories/delete-data/index.js

@@ -88,7 +88,7 @@ const DeleteData = (props) => {
   );
 };
 
-export default inject(({ currentTariffStatusStore }) => {
+export const Component = inject(({ currentTariffStatusStore }) => {
   const { isNotPaidPeriod } = currentTariffStatusStore;
 
   return {

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js

@@ -158,7 +158,7 @@ const DocSpace = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => {
+export const Component = inject(({ settingsStore }) => {
   const { theme } = settingsStore;
 
   return {

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js

@@ -229,7 +229,7 @@ const Editor = (props) => {
   );
 };
 
-export default inject(({ settingsStore, filesStore }) => {
+export const Component = inject(({ settingsStore, filesStore }) => {
   const { theme } = settingsStore;
   const { getFilePrimaryLink } = filesStore;
 

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js

@@ -438,12 +438,13 @@ const FileSelector = (props) => {
   );
 };
 
-export default inject(({ settingsStore, publicRoomStore }) => {
+export const Component = inject(({ settingsStore, publicRoomStore }) => {
   const { theme } = settingsStore;
   const { fetchExternalLinks } = publicRoomStore;
 
   return {
     theme,
+
     fetchExternalLinks,
   };
 })(

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js

@@ -656,12 +656,13 @@ const Manager = (props) => {
   );
 };
 
-export default inject(({ settingsStore, publicRoomStore }) => {
+export const Component = inject(({ settingsStore, publicRoomStore }) => {
   const { theme, currentColorScheme } = settingsStore;
   const { fetchExternalLinks } = publicRoomStore;
 
   return {
     theme,
+
     fetchExternalLinks,
     currentColorScheme,
   };

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js

@@ -254,7 +254,7 @@ const RoomSelector = (props) => {
   );
 };
 
-export default inject(({ authStore, settingsStore }) => {
+export const Component = inject(({ settingsStore }) => {
   const { theme } = settingsStore;
 
   return {

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js

@@ -385,12 +385,13 @@ const SimpleRoom = (props) => {
   );
 };
 
-export default inject(({ settingsStore, publicRoomStore }) => {
+export const Component = inject(({ settingsStore, publicRoomStore }) => {
   const { theme, currentColorScheme } = settingsStore;
   const { fetchExternalLinks } = publicRoomStore;
 
   return {
     theme,
+
     fetchExternalLinks,
     currentColorScheme,
   };

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js

@@ -271,7 +271,7 @@ const Viewer = (props) => {
   );
 };
 
-export default inject(({ settingsStore, filesStore }) => {
+export const Component = inject(({ settingsStore, filesStore }) => {
   const { theme } = settingsStore;
   const { getFilePrimaryLink } = filesStore;
 

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthCreatePage/index.tsx

@@ -5,7 +5,7 @@ import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
 import ClientForm from "../sub-components/ClientForm";
 
-const OAuthCreatePage = () => {
+const Component = () => {
   const { t } = useTranslation(["OAuth"]);
 
   React.useEffect(() => {
@@ -15,4 +15,4 @@ const OAuthCreatePage = () => {
   return <ClientForm />;
 };
 
-export default OAuthCreatePage;
+export { Component };

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthEditPage/index.tsx

@@ -6,7 +6,7 @@ import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
 import ClientForm from "../sub-components/ClientForm";
 
-const OAuthEditPage = () => {
+const Component = () => {
   const { id } = useParams();
 
   const { t } = useTranslation(["OAuth"]);
@@ -18,4 +18,4 @@ const OAuthEditPage = () => {
   return <ClientForm id={id} />;
 };
 
-export default OAuthEditPage;
+export { Component };

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/index.js

@@ -76,7 +76,7 @@ const WebhookEventDetails = (props) => {
   );
 };
 
-export default inject(({ webhooksStore }) => {
+export const Component = inject(({ webhooksStore }) => {
   const { fetchEventData, fetchConfigName, configName } = webhooksStore;
 
   return { fetchEventData, fetchConfigName, configName };

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/index.js

@@ -125,7 +125,7 @@ const WebhookHistory = (props) => {
   );
 };
 
-export default inject(({ webhooksStore }) => {
+export const Component = inject(({ webhooksStore }) => {
   const {
     historyItems,
     fetchHistoryItems,

packages/client/src/pages/PortalSettings/categories/developer-tools/index.js

@@ -148,7 +148,7 @@ const DeveloperToolsWrapper = (props) => {
   );
 };
 
-export default inject(({ setup, settingsStore, authStore }) => {
+export const Component = inject(({ setup, settingsStore, authStore }) => {
   const { initSettings } = setup;
 
   const { identityServerEnabled } = authStore.capabilities;

packages/client/src/pages/PortalSettings/categories/integration/LDAP/index.js

@@ -38,9 +38,9 @@ import StyledLdapPage from "./styled-components/StyledLdapPage";
 import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
 
 import ToggleLDAP from "./sub-components/ToggleLDAP";
-import SyncContainer from "./sub-components/SyncContainer";
+import { SyncContainerSection } from "./sub-components/SyncContainer";
 import LdapMobileView from "./sub-components/LdapMobileView";
-import SettingsContainer from "./sub-components/SettingsContainer";
+import { SettingsContainerSection } from "./sub-components/SettingsContainer";
 import LdapLoader from "./sub-components/LdapLoader";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
@@ -97,11 +97,11 @@ const LDAP = ({
         <>
           <ToggleLDAP />
 
-          <SettingsContainer />
+          <SettingsContainerSection />
 
           <StyledSettingsSeparator />
 
-          <SyncContainer />
+          <SyncContainerSection />
         </>
       )}
     </StyledLdapPage>

packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/SettingsContainer.js

@@ -125,20 +125,22 @@ const SettingsContainer = ({
   return <>{renderBody()}</>;
 };
 
-export default inject(({ settingsStore, currentQuotaStore, ldapStore }) => {
-  const { isLdapAvailable } = currentQuotaStore;
-  const { currentDeviceType } = settingsStore;
-  const { isSettingsShown, isCertificateDialogVisible, isLoaded, load } =
-    ldapStore;
+export const SettingsContainerSection = inject(
+  ({ settingsStore, currentQuotaStore, ldapStore }) => {
+    const { isLdapAvailable } = currentQuotaStore;
+    const { currentDeviceType } = settingsStore;
+    const { isSettingsShown, isCertificateDialogVisible, isLoaded, load } =
+      ldapStore;
 
-  const isMobileView = currentDeviceType === DeviceType.mobile;
+    const isMobileView = currentDeviceType === DeviceType.mobile;
 
-  return {
-    isLdapAvailable,
-    isSettingsShown,
-    isMobileView,
-    isCertificateDialogVisible,
-    isLoaded,
-    load,
-  };
-})(observer(SettingsContainer));
+    return {
+      isLdapAvailable,
+      isSettingsShown,
+      isMobileView,
+      isCertificateDialogVisible,
+      isLoaded,
+      load,
+    };
+  },
+)(observer(SettingsContainer));

packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/SyncContainer.js

@@ -178,33 +178,35 @@ const SyncContainer = ({
   return <>{renderBody()}</>;
 };
 
-export default inject(({ currentQuotaStore, settingsStore, ldapStore }) => {
-  const { isLdapAvailable } = currentQuotaStore;
-  const { currentDeviceType } = settingsStore;
-  const {
-    syncLdap,
-    saveCronLdap,
-    onChangeCron,
-    cron,
-    serverCron,
+export const SyncContainerSection = inject(
+  ({ currentQuotaStore, settingsStore, ldapStore }) => {
+    const { isLdapAvailable } = currentQuotaStore;
+    const { currentDeviceType } = settingsStore;
+    const {
+      syncLdap,
+      saveCronLdap,
+      onChangeCron,
+      cron,
+      serverCron,
 
-    isUIDisabled,
+      isUIDisabled,
 
-    serverSettings,
-  } = ldapStore;
+      serverSettings,
+    } = ldapStore;
 
-  const isMobileView = currentDeviceType === DeviceType.mobile;
+    const isMobileView = currentDeviceType === DeviceType.mobile;
 
-  return {
-    isMobileView,
-    syncLdap,
-    saveCronLdap,
-    onChangeCron,
-    cron,
-    serverCron,
+    return {
+      isMobileView,
+      syncLdap,
+      saveCronLdap,
+      onChangeCron,
+      cron,
+      serverCron,
 
-    isLdapEnabledOnServer: serverSettings.EnableLdapAuthentication,
-    isUIDisabled,
-    isLdapAvailable,
-  };
-})(observer(SyncContainer));
+      isLdapEnabledOnServer: serverSettings.EnableLdapAuthentication,
+      isUIDisabled,
+      isLdapAvailable,
+    };
+  },
+)(observer(SyncContainer));

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js

@@ -122,14 +122,16 @@ const ProviderMetadata = (props) => {
   );
 };
 
-export default inject(({ ssoStore, settingsStore, currentQuotaStore }) => {
-  const { downloadMetadata } = ssoStore;
-  const { currentDeviceType } = settingsStore;
-  const { isSSOAvailable } = currentQuotaStore;
+export const ProviderMetadataSection = inject(
+  ({ ssoStore, settingsStore, currentQuotaStore }) => {
+    const { downloadMetadata } = ssoStore;
+    const { currentDeviceType } = settingsStore;
+    const { isSSOAvailable } = currentQuotaStore;
 
-  return {
-    downloadMetadata,
-    currentDeviceType,
-    isSSOAvailable,
-  };
-})(observer(ProviderMetadata));
+    return {
+      downloadMetadata,
+      currentDeviceType,
+      isSSOAvailable,
+    };
+  },
+)(observer(ProviderMetadata));

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SPSettings.js

@@ -68,7 +68,7 @@ const SPSettings = ({ currentDeviceType }) => {
   );
 };
 
-export default inject(({ settingsStore }) => {
+export const SPSettingsSection = inject(({ settingsStore }) => {
   const { currentDeviceType } = settingsStore;
 
   return {

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js

@@ -32,8 +32,8 @@ import { Box } from "@docspace/shared/components/box";
 import { Text } from "@docspace/shared/components/text";
 
 import HideButton from "./sub-components/HideButton";
-import SPSettings from "./SPSettings";
-import ProviderMetadata from "./ProviderMetadata";
+import { SPSettingsSection } from "./SPSettings";
+import { ProviderMetadataSection } from "./ProviderMetadata";
 import StyledSsoPage from "./styled-containers/StyledSsoPageContainer";
 import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
 import ToggleSSO from "./sub-components/ToggleSSO";
@@ -90,7 +90,7 @@ const SingleSignOn = (props) => {
             //isDisabled={!isSSOAvailable}
           />
 
-          <SPSettings />
+          <SPSettingsSection />
           <StyledSettingsSeparator />
 
           <HideButton
@@ -104,7 +104,7 @@ const SingleSignOn = (props) => {
           />
 
           <Box className="sp-metadata">
-            <ProviderMetadata />
+            <ProviderMetadataSection />
           </Box>
         </>
       )}

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

@@ -137,20 +137,22 @@ const IntegrationWrapper = (props) => {
   );
 };
 
-export default inject(({ settingsStore, ssoStore, currentQuotaStore }) => {
-  const { standalone, enablePlugins, currentDeviceType } = settingsStore;
-  const { load: toDefault } = ssoStore;
+export const Component = inject(
+  ({ settingsStore, ssoStore, currentQuotaStore }) => {
+    const { standalone, enablePlugins, currentDeviceType } = settingsStore;
+    const { load: toDefault } = ssoStore;
 
-  const { isSSOAvailable } = currentQuotaStore;
+    const { isSSOAvailable } = currentQuotaStore;
 
-  return {
-    toDefault,
-    isSSOAvailable,
-    standalone,
-    currentDeviceType,
-    enablePlugins,
-  };
-})(
+    return {
+      toDefault,
+      isSSOAvailable,
+      standalone,
+      currentDeviceType,
+      enablePlugins,
+    };
+  },
+)(
   withTranslation([
     "Settings",
     "SingleSignOn",

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

@@ -36,7 +36,7 @@ const PaymentsPage = (props) => {
   return standalone ? <PaymentsEnterprise /> : <PaymentsSaaS />;
 };
 
-export default inject(({ settingsStore }) => {
+export const Component = inject(({ settingsStore }) => {
   const { standalone } = settingsStore;
 
   return {

packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js

@@ -234,7 +234,7 @@ const AdminMessage = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
+export const AdminMessageSection = inject(({ settingsStore, setup }) => {
   const {
     enableAdmMess,
     setMessageSettings,

packages/client/src/pages/PortalSettings/categories/security/access-portal/bruteForceProtection.js

@@ -341,30 +341,32 @@ const BruteForceProtection = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
-  const {
-    numberAttempt,
-    blockingTime,
-    checkPeriod,
+export const BruteForceProtectionSection = inject(
+  ({ settingsStore, setup }) => {
+    const {
+      numberAttempt,
+      blockingTime,
+      checkPeriod,
 
-    getBruteForceProtection,
-    bruteForceProtectionUrl,
-    currentDeviceType,
-    currentColorScheme,
-  } = settingsStore;
+      getBruteForceProtection,
+      bruteForceProtectionUrl,
+      currentDeviceType,
+      currentColorScheme,
+    } = settingsStore;
 
-  const { initSettings, isInit } = setup;
+    const { initSettings, isInit } = setup;
 
-  return {
-    numberAttempt,
-    blockingTime,
-    checkPeriod,
+    return {
+      numberAttempt,
+      blockingTime,
+      checkPeriod,
 
-    getBruteForceProtection,
-    initSettings,
-    isInit,
-    bruteForceProtectionUrl,
-    currentDeviceType,
-    currentColorScheme,
-  };
-})(withTranslation(["Settings", "Common"])(observer(BruteForceProtection)));
+      getBruteForceProtection,
+      initSettings,
+      isInit,
+      bruteForceProtectionUrl,
+      currentDeviceType,
+      currentColorScheme,
+    };
+  },
+)(withTranslation(["Settings", "Common"])(observer(BruteForceProtection)));

packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js

@@ -29,13 +29,13 @@ import { Trans, withTranslation } from "react-i18next";
 import { Text } from "@docspace/shared/components/text";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { MainContainer } from "../StyledSecurity";
-import TfaSection from "./tfa";
-import PasswordStrengthSection from "./passwordStrength";
-import TrustedMailSection from "./trustedMail";
-import IpSecuritySection from "./ipSecurity";
-import AdminMessageSection from "./adminMessage";
-import SessionLifetimeSection from "./sessionLifetime";
-import BruteForceProtectionSection from "./bruteForceProtection";
+import { TfaSection } from "./tfa";
+import { PasswordStrengthSection } from "./passwordStrength";
+import { TrustedMailSection } from "./trustedMail";
+import { IpSecuritySection } from "./ipSecurity";
+import { AdminMessageSection } from "./adminMessage";
+import { SessionLifetimeSection } from "./sessionLifetime";
+import { BruteForceProtectionSection } from "./bruteForceProtection";
 import MobileView from "./mobileView";
 import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
 import { size } from "@docspace/shared/utils";

packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js

@@ -319,7 +319,7 @@ const IpSecurity = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
+export const IpSecuritySection = inject(({ settingsStore, setup }) => {
   const {
     ipRestrictionEnable,
     setIpRestrictionsEnable,

packages/client/src/pages/PortalSettings/categories/security/access-portal/passwordStrength.js

@@ -309,7 +309,7 @@ const PasswordStrength = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
+export const PasswordStrengthSection = inject(({ settingsStore, setup }) => {
   const {
     setPortalPasswordSettings,
     passwordSettings,

packages/client/src/pages/PortalSettings/categories/security/access-portal/sessionLifetime.js

@@ -305,7 +305,7 @@ const SessionLifetime = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
+export const SessionLifetimeSection = inject(({ settingsStore, setup }) => {
   const {
     sessionLifetime,
     enabledSessionLifetime,

packages/client/src/pages/PortalSettings/categories/security/access-portal/tfa.js

@@ -238,7 +238,7 @@ const TwoFactorAuth = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup, tfaStore }) => {
+export const TfaSection = inject(({ settingsStore, setup, tfaStore }) => {
   const {
     setTfaSettings,
 

packages/client/src/pages/PortalSettings/categories/security/access-portal/trustedMail.js

@@ -292,7 +292,7 @@ const TrustedMail = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => {
+export const TrustedMailSection = inject(({ settingsStore }) => {
   const {
     trustedDomainsType,
     trustedDomains,

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

@@ -119,7 +119,7 @@ const SecurityWrapper = (props) => {
   );
 };
 
-export default inject(({ settingsStore, setup }) => {
+export const Component = inject(({ settingsStore, setup }) => {
   const { initSettings, resetIsInit } = setup;
 
   return {

packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js

@@ -35,8 +35,8 @@ import { Badge } from "@docspace/shared/components/badge";
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 
 import { StyledBaseQuotaComponent, StyledMainTitle } from "./StyledComponent";
-import QuotaPerRoomComponent from "./sub-components/QuotaPerRoom";
-import QuotaPerUserComponent from "./sub-components/QuotaPerUser";
+import { QuotaPerRoomComponentSection } from "./sub-components/QuotaPerRoom";
+import { QuotaPerUserComponentSection } from "./sub-components/QuotaPerUser";
 import MobileQuotasComponent from "./sub-components/MobileQuotas";
 
 const helpLink =
@@ -48,8 +48,8 @@ const QuotaPerItemsComponent = ({ isStatisticsAvailable }) => {
 
   return (
     <>
-      <QuotaPerRoomComponent isDisabled={!isStatisticsAvailable} />
-      <QuotaPerUserComponent />
+      <QuotaPerRoomComponentSection isDisabled={!isStatisticsAvailable} />
+      <QuotaPerUserComponentSection />
     </>
   );
 };

packages/client/src/pages/PortalSettings/categories/storage-management/index.js

@@ -75,7 +75,7 @@ const StorageManagement = ({
   );
 };
 
-export default inject(({ authStore, storageManagement }) => {
+export const Component = inject(({ authStore, storageManagement }) => {
   const { language } = authStore;
   const { init, isInit, clearIntervalCheckRecalculate } = storageManagement;
   return {

packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/QuotaPerRoom.js

@@ -49,7 +49,7 @@ const QuotaPerRoomComponent = (props) => {
   );
 };
 
-export default inject(({ currentQuotaStore }) => {
+export const QuotaPerRoomComponentSection = inject(({ currentQuotaStore }) => {
   const { setRoomQuota, defaultRoomsQuota, isDefaultRoomsQuotaSet } =
     currentQuotaStore;
 

packages/client/src/pages/PortalSettings/categories/storage-management/sub-components/QuotaPerUser.js

@@ -51,7 +51,7 @@ const QuotaPerUserComponent = (props) => {
   );
 };
 
-export default inject(({ currentQuotaStore }) => {
+export const QuotaPerUserComponentSection = inject(({ currentQuotaStore }) => {
   const { setUserQuota, defaultUsersQuota, isDefaultUsersQuotaSet } =
     currentQuotaStore;
 

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

@@ -27,11 +27,13 @@
 import React from "react";
 import { Outlet, useLocation } from "react-router-dom";
 
-import Layout from "./Layout";
-
 import Panels from "SRC_DIR/components/FilesPanels";
+import PrivateRoute from "SRC_DIR/components/PrivateRouteWrapper";
+import ErrorBoundary from "SRC_DIR/components/ErrorBoundaryWrapper";
 import { generalRoutes } from "SRC_DIR/routes/general";
 
+import Layout from "./Layout";
+
 const Settings = () => {
   const location = useLocation();
 
@@ -58,4 +60,12 @@ const Settings = () => {
   );
 };
 
-export default Settings;
+export const Component = () => {
+  return (
+    <PrivateRoute restricted>
+      <ErrorBoundary>
+        <Settings />
+      </ErrorBoundary>
+    </PrivateRoute>
+  );
+};

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

@@ -124,7 +124,7 @@ const PortalUnavailable = ({ onLogoutClick }) => {
   );
 };
 
-export default inject(({ profileActionsStore }) => {
+export const Component = inject(({ profileActionsStore }) => {
   const { onLogoutClick } = profileActionsStore;
 
   return { onLogoutClick };

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

@@ -25,18 +25,21 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import { useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
-import Section from "@docspace/shared/components/section";
-import SectionWrapper from "SRC_DIR/components/Section";
-import { SectionHeaderContent, SectionBodyContent } from "./Section";
-
-import Dialogs from "../Home/Section/AccountsBody/Dialogs";
-
-import withCultureNames from "SRC_DIR/HOCs/withCultureNames";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
+import Section from "@docspace/shared/components/section";
+
+import SectionWrapper from "SRC_DIR/components/Section";
+import PrivateRoute from "SRC_DIR/components/PrivateRouteWrapper";
+import Dialogs from "SRC_DIR/pages/Home/Section/AccountsBody/Dialogs";
+import withCultureNames from "SRC_DIR/HOCs/withCultureNames";
+
+import { SectionHeaderContent, SectionBodyContent } from "./Section";
+
 class Profile extends React.Component {
   componentDidMount() {
     const {
@@ -137,7 +140,7 @@ Profile.propTypes = {
   language: PropTypes.string,
 };
 
-export default inject(
+const ComponentPure = inject(
   ({
     authStore,
     settingsStore,
@@ -193,3 +196,17 @@ export default inject(
     };
   },
 )(observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile))));
+
+export const Component = () => {
+  const location = useLocation();
+
+  const fileManagement = location.pathname.includes("file-management");
+
+  return (
+    <PrivateRoute withCollaborator={fileManagement} restricted={fileManagement}>
+      <ComponentPure />
+    </PrivateRoute>
+  );
+};
+
+Component.displayName = "Profile";

packages/client/src/pages/PublicPreview/PublicPreview.tsx

@@ -8,7 +8,7 @@ import { UrlActionType, ValidationStatus } from "@docspace/shared/enums";
 import { toastr } from "@docspace/shared/components/toast";
 import MediaViewer from "@docspace/shared/components/media-viewer/MediaViewer";
 import { ViewerLoader } from "@docspace/shared/components/media-viewer/sub-components/ViewerLoader";
-import Error403 from "@docspace/shared/components/errors/Error403";
+import { Error403 } from "@docspace/shared/components/errors/Error403";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { validatePublicRoomKey } from "@docspace/shared/api/rooms";
 import type { TFile } from "@docspace/shared/api/files/types";
@@ -151,9 +151,12 @@ const PublicPreview = ({
   );
 };
 
-export default inject<TStore>(({ filesSettingsStore, settingsStore }) => {
-  const { getFilesSettings, getIcon, extsImagePreviewed } = filesSettingsStore;
-  const { openUrl } = settingsStore;
+export const WrappedComponent = inject<TStore>(
+  ({ filesSettingsStore, settingsStore }) => {
+    const { getFilesSettings, getIcon, extsImagePreviewed } =
+      filesSettingsStore;
+    const { openUrl } = settingsStore;
 
-  return { getFilesSettings, getIcon, openUrl, extsImagePreviewed };
-})(observer(PublicPreview));
+    return { getFilesSettings, getIcon, openUrl, extsImagePreviewed };
+  },
+)(observer(PublicPreview));

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

@@ -127,7 +127,7 @@ const PublicRoom = (props) => {
   );
 };
 
-export default inject(
+export const WrappedComponent = inject(
   ({
     settingsStore,
     publicRoomStore,

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

@@ -306,7 +306,7 @@ const Sdk = ({
   return component;
 };
 
-export default inject(
+export const Component = inject(
   ({
     authStore,
     settingsStore,

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

@@ -522,54 +522,56 @@ const Wizard = (props) => {
   );
 };
 
-export default inject(({ authStore, settingsStore, wizardStore }) => {
-  const {
-    passwordSettings,
-    wizardToken,
-    timezone,
-    urlLicense,
-    hashSettings,
-    setWizardComplete,
-    getPortalTimezones,
-    getPortalPasswordSettings,
-    theme,
-  } = settingsStore;
+export const WrappedComponent = inject(
+  ({ authStore, settingsStore, wizardStore }) => {
+    const {
+      passwordSettings,
+      wizardToken,
+      timezone,
+      urlLicense,
+      hashSettings,
+      setWizardComplete,
+      getPortalTimezones,
+      getPortalPasswordSettings,
+      theme,
+    } = settingsStore;
 
-  const { language } = authStore;
-  const {
-    isWizardLoaded,
-    machineName,
-    isLicenseRequired,
-    licenseUpload,
-    setIsWizardLoaded,
-    getMachineName,
-    getIsRequiredLicense,
+    const { language } = authStore;
+    const {
+      isWizardLoaded,
+      machineName,
+      isLicenseRequired,
+      licenseUpload,
+      setIsWizardLoaded,
+      getMachineName,
+      getIsRequiredLicense,
 
-    setLicense,
-    resetLicenseUploaded,
-  } = wizardStore;
+      setLicense,
+      resetLicenseUploaded,
+    } = wizardStore;
 
-  return {
-    theme,
-    isLoaded: authStore.isLoaded,
-    culture: language,
-    wizardToken,
-    passwordSettings,
-    timezone,
-    urlLicense,
-    hashSettings,
-    isWizardLoaded,
-    machineName,
-    isLicenseRequired,
-    licenseUpload,
-    setWizardComplete,
-    getPortalPasswordSettings,
-    getPortalTimezones,
-    setIsWizardLoaded,
-    getMachineName,
-    getIsRequiredLicense,
+    return {
+      theme,
+      isLoaded: authStore.isLoaded,
+      culture: language,
+      wizardToken,
+      passwordSettings,
+      timezone,
+      urlLicense,
+      hashSettings,
+      isWizardLoaded,
+      machineName,
+      isLicenseRequired,
+      licenseUpload,
+      setWizardComplete,
+      getPortalPasswordSettings,
+      getPortalTimezones,
+      setIsWizardLoaded,
+      getMachineName,
+      getIsRequiredLicense,
 
-    setLicense,
-    resetLicenseUploaded,
-  };
-})(withCultureNames(observer(Wizard)));
+      setLicense,
+      resetLicenseUploaded,
+    };
+  },
+)(withCultureNames(observer(Wizard)));

packages/client/src/routes/client.js

@@ -24,88 +24,44 @@
 // 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 { Navigate } from "react-router-dom";
-import loadable from "@loadable/component";
+
+import componentLoader from "@docspace/shared/utils/component-loader";
 
 import PrivateRoute from "../components/PrivateRouteWrapper";
 import PublicRoute from "../components/PublicRouteWrapper";
 import Error404 from "@docspace/shared/components/errors/Error404";
-import componentLoader from "@docspace/shared/utils/component-loader";
 import ErrorBoundary from "../components/ErrorBoundaryWrapper";
 
-import FilesView from "SRC_DIR/pages/Home/View/Files";
-import AccountsView from "SRC_DIR/pages/Home/View/Accounts";
-import SettingsView from "SRC_DIR/pages/Home/View/Settings";
-const PublicPreview = loadable(() =>
-  componentLoader(() => import("../pages/PublicPreview/PublicPreview")),
-);
-
 import { generalRoutes } from "./general";
 
-const Client = loadable(() => componentLoader(() => import("../Client")));
-
-const Home = loadable(() => componentLoader(() => import("../pages/Home")));
-
-const Sdk = loadable(() => componentLoader(() => import("../pages/Sdk")));
-
-const FormGallery = loadable(() =>
-  componentLoader(() => import("../pages/FormGallery")),
-);
-const PublicRoom = loadable(() =>
-  componentLoader(() => import("../pages/PublicRoom")),
-);
-const About = loadable(() => componentLoader(() => import("../pages/About")));
-const Wizard = loadable(() => componentLoader(() => import("../pages/Wizard")));
-const PreparationPortal = loadable(() =>
-  componentLoader(() => import("@docspace/shared/pages/PreparationPortal")),
-);
-const PortalUnavailable = loadable(() =>
-  componentLoader(() => import("../pages/PortalUnavailable")),
-);
-const ErrorUnavailable = loadable(() =>
-  componentLoader(() => import("../components/ErrorUnavailableWrapper")),
-);
-
-const Error401 = loadable(() =>
-  componentLoader(() => import("@docspace/shared/components/errors/Error401")),
-);
-
-const Error403 = loadable(() =>
-  componentLoader(() => import("@docspace/shared/components/errors/Error403")),
-);
-
-const Error520 = loadable(() =>
-  componentLoader(() => import("../components/Error520Wrapper")),
-);
-
-const ErrorAccessRestricted = loadable(() =>
-  componentLoader(
-    () => import("@docspace/shared/components/errors/AccessRestricted"),
-  ),
-);
-
-const ErrorOffline = loadable(() =>
-  componentLoader(
-    () => import("@docspace/shared/components/errors/ErrorOffline"),
-  ),
-);
-
 const ClientRoutes = [
   {
     path: "/",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <Client />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { Client } = await componentLoader(() => import("SRC_DIR/Client"));
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <Client />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
     errorElement: <Error404 />,
     children: [
       {
         path: "/",
-        element: <Home />,
+        async lazy() {
+          const { Component } = await componentLoader(
+            () => import("SRC_DIR/pages/Home"),
+          );
+
+          return { Component };
+        },
         children: [
           {
             index: true,
@@ -133,107 +89,237 @@ const ClientRoutes = [
           },
           {
             path: "rooms/personal",
-            element: (
-              <PrivateRoute restricted withManager withCollaborator>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager withCollaborator>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/personal/filter",
-            element: (
-              <PrivateRoute restricted withManager withCollaborator>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager withCollaborator>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "files/trash",
-            element: (
-              <PrivateRoute restricted withManager withCollaborator>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager withCollaborator>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "files/trash/filter",
-            element: (
-              <PrivateRoute restricted withManager withCollaborator>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager withCollaborator>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/shared",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/shared/filter",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/shared/:room",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/shared/:room/filter",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/archived",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/archived/filter",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/archived/:room",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "rooms/archived/:room/filter",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "media/view/:id",
-            element: (
-              <PrivateRoute>
-                <FilesView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { FilesView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Files"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute>
+                    <FilesView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "accounts",
@@ -273,11 +359,21 @@ const ClientRoutes = [
           },
           {
             path: "accounts/people/filter",
-            element: (
-              <PrivateRoute restricted withManager>
-                <AccountsView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { AccountsView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Accounts"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager>
+                    <AccountsView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "accounts/groups",
@@ -289,11 +385,21 @@ const ClientRoutes = [
           },
           {
             path: "accounts/groups/filter",
-            element: (
-              <PrivateRoute restricted withManager>
-                <AccountsView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { AccountsView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Accounts"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager>
+                    <AccountsView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
           {
             path: "accounts/groups/:groupId",
@@ -305,36 +411,22 @@ const ClientRoutes = [
           },
           {
             path: "accounts/groups/:groupId/filter",
-            element: (
-              <PrivateRoute restricted withManager>
-                <AccountsView />
-              </PrivateRoute>
-            ),
+            async lazy() {
+              const { AccountsView } = await componentLoader(
+                () => import("SRC_DIR/pages/Home/View/Accounts"),
+              );
+
+              const Component = () => {
+                return (
+                  <PrivateRoute restricted withManager>
+                    <AccountsView />
+                  </PrivateRoute>
+                );
+              };
+
+              return { Component };
+            },
           },
-          /*{
-            path: "settings",
-            element: (
-              <PrivateRoute withCollaborator restricted>
-                <Navigate to="/settings/personal" replace />
-              </PrivateRoute>
-            ),
-          },
-          {
-            path: "settings/personal",
-            element: (
-              <PrivateRoute withCollaborator restricted>
-                <SettingsView />
-              </PrivateRoute>
-            ),
-          },
-          {
-            path: "settings/general",
-            element: (
-              <PrivateRoute withCollaborator restricted>
-                <SettingsView />
-              </PrivateRoute>
-            ),
-          },*/
         ],
       },
       {
@@ -355,186 +447,340 @@ const ClientRoutes = [
   },
   {
     path: "/form-gallery",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <FormGallery />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/FormGallery"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/form-gallery/:fromFolderId",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <FormGallery />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/FormGallery"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/form-gallery/:fromFolderId/filter",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <FormGallery />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/FormGallery"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/share/preview/:id",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <PublicPreview />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/PublicPreview/PublicPreview"),
+      );
+
+      const Component = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/rooms/share",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <PublicRoom />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/PublicRoom"),
+      );
+
+      const Component = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component };
+    },
     errorElement: <Error404 />,
     children: [
       {
         index: true,
-        element: (
-          <PublicRoute>
-            <FilesView />
-          </PublicRoute>
-        ),
+        async lazy() {
+          const { FilesView } = await componentLoader(
+            () => import("SRC_DIR/pages/Home/View/Files"),
+          );
+
+          const Component = () => {
+            return (
+              <PublicRoute restricted withManager withCollaborator>
+                <FilesView />
+              </PublicRoute>
+            );
+          };
+
+          return { Component };
+        },
       },
       {
         path: "media/view/:id",
-        element: (
-          <PublicRoute>
-            <FilesView />
-          </PublicRoute>
-        ),
+        async lazy() {
+          const { FilesView } = await componentLoader(
+            () => import("SRC_DIR/pages/Home/View/Files"),
+          );
+
+          const Component = () => {
+            return (
+              <PublicRoute restricted withManager withCollaborator>
+                <FilesView />
+              </PublicRoute>
+            );
+          };
+
+          return { Component };
+        },
       },
     ],
   },
   {
     path: "/wizard",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <Wizard />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { WrappedComponent } = await componentLoader(
+        () => import("SRC_DIR/pages/Wizard"),
+      );
+
+      const Component = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <WrappedComponent />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/sdk/:mode",
-    element: <Sdk />,
+    lazy: () => import("SRC_DIR/pages/Sdk"),
   },
   {
     path: "/about",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <About />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { About } = await componentLoader(
+        () => import("SRC_DIR/pages/About"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <About />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/portal-unavailable",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <PortalUnavailable />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { Component } = await componentLoader(
+        () => import("SRC_DIR/pages/PortalUnavailable"),
+      );
+
+      const WrappedComponent = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <Component />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component: WrappedComponent };
+    },
   },
   {
     path: "/unavailable",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <ErrorUnavailable />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { Component } = await componentLoader(
+        () => import("SRC_DIR/components/ErrorUnavailableWrapper"),
+      );
+
+      const WrappedComponent = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <Component />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component: WrappedComponent };
+    },
   },
   {
     path: "/access-restricted",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <ErrorAccessRestricted />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { AccessRestricted } = await componentLoader(
+        () => import("@docspace/shared/components/errors/AccessRestricted"),
+      );
+
+      const Component = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <AccessRestricted />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/preparation-portal",
-    element: (
-      <PublicRoute>
-        <ErrorBoundary>
-          <PreparationPortal />
-        </ErrorBoundary>
-      </PublicRoute>
-    ),
+    async lazy() {
+      const { PreparationPortal } = await componentLoader(
+        () => import("@docspace/shared/pages/PreparationPortal"),
+      );
+
+      const Component = () => (
+        <PublicRoute>
+          <ErrorBoundary>
+            <PreparationPortal />
+          </ErrorBoundary>
+        </PublicRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/error/401",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <Error401 />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { Error401 } = await componentLoader(
+        () => import("@docspace/shared/components/errors/Error401"),
+      );
+
+      const Component = () => {
+        return (
+          <PrivateRoute>
+            <ErrorBoundary>
+              <Error401 />
+            </ErrorBoundary>
+          </PrivateRoute>
+        );
+      };
+
+      return { Component };
+    },
   },
   {
     path: "/error/403",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <Error403 />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { Error403 } = await componentLoader(
+        () => import("@docspace/shared/components/errors/Error403"),
+      );
+
+      const Component = () => {
+        return (
+          <PrivateRoute>
+            <ErrorBoundary>
+              <Error403 />
+            </ErrorBoundary>
+          </PrivateRoute>
+        );
+      };
+
+      return { Component };
+    },
   },
   {
     path: "/error/520",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <Error520 />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { Error520Component } = await componentLoader(
+        () => import("SRC_DIR/components/Error520Wrapper"),
+      );
+
+      const Component = () => {
+        return (
+          <PrivateRoute>
+            <ErrorBoundary>
+              <Error520Component />
+            </ErrorBoundary>
+          </PrivateRoute>
+        );
+      };
+
+      return { Component };
+    },
   },
   {
     path: "/error/access/restricted",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <ErrorAccessRestricted />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { AccessRestricted } = await componentLoader(
+        () => import("@docspace/shared/components/errors/AccessRestricted"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <AccessRestricted />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
   {
     path: "/error/offline",
-    element: (
-      <PrivateRoute>
-        <ErrorBoundary>
-          <ErrorOffline />
-        </ErrorBoundary>
-      </PrivateRoute>
-    ),
+    async lazy() {
+      const { ErrorOfflineContainer } = await componentLoader(
+        () => import("@docspace/shared/components/errors/ErrorOffline"),
+      );
+
+      const Component = () => (
+        <PrivateRoute>
+          <ErrorBoundary>
+            <ErrorOfflineContainer />
+          </ErrorBoundary>
+        </PrivateRoute>
+      );
+
+      return { Component };
+    },
   },
 ];
 

packages/client/src/routes/confirm.js

@@ -24,195 +24,116 @@
 // 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 loadable from "@loadable/component";
-
-import ConfirmRoute from "../helpers/confirmRoute";
-import ErrorBoundary from "../components/ErrorBoundaryWrapper";
+import Error404 from "@docspace/shared/components/errors/Error404";
 import componentLoader from "@docspace/shared/utils/component-loader";
 
-import Error404 from "@docspace/shared/components/errors/Error404";
-import { AuthenticatedAction } from "../helpers/enums";
-
-const Confirm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm")),
-);
-
-const ActivateUserForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/activateUser")),
-);
-const CreateUserForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/createUser")),
-);
-const ChangePasswordForm = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/changePassword"),
-  ),
-);
-const ActivateEmailForm = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/activateEmail"),
-  ),
-);
-const ChangeEmailForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/changeEmail")),
-);
-const ChangePhoneForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/changePhone")),
-);
-const ProfileRemoveForm = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/profileRemove"),
-  ),
-);
-const ChangeOwnerForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/changeOwner")),
-);
-const TfaAuthForm = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/tfaAuth")),
-);
-const TfaActivationForm = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/tfaActivation"),
-  ),
-);
-const RemovePortal = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/removePortal")),
-);
-const DeactivatePortal = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/deactivatePortal"),
-  ),
-);
-const ContinuePortal = loadable(() =>
-  componentLoader(
-    () => import("../pages/Confirm/sub-components/continuePortal"),
-  ),
-);
-const Auth = loadable(() =>
-  componentLoader(() => import("../pages/Confirm/sub-components/auth")),
-);
+import ConfirmRoute from "SRC_DIR/helpers/confirmRoute";
 
 const confirmRoutes = [
   {
     path: "EmpInvite",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.Redirect}>
-        <CreateUserForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/createUser"),
+      ),
   },
   {
     path: "LinkInvite",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.None}>
-        <CreateUserForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/createUser"),
+      ),
   },
   {
     path: "Activation",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.Redirect}>
-        <ActivateUserForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/activateUser"),
+      ),
   },
   {
     path: "EmailActivation",
-    element: (
-      <ConfirmRoute>
-        <ActivateEmailForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/activateEmail"),
+      ),
   },
   {
     path: "EmailChange",
-    element: (
-      <ConfirmRoute>
-        <ChangeEmailForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/changeEmail"),
+      ),
   },
   {
     path: "PasswordChange",
-    element: (
-      <ConfirmRoute>
-        <ChangePasswordForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/changePassword"),
+      ),
   },
   {
     path: "ProfileRemove",
-    element: (
-      <ConfirmRoute>
-        <ProfileRemoveForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/profileRemove"),
+      ),
   },
   {
     path: "PhoneActivation",
-    element: (
-      <ConfirmRoute>
-        <ChangePhoneForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/changePhone"),
+      ),
   },
   {
     path: "PortalOwnerChange",
-    element: (
-      <ConfirmRoute>
-        <ChangeOwnerForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/changeOwner"),
+      ),
   },
   {
     path: "TfaAuth",
-    element: (
-      <ConfirmRoute>
-        <TfaAuthForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/tfaAuth"),
+      ),
   },
   {
     path: "TfaActivation",
-    element: (
-      <ConfirmRoute>
-        <TfaActivationForm />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/tfaActivation"),
+      ),
   },
   {
     path: "PortalRemove",
-    element: (
-      <ConfirmRoute>
-        <RemovePortal />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/removePortal"),
+      ),
   },
   {
     path: "PortalSuspend",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
-        <DeactivatePortal />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/deactivatePortal"),
+      ),
   },
   {
     path: "PortalContinue",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
-        <ContinuePortal />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/continuePortal"),
+      ),
   },
   {
     path: "Auth",
-    element: (
-      <ConfirmRoute doAuthenticated={AuthenticatedAction.Logout}>
-        <Auth />
-      </ConfirmRoute>
-    ),
+    lazy: () =>
+      componentLoader(
+        () => import("SRC_DIR/pages/Confirm/sub-components/auth"),
+      ),
   },
 ];
 
@@ -229,21 +150,13 @@ const ConfirmParentRoutes = [
   },
   {
     path: "confirm.aspx",
-    element: (
-      <ErrorBoundary>
-        <Confirm />
-      </ErrorBoundary>
-    ),
+    lazy: () => componentLoader(() => import("SRC_DIR/pages/Confirm")),
     errorElement: <Error404 />,
     children: [...confirmRoutes],
   },
   {
     path: "confirm",
-    element: (
-      <ErrorBoundary>
-        <Confirm />
-      </ErrorBoundary>
-    ),
+    lazy: () => componentLoader(() => import("SRC_DIR/pages/Confirm")),
     errorElement: <Error404 />,
     children: [...confirmRoutes],
   },

packages/client/src/routes/general.js

@@ -24,17 +24,10 @@
 // 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 { Navigate } from "react-router-dom";
-import loadable from "@loadable/component";
 
-import PrivateRoute from "../components/PrivateRouteWrapper";
 import componentLoader from "@docspace/shared/utils/component-loader";
 
-const Profile = loadable(() =>
-  componentLoader(() => import("../pages/Profile")),
-);
-
 const generalRoutes = [
   {
     path: "profile/",
@@ -51,43 +44,23 @@ const generalRoutes = [
       },
       {
         path: "login",
-        element: (
-          <PrivateRoute>
-            <Profile />
-          </PrivateRoute>
-        ),
+        lazy: () => componentLoader(() => import("SRC_DIR/pages/Profile")),
       },
       {
         path: "notifications",
-        element: (
-          <PrivateRoute>
-            <Profile />
-          </PrivateRoute>
-        ),
+        lazy: () => componentLoader(() => import("SRC_DIR/pages/Profile")),
       },
       {
         path: "file-management",
-        element: (
-          <PrivateRoute withCollaborator restricted>
-            <Profile />
-          </PrivateRoute>
-        ),
+        lazy: () => componentLoader(() => import("SRC_DIR/pages/Profile")),
       },
       {
         path: "interface-theme",
-        element: (
-          <PrivateRoute>
-            <Profile />
-          </PrivateRoute>
-        ),
+        lazy: () => componentLoader(() => import("SRC_DIR/pages/Profile")),
       },
       {
         path: "authorized-apps",
-        element: (
-          <PrivateRoute>
-            <Profile />
-          </PrivateRoute>
-        ),
+        lazy: () => componentLoader(() => import("SRC_DIR/pages/Profile")),
       },
     ],
   },

packages/management/src/App.tsx

@@ -33,7 +33,7 @@ import { ThemeKeys } from "@docspace/shared/enums";
 import { Toast } from "@docspace/shared/components/toast";
 import { Portal } from "@docspace/shared/components/portal";
 import AppLoader from "@docspace/shared/components/app-loader";
-import Error403 from "@docspace/shared/components/errors/Error403";
+import { Error403 } from "@docspace/shared/components/errors/Error403";
 
 import tryRedirectTo from "@docspace/shared/utils/tryRedirectTo";
 

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

@@ -27,7 +27,7 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import BackupPage from "client/BackupPage";
+import { Component } from "client/BackupPage";
 import { setDocumentTitle } from "SRC_DIR/utils";
 
 const Backup = () => {
@@ -37,7 +37,7 @@ const Backup = () => {
     setDocumentTitle(t("Backup"));
   }, []);
 
-  return <BackupPage />;
+  return <Component />;
 };
 
 export default Backup;

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

@@ -25,10 +25,10 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import BonusPage from "client/BonusPage";
+import { Component } from "client/BonusPage";
 
 const Bonus = () => {
-  return <BonusPage />;
+  return <Component />;
 };
 
 export default Bonus;

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

@@ -25,10 +25,10 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
-import PaymentsPage from "client/PaymentsPage";
+import { Component } from "client/PaymentsPage";
 
 const Payments = () => {
-  return <PaymentsPage />;
+  return <Component />;
 };
 
 export default Payments;

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

@@ -28,7 +28,7 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { setDocumentTitle } from "SRC_DIR/utils";
-import RestorePage from "client/RestorePage";
+import { Component } from "client/RestorePage";
 
 const Restore = () => {
   const { t } = useTranslation(["Settings"]);
@@ -37,7 +37,7 @@ const Restore = () => {
     setDocumentTitle(t("RestoreBackup"));
   }, []);
 
-  return <RestorePage />;
+  return <Component />;
 };
 
 export default Restore;

packages/management/src/router.tsx

@@ -41,7 +41,7 @@ import Bonus from "./categories/bonus";
 import ErrorBoundary from "./components/ErrorBoundaryWrapper";
 
 import Error404 from "@docspace/shared/components/errors/Error404";
-import PreparationPortal from "@docspace/shared/pages/PreparationPortal";
+import { PreparationPortal } from "@docspace/shared/pages/PreparationPortal";
 
 const routes = [
   {

packages/shared/components/errors/AccessRestricted.tsx

@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
 import ErrorContainer from "../error-container/ErrorContainer";
 import { AccessRestrictedWrapper } from "./Errors.styled";
 
-const AccessRestricted = () => {
+export const AccessRestricted = () => {
   const { t, ready } = useTranslation("Common");
 
   useEffect(() => {
@@ -50,5 +50,3 @@ const AccessRestricted = () => {
     )
   );
 };
-
-export default AccessRestricted;

packages/shared/components/errors/Error401.tsx

@@ -27,10 +27,8 @@
 import { useTranslation } from "react-i18next";
 import ErrorContainer from "../error-container/ErrorContainer";
 
-const Error401 = () => {
+export const Error401 = () => {
   const { t } = useTranslation("Common");
 
   return <ErrorContainer headerText={t("Error401Text")} />;
 };
-
-export default Error401;

packages/shared/components/errors/Error403.tsx

@@ -29,10 +29,8 @@ import { useTranslation } from "react-i18next";
 
 import ErrorContainer from "../error-container/ErrorContainer";
 
-const Error403 = () => {
+export const Error403 = () => {
   const { t } = useTranslation("Common");
 
   return <ErrorContainer headerText={t("Error403Text")} />;
 };
-
-export default Error403;

packages/shared/components/errors/ErrorOffline.tsx

@@ -29,10 +29,8 @@ import { useTranslation } from "react-i18next";
 
 import ErrorContainer from "../error-container/ErrorContainer";
 
-const ErrorOfflineContainer = () => {
+export const ErrorOfflineContainer = () => {
   const { t } = useTranslation("Common");
 
   return <ErrorContainer headerText={t("ErrorOfflineText")} />;
 };
-
-export default ErrorOfflineContainer;