KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Twilio to individual(SMS/Whatsapp) channels (#2566)

Browse source
This commit is contained in:
Siddharth Ramesh 2021-07-12 22:33:39 +05:30 • committed by GitHub
parent ba547b3f60
commit fc4ef1595b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 138 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
app/javascript/dashboard/assets/images/channels/sms.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

10
app/javascript/dashboard/components/widgets/ChannelItem.vue
View file

@ -37,8 +37,12 @@
src="~dashboard/assets/images/channels/website.png"
/>
<img
v-if="channel.key === 'twilio'"
src="~dashboard/assets/images/channels/twilio.png"
v-if="channel.key === 'sms'"
src="~dashboard/assets/images/channels/sms.png"
/>
<img
v-if="channel.key === 'whatsapp'"
src="~dashboard/assets/images/channels/whatsapp.png"
/>
<h3 class="channel__title">
{{ channel.name }}
@ -72,7 +76,7 @@ export default {
if (key === 'email') {
return this.enabledFeatures.channel_email;
}
return ['website', 'twilio', 'api'].includes(key);
return ['website', 'twilio', 'api', 'whatsapp', 'sms'].includes(key);
},
},
methods: {

8
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
View file

@ -126,6 +126,14 @@
"API": {
"ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again"
}
},
"SMS": {
"TITLE": "SMS Channel via Twilio",
"DESC": "Start supporting your customers via SMS with Twilio integration."
},
"WHATSAPP": {
"TITLE": "Whatsapp Channel via Twilio",
"DESC": "Start supporting your customers via Whatsapp with Twilio integration."
},
"API_CHANNEL": {
"TITLE": "API Channel",

3
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
View file

@ -42,7 +42,8 @@ export default {
{ key: 'website', name: 'Website' },
{ key: 'facebook', name: 'Facebook' },
{ key: 'twitter', name: 'Twitter' },
{ key: 'twilio', name: 'Twilio' },
{ key: 'whatsapp', name: 'WhatsApp via Twilio' },
{ key: 'sms', name: 'SMS via Twilio' },
{ key: 'email', name: 'Email' },
{
key: 'api',

6
app/javascript/dashboard/routes/dashboard/settings/inbox/channel-factory.js
View file

@ -1,17 +1,19 @@
import Facebook from './channels/Facebook';
import Website from './channels/Website';
import Twitter from './channels/Twitter';
import Twilio from './channels/Twilio';
import Api from './channels/Api';
import Email from './channels/Email';
import Sms from './channels/Sms';
import Whatsapp from './channels/Whatsapp';
const channelViewList = {
facebook: Facebook,
website: Website,
twitter: Twitter,
twilio: Twilio,
api: Api,
email: Email,
sms: Sms,
whatsapp: Whatsapp,
};
export default {

21
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue Normal file
View file

@ -0,0 +1,21 @@
<template>
<div class="wizard-body small-9 columns">
<page-header
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
/>
<twilio type="sms"></twilio>
</div>
</template>
<script>
import PageHeader from '../../SettingsSubPageHeader';
import Twilio from './Twilio';
export default {
components: {
PageHeader,
Twilio,
},
};
</script>

164
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
View file

@ -1,90 +1,72 @@
<!-- Deprecated in favour of separate files for SMS and Whatsapp and also to implement new providers for each platform in the future-->
<template>
<div class="wizard-body small-9 columns">
<page-header
:header-title="$t('INBOX_MGMT.ADD.TWILIO.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.TWILIO.DESC')"
/>
<form class="row" @submit.prevent="createChannel()">
<div class="medium-8 columns">
<label :class="{ error: $v.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
@blur="$v.channelName.$touch"
/>
<span v-if="$v.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.medium.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_TYPE.LABEL') }}
<select v-model="medium">
<option value="sms">SMS</option>
<option value="whatsapp">Whatsapp</option>
</select>
<span v-if="$v.medium.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_TYPE.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.accountSID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
<input
v-model.trim="accountSID"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
@blur="$v.accountSID.$touch"
/>
<span v-if="$v.accountSID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.authToken.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.LABEL') }}
<input
v-model.trim="authToken"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
@blur="$v.authToken.$touch"
/>
<span v-if="$v.authToken.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.ERROR')
}}</span>
</label>
</div>
<div class="medium-12 columns">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
<form class="row" @submit.prevent="createChannel()">
<div class="medium-8 columns">
<label :class="{ error: $v.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
@blur="$v.channelName.$touch"
/>
</div>
</form>
</div>
<span v-if="$v.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.accountSID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
<input
v-model.trim="accountSID"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
@blur="$v.accountSID.$touch"
/>
<span v-if="$v.accountSID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.authToken.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.LABEL') }}
<input
v-model.trim="authToken"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
@blur="$v.authToken.$touch"
/>
<span v-if="$v.authToken.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.ERROR')
}}</span>
</label>
</div>
<div class="medium-12 columns">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
/>
</div>
</form>
</template>
<script>
@ -92,20 +74,22 @@ import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader';
const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
export default {
components: {
PageHeader,
},
mixins: [alertMixin],
props: {
type: {
type: String,
required: true,
},
},
data() {
return {
accountSID: '',
authToken: '',
medium: '',
medium: this.type,
channelName: '',
phoneNumber: '',
};

22
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<div class="wizard-body small-9 columns">
<page-header
:header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
/>
<twilio type="whatsapp"></twilio>
</div>
</template>
<script>
import PageHeader from '../../SettingsSubPageHeader';
import Twilio from './Twilio';
export default {
components: {
PageHeader,
Twilio,
},
};
</script>