MDL-69166 core_payment: Use a custom modal type for gateway selector

payment/amd/build/events.min.js

@@ -0,0 +1,2 @@
+define ("core_payment/events",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={proceed:"core_payment-modal_gateways:proceed"};return a.default});
+//# sourceMappingURL=events.min.js.map

payment/amd/build/events.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/events.js"],"names":["proceed"],"mappings":"+IAwBe,CACXA,OAAO,CAAE,qCADE,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Contain the events the payment modal can fire.\n *\n * @module     core_payment/events\n * @package    core_payment\n * @copyright  2020 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    proceed: 'core_payment-modal_gateways:proceed',\n};\n"],"file":"events.min.js"}

payment/amd/build/gateways_modal.min.js

@@ -1,2 +1,2 @@
-define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","./repository","./selectors","core/modal_events","core/toast","core/notification"],function(a,b,c,d,e,f,g,h,i){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=a.registerEventListenersBySelector=void 0;b=j(b);c=j(c);f=j(f);g=j(g);i=j(i);var m="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function j(a){return a&&a.__esModule?a:{default:a}}function k(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function l(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){k(h,d,e,f,g,"next",a)}function g(a){k(h,d,e,f,g,"throw",a)}f(void 0)})}}a.registerEventListenersBySelector=function registerEventListenersBySelector(a){document.querySelectorAll(a).forEach(function(a){n(a)})};var n=function(a){a.addEventListener("click",function(b){b.preventDefault();o(a,{focusOnClose:b.target})})};a.registerEventListeners=n;var o=function(){var a=l(regeneratorRuntime.mark(function a(j){var k,l,m,n,o,q,r,s,t,u,v=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:k=1<v.length&&v[1]!==void 0?v[1]:{},l=k.focusOnClose,m=void 0===l?null:l;a.t0=b.default;a.t1=b.default.types.SAVE_CANCEL;a.next=5;return(0,d.get_string)("selectpaymenttype","core_payment");case 5:a.t2=a.sent;a.next=8;return c.default.render("core_payment/gateways_modal",{});case 8:a.t3=a.sent;a.t4={type:a.t1,title:a.t2,body:a.t3};a.next=12;return a.t0.create.call(a.t0,a.t4);case 12:n=a.sent;(0,h.addToastRegion)(n.getRoot()[0]);n.show();n.getRoot().on(g.default.hidden,function(){n.destroy();try{m.focus()}catch(a){}});n.getRoot().on(g.default.save,function(a){var b=n.getRoot()[0],c=(b.querySelector(f.default.values.gateway)||{value:""}).value;if(c){p(c,j.dataset.amount,j.dataset.currency,j.dataset.component,j.dataset.componentid,j.dataset.description,function(a){var b=a.success,c=a.message,d=void 0===c?"":c;n.hide();if(b){i.default.addNotification({message:d,type:"success"});location.reload()}else{i.default.alert("",d)}})}else{(0,d.get_string)("nogatewayselected","core_payment").then(function(a){return(0,h.add)(a)})}a.preventDefault()});o=j.dataset.currency;a.next=20;return(0,e.getGatewaysSupportingCurrency)(o);case 20:q=a.sent;r={gateways:q};a.next=24;return c.default.renderForPromise("core_payment/gateways",r);case 24:s=a.sent;t=s.html;u=s.js;c.default.replaceNodeContents(n.getRoot().find(f.default.regions.gatewaysContainer),t,u);case 28:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),p=function(){var a=l(regeneratorRuntime.mark(function a(b,c,d,e,f,g,h){var i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return"function"==typeof m.define&&m.define.amd?new Promise(function(a,c){m.require(["pg_".concat(b,"/gateways_modal")],a,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&m.require&&"component"===m.require.loader?Promise.resolve(require(("pg_".concat(b,"/gateways_modal")))):Promise.resolve(m["pg_".concat(b,"/gateways_modal")]);case 2:i=a.sent;i.process(c,d,e,f,g,h);case 4:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}()});
+define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","./repository","./selectors","core/modal_events","core_payment/events","core/toast","core/notification","./modal_gateways"],function(a,b,c,d,e,f,g,h,i,j,k){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=a.registerEventListenersBySelector=void 0;b=l(b);c=l(c);f=l(f);g=l(g);h=l(h);j=l(j);k=l(k);var o="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function l(a){return a&&a.__esModule?a:{default:a}}function m(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function n(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){m(h,d,e,f,g,"next",a)}function g(a){m(h,d,e,f,g,"throw",a)}f(void 0)})}}a.registerEventListenersBySelector=function registerEventListenersBySelector(a){document.querySelectorAll(a).forEach(function(a){p(a)})};var p=function(a){a.addEventListener("click",function(b){b.preventDefault();q(a,{focusOnClose:b.target})})};a.registerEventListeners=p;var q=function(){var a=n(regeneratorRuntime.mark(function a(l){var m,n,o,p,q,s,t,u,v,w,x=arguments;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:m=1<x.length&&x[1]!==void 0?x[1]:{},n=m.focusOnClose,o=void 0===n?null:n;a.t0=b.default;a.t1=k.default.TYPE;a.next=5;return(0,d.get_string)("selectpaymenttype","core_payment");case 5:a.t2=a.sent;a.next=8;return c.default.render("core_payment/gateways_modal",{});case 8:a.t3=a.sent;a.t4={type:a.t1,title:a.t2,body:a.t3};a.next=12;return a.t0.create.call(a.t0,a.t4);case 12:p=a.sent;(0,i.addToastRegion)(p.getRoot()[0]);p.show();p.getRoot().on(g.default.hidden,function(){p.destroy();try{o.focus()}catch(a){}});p.getRoot().on(h.default.proceed,function(a){var b=p.getRoot()[0],c=(b.querySelector(f.default.values.gateway)||{value:""}).value;if(c){r(c,l.dataset.amount,l.dataset.currency,l.dataset.component,l.dataset.componentid,l.dataset.description,function(a){var b=a.success,c=a.message,d=void 0===c?"":c;p.hide();if(b){j.default.addNotification({message:d,type:"success"});location.reload()}else{j.default.alert("",d)}})}else{(0,d.get_string)("nogatewayselected","core_payment").then(function(a){return(0,i.add)(a)})}a.preventDefault()});q=l.dataset.currency;a.next=20;return(0,e.getGatewaysSupportingCurrency)(q);case 20:s=a.sent;t={gateways:s};a.next=24;return c.default.renderForPromise("core_payment/gateways",t);case 24:u=a.sent;v=u.html;w=u.js;c.default.replaceNodeContents(p.getRoot().find(f.default.regions.gatewaysContainer),v,w);case 28:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),r=function(){var a=n(regeneratorRuntime.mark(function a(b,c,d,e,f,g,h){var i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return"function"==typeof o.define&&o.define.amd?new Promise(function(a,c){o.require(["pg_".concat(b,"/gateways_modal")],a,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&o.require&&"component"===o.require.loader?Promise.resolve(require(("pg_".concat(b,"/gateways_modal")))):Promise.resolve(o["pg_".concat(b,"/gateways_modal")]);case 2:i=a.sent;i.process(c,d,e,f,g,h);case 4:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}()});
 //# sourceMappingURL=gateways_modal.min.js.map

payment/amd/build/modal_gateways.min.js

@@ -0,0 +1,2 @@
+define ("core_payment/modal_gateways",["jquery","core/notification","core/custom_interaction_events","core/modal","core/modal_events","core_payment/events","core/modal_registry"],function(a,b,c,d,f,g,h){var i=!1,j={PROCEED_BUTTON:"[data-action=\"proceed\"]",CANCEL_BUTTON:"[data-action=\"cancel\"]"},k=function(a){d.call(this,a)};k.TYPE="core_payment-modal_gateways";k.prototype=Object.create(d.prototype);k.prototype.constructor=k;k.prototype.registerEventListeners=function(){d.prototype.registerEventListeners.call(this);this.getModal().on(c.events.activate,j.PROCEED_BUTTON,function(b,c){var d=a.Event(g.proceed);this.getRoot().trigger(d,this);if(!d.isDefaultPrevented()){this.hide();c.originalEvent.preventDefault()}}.bind(this));this.getModal().on(c.events.activate,j.CANCEL_BUTTON,function(b,c){var d=a.Event(f.cancel);this.getRoot().trigger(d,this);if(!d.isDefaultPrevented()){this.hide();c.originalEvent.preventDefault()}}.bind(this))};if(!i){h.register(k.TYPE,k,"core_payment/modal_gateways");i=!0}return k});
+//# sourceMappingURL=modal_gateways.min.js.map

payment/amd/src/events.js

@@ -0,0 +1,27 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Contain the events the payment modal can fire.
+ *
+ * @module     core_payment/events
+ * @package    core_payment
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    proceed: 'core_payment-modal_gateways:proceed',
+};

payment/amd/src/gateways_modal.js

@@ -28,8 +28,10 @@ import {get_string as getString} from 'core/str';
 import {getGatewaysSupportingCurrency} from './repository';
 import Selectors from './selectors';
 import ModalEvents from 'core/modal_events';
+import PaymentEvents from 'core_payment/events';
 import {add as addToast, addToastRegion} from 'core/toast';
 import Notification from 'core/notification';
+import ModalGateways from './modal_gateways';
 
 /**
  * Register event listeners for the module.
@@ -65,7 +67,7 @@ const show = async(rootNode, {
     focusOnClose = null,
 } = {}) => {
     const modal = await ModalFactory.create({
-        type: ModalFactory.types.SAVE_CANCEL,
+        type: ModalGateways.TYPE,
         title: await getString('selectpaymenttype', 'core_payment'),
         body: await Templates.render('core_payment/gateways_modal', {}),
     });
@@ -84,7 +86,7 @@ const show = async(rootNode, {
         }
     });
 
-    modal.getRoot().on(ModalEvents.save, (e) => {
+    modal.getRoot().on(PaymentEvents.proceed, (e) => {
         const root = modal.getRoot()[0];
         const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;
 

payment/amd/src/modal_gateways.js

@@ -0,0 +1,101 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Contain the logic for the gateways modal: A modal with proceed and cancel buttons.
+ *
+ * @module     core_payment/modal_gateways
+ * @package    core_payment
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define([
+    'jquery',
+    'core/notification',
+    'core/custom_interaction_events',
+    'core/modal',
+    'core/modal_events',
+    'core_payment/events',
+    'core/modal_registry'
+],
+function(
+    $,
+    Notification,
+    CustomEvents,
+    Modal,
+    ModalEvents,
+    PaymentEvents,
+    ModalRegistry
+) {
+
+    var registered = false;
+    var SELECTORS = {
+        PROCEED_BUTTON: '[data-action="proceed"]',
+        CANCEL_BUTTON: '[data-action="cancel"]',
+    };
+
+    /**
+     * Constructor for the Modal.
+     *
+     * @param {object} root The root jQuery element for the modal
+     */
+    var ModalGateways = function(root) {
+        Modal.call(this, root);
+    };
+
+    ModalGateways.TYPE = 'core_payment-modal_gateways';
+    ModalGateways.prototype = Object.create(Modal.prototype);
+    ModalGateways.prototype.constructor = ModalGateways;
+
+    /**
+     * Set up all of the event handling for the modal.
+     *
+     * @method registerEventListeners
+     */
+    ModalGateways.prototype.registerEventListeners = function() {
+        // Apply parent event listeners.
+        Modal.prototype.registerEventListeners.call(this);
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.PROCEED_BUTTON, function(e, data) {
+            var proceedEvent = $.Event(PaymentEvents.proceed);
+            this.getRoot().trigger(proceedEvent, this);
+
+            if (!proceedEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        }.bind(this));
+
+        this.getModal().on(CustomEvents.events.activate, SELECTORS.CANCEL_BUTTON, function(e, data) {
+            var cancelEvent = $.Event(ModalEvents.cancel);
+            this.getRoot().trigger(cancelEvent, this);
+
+            if (!cancelEvent.isDefaultPrevented()) {
+                this.hide();
+                data.originalEvent.preventDefault();
+            }
+        }.bind(this));
+    };
+
+    // Automatically register with the modal registry the first time this module is imported so that you can create modals
+    // of this type using the modal factory.
+    if (!registered) {
+        ModalRegistry.register(ModalGateways.TYPE, ModalGateways, 'core_payment/modal_gateways');
+        registered = true;
+    }
+
+    return ModalGateways;
+});

payment/templates/modal_gateways.mustache

@@ -0,0 +1,45 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_payment/modal_gateways
+
+    Moodle modal template with save and cancel buttons.
+
+    The purpose of this template is to render a modal.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * title A cleaned string (use clean_text()) to display.
+    * body HTML content for the boday
+
+    Example context (json):
+    {
+        "title": "Example gateways modal",
+        "body": "Some example content for the body"
+    }
+}}
+{{< core/modal }}
+    {{$footer}}
+        <button type="button" class="btn btn-primary" data-action="proceed">{{#str}} proceed {{/str}}</button>
+        <button type="button" class="btn btn-secondary" data-action="cancel">{{#str}} cancel {{/str}}</button>
+    {{/footer}}
+{{/ core/modal }}