MDL-69166 core_payment: display the gateways modal
[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 {getGatewaysSupportingCurrency} from 'core_payment/repository';
29 import Selectors from './selectors';
30 import * as ModalEvents from 'core/modal_events';
32 /**
33  * Register event listeners for the module.
34  *
35  * @param {string} nodeSelector The root to listen to.
36  */
37 export const registerEventListeners = (nodeSelector) => {
38     const rootNode = document.querySelector(nodeSelector);
40     rootNode.addEventListener('click', (e) => {
41         e.preventDefault();
42         show(rootNode, {focusOnClose: e.target});
43     });
44 };
46 /**
47  * Shows the gateway selector modal.
48  *
49  * @param {HTMLElement} rootNode
50  * @param {Object} options - Additional options
51  * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.
52  */
53 const show = (rootNode, {
54     focusOnClose = null,
55 } = {}) => {
56     Templates.render('core_payment/gateways_modal', {})
57         .done(content => {
58             ModalFactory.create({
59                 title: getString('selectpaymenttype', 'core_payment'),
60                 body: content,
61             })
62             .done(function(modal) {
63                 const currency = rootNode.dataset.currency;
64                 getGatewaysSupportingCurrency(currency)
65                     .done(gateways => {
66                         const context = {
67                             gateways: []
68                         };
70                         for (let gateway of gateways) {
71                             context.gateways.push(gateway);
72                         }
74                         Templates.render('core_payment/gateways', context)
75                             .done((html, js) => {
76                                 Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer),
77                                     html, js);
78                             });
79                     });
81                 modal.getRoot().on(ModalEvents.hidden, function() {
82                     // Destroy when hidden.
83                     modal.destroy();
84                     try {
85                         focusOnClose.focus();
86                     } catch (e) {
87                         // eslint-disable-line
88                     }
89                 });
91                 modal.show();
92             });
93         });
94 };