Client: PortalSettings: WhiteLabel: fix for unavailable customization

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>
   );
 };
 

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,7 +568,8 @@ const WhiteLabel = (props) => {
   );
 };
 
-export default inject(({ settingsStore, common, currentQuotaStore }) => {
+export default inject(
+  ({ settingsStore, common, currentQuotaStore, authStore }) => {
     const {
       setLogoText,
       whiteLabelLogoText,
@@ -584,6 +591,10 @@ export default inject(({ settingsStore, common, currentQuotaStore }) => {
       standalone,
     } = settingsStore;
     const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
+    const { tenantExtra } = authStore;
+
+    const isCustomizationAvailable =
+      tenantExtra?.docServerLicense?.customization;
 
     return {
       setLogoText,
@@ -605,5 +616,7 @@ export default inject(({ settingsStore, common, currentQuotaStore }) => {
       standalone,
 
       isWhitelableLoaded,
+      isCustomizationAvailable,
     };
-})(withTranslation(["Settings", "Profile", "Common"])(observer(WhiteLabel)));
+  },
+)(withTranslation(["Settings", "Profile", "Common"])(observer(WhiteLabel)));