MDL-69166 pg_paypal: render PayPal buttons and set up transaction

We truncate brand_name to 127 chars as per PayPal requirement.

payment/gateway/paypal/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 ("pg_paypal/gateways_modal",["exports","./repository","core/templates","./selectors","core/truncate"],function(a,b,c,d,e){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.process=void 0;b=h(b);c=f(c);d=f(d);e=f(e);function f(a){return a&&a.__esModule?a:{default:a}}function g(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;g=function(){return a};return a}function h(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=g();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 i(a,b){return n(a)||m(a,b)||k(a,b)||j()}function j(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function k(a,b){if(!a)return;if("string"==typeof a)return l(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 l(a,b)}function l(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}function m(a,b){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(a)))return;var c=[],d=!0,e=!1,f=void 0;try{for(var g=a[Symbol.iterator](),h;!(d=(h=g.next()).done);d=!0){c.push(h.value);if(b&&c.length===b)break}}catch(a){e=!0;f=a}finally{try{if(!d&&null!=g["return"])g["return"]()}finally{if(e)throw f}}return c}function n(a){if(Array.isArray(a))return a}function o(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 p(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){o(h,d,e,f,g,"next",a)}function g(a){o(h,d,e,f,g,"throw",a)}f(void 0)})}}var q=function(){var a=p(regeneratorRuntime.mark(function a(b){var e,f,g;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return c.default.renderForPromise("pg_paypal/paypal_button_placeholder",{});case 2:e=a.sent;f=e.html;g=e.js;c.default.replaceNodeContents(b.querySelector(d.default.regions.gatewaysContainer),f,g);case 6:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),r=function(){var a=p(regeneratorRuntime.mark(function a(c,f,g){var h,j,k,l;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:a.next=2;return Promise.all([q(c),b.getConfigForJs()]);case 2:h=a.sent;j=i(h,2);k=j[1];l="https://www.paypal.com/sdk/js?client-id=".concat(k.clientid,"&currency=").concat(g);s(l,function(){c.querySelector(d.default.buttons.save).style.display="none";c.querySelector(d.default.regions.gatewaysContainer).innerHTML="";paypal.Buttons({createOrder:function createOrder(a,b){return b.order.create({purchase_units:[{amount:{currency_code:g,value:f}}],application_context:{shipping_preference:"NO_SHIPPING",brand_name:e.default.truncate(k.brandname,{length:127,stripTags:!0})}})}}).render(d.default.regions.gatewaysContainer)});case 7:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.process=r;var s=function(a,b){if(s.currentlyloaded.includes(a)){b();return}var c=document.createElement("script");if(c.readyState){c.onreadystatechange=function(){if("complete"==this.readyState||"loaded"==this.readyState){this.onreadystatechange=null;b()}}}else{c.onload=function(){b()}}c.setAttribute("src",a);document.head.appendChild(c);s.currentlyloaded.push(a)};s.currentlyloaded=[]});
+//# sourceMappingURL=gateways_modal.min.js.map

payment/gateway/paypal/amd/build/selectors.min.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/selectors.js"],"names":["regions","gatewaysContainer","buttons","save"],"mappings":"+IAwBe,CACXA,OAAO,CAAE,CACLC,iBAAiB,CAAE,sCADd,CADE,CAIXC,OAAO,CAAE,CACLC,IAAI,CAAE,wBADD,CAJE,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 gateways modal.\n *\n * @module     pg_paypal/selectors\n * @package    pg_paypal\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    buttons: {\n        save: '[data-action=\"save\"]',\n    },\n};\n"],"file":"selectors.min.js"}

payment/gateway/paypal/amd/src/gateways_modal.js

@@ -0,0 +1,103 @@
+// 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/>.
+
+/**
+ * This module is responsible for PayPal content in the gateways modal.
+ *
+ * @module     pg_paypal/gateway_modal
+ * @copyright  2020 Shamim Rezaie <shamim@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import * as Repository from './repository';
+import Templates from 'core/templates';
+import Selectors from './selectors';
+import Truncate from 'core/truncate';
+
+/**
+ * Renders a placeholder in the modal.
+ *
+ * @param rootElement
+ * @returns {Promise<void>}
+ */
+const showPlaceholder = async(rootElement) => {
+    const {html, js} = await Templates.renderForPromise('pg_paypal/paypal_button_placeholder', {});
+    Templates.replaceNodeContents(rootElement.querySelector(Selectors.regions.gatewaysContainer), html, js);
+};
+
+export const process = async(rootElement, amount, currency, component, componentid) => {
+
+    const [
+        ,
+        paypalConfig,
+    ] = await Promise.all([
+        showPlaceholder(rootElement),
+        Repository.getConfigForJs(),
+    ]);
+
+    const paypalScript = `https://www.paypal.com/sdk/js?client-id=${paypalConfig.clientid}&currency=${currency}`;
+
+    callExternalFunction(paypalScript, () => {
+        rootElement.querySelector(Selectors.buttons.save).style.display = 'none';
+        rootElement.querySelector(Selectors.regions.gatewaysContainer).innerHTML = '';
+        paypal.Buttons({ // eslint-disable-line
+            createOrder: function(data, actions) {
+                // This function sets up the details of the transaction, including the amount and line item details.
+                return actions.order.create({
+                    purchase_units: [{ // eslint-disable-line
+                        amount: {
+                            currency_code: currency, // eslint-disable-line
+                            value: amount
+                        }
+                    }],
+                    application_context: { // eslint-disable-line
+                        shipping_preference: 'NO_SHIPPING', // eslint-disable-line
+                        brand_name: Truncate.truncate(paypalConfig.brandname, {length: 127, stripTags: true}), // eslint-disable-line
+                    },
+                });
+            },
+        }).render(Selectors.regions.gatewaysContainer);
+    });
+};
+
+const callExternalFunction = (jsFile, callback) => {
+    // Check to see if this file has already been loaded. If so just go straight to the callback.
+    if (callExternalFunction.currentlyloaded.includes(jsFile)) {
+        callback();
+        return;
+    }
+
+    const script = document.createElement('script');
+
+    if (script.readyState) {
+        script.onreadystatechange = function() {
+            if (this.readyState == 'complete' || this.readyState == 'loaded') {
+                this.onreadystatechange = null;
+                callback();
+            }
+        };
+    } else {
+        script.onload = function() {
+            callback();
+        };
+    }
+
+    script.setAttribute('src', jsFile);
+    document.head.appendChild(script);
+
+    callExternalFunction.currentlyloaded.push(jsFile);
+};
+
+callExternalFunction.currentlyloaded = [];

payment/gateway/paypal/amd/src/selectors.js

@@ -0,0 +1,32 @@
+// 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 gateways modal.
+ *
+ * @module     pg_paypal/selectors
+ * @package    pg_paypal
+ * @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"]',
+    },
+    buttons: {
+        save: '[data-action="save"]',
+    },
+};

payment/gateway/paypal/templates/paypal_button_placeholder.mustache

@@ -0,0 +1,35 @@
+{{!
+    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 paygw_paypal/paypal_button_placeholder
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+
+}}
+<div class="bg-pulse-grey rounded" style="width: 100%; height: 45px; margin-bottom: 14px;"></div>
+<div class="bg-pulse-grey rounded" style="width: 100%; height: 45px; margin-bottom: 14px;"></div>
+<div class="bg-pulse-grey" style="width: 110px; height: 16px; margin: 10px auto; position: relative; bottom: 3px;"></div>