178bc80b25
Co-authored-by: Pranav Raj S <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<template>
|
|
<div
|
|
class="rounded-md bg-yellow-50 border border-yellow-200 dark:border-slate-700 dark:bg-slate-800 px-6 py-4 mb-4"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<fluent-icon
|
|
icon="alert"
|
|
class="text-yellow-500 dark:text-yellow-400"
|
|
size="24"
|
|
/>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-base font-semibold text-yellow-900 dark:text-yellow-500 mb-1"
|
|
>
|
|
{{
|
|
$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
|
|
}}
|
|
</p>
|
|
<div class="text-sm text-yellow-800 dark:text-yellow-600 mt-2">
|
|
<p
|
|
v-dompurify-html="
|
|
formatMessage(
|
|
useInstallationName(
|
|
errorDescription,
|
|
globalConfig.installationName
|
|
),
|
|
false
|
|
)
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!hasConnectedAChannel" class="ml-8 mt-2">
|
|
<woot-submit-button
|
|
v-if="!availableChannels.length"
|
|
button-class="smooth small warning"
|
|
:loading="uiFlags.isFetchingSlackChannels"
|
|
:button-text="
|
|
$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
|
|
"
|
|
spinner-class="warning"
|
|
@click="fetchChannels"
|
|
/>
|
|
<div v-else class="inline-flex">
|
|
<select
|
|
v-model="selectedChannelId"
|
|
class="h-8 border-yellow-300 border mr-4 text-xs leading-4 py-1"
|
|
>
|
|
<option value="">
|
|
{{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
|
|
</option>
|
|
<option
|
|
v-for="channel in availableChannels"
|
|
:key="channel.id"
|
|
:value="channel.id"
|
|
>
|
|
#{{ channel.name }}
|
|
</option>
|
|
</select>
|
|
<woot-submit-button
|
|
button-class="smooth small success"
|
|
:button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.UPDATE')"
|
|
spinner-class="success"
|
|
:loading="uiFlags.isUpdatingSlack"
|
|
@click="updateIntegration"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
|
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
|
import alertMixin from 'shared/mixins/alertMixin';
|
|
|
|
export default {
|
|
mixins: [alertMixin, globalConfigMixin, messageFormatterMixin],
|
|
props: {
|
|
hasConnectedAChannel: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return { selectedChannelId: '', availableChannels: [] };
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
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() {
|
|
try {
|
|
this.availableChannels = await this.$store.dispatch(
|
|
'integrations/listAllSlackChannels'
|
|
);
|
|
this.availableChannels.sort((c1, c2) => c1.name - c2.name);
|
|
} catch {
|
|
this.$t('INTEGRATION_SETTINGS.SLACK.FAILED_TO_FETCH_CHANNELS');
|
|
this.availableChannels = [];
|
|
}
|
|
},
|
|
async updateIntegration() {
|
|
try {
|
|
await this.$store.dispatch('integrations/updateSlack', {
|
|
referenceId: this.selectedChannelId,
|
|
});
|
|
this.showAlert(this.$t('INTEGRATION_SETTINGS.SLACK.UPDATE_SUCCESS'));
|
|
} catch (error) {
|
|
this.showAlert(
|
|
error.message || 'INTEGRATION_SETTINGS.SLACK.UPDATE_ERROR'
|
|
);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|