LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Provider API prototype (#3112)

Browse Source 
Enabling Support for Whatsapp via 360Dialog as a prototype for the provider APIs. 

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sojan Jose
2021-10-05 23:35:06 +05:30
committed by GitHub
parent 40d0b2faf3
commit bd7aeba484
31 changed files with 506 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
View File

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

3
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View File

@@ -45,6 +45,9 @@
<span v-if="item.channel_type === 'Channel::TwilioSms'">
Twilio SMS
</span>
<span v-if="item.channel_type === 'Channel::Whatsapp'">
Whatsapp
</span>
<span v-if="item.channel_type === 'Channel::Email'">
Email
</span>

5
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -245,10 +245,7 @@
@click="updateInbox"
/>
</settings-section>
<facebook-reauthorize
v-if="isAFacebookInbox && inbox.reauthorization_required"
:inbox-id="inbox.id"
/>
<facebook-reauthorize v-if="isAFacebookInbox" :inbox-id="inbox.id" />
</div>
<!-- update agents in inbox -->

128
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<form class="row" @submit.prevent="createChannel()">
<div class="medium-8 columns">
<label :class="{ error: $v.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
v-model.trim="inboxName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
@blur="$v.inboxName.$touch"
/>
<span v-if="$v.inboxName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
</span>
</label>
</div>
<div class="medium-8 columns">
<label :class="{ error: $v.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
<a
href="https://hub.360dialog.com/lp/whatsapp/L9dj7aPA"
target="_blank"
rel="noopener noreferrer nofollow"
>
({{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.APPLY_FOR_ACCESS') }})
</a>
</span>
<input
v-model.trim="apiKey"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
@blur="$v.apiKey.$touch"
/>
<span v-if="$v.apiKey.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
</span>
</label>
</div>
<div class="medium-12 columns">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
/>
</div>
</form>
</template>
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import router from '../../../../index';
const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
export default {
mixins: [alertMixin],
data() {
return {
inboxName: '',
phoneNumber: '',
apiKey: '',
};
},
computed: {
...mapGetters({
uiFlags: 'inboxes/getUIFlags',
}),
},
validations: {
inboxName: { required },
phoneNumber: { required, shouldStartWithPlusSign },
apiKey: { required },
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
try {
const whatsappChannel = await this.$store.dispatch(
'inboxes/createChannel',
{
name: this.inboxName,
channel: {
type: 'whatsapp',
phone_number: this.phoneNumber,
provider_config: {
api_key: this.apiKey,
},
},
}
);
router.replace({
name: 'settings_inboxes_add_agents',
params: {
page: 'new',
inbox_id: whatsappChannel.id,
},
});
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE'));
}
},
},
};
</script>

3
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
View File

@@ -206,7 +206,8 @@ export default {
}
},
{
scope: 'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
scope:
'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
}
);
},

10
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
View File

@@ -79,12 +79,12 @@ const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
export default {
mixins: [alertMixin],
props: {
type: {
type: String,
required: true,
props: {
type: {
type: String,
required: true,
},
},
},
data() {
return {
accountSID: '',

29
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
View File

@@ -1,22 +1,43 @@
<template>
<div class="wizard-body small-9 columns">
<page-header
<page-header
:header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
/>
<twilio type="whatsapp"></twilio>
<div class="medium-8 columns">
<label>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
<select v-model="provider">
<option value="twilio">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO') }}
</option>
<option value="360dialog">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG') }}
</option>
</select>
</label>
</div>
<twilio v-if="provider === 'twilio'" type="whatsapp"></twilio>
<three-sixty-dialog-whatsapp v-else />
</div>
</template>
<script>
import PageHeader from '../../SettingsSubPageHeader';
import Twilio from './Twilio';
import ThreeSixtyDialogWhatsapp from './360DialogWhatsapp';
export default {
components: {
PageHeader,
Twilio,
Twilio,
ThreeSixtyDialogWhatsapp,
},
data() {
return {
provider: 'twilio',
};
},
};
</script>

3
app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
View File

@@ -79,7 +79,8 @@ export default {
}
},
{
scope: 'pages_manage_metadata,pages_messaging',
scope:
'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
auth_type: 'reauthorize',
}
);