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/>.
  15
  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  */
  24
  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 './repository';
  29 import Selectors from './selectors';
  30 import ModalEvents from 'core/modal_events';
  31 import {add as addToast, addToastRegion} from 'core/toast';
  32 import Notification from 'core/notification';
  33
  34 /**
  35  * Register event listeners for the module.
  36  *
  37  * @param {string} nodeSelector The root to listen to.
  38  */
  39 export const registerEventListenersBySelector = (nodeSelector) => {
  40     document.querySelectorAll(nodeSelector).forEach((element) => {
  41         registerEventListeners(element);
  42     });
  43 };
  44
  45 /**
  46  * Register event listeners for the module.
  47  *
  48  * @param {HTMLElement} rootNode The root to listen to.
  49  */
  50 export const registerEventListeners = (rootNode) => {
  51     rootNode.addEventListener('click', (e) => {
  52         e.preventDefault();
  53         show(rootNode, {focusOnClose: e.target});
  54     });
  55 };
  56
  57 /**
  58  * Shows the gateway selector modal.
  59  *
  60  * @param {HTMLElement} rootNode
  61  * @param {Object} options - Additional options
  62  * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.
  63  */
  64 const show = async(rootNode, {
  65     focusOnClose = null,
  66 } = {}) => {
  67     const modal = await ModalFactory.create({
  68         type: ModalFactory.types.SAVE_CANCEL,
  69         title: await getString('selectpaymenttype', 'core_payment'),
  70         body: await Templates.render('core_payment/gateways_modal', {}),
  71     });
  72
  73     addToastRegion(modal.getRoot()[0]);
  74
  75     modal.show();
  76
  77     modal.getRoot().on(ModalEvents.hidden, () => {
  78         // Destroy when hidden.
  79         modal.destroy();
  80         try {
  81             focusOnClose.focus();
  82         } catch (e) {
  83             // eslint-disable-line
  84         }
  85     });
  86
  87     modal.getRoot().on(ModalEvents.save, (e) => {
  88         const root = modal.getRoot()[0];
  89         const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;
  90
  91         if (gateway) {
  92             processPayment(
  93                 gateway,
  94                 rootNode.dataset.amount,
  95                 rootNode.dataset.currency,
  96                 rootNode.dataset.component,
  97                 rootNode.dataset.componentid,
  98                 rootNode.dataset.description,
  99                 ({success, message = ''}) => {
 100                     modal.hide();
 101                     if (success) {
 102                         Notification.addNotification({
 103                             message: message,
 104                             type: 'success',
 105                         });
 106                         location.reload();
 107                     } else {
 108                         Notification.alert('', message);
 109                     }
 110                 },
 111             );
 112         } else {
 113             // We cannot use await in the following line.
 114             // The reason is that we are preventing the default action of the save event being triggered,
 115             // therefore we cannot define the event handler function asynchronous.
 116             getString('nogatewayselected', 'core_payment').then(message => addToast(message));
 117         }
 118
 119         e.preventDefault();
 120     });
 121
 122     const currency = rootNode.dataset.currency;
 123     const gateways = await getGatewaysSupportingCurrency(currency);
 124     const context = {
 125         gateways
 126     };
 127
 128     const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);
 129     Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);
 130 };
 131
 132 /**
 133  * Process payment using the selected gateway.
 134  *
 135  * @param {string} gateway The gateway to be used for payment
 136  * @param {number} amount Amount of payment
 137  * @param {string} currency The currency in the three-character ISO-4217 format
 138  * @param {string} component Name of the component that the componentid belongs to
 139  * @param {number} componentid An internal identifier that is used by the component
 140  * @param {string} description Description of the payment
 141  * @param {processPaymentCallback} callback The callback function to call when processing is finished
 142  * @returns {Promise<void>}
 143  */
 144 const processPayment = async(gateway, amount, currency, component, componentid, description, callback) => {
 145     const paymentMethod = await import(`pg_${gateway}/gateways_modal`);
 146
 147     paymentMethod.process(amount, currency, component, componentid, description, callback);
 148 };
 149
 150 /**
 151  * The callback definition for processPayment.
 152  *
 153  * @callback processPaymentCallback
 154  * @param {bool} success
 155  * @param {string} message
 156  */