MDL-69166 core_payment: display the gateways modal
authorShamim Rezaie <shamim@moodle.com>
Wed, 29 Jan 2020 08:11:37 +0000 (19:11 +1100)
committerShamim Rezaie <shamim@moodle.com>
Tue, 27 Oct 2020 04:44:58 +0000 (15:44 +1100)
16 files changed:
enrol/fee/classes/plugin.php
lang/en/payment.php
payment/amd/build/gateways_modal.min.js [new file with mode: 0644]
payment/amd/build/gateways_modal.min.js.map [new file with mode: 0644]
payment/amd/build/repository.min.js [new file with mode: 0644]
payment/amd/build/repository.min.js.map [new file with mode: 0644]
payment/amd/build/selectors.min.js [new file with mode: 0644]
payment/amd/build/selectors.min.js.map [new file with mode: 0644]
payment/amd/src/gateways_modal.js [new file with mode: 0644]
payment/amd/src/repository.js [new file with mode: 0644]
payment/amd/src/selectors.js [new file with mode: 0644]
payment/classes/helper.php
payment/templates/gateway.mustache [new file with mode: 0644]
payment/templates/gateways.mustache [new file with mode: 0644]
payment/templates/gateways_modal.mustache [new file with mode: 0644]
payment/templates/gateways_placeholder.mustache [new file with mode: 0644]

index 71b9e7e..f2d4200 100644 (file)
@@ -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>';
             }
 
         }
index a78b8ac..b9f6322 100644 (file)
@@ -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';
diff --git a/payment/amd/build/gateways_modal.min.js b/payment/amd/build/gateways_modal.min.js
new file mode 100644 (file)
index 0000000..f6c364c
Binary files /dev/null and b/payment/amd/build/gateways_modal.min.js differ
diff --git a/payment/amd/build/gateways_modal.min.js.map b/payment/amd/build/gateways_modal.min.js.map
new file mode 100644 (file)
index 0000000..83ffa6f
Binary files /dev/null and b/payment/amd/build/gateways_modal.min.js.map differ
diff --git a/payment/amd/build/repository.min.js b/payment/amd/build/repository.min.js
new file mode 100644 (file)
index 0000000..8357ed7
Binary files /dev/null and b/payment/amd/build/repository.min.js differ
diff --git a/payment/amd/build/repository.min.js.map b/payment/amd/build/repository.min.js.map
new file mode 100644 (file)
index 0000000..00832a1
Binary files /dev/null and b/payment/amd/build/repository.min.js.map differ
diff --git a/payment/amd/build/selectors.min.js b/payment/amd/build/selectors.min.js
new file mode 100644 (file)
index 0000000..de2f08e
Binary files /dev/null and b/payment/amd/build/selectors.min.js differ
diff --git a/payment/amd/build/selectors.min.js.map b/payment/amd/build/selectors.min.js.map
new file mode 100644 (file)
index 0000000..f68775a
Binary files /dev/null and b/payment/amd/build/selectors.min.js.map differ
diff --git a/payment/amd/src/gateways_modal.js b/payment/amd/src/gateways_modal.js
new file mode 100644 (file)
index 0000000..8579158
--- /dev/null
@@ -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();
+            });
+        });
+};
diff --git a/payment/amd/src/repository.js b/payment/amd/src/repository.js
new file mode 100644 (file)
index 0000000..758c80a
--- /dev/null
@@ -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];
+};
diff --git a/payment/amd/src/selectors.js b/payment/amd/src/selectors.js
new file mode 100644 (file)
index 0000000..35be2db
--- /dev/null
@@ -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"]',
+    },
+};
index 4e611d9..1fb9261 100644 (file)
@@ -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,
+        ];
+    }
 }
diff --git a/payment/templates/gateway.mustache b/payment/templates/gateway.mustache
new file mode 100644 (file)
index 0000000..a363f80
--- /dev/null
@@ -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>
\ No newline at end of file
diff --git a/payment/templates/gateways.mustache b/payment/templates/gateways.mustache
new file mode 100644 (file)
index 0000000..c2c1a39
--- /dev/null
@@ -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}}
\ No newline at end of file
diff --git a/payment/templates/gateways_modal.mustache b/payment/templates/gateways_modal.mustache
new file mode 100644 (file)
index 0000000..9de46c4
--- /dev/null
@@ -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>
\ No newline at end of file
diff --git a/payment/templates/gateways_placeholder.mustache b/payment/templates/gateways_placeholder.mustache
new file mode 100644 (file)
index 0000000..ad7a549
--- /dev/null
@@ -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>
\ No newline at end of file