473 lines
23 KiB
JavaScript
473 lines
23 KiB
JavaScript
odoo.define('payment.payment_form', function (require) {
|
|
"use strict";
|
|
|
|
var ajax = require('web.ajax');
|
|
var config = require('web.config');
|
|
var core = require('web.core');
|
|
var Dialog = require("web.Dialog");
|
|
var Widget = require("web.Widget");
|
|
var rpc = require("web.rpc");
|
|
var _t = core._t;
|
|
|
|
var PaymentForm = Widget.extend({
|
|
|
|
events: {
|
|
'click #o_payment_form_pay': 'payEvent',
|
|
'click #o_payment_form_add_pm': 'addPmEvent',
|
|
'click button[name="delete_pm"]': 'deletePmEvent',
|
|
'click input[type="radio"]': 'radioClickEvent',
|
|
'click .o_payment_form_pay_icon_more': 'onClickMorePaymentIcon',
|
|
},
|
|
|
|
init: function(parent, options) {
|
|
this._super.apply(this, arguments);
|
|
this.options = _.extend(options || {}, {
|
|
});
|
|
},
|
|
|
|
start: function () {
|
|
this.updateNewPaymentDisplayStatus();
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
},
|
|
|
|
payEvent: function (ev) {
|
|
ev.preventDefault();
|
|
var form = this.el;
|
|
var checked_radio = this.$('input[type="radio"]:checked');
|
|
var self = this;
|
|
var button = ev.target;
|
|
|
|
// first we check that the user has selected a payment method
|
|
if (checked_radio.length === 1) {
|
|
checked_radio = checked_radio[0];
|
|
|
|
// we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array
|
|
var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
|
|
var acquirer_form = false;
|
|
if (this.isNewPaymentRadio(checked_radio)) {
|
|
acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id);
|
|
} else {
|
|
acquirer_form = this.$('#o_payment_form_acq_' + acquirer_id);
|
|
}
|
|
var inputs_form = $('input', acquirer_form);
|
|
var ds = $('input[name="data_set"]', acquirer_form)[0];
|
|
|
|
// if the user is adding a new payment
|
|
if (this.isNewPaymentRadio(checked_radio)) {
|
|
if (this.options.partnerId === undefined) {
|
|
console.warn('payment_form: unset partner_id when adding new token; things could go wrong');
|
|
}
|
|
var form_data = this.getFormData(inputs_form);
|
|
var wrong_input = false;
|
|
|
|
inputs_form.toArray().forEach(function (element) {
|
|
//skip the check of non visible inputs
|
|
if ($(element).attr('type') == 'hidden') {
|
|
return true;
|
|
}
|
|
$(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
|
|
$(element).siblings( ".o_invalid_field" ).remove();
|
|
//force check of forms validity (useful for Firefox that refill forms automatically on f5)
|
|
$(element).trigger("focusout");
|
|
if (element.dataset.isRequired && element.value.length === 0) {
|
|
$(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
|
|
$(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>');
|
|
wrong_input = true;
|
|
}
|
|
else if ($(element).closest('div.form-group').hasClass('o_has_error')) {
|
|
wrong_input = true;
|
|
$(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>');
|
|
}
|
|
});
|
|
|
|
if (wrong_input) {
|
|
return;
|
|
}
|
|
|
|
$(button).attr('disabled', true);
|
|
$(button).children('.fa-plus-circle').removeClass('fa-plus-circle')
|
|
$(button).prepend('<span class="o_loader"><i class="fa fa-refresh fa-spin"></i> </span>');
|
|
|
|
var verify_validity = this.$el.find('input[name="verify_validity"]');
|
|
|
|
if (verify_validity.length>0) {
|
|
form_data.verify_validity = verify_validity[0].value === "1";
|
|
}
|
|
|
|
// do the call to the route stored in the 'data_set' input of the acquirer form, the data must be called 'create-route'
|
|
ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then(function (data) {
|
|
// if the server has returned true
|
|
if (data.result) {
|
|
// and it need a 3DS authentication
|
|
if (data['3d_secure'] !== false) {
|
|
// then we display the 3DS page to the user
|
|
$("body").html(data['3d_secure']);
|
|
}
|
|
else {
|
|
checked_radio.value = data.id; // set the radio value to the new card id
|
|
form.submit();
|
|
return;
|
|
}
|
|
}
|
|
// if the server has returned false, we display an error
|
|
else {
|
|
if (data.error) {
|
|
self.displayError(
|
|
'',
|
|
data.error);
|
|
} else { // if the server doesn't provide an error message
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t('e.g. Your credit card details are wrong. Please verify.'));
|
|
}
|
|
}
|
|
// here we remove the 'processing' icon from the 'add a new payment' button
|
|
$(button).attr('disabled', false);
|
|
$(button).children('.fa').addClass('fa-plus-circle')
|
|
$(button).find('span.o_loader').remove();
|
|
}).fail(function (data, event) {
|
|
// if the rpc fails, pretty obvious
|
|
$(button).attr('disabled', false);
|
|
$(button).children('.fa').addClass('fa-plus-circle')
|
|
$(button).find('span.o_loader').remove();
|
|
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t("We are not able to add your payment method at the moment.") +
|
|
message.data.message
|
|
);
|
|
});
|
|
}
|
|
// if the user is going to pay with a form payment, then
|
|
else if (this.isFormPaymentRadio(checked_radio)) {
|
|
var $tx_url = this.$el.find('input[name="prepare_tx_url"]');
|
|
// if there's a prepare tx url set
|
|
if ($tx_url.length === 1) {
|
|
// if the user wants to save his credit card info
|
|
var form_save_token = acquirer_form.find('input[name="o_payment_form_save_token"]').prop('checked');
|
|
// then we call the route to prepare the transaction
|
|
ajax.jsonRpc($tx_url[0].value, 'call', {
|
|
'acquirer_id': parseInt(acquirer_id),
|
|
'save_token': form_save_token,
|
|
'access_token': self.options.accessToken,
|
|
'success_url': self.options.successUrl,
|
|
'error_url': self.options.errorUrl,
|
|
'callback_method': self.options.callbackMethod,
|
|
'order_id': self.options.orderId,
|
|
}).then(function (result) {
|
|
if (result) {
|
|
// if the server sent us the html form, we create a form element
|
|
var newForm = document.createElement('form');
|
|
newForm.setAttribute("method", "post"); // set it to post
|
|
newForm.setAttribute("provider", checked_radio.dataset.provider);
|
|
newForm.hidden = true; // hide it
|
|
newForm.innerHTML = result; // put the html sent by the server inside the form
|
|
var action_url = $(newForm).find('input[name="data_set"]').data('actionUrl');
|
|
newForm.setAttribute("action", action_url); // set the action url
|
|
$(document.getElementsByTagName('body')[0]).append(newForm); // append the form to the body
|
|
$(newForm).find('input[data-remove-me]').remove(); // remove all the input that should be removed
|
|
if(action_url) {
|
|
newForm.submit(); // and finally submit the form
|
|
}
|
|
}
|
|
else {
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t("We are not able to redirect you to the payment form.")
|
|
);
|
|
}
|
|
}).fail(function (data, event) {
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t("We are not able to redirect you to the payment form. ") +
|
|
message.data.message
|
|
);
|
|
});
|
|
}
|
|
else {
|
|
// we append the form to the body and send it.
|
|
this.displayError(
|
|
_t("Cannot set-up the payment"),
|
|
_t("We're unable to process your payment.")
|
|
);
|
|
}
|
|
}
|
|
else { // if the user is using an old payment then we just submit the form
|
|
form.submit();
|
|
}
|
|
}
|
|
else {
|
|
this.displayError(
|
|
_t('No payment method selected'),
|
|
_t('Please select a payment method.')
|
|
);
|
|
}
|
|
},
|
|
// event handler when clicking on the button to add a new payment method
|
|
addPmEvent: function (ev) {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
var checked_radio = this.$('input[type="radio"]:checked');
|
|
var self = this;
|
|
var button = ev.target;
|
|
|
|
// we check if the user has selected a 'add a new payment' option
|
|
if (checked_radio.length === 1 && this.isNewPaymentRadio(checked_radio[0])) {
|
|
// we retrieve which acquirer is used
|
|
checked_radio = checked_radio[0];
|
|
var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
|
|
var acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id);
|
|
// we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array
|
|
var inputs_form = $('input', acquirer_form);
|
|
var form_data = this.getFormData(inputs_form);
|
|
var ds = $('input[name="data_set"]', acquirer_form)[0];
|
|
var wrong_input = false;
|
|
|
|
inputs_form.toArray().forEach(function (element) {
|
|
//skip the check of non visible inputs
|
|
if ($(element).attr('type') == 'hidden') {
|
|
return true;
|
|
}
|
|
$(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
|
|
$(element).siblings( ".o_invalid_field" ).remove();
|
|
//force check of forms validity (useful for Firefox that refill forms automatically on f5)
|
|
$(element).trigger("focusout");
|
|
if (element.dataset.isRequired && element.value.length === 0) {
|
|
$(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
|
|
var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>';
|
|
$(element).closest('div.form-group').append(message);
|
|
wrong_input = true;
|
|
}
|
|
else if ($(element).closest('div.form-group').hasClass('o_has_error')) {
|
|
wrong_input = true;
|
|
var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>';
|
|
$(element).closest('div.form-group').append(message);
|
|
}
|
|
});
|
|
|
|
if (wrong_input) {
|
|
return;
|
|
}
|
|
// We add a 'processing' icon into the 'add a new payment' button
|
|
$(button).attr('disabled', true);
|
|
$(button).children('.fa-plus-circle').removeClass('fa-plus-circle')
|
|
$(button).prepend('<span class="o_loader"><i class="fa fa-refresh fa-spin"></i> </span>');
|
|
|
|
// we force the check when adding a card trough here
|
|
form_data.verify_validity = true;
|
|
|
|
// do the call to the route stored in the 'data_set' input of the acquirer form, the data must be called 'create-route'
|
|
ajax.jsonRpc(ds.dataset.createRoute, 'call', form_data).then( function (data) {
|
|
// if the server has returned true
|
|
if (data.result) {
|
|
// and it need a 3DS authentication
|
|
if (data['3d_secure'] !== false) {
|
|
// then we display the 3DS page to the user
|
|
$("body").html(data['3d_secure']);
|
|
}
|
|
// if it doesn't require 3DS
|
|
else {
|
|
// we just go to the return_url or reload the page
|
|
if (form_data.return_url) {
|
|
window.location = form_data.return_url;
|
|
}
|
|
else {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
}
|
|
// if the server has returned false, we display an error
|
|
else {
|
|
if (data.error) {
|
|
self.displayError(
|
|
'',
|
|
data.error);
|
|
} else { // if the server doesn't provide an error message
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t('e.g. Your credit card details are wrong. Please verify.'));
|
|
}
|
|
}
|
|
// here we remove the 'processing' icon from the 'add a new payment' button
|
|
$(button).attr('disabled', false);
|
|
$(button).children('.fa').addClass('fa-plus-circle')
|
|
$(button).find('span.o_loader').remove();
|
|
}).fail(function (data, event) {
|
|
// if the rpc fails, pretty obvious
|
|
$(button).attr('disabled', false);
|
|
$(button).children('.fa').addClass('fa-plus-circle')
|
|
$(button).find('span.o_loader').remove();
|
|
|
|
self.displayError(
|
|
_t('Server error'),
|
|
_t("We are not able to add your payment method at the moment.</p>") +
|
|
data.data.message
|
|
);
|
|
});
|
|
}
|
|
else {
|
|
this.displayError(
|
|
_t('No payment method selected'),
|
|
_t('Please select the option to add a new payment method.')
|
|
);
|
|
}
|
|
},
|
|
// event handler when clicking on a button to delete a payment method
|
|
deletePmEvent: function (ev) {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
var self = this;
|
|
var pm_id = parseInt(ev.target.value);
|
|
|
|
var tokenDelete = function () {
|
|
rpc.query({
|
|
model: 'payment.token',
|
|
method: 'unlink',
|
|
args: [pm_id],
|
|
})
|
|
.then(function (result) {
|
|
if ( result === true) {
|
|
ev.target.closest('div').remove();
|
|
}
|
|
}, function () {
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t("We are not able to delete your payment method at the moment.")
|
|
);
|
|
});
|
|
};
|
|
|
|
rpc.query({
|
|
model: 'payment.token',
|
|
method: 'get_linked_records',
|
|
args: [pm_id],
|
|
}).then(function (result) {
|
|
if (result[pm_id].length > 0) {
|
|
// if there's records linked to this payment method
|
|
var content = '';
|
|
result[pm_id].forEach(function (sub) {
|
|
content += '<p><a href="' + sub.url + '" title="' + sub.description + '">' + sub.name + '</a><p/>';
|
|
});
|
|
|
|
content = $('<div>').html(_t('<p>This card is currently linked to the following records:<p/>') + content);
|
|
// Then we display the list of the records and ask the user if he really want to remove the payment method.
|
|
new Dialog(self, {
|
|
title: _t('Warning!'),
|
|
size: 'medium',
|
|
$content: content,
|
|
buttons: [
|
|
{text: _t('Confirm Deletion'), classes: 'btn-primary', close: true, click: tokenDelete},
|
|
{text: _t('Cancel'), close: true}]
|
|
}).open();
|
|
}
|
|
else {
|
|
// if there's no records linked to this payment method, then we delete it
|
|
tokenDelete();
|
|
}
|
|
}, function (err, event) {
|
|
self.displayError(
|
|
_t('Server Error'),
|
|
_t("We are not able to delete your payment method at the moment.") + err.data.message
|
|
);
|
|
});
|
|
},
|
|
|
|
// event handler when clicking on 'and more' to show more payment icon
|
|
onClickMorePaymentIcon: function (ev) {
|
|
ev.preventDefault();
|
|
var $listItems = $(ev.currentTarget).parents('ul').children('li');
|
|
var $moreItem = $(ev.currentTarget).parents('li');
|
|
$listItems.removeClass('d-none');
|
|
$moreItem.addClass('d-none');
|
|
},
|
|
|
|
// event handler when clicking on a radio button
|
|
radioClickEvent: function (ev) {
|
|
this.updateNewPaymentDisplayStatus();
|
|
},
|
|
updateNewPaymentDisplayStatus: function ()
|
|
{
|
|
var checked_radio = this.$('input[type="radio"]:checked');
|
|
// we hide all the acquirers form
|
|
this.$('[id*="o_payment_add_token_acq_"]').addClass('d-none');
|
|
this.$('[id*="o_payment_form_acq_"]').addClass('d-none');
|
|
if (checked_radio.length !== 1) {
|
|
return;
|
|
}
|
|
checked_radio = checked_radio[0];
|
|
var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
|
|
|
|
// if we clicked on an add new payment radio, display its form
|
|
if (this.isNewPaymentRadio(checked_radio)) {
|
|
this.$('#o_payment_add_token_acq_' + acquirer_id).removeClass('d-none');
|
|
}
|
|
else if (this.isFormPaymentRadio(checked_radio)) {
|
|
this.$('#o_payment_form_acq_' + acquirer_id).removeClass('d-none');
|
|
}
|
|
},
|
|
isNewPaymentRadio: function (element) {
|
|
return $(element).data('s2s-payment') === 'True';
|
|
},
|
|
isFormPaymentRadio: function (element) {
|
|
return $(element).data('form-payment') === 'True';
|
|
},
|
|
getAcquirerIdFromRadio: function (element) {
|
|
return $(element).data('acquirer-id');
|
|
},
|
|
displayError: function (title, message) {
|
|
var $checkedRadio = this.$('input[type="radio"]:checked'),
|
|
acquirerID = this.getAcquirerIdFromRadio($checkedRadio[0]);
|
|
var $acquirerForm;
|
|
if (this.isNewPaymentRadio($checkedRadio[0])) {
|
|
$acquirerForm = this.$('#o_payment_add_token_acq_' + acquirerID);
|
|
}
|
|
else if (this.isFormPaymentRadio($checkedRadio[0])) {
|
|
$acquirerForm = this.$('#o_payment_form_acq_' + acquirerID);
|
|
}
|
|
|
|
if ($checkedRadio.length === 0) {
|
|
return new Dialog(null, {
|
|
title: _t('Error: ') + _.str.escapeHTML(title),
|
|
size: 'medium',
|
|
$content: "<p>" + (_.str.escapeHTML(message) || "") + "</p>" ,
|
|
buttons: [
|
|
{text: _t('Ok'), close: true}]}).open();
|
|
} else {
|
|
// removed if exist error message
|
|
this.$('#payment_error').remove();
|
|
var messageResult = '<div class="alert alert-danger mb4" id="payment_error">';
|
|
if (title != '') {
|
|
messageResult = messageResult + '<b>' + _.str.escapeHTML(title) + ':</b></br>';
|
|
}
|
|
messageResult = messageResult + _.str.escapeHTML(message) + '</div>';
|
|
$acquirerForm.append(messageResult);
|
|
}
|
|
},
|
|
getFormData: function ($form) {
|
|
var unindexed_array = $form.serializeArray();
|
|
var indexed_array = {};
|
|
|
|
$.map(unindexed_array, function (n, i) {
|
|
indexed_array[n.name] = n.value;
|
|
});
|
|
return indexed_array;
|
|
},
|
|
});
|
|
|
|
$(function () {
|
|
// TODO move this to another module, requiring dom_ready and rejecting
|
|
// the returned deferred to get the proper message
|
|
if (!$('.o_payment_form').length) {
|
|
console.log("DOM doesn't contain '.o_payment_form'");
|
|
return;
|
|
}
|
|
$('.o_payment_form').each(function () {
|
|
var $elem = $(this);
|
|
var form = new PaymentForm(null, $elem.data());
|
|
form.attachTo($elem);
|
|
});
|
|
});
|
|
|
|
return PaymentForm;
|
|
});
|