};
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.
*
export default {
regions: {
gatewaysContainer: '[data-region="gateways-container"]',
+ costContainer: '[data-region="fee-breakdown-container"]',
},
values: {
gateway: '[data-region="gateways-container"] input[type="radio"]:checked',
--- /dev/null
+{{!
+ 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>
{}
}}
-<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