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

feat: Dedicated tab for campaigns (#2741)

Browse Source
This commit is contained in:
Muhsin Keloth
2021-08-11 20:29:33 +05:30
committed by GitHub
parent 8daf1fe033
commit 4d668d8db3
22 changed files with 477 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue → app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
View File

@@ -44,14 +44,16 @@
</span>
</label>
<label v-if="isOnOffType">
{{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
<woot-date-time-picker
:value="scheduledAt"
:confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
:placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
@change="onChange"
/>
<label :class="{ error: $v.selectedInbox.$error }">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
<select v-model="selectedInbox" @change="onChangeInbox($event)">
<option v-for="item in inboxes" :key="item.name" :value="item.id">
{{ item.name }}
</option>
</select>
<span v-if="$v.selectedInbox.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
</span>
</label>
<label
@@ -99,6 +101,16 @@
</span>
</label>
<label v-if="isOnOffType">
{{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
<woot-date-time-picker
:value="scheduledAt"
:confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
:placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
@change="onChange"
/>
</label>
<woot-input
v-if="isOngoingType"
v-model="endPoint"
@@ -137,10 +149,7 @@
</div>
<div class="modal-footer">
<woot-button
:is-disabled="buttonDisabled"
:is-loading="uiFlags.isCreating"
>
<woot-button :is-loading="uiFlags.isCreating">
{{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
</woot-button>
<woot-button variant="clear" @click.prevent="onClose">
@@ -166,83 +175,69 @@ export default {
},
mixins: [alertMixin, campaignMixin],
props: {
senderList: {
type: Array,
default: () => [],
},
audienceList: {
type: Array,
default: () => [],
},
},
data() {
return {
title: '',
message: '',
selectedSender: 0,
selectedInbox: null,
endPoint: '',
timeOnPage: 10,
show: true,
enabled: true,
scheduledAt: null,
selectedAudience: [],
senderList: [],
};
},
validations: {
title: {
required,
},
message: {
required,
},
selectedSender: {
required,
},
endPoint: {
required,
minLength: minLength(7),
url,
},
timeOnPage: {
required,
},
selectedAudience: {
isEmpty() {
return !!this.selectedAudience.length;
validations() {
const commonValidations = {
title: {
required,
},
},
message: {
required,
},
selectedInbox: {
required,
},
};
if (this.isOngoingType) {
return {
...commonValidations,
selectedSender: {
required,
},
endPoint: {
required,
minLength: minLength(7),
url,
},
timeOnPage: {
required,
},
};
}
return {
...commonValidations,
selectedAudience: {
isEmpty() {
return !!this.selectedAudience.length;
},
},
};
},
computed: {
...mapGetters({
uiFlags: 'campaigns/getUIFlags',
audienceList: 'labels/getLabels',
}),
currentInboxId() {
return this.$route.params.inboxId;
},
inbox() {
return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
},
buttonDisabled() {
inboxes() {
if (this.isOngoingType) {
return (
this.$v.message.$invalid ||
this.$v.title.$invalid ||
this.$v.selectedSender.$invalid ||
this.$v.endPoint.$invalid ||
this.$v.timeOnPage.$invalid ||
this.uiFlags.isCreating
);
return this.$store.getters['inboxes/getWebsiteInboxes'];
}
return (
this.$v.message.$invalid ||
this.$v.title.$invalid ||
this.$v.selectedAudience.$invalid ||
this.uiFlags.isCreating
);
return this.$store.getters['inboxes/getTwilioInboxes'];
},
sendersAndBotList() {
return [
@@ -261,13 +256,28 @@ export default {
onChange(value) {
this.scheduledAt = value;
},
async onChangeInbox() {
try {
const response = await this.$store.dispatch('inboxMembers/get', {
inboxId: this.selectedInbox,
});
const {
data: { payload: inboxMembers },
} = response;
this.senderList = inboxMembers;
} catch (error) {
const errorMessage =
error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
this.showAlert(errorMessage);
}
},
getCampaignDetails() {
let campaignDetails = null;
if (this.isOngoingType) {
campaignDetails = {
title: this.title,
message: this.message,
inbox_id: this.$route.params.inboxId,
inbox_id: this.selectedInbox,
sender_id: this.selectedSender || null,
enabled: this.enabled,
trigger_rules: {
@@ -285,7 +295,7 @@ export default {
campaignDetails = {
title: this.title,
message: this.message,
inbox_id: this.$route.params.inboxId,
inbox_id: this.selectedInbox,
scheduled_at: this.scheduledAt,
audience,
};
@@ -293,6 +303,10 @@ export default {
return campaignDetails;
},
async addCampaign() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
try {
const campaignDetails = this.getCampaignDetails();
await this.$store.dispatch('campaigns/create', campaignDetails);

45
app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue → app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
View File

@@ -1,31 +1,16 @@
<template>
<div class="column content-box">
<div class="row button-wrapper">
<woot-button icon="ion-android-add-circle" @click="openAddPopup">
{{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
</woot-button>
</div>
<campaigns-table
:campaigns="records"
:campaigns="campaigns"
:show-empty-result="showEmptyResult"
:is-loading="uiFlags.isFetching"
:campaign-type="type"
@on-edit-click="openEditPopup"
@on-delete-click="openDeletePopup"
/>
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
<add-campaign
:sender-list="selectedAgents"
:audience-list="labelList"
:campaign-type="type"
@on-close="hideAddPopup"
/>
</woot-modal>
<woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
<edit-campaign
:selected-campaign="selectedCampaign"
:sender-list="selectedAgents"
@on-close="hideEditPopup"
/>
</woot-modal>
@@ -43,21 +28,16 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import AddCampaign from './AddCampaign';
import campaignMixin from 'shared/mixins/campaignMixin';
import CampaignsTable from './CampaignsTable';
import EditCampaign from './EditCampaign';
export default {
components: {
AddCampaign,
CampaignsTable,
EditCampaign,
},
mixins: [alertMixin],
mixins: [alertMixin, campaignMixin],
props: {
selectedAgents: {
type: Array,
default: () => [],
},
type: {
type: String,
default: '',
@@ -65,8 +45,6 @@ export default {
},
data() {
return {
campaigns: [],
showAddPopup: false,
showEditPopup: false,
selectedCampaign: {},
showDeleteConfirmationPopup: false,
@@ -74,28 +52,19 @@ export default {
},
computed: {
...mapGetters({
records: 'campaigns/getCampaigns',
uiFlags: 'campaigns/getUIFlags',
labelList: 'labels/getLabels',
}),
campaigns() {
return this.$store.getters['campaigns/getCampaigns'](this.campaignType);
},
showEmptyResult() {
const hasEmptyResults =
!this.uiFlags.isFetching && this.records.length === 0;
!this.uiFlags.isFetching && this.campaigns.length === 0;
return hasEmptyResults;
},
},
mounted() {
this.$store.dispatch('campaigns/get', {
inboxId: this.$route.params.inboxId,
});
},
methods: {
openAddPopup() {
this.showAddPopup = true;
},
hideAddPopup() {
this.showAddPopup = false;
},
openEditPopup(response) {
const { row: campaign } = response;
this.selectedCampaign = campaign;

31
app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue → app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
View File

@@ -1,13 +1,13 @@
<template>
<section class="campaigns-table-wrap">
<empty-state v-if="showEmptyResult" :title="emptyMessage" />
<ve-table
v-else
:columns="columns"
scroll-width="155rem"
:table-data="tableData"
:border-around="true"
/>
<empty-state v-if="showEmptyResult" :title="$t('CAMPAIGN.LIST.404')" />
<div v-if="isLoading" class="campaign--loader">
<spinner />
<span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
@@ -24,6 +24,7 @@ import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
import WootButton from 'dashboard/components/ui/WootButton.vue';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
import InboxIconWithName from 'dashboard/components/widgets/InboxIconWithName';
import campaignMixin from 'shared/mixins/campaignMixin';
import timeMixin from 'dashboard/mixins/time';
@@ -58,6 +59,23 @@ export default {
inbox() {
return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
},
inboxes() {
if (this.isOngoingType) {
return this.$store.getters['inboxes/getWebsiteInboxes'];
}
return this.$store.getters['inboxes/getTwilioInboxes'];
},
emptyMessage() {
if (this.isOngoingType) {
return this.inboxes.length
? this.$t('CAMPAIGN.ONGOING.404')
: this.$t('CAMPAIGN.ONGOING.INBOXES_NOT_FOUND');
}
return this.inboxes.length
? this.$t('CAMPAIGN.ONE_OFF.404')
: this.$t('CAMPAIGN.ONE_OFF.INBOXES_NOT_FOUND');
},
tableData() {
if (this.isLoading) {
return [];
@@ -107,6 +125,15 @@ export default {
return '';
},
},
{
field: 'inbox',
key: 'inbox',
title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
align: 'left',
renderBodyCell: ({ row }) => {
return <InboxIconWithName inbox={row.inbox} />;
},
},
];
if (this.isOngoingType) {
return [

71
app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue → app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
View File

@@ -26,6 +26,19 @@
{{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
</span>
</label>
<label :class="{ error: $v.selectedInbox.$error }">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
<select v-model="selectedInbox" @change="onChangeInbox($event)">
<option v-for="item in inboxes" :key="item.name" :value="item.id">
{{ item.name }}
</option>
</select>
<span v-if="$v.selectedInbox.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
</span>
</label>
<label :class="{ error: $v.selectedSender.$error }">
{{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
<select v-model="selectedSender">
@@ -76,10 +89,7 @@
</label>
</div>
<div class="modal-footer">
<woot-button
:is-disabled="buttonDisabled"
:is-loading="uiFlags.isCreating"
>
<woot-button :is-loading="uiFlags.isCreating">
{{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
</woot-button>
<woot-button variant="clear" @click.prevent="onClose">
@@ -95,30 +105,29 @@ import { mapGetters } from 'vuex';
import { required, url, minLength } from 'vuelidate/lib/validators';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
import alertMixin from 'shared/mixins/alertMixin';
import campaignMixin from 'shared/mixins/campaignMixin';
export default {
components: {
WootMessageEditor,
},
mixins: [alertMixin],
mixins: [alertMixin, campaignMixin],
props: {
selectedCampaign: {
type: Object,
default: () => {},
},
senderList: {
type: Array,
default: () => [],
},
},
data() {
return {
title: '',
message: '',
selectedSender: '',
selectedInbox: null,
endPoint: '',
timeOnPage: 10,
show: true,
enabled: true,
senderList: [],
};
},
validations: {
@@ -139,20 +148,20 @@ export default {
timeOnPage: {
required,
},
selectedInbox: {
required,
},
},
computed: {
...mapGetters({
uiFlags: 'campaigns/getUIFlags',
inboxes: 'inboxes/getTwilioInboxes',
}),
buttonDisabled() {
return (
this.$v.message.$invalid ||
this.$v.title.$invalid ||
this.$v.selectedSender.$invalid ||
this.$v.endPoint.$invalid ||
this.$v.timeOnPage.$invalid ||
this.uiFlags.isCreating
);
inboxes() {
if (this.isOngoingType) {
return this.$store.getters['inboxes/getWebsiteInboxes'];
}
return this.$store.getters['inboxes/getTwilioInboxes'];
},
pageTitle() {
return `${this.$t('CAMPAIGN.EDIT.TITLE')} - ${
@@ -176,11 +185,31 @@ export default {
onClose() {
this.$emit('on-close');
},
async loadInboxMembers() {
try {
const response = await this.$store.dispatch('inboxMembers/get', {
inboxId: this.selectedInbox,
});
const {
data: { payload: inboxMembers },
} = response;
this.senderList = inboxMembers;
} catch (error) {
const errorMessage =
error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
this.showAlert(errorMessage);
}
},
onChangeInbox() {
this.loadInboxMembers();
},
setFormValues() {
const {
title,
message,
enabled,
inbox: { id: inboxId },
trigger_rules: { url: endPoint, time_on_page: timeOnPage },
sender,
} = this.selectedCampaign;
@@ -188,10 +217,16 @@ export default {
this.message = message;
this.endPoint = endPoint;
this.timeOnPage = timeOnPage;
this.selectedInbox = inboxId;
this.selectedSender = (sender && sender.id) || 0;
this.enabled = enabled;
this.loadInboxMembers();
},
async editCampaign() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
try {
await this.$store.dispatch('campaigns/update', {
id: this.selectedCampaign.id,

52
app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div class="column content-box">
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="ion-android-add-circle"
@click="openAddPopup"
>
{{ buttonText }}
</woot-button>
<campaign />
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
<add-campaign @on-close="hideAddPopup" />
</woot-modal>
</div>
</template>
<script>
import campaignMixin from 'shared/mixins/campaignMixin';
import Campaign from './Campaign.vue';
import AddCampaign from './AddCampaign';
export default {
components: {
Campaign,
AddCampaign,
},
mixins: [campaignMixin],
data() {
return { showAddPopup: false };
},
computed: {
buttonText() {
if (this.isOngoingType) {
return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONGOING');
}
return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONE_OFF');
},
},
mounted() {
this.$store.dispatch('campaigns/get');
},
methods: {
openAddPopup() {
this.showAddPopup = true;
},
hideAddPopup() {
this.showAddPopup = false;
},
},
};
</script>

44
app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js Normal file
View File

@@ -0,0 +1,44 @@
import Index from './Index';
import SettingsContent from '../Wrapper';
import { frontendURL } from '../../../../helper/URLHelper';
export default {
routes: [
{
path: frontendURL('accounts/:accountId/campaigns'),
component: SettingsContent,
props: {
headerTitle: 'CAMPAIGN.ONGOING.HEADER',
icon: 'ion-arrow-swap',
},
children: [
{
path: '',
redirect: 'ongoing',
},
{
path: 'ongoing',
name: 'settings_account_campaigns',
roles: ['administrator'],
component: { ...Index },
},
],
},
{
path: frontendURL('accounts/:accountId/campaigns'),
component: SettingsContent,
props: {
headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
icon: 'ion-radio-waves',
},
children: [
{
path: 'one_off',
name: 'one_off',
roles: ['administrator'],
component: { ...Index },
},
],
},
],
};

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

@@ -286,9 +286,6 @@
<div v-if="selectedTabKey === 'businesshours'">
<weekly-availability :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'campaign'">
<campaign :selected-agents="selectedAgents" />
</div>
</div>
</template>
@@ -303,7 +300,6 @@ import inboxMixin from 'shared/mixins/inboxMixin';
import FacebookReauthorize from './facebook/Reauthorize';
import PreChatFormSettings from './PreChatForm/Settings';
import WeeklyAvailability from './components/WeeklyAvailability';
import Campaign from './components/Campaign';
export default {
components: {
@@ -312,7 +308,6 @@ export default {
FacebookReauthorize,
PreChatFormSettings,
WeeklyAvailability,
Campaign,
},
mixins: [alertMixin, configMixin, inboxMixin],
data() {
@@ -368,10 +363,6 @@ export default {
if (this.isAWebWidgetInbox) {
return [
...visibleToAllChannelTabs,
{
key: 'campaign',
name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
},
{
key: 'preChatForm',
name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
@@ -387,21 +378,7 @@ export default {
];
}
if (this.isATwilioSMSChannel) {
return [
...visibleToAllChannelTabs,
{
key: 'campaign',
name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
},
{
key: 'configuration',
name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
},
];
}
if (this.isATwilioWhatsappChannel) {
if (this.isATwilioChannel) {
return [
...visibleToAllChannelTabs,
{

2
app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
View File

@@ -8,6 +8,7 @@ import integrationapps from './integrationapps/integrations.routes';
import labels from './labels/labels.routes';
import profile from './profile/profile.routes';
import reports from './reports/reports.routes';
import campaigns from './campaigns/campaigns.routes';
import teams from './teams/teams.routes';
import store from '../../../store';
@@ -33,6 +34,7 @@ export default {
...profile.routes,
...reports.routes,
...teams.routes,
...campaigns.routes,
...integrationapps.routes,
],
};