fix: Update email alerts for Slack integration (#7739)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -85,7 +85,8 @@
         "UPDATE": "Update",
         "BUTTON_TEXT": "Connect channel",
         "DESCRIPTION": "Your Slack workspace is now linked with Chatwoot. However, the integration is currently inactive. To activate the integration and connect a channel to Chatwoot, please click the button below.\n\n**Note:** If you are attempting to connect a private channel, add the Chatwoot app to the Slack channel before proceeding with this step.",
-        "ATTENTION_REQUIRED": "Attention required"
+        "ATTENTION_REQUIRED": "Attention required",
+        "EXPIRED": "Your Slack integration has expired. To continue receiving messages on Slack, please delete the integration and connect your workspace again."
       },
       "UPDATE_ERROR": "There was an error updating the integration, please try again",
       "UPDATE_SUCCESS": "The channel is connected successfully",

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue

@@ -21,7 +21,10 @@
       />
     </div>
     <div v-if="areHooksAvailable" class="p-6 flex-1">
-      <select-channel-warning v-if="!isIntegrationHookEnabled" />
+      <select-channel-warning
+        v-if="!isIntegrationHookEnabled"
+        :has-connected-a-channel="hasConnectedAChannel"
+      />
       <slack-integration-help-text
         :selected-channel-name="selectedChannelName"
       />
@@ -61,16 +64,20 @@ export default {
       const { hooks = [] } = this.integration || {};
       return !!hooks.length;
     },
-    isIntegrationHookEnabled() {
+    hook() {
       const { hooks = [] } = this.integration || {};
-      const [hook = {}] = hooks;
-      return hook.status || false;
+      const [hook] = hooks;
+      return hook || {};
+    },
+    isIntegrationHookEnabled() {
+      return this.hook.status || false;
+    },
+    hasConnectedAChannel() {
+      return !!this.hook.reference_id;
     },
     selectedChannelName() {
-      const { hooks = [] } = this.integration || {};
-      const [hook = {}] = hooks;
-      if (hook.status) {
-        const { settings: { channel_name: channelName = '' } = {} } = hook;
+      if (this.hook.status) {
+        const { settings: { channel_name: channelName = '' } = {} } = this.hook;
         return channelName || 'customer-conversations';
       }
       return this.$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.SELECTED');

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue

@@ -23,7 +23,7 @@
             v-dompurify-html="
               formatMessage(
                 useInstallationName(
-                  $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION'),
+                  errorDescription,
                   globalConfig.installationName
                 ),
                 false
@@ -33,7 +33,7 @@
         </div>
       </div>
     </div>
-    <div class="ml-8 mt-2">
+    <div v-if="!hasConnectedAChannel" class="ml-8 mt-2">
       <woot-submit-button
         v-if="!availableChannels.length"
         button-class="smooth small warning"
@@ -79,6 +79,12 @@ import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   mixins: [alertMixin, globalConfigMixin, messageFormatterMixin],
+  props: {
+    hasConnectedAChannel: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },
@@ -87,6 +93,11 @@ export default {
       globalConfig: 'globalConfig/get',
       uiFlags: 'integrations/getUIFlags',
     }),
+    errorDescription() {
+      return !this.hasConnectedAChannel
+        ? this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.DESCRIPTION')
+        : this.$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.EXPIRED');
+    },
   },
   methods: {
     async fetchChannels() {