MDL-69166 core_payment: Use promises instead of callbacks
[moodle.git] / payment / amd / src / gateways_modal.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * Contain the logic for the gateways modal.
18  *
19  * @module     core_payment/gateways_modal
20  * @package    core_payment
21  * @copyright  2019 Shamim Rezaie <shamim@moodle.com>
22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23  */
25 import ModalFactory from 'core/modal_factory';
26 import Templates from 'core/templates';
27 import {get_string as getString} from 'core/str';
28 import {getAvailableGateways} from './repository';
29 import Selectors from './selectors';
30 import ModalEvents from 'core/modal_events';
31 import PaymentEvents from 'core_payment/events';
32 import {add as addToast, addToastRegion} from 'core/toast';
33 import Notification from 'core/notification';
34 import ModalGateways from './modal_gateways';
36 /**
37  * Register event listeners for the module.
38  */
39 const registerEventListeners = () => {
40     document.addEventListener('click', e => {
41         const gatewayTrigger = e.target.closest('[data-action="core_payment/triggerPayment"]');
42         if (gatewayTrigger) {
43             e.preventDefault();
45             show(gatewayTrigger, {focusOnClose: e.target});
46         }
47     });
48 };
50 /**
51  * Shows the gateway selector modal.
52  *
53  * @param {HTMLElement} rootNode
54  * @param {Object} options - Additional options
55  * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.
56  */
57 const show = async(rootNode, {
58     focusOnClose = null,
59 } = {}) => {
60     const modal = await ModalFactory.create({
61         type: ModalGateways.TYPE,
62         title: await getString('selectpaymenttype', 'core_payment'),
63         body: await Templates.render('core_payment/gateways_modal', {}),
64     });
66     const rootElement = modal.getRoot()[0];
67     addToastRegion(rootElement);
69     modal.show();
71     modal.getRoot().on(ModalEvents.hidden, () => {
72         // Destroy when hidden.
73         modal.destroy();
74         try {
75             focusOnClose.focus();
76         } catch (e) {
77             // eslint-disable-line
78         }
79     });
81     modal.getRoot().on(PaymentEvents.proceed, (e) => {
82         const gateway = (rootElement.querySelector(Selectors.values.gateway) || {value: ''}).value;
84         if (gateway) {
85             processPayment(
86                 gateway,
87                 rootNode.dataset.component,
88                 rootNode.dataset.paymentarea,
89                 rootNode.dataset.itemid,
90                 rootNode.dataset.description
91             )
92             .then(message => {
93                 modal.hide();
94                 Notification.addNotification({
95                     message: message,
96                     type: 'success',
97                 });
98                 location.reload();
100                 // The following return statement is never reached. It is put here just to make eslint happy.
101                 return message;
102             })
103             .catch(message => Notification.alert('', message));
104         } else {
105             // We cannot use await in the following line.
106             // The reason is that we are preventing the default action of the save event being triggered,
107             // therefore we cannot define the event handler function asynchronous.
108             getString('nogatewayselected', 'core_payment').then(message => addToast(message)).catch();
109         }
111         e.preventDefault();
112     });
114     // Re-calculate the cost when gateway is changed.
115     rootElement.addEventListener('change', e => {
116         if (e.target.matches(Selectors.elements.gateways)) {
117             updateCostRegion(rootElement, rootNode.dataset.cost);
118         }
119     });
121     const gateways = await getAvailableGateways(rootNode.dataset.component, rootNode.dataset.paymentarea, rootNode.dataset.itemid);
122     const context = {
123         gateways
124     };
126     const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);
127     Templates.replaceNodeContents(rootElement.querySelector(Selectors.regions.gatewaysContainer), html, js);
128     selectSingleGateway(rootElement);
129     await updateCostRegion(rootElement, rootNode.dataset.cost);
130 };
132 /**
133  * Auto-select the gateway if there is only one gateway.
134  *
135  * @param {HTMLElement} root An HTMLElement that contains the cost region
136  */
137 const selectSingleGateway = root => {
138     const gateways = root.querySelectorAll(Selectors.elements.gateways);
140     if (gateways.length == 1) {
141         gateways[0].checked = true;
142     }
143 };
145 /**
146  * Shows the cost of the item the user is purchasing in the cost region.
147  *
148  * @param {HTMLElement} root An HTMLElement that contains the cost region
149  * @param {string} defaultCost The default cost that is going to be displayed if no gateway is selected
150  * @returns {Promise<void>}
151  */
152 const updateCostRegion = async(root, defaultCost = '') => {
153     const gatewayElement = root.querySelector(Selectors.values.gateway);
154     const surcharge = parseInt((gatewayElement || {dataset: {surcharge: 0}}).dataset.surcharge);
155     const cost = (gatewayElement || {dataset: {cost: defaultCost}}).dataset.cost;
157     const {html, js} = await Templates.renderForPromise('core_payment/fee_breakdown', {fee: cost, surcharge});
158     Templates.replaceNodeContents(root.querySelector(Selectors.regions.costContainer), html, js);
159 };
161 /**
162  * Process payment using the selected gateway.
163  *
164  * @param {string} gateway The gateway to be used for payment
165  * @param {string} component Name of the component that the itemId belongs to
166  * @param {string} paymentArea Name of the area in the component that the itemId belongs to
167  * @param {number} itemId An internal identifier that is used by the component
168  * @param {string} description Description of the payment
169  * @returns {Promise<string>}
170  */
171 const processPayment = async(gateway, component, paymentArea, itemId, description) => {
172     const paymentMethod = await import(`paygw_${gateway}/gateways_modal`);
173     return paymentMethod.process(component, paymentArea, itemId, description);
174 };
176 /**
177  * Set up the payment actions.
178  */
179 export const init = () => {
180     if (!init.initialised) {
181         // Event listeners should only be registered once.
182         init.initialised = true;
183         registerEventListeners();
184     }
185 };
187 /**
188  * Whether the init function was called before.
189  *
190  * @static
191  * @type {boolean}
192  */
193 init.initialised = false;