From 640e028bde7c40e3103632e047f01bee7f992e90 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 23 Jun 2021 11:52:06 +0530
Subject: [PATCH] chore: Add help-text for slack integration (#2409)

---
 .../dashboard/i18n/locale/en/integrations.json       |  6 ++++++
 .../settings/integrations/IntegrationHelpText.vue    | 12 ++++++++++++
 .../settings/integrations/ShowIntegration.vue        |  5 +++++
 3 files changed, 23 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index cbbe0ebbf..4562183c7 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -63,6 +63,12 @@
         }
       }
     },
+    "SLACK": {
+      "HELP_TEXT" : { 
+        "TITLE": "Using Slack Integration",
+        "BODY": "<br/><p>Chatwoot will now sync all the incoming conversations into the <b><i>customer-conversations</i></b> channel inside your slack workplace.</p><p>Replying to a conversation thread in <b><i>customer-conversations</i></b> slack channel will create a response back to the customer through chatwoot.</p><p>Start the replies with <b><i>note:</i></b> to create private notes instead of replies.</p><p>If the replier on slack has an agent profile in chatwoot under the same email, the replies will be associated accordingly.</p><p>When the replier doesn't have an associated agent profile, the replies will be made from the bot profile.</p>" 
+      }
+    },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "API": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
new file mode 100644
index 000000000..25049f2d0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="row">
+    <div class="column">
+      <div class="integration--description">
+        <h5>{{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}</h5>
+        <p>
+          <span v-html="$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY')"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
index de270e388..f12b9d295 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -13,6 +13,9 @@
               :integration-action="integrationAction()"
             />
           </div>
+          <div v-if="integration.enabled" class="small-12 columns integration">
+            <IntegrationHelpText />
+          </div>
         </div>
       </div>
     </div>
@@ -22,10 +25,12 @@
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration';
+import IntegrationHelpText from './IntegrationHelpText';
 
 export default {
   components: {
     Integration,
+    IntegrationHelpText,
   },
   mixins: [globalConfigMixin],
   props: ['integrationId', 'code'],