Feature: Twilio Whatsapp Integration (#779)
Twilio Whatsapp Integration Co-authored-by: Sojan <sojan@pepalo.com>
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user