From 40d38fa825db47a1bc8d6c21a29ceceeb3f08521 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Fri, 29 Sep 2023 02:09:52 +0300
Subject: [PATCH 1/4] Fix Bug 64290: Implement more visible separation of
 services

---
 .../ThirdPartyServicesSettings/index.js       | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
index a1d0966bd7..d4feec33df 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
@@ -40,7 +40,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 +65,11 @@ const RootContainer = styled(Box)`
   }
 
   .business-plan {
+    grid-column: 1 / -1;
     display: flex;
     gap: 8px;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: -4px;
   }
 `;
 
@@ -235,20 +235,18 @@ class ThirdPartyServices extends React.Component {
                 />
               </Box>
             ))}
-          </div>
-          {!isThirdPartyAvailable && (
-            <div className="business-plan">
-              <Text fontSize="16px" fontWeight={700}>
-                {t("IncludedInBusiness")}
-              </Text>
-              <Badge
-                backgroundColor="#EDC409"
-                label={t("Common:Paid")}
-                isPaidBadge={true}
-              />
-            </div>
-          )}
-          <div className="consumers-list-container">
+            {!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

From 866573449c3d3fbe0d0568e390571520e1a6e7b3 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Fri, 29 Sep 2023 02:34:53 +0300
Subject: [PATCH 2/4] Client: PortalSettings: ThirdParty: add loader

---
 .../ThirdPartyServicesSettings/index.js       | 114 ++++++++++--------
 .../sub-components/thirdPartyLoader.js        |  25 ++++
 2 files changed, 87 insertions(+), 52 deletions(-)
 create mode 100644 packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js

diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
index d4feec33df..b07d85443d 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
+++ b/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;
@@ -218,52 +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>
-            ))}
-            {!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>
+          {!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>
+          )}
         </RootContainer>
         {dialogVisible && (
           <ConsumerModalDialog
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js
new file mode 100644
index 0000000000..88683b9040
--- /dev/null
+++ b/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;

From cbb04daadccc356c7ce99dac256f6b502fb68e2b Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Fri, 29 Sep 2023 12:28:10 +0300
Subject: [PATCH 3/4] Client: PortalSettings: ThirdParty: fix style

---
 .../ThirdPartyServicesSettings/sub-components/consumerItem.js  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
index 1bea502cdb..0fc23b8b77 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
+++ b/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: ${props.canSet ? 1 : props.isSet ? 0.16 : 1};
         }
         ${props.isLinkedIn &&
         css`
@@ -81,6 +81,7 @@ class ConsumerItem extends React.Component {
           widthProp="100%"
         >
           <StyledBox
+            canSet={consumer.canSet}
             isSet={isSet}
             isLinkedIn={consumer.name === "linkedin"}
             isThirdPartyAvailable={isThirdPartyAvailable}

From dcffeea68aa7772ae75cb637f7245e26bd46aa3c Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Fri, 29 Sep 2023 13:09:09 +0300
Subject: [PATCH 4/4] Client: PortalSettings: ThirdParty: fix style

---
 .../sub-components/consumerItem.js                           | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
index 0fc23b8b77..aa8bc470ab 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js
+++ b/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.canSet ? 1 : props.isSet ? 0.16 : 1};
+          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;
@@ -82,7 +82,6 @@ class ConsumerItem extends React.Component {
         >
           <StyledBox
             canSet={consumer.canSet}
-            isSet={isSet}
             isLinkedIn={consumer.name === "linkedin"}
             isThirdPartyAvailable={isThirdPartyAvailable}
           >