Merge pull request #1784 from ONLYOFFICE/bugfix/Bug64290

bugfix/Bug64290

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

@@ -1,24 +1,30 @@
+import IntegrationSvgUrl from "PUBLIC_DIR/images/integration.svg?url";
+import IntegrationDarkSvgUrl from "PUBLIC_DIR/images/integration.dark.svg?url";
+
 import React from "react";
 import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
 import styled from "styled-components";
+
+import { showLoader, hideLoader } from "@docspace/common/utils";
+
 import Box from "@docspace/components/box";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import Badge from "@docspace/components/badge";
 import toastr from "@docspace/components/toast/toastr";
 import Button from "@docspace/components/button";
-import { showLoader, hideLoader } from "@docspace/common/utils";
-import ConsumerItem from "./sub-components/consumerItem";
-import ConsumerModalDialog from "./sub-components/consumerModalDialog";
-import { inject, observer } from "mobx-react";
 import {
   mobile,
   smallTablet,
   isSmallTablet,
 } from "@docspace/components/utils/device";
-import IntegrationSvgUrl from "PUBLIC_DIR/images/integration.svg?url";
-import IntegrationDarkSvgUrl from "PUBLIC_DIR/images/integration.dark.svg?url";
+
+import ConsumerItem from "./sub-components/consumerItem";
+import ConsumerModalDialog from "./sub-components/consumerModalDialog";
+
+import ThirdPartyLoader from "./sub-components/thirdPartyLoader";
 
 const RootContainer = styled(Box)`
   max-width: 700px;
@@ -40,7 +46,6 @@ const RootContainer = styled(Box)`
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(293px, 1fr));
     gap: 20px;
-    margin-bottom: 20px;
   }
 
   .consumer-item-wrapper {
@@ -66,10 +71,11 @@ const RootContainer = styled(Box)`
   }
 
   .business-plan {
+    grid-column: 1 / -1;
     display: flex;
     gap: 8px;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: -4px;
   }
 `;
 
@@ -218,54 +224,56 @@ class ThirdPartyServices extends React.Component {
               scale={isSmallTablet()}
             />
           </Box>
-          <div className="consumers-list-container">
-            {freeConsumers.map((consumer) => (
-              <Box className="consumer-item-wrapper" key={consumer.name}>
-                <ConsumerItem
-                  consumer={consumer}
-                  dialogVisible={dialogVisible}
-                  isLoading={isLoading}
-                  onChangeLoading={onChangeLoading}
-                  onModalClose={onModalClose}
-                  onModalOpen={onModalOpen}
-                  setConsumer={setConsumer}
-                  updateConsumerProps={updateConsumerProps}
-                  t={t}
-                  isThirdPartyAvailable={isThirdPartyAvailable}
-                />
-              </Box>
-            ))}
-          </div>
-          {!isThirdPartyAvailable && (
-            <div className="business-plan">
-              <Text fontSize="16px" fontWeight={700}>
-                {t("IncludedInBusiness")}
-              </Text>
-              <Badge
-                backgroundColor="#EDC409"
-                label={t("Common:Paid")}
-                isPaidBadge={true}
-              />
+          {!consumers.length ? (
+            <ThirdPartyLoader />
+          ) : (
+            <div className="consumers-list-container">
+              {freeConsumers.map((consumer) => (
+                <Box className="consumer-item-wrapper" key={consumer.name}>
+                  <ConsumerItem
+                    consumer={consumer}
+                    dialogVisible={dialogVisible}
+                    isLoading={isLoading}
+                    onChangeLoading={onChangeLoading}
+                    onModalClose={onModalClose}
+                    onModalOpen={onModalOpen}
+                    setConsumer={setConsumer}
+                    updateConsumerProps={updateConsumerProps}
+                    t={t}
+                    isThirdPartyAvailable={isThirdPartyAvailable}
+                  />
+                </Box>
+              ))}
+              {!isThirdPartyAvailable && (
+                <div className="business-plan">
+                  <Text fontSize="16px" fontWeight={700}>
+                    {t("IncludedInBusiness")}
+                  </Text>
+                  <Badge
+                    backgroundColor="#EDC409"
+                    label={t("Common:Paid")}
+                    isPaidBadge={true}
+                  />
+                </div>
+              )}
+              {paidConsumers.map((consumer) => (
+                <Box className="consumer-item-wrapper" key={consumer.name}>
+                  <ConsumerItem
+                    consumer={consumer}
+                    dialogVisible={dialogVisible}
+                    isLoading={isLoading}
+                    onChangeLoading={onChangeLoading}
+                    onModalClose={onModalClose}
+                    onModalOpen={onModalOpen}
+                    setConsumer={setConsumer}
+                    updateConsumerProps={updateConsumerProps}
+                    t={t}
+                    isThirdPartyAvailable={isThirdPartyAvailable}
+                  />
+                </Box>
+              ))}
             </div>
           )}
-          <div className="consumers-list-container">
-            {paidConsumers.map((consumer) => (
-              <Box className="consumer-item-wrapper" key={consumer.name}>
-                <ConsumerItem
-                  consumer={consumer}
-                  dialogVisible={dialogVisible}
-                  isLoading={isLoading}
-                  onChangeLoading={onChangeLoading}
-                  onModalClose={onModalClose}
-                  onModalOpen={onModalOpen}
-                  setConsumer={setConsumer}
-                  updateConsumerProps={updateConsumerProps}
-                  t={t}
-                  isThirdPartyAvailable={isThirdPartyAvailable}
-                />
-              </Box>
-            ))}
-          </div>
         </RootContainer>
         {dialogVisible && (
           <ConsumerModalDialog

packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js

@@ -28,7 +28,7 @@ const StyledBox = styled(Box)`
       css`
         path {
           fill: #ffffff;
-          opacity: ${props.isSet ? 1 : 0.16};
+          opacity: 1;
         }
         ${props.isLinkedIn &&
         css`
@@ -45,7 +45,7 @@ const StyledBox = styled(Box)`
 
     ${(props) =>
       !props.isThirdPartyAvailable &&
-      !props.isSet &&
+      props.canSet &&
       css`
         path {
           opacity: 0.5;
@@ -81,7 +81,7 @@ class ConsumerItem extends React.Component {
           widthProp="100%"
         >
           <StyledBox
-            isSet={isSet}
+            canSet={consumer.canSet}
             isLinkedIn={consumer.name === "linkedin"}
             isThirdPartyAvailable={isThirdPartyAvailable}
           >

packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+import Loaders from "@docspace/common/components/Loaders";
+
+const StyledLoader = styled.div`
+  max-width: 700px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(293px, 1fr));
+  gap: 20px;
+`;
+
+const ThirdPartyLoader = () => {
+  const rectangles = new Array(6).fill(0);
+
+  return (
+    <StyledLoader>
+      {rectangles.map((_) => (
+        <Loaders.Rectangle height="120px" borderRadius="6px" />
+      ))}
+    </StyledLoader>
+  );
+};
+
+export default ThirdPartyLoader;