MDL-69166 core_payment: display the gateways modal

enrol/fee/classes/plugin.php

@@ -206,9 +206,12 @@ class enrol_fee_plugin extends enrol_plugin {
                 echo '<p><a href="'.$wwwroot.'/login/">'.get_string('loginsite').'</a></p>';
                 echo '</div>';
             } else {
-                echo '<div align="center"><input type="submit" value="' . get_string("sendpaymentbutton", "enrol_paypal") . '" /></div>';
-                $PAGE->requires->js_call_amd('profilefield_conditional/conditionconfig', 'init', array('#id_param1',
-                        '#profilefield_conditional_conditionconfiguration', '#id_conditionconfigbutton', $fieldid));
+                \core_payment\helper::gateways_modal_requirejs();
+                $attributes = core_payment\helper::gateways_modal_link_params($cost, $instance->currency);
+
+                echo '<div align="center">' .
+                      html_writer::tag('button', get_string("sendpaymentbutton", "enrol_paypal"), $attributes) .
+                      '</div>';
             }
 
         }

lang/en/payment.php

@@ -22,4 +22,6 @@
  * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['nogateway'] = 'There is no payment gateway that can be used.';
+$string['selectpaymenttype'] = 'Select payment type';
 $string['supportedcurrencies'] = 'Supported currencies';

payment/amd/build/gateways_modal.min.js

@@ -0,0 +1,2 @@
+function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("core_payment/gateways_modal",["exports","core/modal_factory","core/templates","core/str","core_payment/repository","./selectors","core/modal_events"],function(a,b,c,d,e,f,g){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.registerEventListeners=void 0;b=j(b);c=j(c);f=j(f);g=i(g);function h(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;h=function(){return a};return a}function i(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=h();if(b&&b.has(a)){return b.get(a)}var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a){if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;if(f&&(f.get||f.set)){Object.defineProperty(c,e,f)}else{c[e]=a[e]}}}c.default=a;if(b){b.set(a,c)}return c}function j(a){return a&&a.__esModule?a:{default:a}}function k(a){if("undefined"==typeof Symbol||null==a[Symbol.iterator]){if(Array.isArray(a)||(a=l(a))){var b=0,c=function(){};return{s:c,n:function n(){if(b>=a.length)return{done:!0};return{done:!1,value:a[b++]}},e:function e(a){throw a},f:c}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var d,e=!0,f=!1,g;return{s:function s(){d=a[Symbol.iterator]()},n:function n(){var a=d.next();e=a.done;return a},e:function e(a){f=!0;g=a},f:function f(){try{if(!e&&null!=d.return)d.return()}finally{if(f)throw g}}}}function l(a,b){if(!a)return;if("string"==typeof a)return m(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);if("Object"===c&&a.constructor)c=a.constructor.name;if("Map"===c||"Set"===c)return Array.from(c);if("Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c))return m(a,b)}function m(a,b){if(null==b||b>a.length)b=a.length;for(var c=0,d=Array(b);c<b;c++){d[c]=a[c]}return d}a.registerEventListeners=function registerEventListeners(a){var b=document.querySelector(a);b.addEventListener("click",function(a){a.preventDefault();n(b,{focusOnClose:a.target})})};var n=function(a){var h=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},i=h.focusOnClose,j=void 0===i?null:i;c.default.render("core_payment/gateways_modal",{}).done(function(h){b.default.create({title:(0,d.get_string)("selectpaymenttype","core_payment"),body:h}).done(function(b){var d=a.dataset.currency;(0,e.getGatewaysSupportingCurrency)(d).done(function(a){var d={gateways:[]},e=k(a),g;try{for(e.s();!(g=e.n()).done;){var h=g.value;d.gateways.push(h)}}catch(a){e.e(a)}finally{e.f()}c.default.render("core_payment/gateways",d).done(function(a,d){c.default.replaceNodeContents(b.getRoot().find(f.default.regions.gatewaysContainer),a,d)})});b.getRoot().on(g.hidden,function(){b.destroy();try{j.focus()}catch(a){}});b.show()})})}});
+//# sourceMappingURL=gateways_modal.min.js.map

payment/amd/build/repository.min.js

@@ -0,0 +1,2 @@
+define ("core_payment/repository",["exports","core/ajax"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.getGatewaysSupportingCurrency=void 0;b=function(a){return a&&a.__esModule?a:{default:a}}(b);var c=function(a){return b.default.call([{methodname:"core_payment_get_gateways_for_currency",args:{currency:a}}])[0]};a.getGatewaysSupportingCurrency=c});
+//# sourceMappingURL=repository.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/repository.js"],"names":["getGatewaysSupportingCurrency","currency","Ajax","call","methodname","args"],"mappings":"6KAwBA,uDAQO,GAAMA,CAAAA,CAA6B,CAAG,SAAAC,CAAQ,CAAI,CAOrD,MAAOC,WAAKC,IAAL,CAAU,CAND,CACZC,UAAU,CAAE,wCADA,CAEZC,IAAI,CAAE,CACFJ,QAAQ,CAARA,CADE,CAFM,CAMC,CAAV,EAAqB,CAArB,CACV,CARM,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 * Repository for payment subsystem.\n *\n * @module     core_payment/repository\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\nimport Ajax from 'core/ajax';\n\n/**\n * Returns the list of gateways that can process payments in the given currency.\n *\n * @param {string} currency The currency in the three-character ISO-4217 format\n * @returns {Promise<{shortname: string, name: string, description: String}[]>}\n */\nexport const getGatewaysSupportingCurrency = currency => {\n    const request = {\n        methodname: 'core_payment_get_gateways_for_currency',\n        args: {\n            currency\n        }\n    };\n    return Ajax.call([request])[0];\n};\n"],"file":"repository.min.js"}

payment/amd/build/selectors.min.js

@@ -0,0 +1,2 @@
+define ("core_payment/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={regions:{gatewaysContainer:"[data-region=\"gateways-container\"]"}};return a.default});
+//# sourceMappingURL=selectors.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selectors.js"],"names":["regions","gatewaysContainer"],"mappings":"kJAwBe,CACXA,OAAO,CAAE,CACLC,iBAAiB,CAAE,sCADd,CADE,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 * Define all of the selectors we will be using on the payment interface.\n *\n * @module     core_payment/selectors\n * @package    core_payment\n * @copyright  2019 Shamim Rezaie <shamim@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    regions: {\n        gatewaysContainer: '[data-region=\"gateways-container\"]',\n    },\n};\n"],"file":"selectors.min.js"}

payment/amd/src/gateways_modal.js

@@ -0,0 +1,94 @@
+// 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.
+ *
+ * @module     core_payment/gateways_modal
+ * @package    core_payment
+ * @copyright  2019 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import ModalFactory from 'core/modal_factory';
+import Templates from 'core/templates';
+import {get_string as getString} from 'core/str';
+import {getGatewaysSupportingCurrency} from 'core_payment/repository';
+import Selectors from './selectors';
+import * as ModalEvents from 'core/modal_events';
+
+/**
+ * Register event listeners for the module.
+ *
+ * @param {string} nodeSelector The root to listen to.
+ */
+export const registerEventListeners = (nodeSelector) => {
+    const rootNode = document.querySelector(nodeSelector);
+
+    rootNode.addEventListener('click', (e) => {
+        e.preventDefault();
+        show(rootNode, {focusOnClose: e.target});
+    });
+};
+
+/**
+ * Shows the gateway selector modal.
+ *
+ * @param {HTMLElement} rootNode
+ * @param {Object} options - Additional options
+ * @param {HTMLElement} options.focusOnClose The element to focus on when the modal is closed.
+ */
+const show = (rootNode, {
+    focusOnClose = null,
+} = {}) => {
+    Templates.render('core_payment/gateways_modal', {})
+        .done(content => {
+            ModalFactory.create({
+                title: getString('selectpaymenttype', 'core_payment'),
+                body: content,
+            })
+            .done(function(modal) {
+                const currency = rootNode.dataset.currency;
+                getGatewaysSupportingCurrency(currency)
+                    .done(gateways => {
+                        const context = {
+                            gateways: []
+                        };
+
+                        for (let gateway of gateways) {
+                            context.gateways.push(gateway);
+                        }
+
+                        Templates.render('core_payment/gateways', context)
+                            .done((html, js) => {
+                                Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer),
+                                    html, js);
+                            });
+                    });
+
+                modal.getRoot().on(ModalEvents.hidden, function() {
+                    // Destroy when hidden.
+                    modal.destroy();
+                    try {
+                        focusOnClose.focus();
+                    } catch (e) {
+                        // eslint-disable-line
+                    }
+                });
+
+                modal.show();
+            });
+        });
+};

payment/amd/src/repository.js

@@ -0,0 +1,41 @@
+// 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/>.
+
+/**
+ * Repository for payment subsystem.
+ *
+ * @module     core_payment/repository
+ * @package    core_payment
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Ajax from 'core/ajax';
+
+/**
+ * Returns the list of gateways that can process payments in the given currency.
+ *
+ * @param {string} currency The currency in the three-character ISO-4217 format
+ * @returns {Promise<{shortname: string, name: string, description: String}[]>}
+ */
+export const getGatewaysSupportingCurrency = currency => {
+    const request = {
+        methodname: 'core_payment_get_gateways_for_currency',
+        args: {
+            currency
+        }
+    };
+    return Ajax.call([request])[0];
+};

payment/amd/src/selectors.js

@@ -0,0 +1,29 @@
+// 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/>.
+
+/**
+ * Define all of the selectors we will be using on the payment interface.
+ *
+ * @module     core_payment/selectors
+ * @package    core_payment
+ * @copyright  2019 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    regions: {
+        gatewaysContainer: '[data-region="gateways-container"]',
+    },
+};

payment/classes/helper.php

@@ -75,4 +75,35 @@ class helper {
 
         return $gateways;
     }
+
+    /**
+     * Requires the JS libraries for the pay button.
+     */
+    public static function gateways_modal_requirejs(): void {
+        global $PAGE;
+
+        static $done = false;
+        if ($done) {
+            return;
+        }
+
+        $PAGE->requires->js_call_amd('core_payment/gateways_modal', 'registerEventListeners', ['#gateways-modal-trigger']);
+        $done = true;
+    }
+
+    /**
+     * Returns the attributes to place on a pay button.
+     *
+     * @param float $amount Amount of payment
+     * @param string $currency Currency of payment
+     * @return array
+     */
+    public static function gateways_modal_link_params(float $amount, string $currency) : array {
+        return [
+            'id' => 'gateways-modal-trigger',
+            'role' => 'button',
+            'data-amount' => $amount,
+            'data-currency' => $currency,
+        ];
+    }
 }

payment/templates/gateway.mustache

@@ -0,0 +1,48 @@
+{{!
+    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/gateway
+
+    This template will render the gateway option in the gateway selector modal.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * shortname
+    * name
+    * description
+    * image
+
+    Example context (json):
+    {
+        "shortname": "paypal",
+        "name": "PayPal",
+        "description": "A description for PayPal.",
+    }
+
+}}
+<div class="custom-control custom-radio {{shortname}}">
+    <input class="custom-control-input" type="radio" name="payby" id="id-payby-{{uniqid}}-{{shortname}}"  value="{{shortname}}" {{#checked}} checked="checked" {{/checked}} />
+    <label class="custom-control-label bg-light border p-3 my-3" for="id-payby-{{uniqid}}-{{shortname}}">
+        <p class="h3">{{name}}</p>
+        <p class="content mb-2">{{description}}</p>
+    </label>
+</div>

payment/templates/gateways.mustache

@@ -0,0 +1,55 @@
+{{!
+    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/gateways
+
+    This template will render the list of gateways in the gateway selector modal.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * gateways
+
+    Example context (json):
+    {
+        "gateways" : [
+            {
+                "shortname": "paypal",
+                "name": "PayPal",
+                "description": "A description for PayPal.",
+                "image": "../../../pix/help.svg"
+            },
+            {
+                "shortname": "stripe",
+                "name": "Stripe",
+                "description": "A description for Stripe.",
+                "image": "../../../pix/help.svg"
+            }
+        ]
+    }
+
+}}
+{{#gateways}}
+    {{> core_payment/gateway }}
+{{/gateways}}
+{{^gateways}}
+    <p>{{#str}}nogateway, core_payment{{/str}}</p>
+{{/gateways}}

payment/templates/gateways_modal.mustache

@@ -0,0 +1,37 @@
+{{!
+    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/gateways_modal
+
+    This template will render the gateway selector modal.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+
+}}
+<div data-region="gateways-container">
+    {{> core_payment/gateways_placeholder }}
+</div>

payment/templates/gateways_placeholder.mustache

@@ -0,0 +1,41 @@
+{{!
+    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/gateways_placeholder
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+
+}}
+<div class="custom-control custom-radio">
+    <input class="custom-control-input" type="radio" disabled />
+    <label class="custom-control-label bg-light border p-3 my-3 w-100">
+        <div class="bg-pulse-grey mb-2" style="height: 31px; width: 18%"></div>
+        <div class="bg-pulse-grey mb-1" style="height: 20px; width: 95%"></div>
+        <div class="bg-pulse-grey mb-2" style="height: 20px; width: 25%"></div>
+        <div class="bg-pulse-grey" style="height: 40px; width: 30%"></div>
+    </label>
+</div>