From 02e128220a98eeabd7a7d1ff2f00071f0779d28f Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Fri, 9 Aug 2024 14:09:56 +0300
Subject: [PATCH] Client: PortalSettings: WhiteLabel: fix for unavailable
 customization

---
 .../common/Branding/sub-components/logo.js    | 34 ++++++-
 .../categories/common/Branding/whitelabel.js  | 95 +++++++++++--------
 2 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/sub-components/logo.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/sub-components/logo.js
index 8c73aaf357..e707ea972d 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/sub-components/logo.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/sub-components/logo.js
@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import styled, { css } from "styled-components";
 
 import { getLogoFromPath } from "@docspace/shared/utils";
 
@@ -32,6 +33,25 @@ import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
 import { isMobile } from "@docspace/shared/utils";
 
+import NotAvailable from "SRC_DIR/pages/PortalSettings/components/NotAvailable";
+
+const StyledLogoWrapper = styled.div`
+  ${(props) =>
+    !props.isCustomizationAvailable &&
+    css`
+      cursor: default;
+      pointer-events: none;
+      .logo-docs-editor,
+      .logo-image {
+        filter: opacity(0.5);
+      }
+      a,
+      a:hover {
+        color: ${(props) => props.theme.text.disableColor};
+      }
+    `}
+`;
+
 const Logo = (props) => {
   const {
     title,
@@ -43,6 +63,7 @@ const Logo = (props) => {
     linkId,
     imageClass,
     isEditor,
+    isCustomizationAvailable = true,
   } = props;
 
   const currentLogo = getLogoFromPath(src);
@@ -52,7 +73,7 @@ const Logo = (props) => {
   };
 
   return (
-    <div>
+    <StyledLogoWrapper isCustomizationAvailable={isCustomizationAvailable}>
       <div className="logo-item">
         {title && (
           <Text
@@ -83,16 +104,21 @@ const Logo = (props) => {
             />
           </div>
         ) : (
-          <img className={imageClass} src={currentLogo} onClick={onLogoClick} />
+          <img
+            className={`${imageClass} logo-image`}
+            src={currentLogo}
+            onClick={onLogoClick}
+          />
         )}
       </div>
+      {!isCustomizationAvailable && <NotAvailable />}
       <label>
         <input
           id={inputId}
           type="file"
           className="hidden"
           onChange={onChange}
-          disabled={!isSettingPaid}
+          disabled={!isSettingPaid || !isCustomizationAvailable}
         />
         <Link
           id={linkId}
@@ -104,7 +130,7 @@ const Logo = (props) => {
           {onChangeText}
         </Link>
       </label>
-    </div>
+    </StyledLogoWrapper>
   );
 };
 
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
index e29e9d4b46..8b376d6dd2 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
@@ -76,6 +76,7 @@ const WhiteLabel = (props) => {
     theme,
 
     isWhitelableLoaded,
+    isCustomizationAvailable,
   } = props;
   const navigate = useNavigate();
   const location = useLocation();
@@ -170,6 +171,9 @@ const WhiteLabel = (props) => {
         logoUrlsWhiteLabel[i].size.width,
         logoUrlsWhiteLabel[i].size.height,
       );
+
+      if (options.isEditor && !isCustomizationAvailable) return;
+
       const isDocsEditorName = logoUrlsWhiteLabel[i].name === "DocsEditor";
 
       const logoLight = generateLogo(
@@ -514,6 +518,7 @@ const WhiteLabel = (props) => {
             onChangeText={t("ChangeLogoButton")}
             onChange={onChangeLogo}
             isSettingPaid={isSettingPaid}
+            isCustomizationAvailable={isCustomizationAvailable}
           />
         </div>
 
@@ -534,6 +539,7 @@ const WhiteLabel = (props) => {
             onChangeText={t("ChangeLogoButton")}
             onChange={onChangeLogo}
             isSettingPaid={isSettingPaid}
+            isCustomizationAvailable={isCustomizationAvailable}
           />
         </div>
       </div>
@@ -562,48 +568,55 @@ const WhiteLabel = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
-  const {
-    setLogoText,
-    whiteLabelLogoText,
-    getWhiteLabelLogoText,
-    restoreWhiteLabelSettings,
-    initSettings,
-    saveWhiteLabelSettings,
-    logoUrlsWhiteLabel,
-    setLogoUrlsWhiteLabel,
-    defaultLogoTextWhiteLabel,
-    enableRestoreButton,
-    resetIsInit,
-    isWhitelableLoaded,
-  } = common;
+export default inject(
+  ({ settingsStore, common, currentQuotaStore, authStore }) => {
+    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;
+    const { tenantExtra } = authStore;
 
-  return {
-    setLogoText,
-    theme: settingsStore.theme,
-    logoText: whiteLabelLogoText,
-    getWhiteLabelLogoText,
-    saveWhiteLabelSettings,
-    restoreWhiteLabelSettings,
-    defaultWhiteLabelLogoUrls,
-    isSettingPaid: isBrandingAndCustomizationAvailable,
-    initSettings,
-    logoUrlsWhiteLabel,
-    setLogoUrlsWhiteLabel,
-    defaultLogoTextWhiteLabel,
-    enableRestoreButton,
+    const isCustomizationAvailable =
+      tenantExtra?.docServerLicense?.customization;
 
-    deviceType,
-    resetIsInit,
-    standalone,
+    return {
+      setLogoText,
+      theme: settingsStore.theme,
+      logoText: whiteLabelLogoText,
+      getWhiteLabelLogoText,
+      saveWhiteLabelSettings,
+      restoreWhiteLabelSettings,
+      defaultWhiteLabelLogoUrls,
+      isSettingPaid: isBrandingAndCustomizationAvailable,
+      initSettings,
+      logoUrlsWhiteLabel,
+      setLogoUrlsWhiteLabel,
+      defaultLogoTextWhiteLabel,
+      enableRestoreButton,
 
-    isWhitelableLoaded,
-  };
-})(withTranslation(["Settings", "Profile", "Common"])(observer(WhiteLabel)));
+      deviceType,
+      resetIsInit,
+      standalone,
+
+      isWhitelableLoaded,
+      isCustomizationAvailable,
+    };
+  },
+)(withTranslation(["Settings", "Profile", "Common"])(observer(WhiteLabel)));