import {getGatewaysSupportingCurrency} from 'core_payment/repository';
import Selectors from './selectors';
import * as ModalEvents from 'core/modal_events';
+import {add as addToast, addToastRegion} from 'core/toast';
/**
* Register event listeners for the module.
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: []
- };
+ .done(content => {
+ ModalFactory.create({
+ type: ModalFactory.types.SAVE_CANCEL,
+ title: getString('selectpaymenttype', 'core_payment'),
+ body: content,
+ })
+ .done(function(modal) {
+ addToastRegion(modal.getRoot()[0]);
+ const currency = rootNode.dataset.currency;
+ getGatewaysSupportingCurrency(currency)
+ .done(gateways => {
+ const context = {
+ gateways: []
+ };
- for (let gateway of gateways) {
- context.gateways.push(gateway);
- }
+ 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);
- });
+ 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.getRoot().on(ModalEvents.hidden, function() {
- // Destroy when hidden.
- modal.destroy();
- try {
- focusOnClose.focus();
- } catch (e) {
- // eslint-disable-line
- }
- });
+ modal.getRoot().on(ModalEvents.save, function(e) {
+ const root = modal.getRoot()[0];
+ const gateway = (root.querySelector(Selectors.values.gateway) || {value: ''}).value;
- modal.show();
+ if (gateway) {
+ processPayment(
+ root,
+ gateway,
+ rootNode.dataset.amount,
+ rootNode.dataset.currency,
+ rootNode.dataset.component,
+ rootNode.dataset.componentid
+ );
+ } else {
+ getString('nogatewayselected', 'core_payment').then(message => {
+ return addToast(message);
+ });
+ }
+
+ e.preventDefault();
});
+
+ modal.show();
});
+ });
+};
+
+/**
+ * Process payment using the selected gateway.
+ *
+ * @param {HTMLElement} rootElement The root element of the main modal
+ * @param {string} gateway The gateway to be used for payment
+ * @param {number} amount Amount of payment
+ * @param {string} currency The currency in the three-character ISO-4217 format
+ * @param {string} component Name of the component that the componentid belongs to
+ * @param {number} componentid An internal identifier that is used by the component
+ * @returns {Promise<void>}
+ */
+const processPayment = async(rootElement, gateway, amount, currency, component, componentid) => {
+ const paymentMethod = await import(`pg_${gateway}/gateways_modal`);
+
+ paymentMethod.process(rootElement, amount, currency, component, componentid);
};
* @param string $currency Currency of payment
* @return array
*/
- public static function gateways_modal_link_params(float $amount, string $currency) : array {
+ public static function gateways_modal_link_params(float $amount, string $currency, string $component, int $componentid): array {
return [
'id' => 'gateways-modal-trigger',
'role' => 'button',
'data-amount' => $amount,
'data-currency' => $currency,
+ 'data-component' => $component,
+ 'data-componentid' => $componentid,
];
}
}