MDL-69166 core_payment: show cost on the modal

diff --git a/payment/amd/build/gateways_modal.min.js b/payment/amd/build/gateways_modal.min.js
index a2d21ee..aa2086b 100644 (file)
Binary files a/payment/amd/build/gateways_modal.min.js 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
index 57e85ac..0a2256d 100644 (file)
Binary files a/payment/amd/build/gateways_modal.min.js.map and b/payment/amd/build/gateways_modal.min.js.map differ

diff --git a/payment/amd/build/modal_gateways.min.js b/payment/amd/build/modal_gateways.min.js
index 54d199f..4f32883 100644 (file)
Binary files a/payment/amd/build/modal_gateways.min.js and b/payment/amd/build/modal_gateways.min.js differ

diff --git a/payment/amd/build/modal_gateways.min.js.map b/payment/amd/build/modal_gateways.min.js.map
index 7be1ed0..6a1a424 100644 (file)
Binary files a/payment/amd/build/modal_gateways.min.js.map and b/payment/amd/build/modal_gateways.min.js.map differ

diff --git a/payment/amd/build/selectors.min.js b/payment/amd/build/selectors.min.js
index 480f147..ac36b96 100644 (file)
Binary files a/payment/amd/build/selectors.min.js 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
index fc5d505..e6532f2 100644 (file)
Binary files a/payment/amd/build/selectors.min.js.map 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
index 01cf70b..e1488d0 100644 (file)
--- a/payment/amd/src/gateways_modal.js
+++ b/payment/amd/src/gateways_modal.js
@@ -128,9 +128,28 @@ const show = async(rootNode, {
     };
 
     const {html, js} = await Templates.renderForPromise('core_payment/gateways', context);
-    Templates.replaceNodeContents(modal.getRoot().find(Selectors.regions.gatewaysContainer), html, js);
+    const root = modal.getRoot()[0];
+    Templates.replaceNodeContents(root.querySelector(Selectors.regions.gatewaysContainer), html, js);
+    updateCostRegion(root, parseFloat(rootNode.dataset.amount), rootNode.dataset.currency);
 };
 
+/**
+ * Shows the cost of the item the user is purchasing in the cost region.
+ *
+ * @param {HTMLElement} root An HTMLElement that contains the cost region
+ * @param {number} amount The amount part of cost
+ * @param {string} currency The currency part of cost in the 3-letter ISO-4217 format
+ * @returns {Promise<void>}
+ */
+const updateCostRegion = async(root, amount, currency) => {
+    const locale = await updateCostRegion.locale; // This only takes a bit the first time.
+    const localisedCost = amount.toLocaleString(locale, {style: "currency", currency: currency});
+
+    const {html, js} = await Templates.renderForPromise('core_payment/fee_breakdown', {fee: localisedCost});
+    Templates.replaceNodeContents(root.querySelector(Selectors.regions.costContainer), html, js);
+};
+updateCostRegion.locale = getString("localecldr", "langconfig");
+
 /**
  * Process payment using the selected gateway.
  *

diff --git a/payment/amd/src/selectors.js b/payment/amd/src/selectors.js
index 5bfc1af..1a571e8 100644 (file)
--- a/payment/amd/src/selectors.js
+++ b/payment/amd/src/selectors.js
@@ -25,6 +25,7 @@
 export default {
     regions: {
         gatewaysContainer: '[data-region="gateways-container"]',
+        costContainer: '[data-region="fee-breakdown-container"]',
     },
     values: {
         gateway: '[data-region="gateways-container"] input[type="radio"]:checked',

diff --git a/payment/templates/fee_breakdown.mustache b/payment/templates/fee_breakdown.mustache
new file mode 100644 (file)
index 0000000..2e74fd0
--- /dev/null
+++ b/payment/templates/fee_breakdown.mustache
@@ -0,0 +1,38 @@
+{{!
+    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/fee_breakdown_placeholder
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+
+}}
+<div class="core_payment_fee_breakdown">
+    {{# str }} labelvalue, core, {
+        "label": {{# quote }}{{# str }} cost {{/ str }}{{/ quote }},
+        "value": "{{fee}}"
+        } {{/ str }}
+</div>

diff --git a/payment/templates/gateways_modal.mustache b/payment/templates/gateways_modal.mustache
index bda71e1..8c1139c 100644 (file)
--- a/payment/templates/gateways_modal.mustache
+++ b/payment/templates/gateways_modal.mustache
@@ -32,6 +32,11 @@
     {}
 
 }}
-<div class="core_payment_gateways_modal" data-region="gateways-container">
-    {{> core_payment/gateways_placeholder }}
+<div class="core_payment_gateways_modal">
+    <div data-region="gateways-container">
+        {{> core_payment/gateways_placeholder }}
+    </div>
+    <div data-region="fee-breakdown-container">
+        <div class="bg-pulse-grey" style="height: 22px; width: 90px"></div>
+    </div>
 </div>
\ No newline at end of file