chore: Add help-text for slack integration (#2409)

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": {

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>

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'],