2019-05-21 02:27:06 +00:00
|
|
|
class CallPopup {
|
2019-06-06 09:18:37 +00:00
|
|
|
constructor(call_log) {
|
2019-06-07 04:52:50 +00:00
|
|
|
this.caller_number = call_log.from;
|
2019-05-22 01:08:25 +00:00
|
|
|
this.call_log = call_log;
|
2019-05-16 18:25:35 +00:00
|
|
|
this.make();
|
|
|
|
}
|
|
|
|
|
|
|
|
make() {
|
2019-05-18 10:41:29 +00:00
|
|
|
this.dialog = new frappe.ui.Dialog({
|
|
|
|
'static': true,
|
|
|
|
'minimizable': true,
|
2019-05-16 18:25:35 +00:00
|
|
|
'fields': [{
|
2019-05-27 05:08:43 +00:00
|
|
|
'fieldname': 'caller_info',
|
2019-05-16 18:25:35 +00:00
|
|
|
'fieldtype': 'HTML'
|
|
|
|
}, {
|
2019-05-24 04:41:48 +00:00
|
|
|
'fielname': 'last_interaction',
|
|
|
|
'fieldtype': 'Section Break',
|
2019-05-16 18:25:35 +00:00
|
|
|
}, {
|
2019-05-18 10:41:29 +00:00
|
|
|
'fieldtype': 'Small Text',
|
2019-05-16 18:25:35 +00:00
|
|
|
'label': "Last Communication",
|
|
|
|
'fieldname': 'last_communication',
|
2019-06-07 06:22:39 +00:00
|
|
|
'read_only': true,
|
|
|
|
'default': `<i class="text-muted">${__('No communication found.')}<i>`
|
2019-05-24 04:41:48 +00:00
|
|
|
}, {
|
|
|
|
'fieldtype': 'Small Text',
|
|
|
|
'label': "Last Issue",
|
|
|
|
'fieldname': 'last_issue',
|
2019-06-07 06:22:39 +00:00
|
|
|
'read_only': true,
|
|
|
|
'default': `<i class="text-muted">${__('No issue raised by the customer.')}<i>`
|
2019-05-24 04:41:48 +00:00
|
|
|
}, {
|
2019-05-27 05:08:43 +00:00
|
|
|
'fieldtype': 'Column Break',
|
2019-05-16 18:25:35 +00:00
|
|
|
}, {
|
2019-05-18 10:41:29 +00:00
|
|
|
'fieldtype': 'Small Text',
|
2019-05-16 18:25:35 +00:00
|
|
|
'label': 'Call Summary',
|
2019-05-24 04:41:48 +00:00
|
|
|
'fieldname': 'call_summary',
|
2019-05-18 10:41:29 +00:00
|
|
|
}, {
|
|
|
|
'fieldtype': 'Button',
|
|
|
|
'label': 'Submit',
|
|
|
|
'click': () => {
|
2019-05-24 04:41:48 +00:00
|
|
|
const values = this.dialog.get_values();
|
2019-06-10 04:22:53 +00:00
|
|
|
if (!values.call_summary) return;
|
2019-05-31 08:12:22 +00:00
|
|
|
frappe.xcall('erpnext.crm.doctype.utils.add_call_summary', {
|
2019-06-07 04:52:50 +00:00
|
|
|
'docname': this.call_log.id,
|
2019-06-03 06:57:02 +00:00
|
|
|
'summary': values.call_summary,
|
2019-05-24 04:41:48 +00:00
|
|
|
}).then(() => {
|
|
|
|
this.dialog.set_value('call_summary', '');
|
|
|
|
});
|
2019-05-18 10:41:29 +00:00
|
|
|
}
|
2019-05-27 05:08:43 +00:00
|
|
|
}],
|
2019-05-16 18:25:35 +00:00
|
|
|
});
|
2019-06-06 09:18:37 +00:00
|
|
|
this.set_call_status();
|
2019-05-27 05:08:43 +00:00
|
|
|
this.make_caller_info_section();
|
2019-05-18 10:41:29 +00:00
|
|
|
this.dialog.get_close_btn().show();
|
2019-05-27 10:00:41 +00:00
|
|
|
this.dialog.$body.addClass('call-popup');
|
2019-05-24 04:41:48 +00:00
|
|
|
this.dialog.set_secondary_action(() => {
|
2019-06-03 06:57:02 +00:00
|
|
|
delete erpnext.call_popup;
|
2019-05-24 04:41:48 +00:00
|
|
|
this.dialog.hide();
|
|
|
|
});
|
2019-06-07 07:18:13 +00:00
|
|
|
frappe.utils.play_sound("incoming-call");
|
2019-05-24 04:41:48 +00:00
|
|
|
this.dialog.show();
|
2019-05-16 18:25:35 +00:00
|
|
|
}
|
|
|
|
|
2019-05-27 05:08:43 +00:00
|
|
|
make_caller_info_section() {
|
|
|
|
const wrapper = this.dialog.fields_dict['caller_info'].$wrapper;
|
2019-05-22 10:18:57 +00:00
|
|
|
wrapper.append('<div class="text-muted"> Loading... </div>');
|
|
|
|
frappe.xcall('erpnext.crm.doctype.utils.get_document_with_phone_number', {
|
2019-05-27 05:08:43 +00:00
|
|
|
'number': this.caller_number
|
2019-05-22 10:18:57 +00:00
|
|
|
}).then(contact_doc => {
|
|
|
|
wrapper.empty();
|
2019-05-24 04:41:48 +00:00
|
|
|
const contact = this.contact = contact_doc;
|
2019-05-22 10:18:57 +00:00
|
|
|
if (!contact) {
|
2019-05-24 04:41:48 +00:00
|
|
|
wrapper.append(`
|
2019-05-27 05:08:43 +00:00
|
|
|
<div class="caller-info">
|
|
|
|
<div>Unknown Number: <b>${this.caller_number}</b></div>
|
2019-06-06 09:18:37 +00:00
|
|
|
<a class="contact-link" href="#Form/Contact/New Contact?phone=${this.caller_number}">
|
2019-05-24 04:41:48 +00:00
|
|
|
${__('Create New Contact')}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
`);
|
2019-05-22 10:18:57 +00:00
|
|
|
} else {
|
2019-06-07 06:22:39 +00:00
|
|
|
const contact_name = frappe.utils.get_form_link('Contact', contact.name, true);
|
2019-05-22 10:18:57 +00:00
|
|
|
const link = contact.links ? contact.links[0] : null;
|
2019-06-07 06:22:39 +00:00
|
|
|
let contact_link = link ? frappe.utils.get_form_link(link.link_doctype, link.link_name, true): '';
|
2019-05-22 10:18:57 +00:00
|
|
|
wrapper.append(`
|
2019-05-27 05:08:43 +00:00
|
|
|
<div class="caller-info flex">
|
2019-06-07 06:22:39 +00:00
|
|
|
${frappe.avatar(null, 'avatar-xl', contact.name, contact.image)}
|
2019-06-06 09:18:37 +00:00
|
|
|
<div>
|
|
|
|
<h5>${contact_name}</h5>
|
|
|
|
<div>${contact.mobile_no || ''}</div>
|
|
|
|
<div>${contact.phone_no || ''}</div>
|
2019-05-22 10:18:57 +00:00
|
|
|
${contact_link}
|
|
|
|
</div>
|
2019-05-18 10:41:29 +00:00
|
|
|
</div>
|
2019-05-22 10:18:57 +00:00
|
|
|
`);
|
2019-05-27 05:08:43 +00:00
|
|
|
this.set_call_status();
|
2019-05-24 04:41:48 +00:00
|
|
|
this.make_last_interaction_section();
|
2019-05-22 10:18:57 +00:00
|
|
|
}
|
|
|
|
});
|
2019-05-16 18:25:35 +00:00
|
|
|
}
|
|
|
|
|
2019-05-27 05:08:43 +00:00
|
|
|
set_indicator(color, blink=false) {
|
2019-06-05 04:34:51 +00:00
|
|
|
let classes = `indicator ${color} ${blink ? 'blink': ''}`;
|
|
|
|
this.dialog.header.find('.indicator').attr('class', classes);
|
2019-05-16 18:25:35 +00:00
|
|
|
}
|
2019-05-21 02:27:06 +00:00
|
|
|
|
2019-05-22 10:18:57 +00:00
|
|
|
set_call_status(call_status) {
|
2019-05-21 02:27:06 +00:00
|
|
|
let title = '';
|
2019-06-07 04:52:50 +00:00
|
|
|
call_status = call_status || this.call_log.status;
|
2019-06-06 09:18:37 +00:00
|
|
|
if (['Ringing'].includes(call_status) || !call_status) {
|
2019-05-27 05:08:43 +00:00
|
|
|
title = __('Incoming call from {0}',
|
2019-06-06 09:18:37 +00:00
|
|
|
[this.contact ? `${this.contact.first_name || ''} ${this.contact.last_name || ''}` : this.caller_number]);
|
2019-05-27 05:08:43 +00:00
|
|
|
this.set_indicator('blue', true);
|
2019-06-06 09:18:37 +00:00
|
|
|
} else if (call_status === 'In Progress') {
|
2019-05-22 01:08:25 +00:00
|
|
|
title = __('Call Connected');
|
2019-05-22 10:18:57 +00:00
|
|
|
this.set_indicator('yellow');
|
2019-06-07 04:52:50 +00:00
|
|
|
} else if (call_status === 'Missed') {
|
2019-05-22 10:18:57 +00:00
|
|
|
this.set_indicator('red');
|
|
|
|
title = __('Call Missed');
|
2019-06-06 09:18:37 +00:00
|
|
|
} else if (['Completed', 'Disconnected'].includes(call_status)) {
|
2019-05-27 05:08:43 +00:00
|
|
|
this.set_indicator('red');
|
|
|
|
title = __('Call Disconnected');
|
2019-05-24 04:41:48 +00:00
|
|
|
} else {
|
|
|
|
this.set_indicator('blue');
|
|
|
|
title = call_status;
|
2019-05-21 02:27:06 +00:00
|
|
|
}
|
|
|
|
this.dialog.set_title(title);
|
|
|
|
}
|
|
|
|
|
2019-06-06 09:18:37 +00:00
|
|
|
update_call_log(call_log) {
|
|
|
|
this.call_log = call_log;
|
2019-05-22 01:08:25 +00:00
|
|
|
this.set_call_status();
|
2019-05-21 02:27:06 +00:00
|
|
|
}
|
2019-06-07 04:52:50 +00:00
|
|
|
|
|
|
|
call_disconnected(call_log) {
|
2019-06-07 07:18:13 +00:00
|
|
|
frappe.utils.play_sound("call-disconnect");
|
2019-06-07 04:52:50 +00:00
|
|
|
this.update_call_log(call_log);
|
2019-06-07 06:22:39 +00:00
|
|
|
setTimeout(this.get_close_btn().click, 10000);
|
2019-05-22 10:18:57 +00:00
|
|
|
}
|
2019-05-24 04:41:48 +00:00
|
|
|
|
|
|
|
make_last_interaction_section() {
|
|
|
|
frappe.xcall('erpnext.crm.doctype.utils.get_last_interaction', {
|
2019-05-27 05:08:43 +00:00
|
|
|
'number': this.caller_number,
|
2019-05-24 04:41:48 +00:00
|
|
|
'reference_doc': this.contact
|
|
|
|
}).then(data => {
|
2019-06-07 04:52:50 +00:00
|
|
|
const comm_field = this.dialog.fields_dict["last_communication"];
|
2019-05-24 04:41:48 +00:00
|
|
|
if (data.last_communication) {
|
|
|
|
const comm = data.last_communication;
|
|
|
|
// this.dialog.set_df_property('last_interaction', 'hidden', false);
|
|
|
|
comm_field.set_value(comm.content);
|
|
|
|
comm_field.$wrapper.append(frappe.utils.get_form_link('Communication', comm.name));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (data.last_issue) {
|
|
|
|
const issue = data.last_issue;
|
|
|
|
// this.dialog.set_df_property('last_interaction', 'hidden', false);
|
|
|
|
const issue_field = this.dialog.fields_dict["last_issue"];
|
|
|
|
issue_field.set_value(issue.subject);
|
2019-06-07 06:22:39 +00:00
|
|
|
issue_field.$wrapper.append(`<a class="text-medium" href="#List/Issue?customer=${issue.customer}">
|
|
|
|
View all issues from ${issue.customer}
|
|
|
|
</a>`);
|
2019-05-24 04:41:48 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2019-05-16 18:25:35 +00:00
|
|
|
}
|
|
|
|
|
2019-05-18 10:41:29 +00:00
|
|
|
$(document).on('app_ready', function () {
|
2019-06-06 09:18:37 +00:00
|
|
|
frappe.realtime.on('show_call_popup', call_log => {
|
2019-05-21 02:27:06 +00:00
|
|
|
if (!erpnext.call_popup) {
|
2019-06-06 09:18:37 +00:00
|
|
|
erpnext.call_popup = new CallPopup(call_log);
|
2019-05-21 02:27:06 +00:00
|
|
|
} else {
|
2019-06-06 09:18:37 +00:00
|
|
|
erpnext.call_popup.update_call_log(call_log);
|
2019-05-22 01:08:25 +00:00
|
|
|
erpnext.call_popup.dialog.show();
|
2019-05-21 02:27:06 +00:00
|
|
|
}
|
2019-05-16 18:25:35 +00:00
|
|
|
});
|
2019-06-07 04:52:50 +00:00
|
|
|
frappe.realtime.on('call_disconnected', call_log => {
|
|
|
|
if (erpnext.call_popup && erpnext.call_popup.call_log.id === call_log.id) {
|
|
|
|
erpnext.call_popup.call_disconnected(call_log);
|
2019-05-22 10:18:57 +00:00
|
|
|
}
|
|
|
|
});
|
2019-05-16 18:25:35 +00:00
|
|
|
});
|