Fix Bug 61785 - Settings: ThirdParty. Change links to helpcenter articles for docspace

packages/client/public/locales/en/Settings.json

@@ -172,8 +172,8 @@
   "TemporaryStorage": "Temporary storage",
   "TemporaryStorageDescription": "Backup is stored in the 'Backup' section, you will be able to download it within 24 hours after creating.",
   "ThirdPartyAuthorization": "Third-party Authorization",
-  "ThirdPartyBodyDescription": "Detailed instructions in our <2>Help Center</2>.",
-  "ThirdPartyBottomDescription": "Need help? Contact our <2>Support Team.</2>",
+  "ThirdPartyBodyDescription": "Detailed instructions in our <2>Help Center.</2>",
+  "ThirdPartyBottomDescription": "Got any problems? Contact our <2>Support Team.</2>",
   "ThirdPartyHowItWorks": "How It Works?",
   "ThirdPartyPropsActivated": "Updated successfully",
   "ThirdPartyPropsDeactivated": "Deactivated successfully",

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

@@ -123,7 +123,7 @@ class ThirdPartyServices extends React.Component {
       i18n,
       consumers,
       updateConsumerProps,
-      urlAuthKeys,
+      integrationSettingsUrl,
       theme,
       currentColorScheme,
     } = this.props;
@@ -141,7 +141,7 @@ class ThirdPartyServices extends React.Component {
               color={currentColorScheme.main.accent}
               isHovered
               target="_blank"
-              href={urlAuthKeys}
+              href={integrationSettingsUrl}
             >
               {t("Common:LearnMore")}
             </Link>
@@ -187,7 +187,7 @@ ThirdPartyServices.propTypes = {
   t: PropTypes.func.isRequired,
   i18n: PropTypes.object.isRequired,
   consumers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  urlAuthKeys: PropTypes.string,
+  integrationSettingsUrl: PropTypes.string,
   getConsumers: PropTypes.func.isRequired,
   updateConsumerProps: PropTypes.func.isRequired,
   setSelectedConsumer: PropTypes.func.isRequired,
@@ -195,7 +195,7 @@ ThirdPartyServices.propTypes = {
 
 export default inject(({ setup, auth }) => {
   const { settingsStore, setDocumentTitle } = auth;
-  const { urlAuthKeys, theme, currentColorScheme } = settingsStore;
+  const { integrationSettingsUrl, theme, currentColorScheme } = settingsStore;
   const {
     getConsumers,
     integration,
@@ -207,7 +207,7 @@ export default inject(({ setup, auth }) => {
   return {
     theme,
     consumers,
-    urlAuthKeys,
+    integrationSettingsUrl,
     getConsumers,
     updateConsumerProps,
     setSelectedConsumer,

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

@@ -83,53 +83,89 @@ class ConsumerModalDialog extends React.Component {
     this.mapTokenNameToState();
   }
 
+  thirdPartyServicesUrl = () => {
+    switch (this.props.selectedConsumer.name) {
+      case "docuSign":
+        return this.props.docuSignUrl;
+      case "dropbox":
+        return this.props.dropboxUrl;
+      case "box":
+        return this.props.boxUrl;
+      case "mailru":
+        return this.props.mailRuUrl;
+      case "skydrive":
+        return this.props.oneDriveUrl;
+      case "microsoft":
+        return this.props.microsoftUrl;
+      case "google":
+        return this.props.googleUrl;
+      case "facebook":
+        return this.props.facebookUrl;
+      case "linkedin":
+        return this.props.linkedinUrl;
+      case "clickatell":
+        return this.props.clickatellUrl;
+      case "smsc":
+        return this.props.smsclUrl;
+      case "firebase":
+        return this.props.firebaseUrl;
+      case "appleID":
+        return this.props.appleIDUrl;
+      case "telegram":
+        return this.props.telegramUrl;
+      case "wordpress":
+        return this.props.wordpressUrl;
+      case "s3":
+        return this.props.awsUrl;
+      case "googlecloud":
+        return this.props.googleCloudUrl;
+      case "rackspace":
+        return this.props.rackspaceUrl;
+      case "selectel":
+        return this.props.selectelUrl;
+      default:
+        return this.props.docspaceSettingsUrl;
+    }
+  };
+
   consumerInstruction =
     this.props.selectedConsumer.instruction &&
-    format(this.props.selectedConsumer.instruction, <Box marginProp="4px 0" />);
+    format(this.props.selectedConsumer.instruction, <Box marginProp="0" />);
 
-  bodyDescription = (
-    <Box marginProp={`${this.consumerInstruction ? "44px" : 0} 0 16px 0`}>
-      <Box marginProp="0 0 16px 0">
-        <Text as="div" isBold fontSize="15px">
-          {this.props.t("ThirdPartyHowItWorks")}
-        </Text>
-      </Box>
-      <Text as="div">
-        <Trans
-          t={this.props.t}
-          i18nKey="ThirdPartyBodyDescription"
-          ns="Settings"
-        >
-          For more detailed instructions about connecting this service, please
-          refer to our{" "}
-          <Link
-            color={this.props.theme.client.settings.integration.linkColor}
-            isHovered={false}
-            target="_blank"
-            href={`${this.props.urlAuthKeys}#${this.props.selectedConsumer.name}`}
-          >
-            Help Center
-          </Link>{" "}
-          that provides all the necessary information.
-        </Trans>
-      </Text>
-    </Box>
-  );
-
-  bottomDescription = (
-    <Trans t={this.props.t} i18nKey="ThirdPartyBottomDescription" ns="Settings">
-      If you still have some questions on how to connect this service or need
-      technical assistance, please feel free to contact our{" "}
+  helpCenterDescription = (
+    <Trans t={this.props.t} i18nKey="ThirdPartyBodyDescription" ns="Settings">
+      Detailed instructions in our{" "}
       <Link
         color={this.props.theme.client.settings.integration.linkColor}
         isHovered={false}
         target="_blank"
-        href={this.props.urlSupport}
+        href={this.thirdPartyServicesUrl()}
       >
-        Support Team
+        Help Center
       </Link>
     </Trans>
   );
+  
+  supportTeamDescription = (
+    <Box paddingProp="20px 0 8px">
+      <Trans
+        t={this.props.t}
+        i18nKey="ThirdPartyBottomDescription"
+        ns="Settings"
+      >
+        If you still have some questions on how to connect this service or need
+        technical assistance, please feel free to contact our{" "}
+        <Link
+          color={this.props.theme.client.settings.integration.linkColor}
+          isHovered={false}
+          target="_blank"
+          href={this.props.urlSupport}
+        >
+          Support Team
+        </Link>
+      </Trans>
+    </Box>
+  );
 
   render() {
     const {
@@ -144,8 +180,8 @@ class ConsumerModalDialog extends React.Component {
       onChangeHandler,
       updateConsumerValues,
       consumerInstruction,
-      bodyDescription,
-      bottomDescription,
+      helpCenterDescription,
+      supportTeamDescription,
     } = this;
 
     return (
@@ -156,8 +192,7 @@ class ConsumerModalDialog extends React.Component {
       >
         <ModalDialog.Header>{selectedConsumer.title}</ModalDialog.Header>
         <ModalDialog.Body>
-          <Text as="div">{consumerInstruction}</Text>
-          <Text as="div">{bodyDescription}</Text>
+          <Box paddingProp="0 0 16px">{consumerInstruction}</Box>
           <React.Fragment>
             {selectedConsumer.props.map((prop, i) => (
               <React.Fragment key={prop.name}>
@@ -185,7 +220,8 @@ class ConsumerModalDialog extends React.Component {
               </React.Fragment>
             ))}
           </React.Fragment>
-          <Text>{bottomDescription}</Text>
+          <Text as="div">{supportTeamDescription}</Text>
+          <Text as="div">{helpCenterDescription}</Text>
         </ModalDialog.Body>
         <ModalDialog.Footer>
           <Button
@@ -225,7 +261,30 @@ ConsumerModalDialog.propTypes = {
 
 export default inject(({ setup, auth }) => {
   const { settingsStore } = auth;
-  const { urlAuthKeys, urlSupport, theme } = settingsStore;
+  const {
+    theme,
+    urlSupport,
+    docspaceSettingsUrl,
+    docuSignUrl,
+    dropboxUrl,
+    boxUrl,
+    mailRuUrl,
+    oneDriveUrl,
+    microsoftUrl,
+    googleUrl,
+    facebookUrl,
+    linkedinUrl,
+    clickatellUrl,
+    smsclUrl,
+    firebaseUrl,
+    appleIDUrl,
+    telegramUrl,
+    wordpressUrl,
+    awsUrl,
+    googleCloudUrl,
+    rackspaceUrl,
+    selectelUrl,
+  } = settingsStore;
   const { integration } = setup;
   const { selectedConsumer } = integration;
 
@@ -233,6 +292,25 @@ export default inject(({ setup, auth }) => {
     theme,
     selectedConsumer,
     urlSupport,
-    urlAuthKeys,
+    docspaceSettingsUrl,
+    docuSignUrl,
+    dropboxUrl,
+    boxUrl,
+    mailRuUrl,
+    oneDriveUrl,
+    microsoftUrl,
+    googleUrl,
+    facebookUrl,
+    linkedinUrl,
+    clickatellUrl,
+    smsclUrl,
+    firebaseUrl,
+    appleIDUrl,
+    telegramUrl,
+    wordpressUrl,
+    awsUrl,
+    googleCloudUrl,
+    rackspaceUrl,
+    selectelUrl,
   };
 })(observer(ConsumerModalDialog));

packages/common/store/SettingsStore.js

@@ -150,8 +150,88 @@ class SettingsStore {
     this.tenantStatus = tenantStatus;
   };
 
-  get urlAuthKeys() {
-    return `${this.helpLink}/installation/groups-authorization-keys.aspx`;
+  get docspaceSettingsUrl() {
+    return `${this.helpLink}/administration/docspace-settings.aspx`;
+  }
+
+  get integrationSettingsUrl() {
+    return `${this.helpLink}/administration/docspace-settings.aspx#AdjustingIntegrationSettings_block`;
+  }
+
+  get docuSignUrl() {
+    return `${this.helpLink}/administration/connect-docusign-docspace.aspx`;
+  }
+
+  get dropboxUrl() {
+    return `${this.helpLink}/administration/connect-dropbox-docspace.aspx`;
+  }
+
+  get boxUrl() {
+    return `${this.helpLink}/administration/connect-box-docspace.aspx`;
+  }
+
+  get mailRuUrl() {
+    return `${this.helpLink}/administration/connect-mail-ru-docspace.aspx`;
+  }
+
+  get oneDriveUrl() {
+    return `${this.helpLink}/administration/connect-onedrive-docspace.aspx`;
+  }
+
+  get microsoftUrl() {
+    return `${this.helpLink}/administration/connect-microsoft-docspace.aspx`;
+  }
+
+  get googleUrl() {
+    return `${this.helpLink}/administration/connect-google-docspace.aspx`;
+  }
+
+  get facebookUrl() {
+    return `${this.helpLink}/administration/connect-facebook-docspace.aspx`;
+  }
+
+  get linkedinUrl() {
+    return `${this.helpLink}/administration/connect-linkedin-docspace.aspx`;
+  }
+
+  get clickatellUrl() {
+    return `${this.helpLink}/administration/connect-clickatell-docspace.aspx`;
+  }
+
+  get smsclUrl() {
+    return `${this.helpLink}/administration/connect-smsc-docspace.aspx`;
+  }
+
+  get firebaseUrl() {
+    return `${this.helpLink}/administration/connect-firebase-docspace.aspx`;
+  }
+
+  get appleIDUrl() {
+    return `${this.helpLink}/administration/connect-apple-docspace.aspx`;
+  }
+
+  get telegramUrl() {
+    return `${this.helpLink}/administration/connect-telegram-docspace.aspx`;
+  }
+
+  get wordpressUrl() {
+    return `${this.helpLink}/administration/connect-wordpress-docspace.aspx`;
+  }
+
+  get awsUrl() {
+    return `${this.helpLink}/administration/connect-amazon-docspace.aspx`;
+  }
+
+  get googleCloudUrl() {
+    return `${this.helpLink}/administration/connect-google-cloud-storage-docspace.aspx`;
+  }
+
+  get rackspaceUrl() {
+    return `${this.helpLink}/administration/connect-rackspace-docspace.aspx`;
+  }
+
+  get selectelUrl() {
+    return `${this.helpLink}/administration/connect-selectel-docspace.aspx`;
   }
 
   get wizardCompleted() {