Feature: Twilio Whatsapp Integration (#779)

Twilio Whatsapp Integration

Co-authored-by: Sojan <sojan@pepalo.com>
This commit is contained in:
Pranav Raj S
2020-04-30 01:41:13 +05:30
committed by GitHub
parent 168042f9a4
commit 0cb7333977
23 changed files with 238 additions and 81 deletions

View File

@@ -23,6 +23,13 @@
>
{{ contact.email }}
</a>
<a
v-if="contact.phone_number"
:href="`tel:${contact.phone_number}`"
class="contact--email"
>
{{ contact.phone_number }}
</a>
<div
v-if="
@@ -211,7 +218,7 @@ export default {
text-transform: capitalize;
font-weight: $font-weight-bold;
font-size: $font-size-medium;
font-size: $font-size-default;
}
.contact--email {

View File

@@ -14,9 +14,22 @@
: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>
<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>
@@ -29,9 +42,9 @@
: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>
<span v-if="$v.phoneNumber.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
}}</span>
</label>
</div>
@@ -44,9 +57,9 @@
: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>
<span v-if="$v.accountSID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
}}</span>
</label>
</div>
<div class="medium-8 columns">
@@ -58,9 +71,9 @@
: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>
<span v-if="$v.authToken.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.AUTH_TOKEN.ERROR')
}}</span>
</label>
</div>
@@ -92,6 +105,7 @@ export default {
return {
accountSID: '',
authToken: '',
medium: '',
channelName: '',
phoneNumber: '',
};
@@ -106,6 +120,7 @@ export default {
phoneNumber: { required, shouldStartWithPlusSign },
authToken: { required },
accountSID: { required },
medium: { required },
},
methods: {
async createChannel() {
@@ -120,6 +135,7 @@ export default {
{
twilio_channel: {
name: this.channelName,
medium: this.medium,
account_sid: this.accountSID,
auth_token: this.authToken,
phone_number: this.phoneNumber,