From df7893f65fd37cace10268356fd38ab46094fcd0 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 7 Apr 2021 11:36:04 +0200 Subject: [PATCH] open modal to edit the keys of the payment gateway --- .../javascript/components/payzen-settings.tsx | 58 ++++--------------- .../javascript/controllers/admin/invoices.js | 32 +++++++++- .../templates/admin/invoices/payment.html | 4 +- config/locales/app.admin.en.yml | 1 - config/locales/app.admin.fr.yml | 1 - 5 files changed, 41 insertions(+), 55 deletions(-) diff --git a/app/frontend/src/javascript/components/payzen-settings.tsx b/app/frontend/src/javascript/components/payzen-settings.tsx index 526849d79..b960f58d8 100644 --- a/app/frontend/src/javascript/components/payzen-settings.tsx +++ b/app/frontend/src/javascript/components/payzen-settings.tsx @@ -2,7 +2,7 @@ * This component displays a summary of the PayZen account keys, with a button triggering the modal to edit them */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { Loader } from './loader'; import { react2angular } from 'react2angular'; import { IApplication } from '../models/application'; @@ -12,13 +12,11 @@ import { SettingName } from '../models/setting'; import { useImmer } from 'use-immer'; import { FabInput } from './fab-input'; import { FabButton } from './fab-button'; -import { FabModal, ModalSize } from './fab-modal'; -import { PayZenKeysForm } from './payzen-keys-form'; declare var Application: IApplication; interface PayzenSettingsProps { - + onEditKeys: (onlinePaymentModule: {value: boolean}) => void } const PAYZEN_HIDDEN = 'testpassword_HiDdEnHIddEnHIdDEnHiDdEnHIddEnHIdDEn'; @@ -39,14 +37,10 @@ const isPresent = { [SettingName.PayZenHmacKey]: SettingAPI.isPresent(SettingName.PayZenHmacKey) }; -export const PayzenSettings: React.FC = ({}) => { +export const PayzenSettings: React.FC = ({ onEditKeys }) => { const { t } = useTranslation('admin'); const [settings, updateSettings] = useImmer>(new Map(payZenSettings.map(name => [name, '']))); - const [openEditModal, setOpenEditModal] = useState(false); - const [preventConfirm, setPreventConfirm] = useState(true); - const [config, setConfig] = useState>(new Map()); - const [errors, setErrors] = useState(''); useEffect(() => { const map = payZenKeys.read(); @@ -56,30 +50,9 @@ export const PayzenSettings: React.FC = ({}) => { updateSettings(map); }, []); - /** - * Open/closes the modal dialog to edit the payzen keys - */ - const toggleEditKeysModal = () => { - setOpenEditModal(!openEditModal); - } - const handleUpdateKeys = () => { - const api = new SettingAPI(); - api.bulkUpdate(config).then(result => { - if (Array.from(result.values()).filter(item => !item.status).length > 0) { - setErrors(JSON.stringify(result)); - } else { - // TODO updateSettings(result); - toggleEditKeysModal(); - } - }, reason => { - setErrors(reason); - }); - } - - const handleValidPayZenKeys = (payZenKeys: Map): void => { - setConfig(payZenKeys); - setPreventConfirm(false); + const handleKeysUpdate = (): void => { + onEditKeys({ value: true }); } return ( @@ -88,7 +61,7 @@ export const PayzenSettings: React.FC = ({}) => {
{payZenSettings.map(setting => { return ( -
+
= ({}) => { ); })}
- {t('app.admin.invoices.payment.edit_keys')} - - {errors && {errors}} - - + {t('app.admin.invoices.payment.edit_keys')}
@@ -119,12 +81,12 @@ export const PayzenSettings: React.FC = ({}) => { } -const PayzenSettingsWrapper: React.FC = ({}) => { +const PayzenSettingsWrapper: React.FC = ({ onEditKeys }) => { return ( - + ); } -Application.Components.component('payzenSettings', react2angular(PayzenSettingsWrapper)); +Application.Components.component('payzenSettings', react2angular(PayzenSettingsWrapper, ['onEditKeys'])); diff --git a/app/frontend/src/javascript/controllers/admin/invoices.js b/app/frontend/src/javascript/controllers/admin/invoices.js index 0e0c520e3..00b7579f6 100644 --- a/app/frontend/src/javascript/controllers/admin/invoices.js +++ b/app/frontend/src/javascript/controllers/admin/invoices.js @@ -652,7 +652,10 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I if (onlinePaymentModule.value === false) return true; // otherwise, open a modal to ask for the selection of a payment gateway - $scope.openSelectGatewayModal = true; + setTimeout(() => { + $scope.openSelectGatewayModal = true; + $scope.$apply(); + }, 50); return new Promise(function (resolve, reject) { resolveGatewaySaving = resolve; rejectGatewaySaving = reject; @@ -667,7 +670,10 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I $scope.openSelectGatewayModal = !$scope.openSelectGatewayModal; $scope.$apply(); if (!$scope.openSelectGatewayModal) { - rejectGatewaySaving(); + if (rejectGatewaySaving) { + rejectGatewaySaving(); + resetPromiseHandlers(); + } } }, 50); }; @@ -676,7 +682,10 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I * Callback triggered after the gateway was successfully configured in the dedicated modal */ $scope.onGatewayModalSuccess = function (updatedSettings) { - resolveGatewaySaving(true); + if (resolveGatewaySaving) { + resolveGatewaySaving(true); + resetPromiseHandlers(); + } $scope.toggleSelectGatewayModal(); $scope.allSettings.payment_gateway = updatedSettings.get('payment_gateway').value; @@ -897,6 +906,14 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I ); } }); + + // Clean before the controller is destroyed + $scope.$on('$destroy', function () { + if (rejectGatewaySaving) { + rejectGatewaySaving(); + resetPromiseHandlers(); + } + }); }; /** @@ -920,6 +937,15 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I */ const padWithZeros = function (value, length) { return (1e15 + value + '').slice(-length); }; + /** + * Reset the promise handlers (reject/resolve) to their initial value. + * This will prevent an already resolved promise to be triggered again. + */ + const resetPromiseHandlers = function () { + resolveGatewaySaving = null; + rejectGatewaySaving = null; + }; + /** * Remove every unsupported html tag from the given html text (like

, , ...). * The supported tags are , , and
. diff --git a/app/frontend/templates/admin/invoices/payment.html b/app/frontend/templates/admin/invoices/payment.html index 174bb9c78..357806ab4 100644 --- a/app/frontend/templates/admin/invoices/payment.html +++ b/app/frontend/templates/admin/invoices/payment.html @@ -44,7 +44,7 @@

- +
@@ -65,7 +65,7 @@
- +
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index ab06d5270..f5d25a521 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -654,7 +654,6 @@ en: payzen_endpoint: "REST API server name" payzen_hmac: "HMAC-SHA-256 key" payzen_public_key: "Client public key" - update_button: "Update" # select a payment gateway gateway_modal: select_gateway_title: "Select a payment gateway" diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml index 63493f7f1..06a45d618 100644 --- a/config/locales/app.admin.fr.yml +++ b/config/locales/app.admin.fr.yml @@ -654,7 +654,6 @@ fr: payzen_endpoint: "Nom du serveur de l'API REST" payzen_hmac: "Clef HMAC-SHA-256" payzen_public_key: "Clef publique client" - update_button: "Mettre à jour" # select a payment gateway gateway_modal: select_gateway_title: "Sélectionnez une passerelle de paiement"