mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-01-17 06:52:27 +01:00
open modal to edit the keys of the payment gateway
This commit is contained in:
Sylvain
parent
94c4d318e1
commit
df7893f65f
@ -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<PayzenSettingsProps> = ({}) => {
|
||||
export const PayzenSettings: React.FC<PayzenSettingsProps> = ({ onEditKeys }) => {
|
||||
const { t } = useTranslation('admin');
|
||||
|
||||
const [settings, updateSettings] = useImmer<Map<SettingName, string>>(new Map(payZenSettings.map(name => [name, ''])));
|
||||
const [openEditModal, setOpenEditModal] = useState<boolean>(false);
|
||||
const [preventConfirm, setPreventConfirm] = useState<boolean>(true);
|
||||
const [config, setConfig] = useState<Map<SettingName, string>>(new Map());
|
||||
const [errors, setErrors] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const map = payZenKeys.read();
|
||||
@ -56,30 +50,9 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
|
||||
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<SettingName, string>): void => {
|
||||
setConfig(payZenKeys);
|
||||
setPreventConfirm(false);
|
||||
const handleKeysUpdate = (): void => {
|
||||
onEditKeys({ value: true });
|
||||
}
|
||||
|
||||
return (
|
||||
@ -88,7 +61,7 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
|
||||
<div className="payzen-keys">
|
||||
{payZenSettings.map(setting => {
|
||||
return (
|
||||
<div className="key-wrapper">
|
||||
<div className="key-wrapper" key={setting}>
|
||||
<label htmlFor={setting}>{t(`app.admin.invoices.payment.payzen.${setting}`)}</label>
|
||||
<FabInput defaultValue={settings.get(setting)}
|
||||
id={setting}
|
||||
@ -100,18 +73,7 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
|
||||
);
|
||||
})}
|
||||
<div className="edit-keys">
|
||||
<FabButton className="edit-keys-btn" onClick={toggleEditKeysModal}>{t('app.admin.invoices.payment.edit_keys')}</FabButton>
|
||||
<FabModal title={t('app.admin.invoices.payment.payzen.payzen_keys')}
|
||||
isOpen={openEditModal}
|
||||
toggleModal={toggleEditKeysModal}
|
||||
width={ModalSize.medium}
|
||||
confirmButton={t('app.admin.invoices.payment.payzen.update_button')}
|
||||
onConfirm={handleUpdateKeys}
|
||||
preventConfirm={preventConfirm}
|
||||
closeButton>
|
||||
{errors && <span>{errors}</span>}
|
||||
<PayZenKeysForm onValidKeys={handleValidPayZenKeys} />
|
||||
</FabModal>
|
||||
<FabButton className="edit-keys-btn" onClick={handleKeysUpdate}>{t('app.admin.invoices.payment.edit_keys')}</FabButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,12 +81,12 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
|
||||
}
|
||||
|
||||
|
||||
const PayzenSettingsWrapper: React.FC<PayzenSettingsProps> = ({}) => {
|
||||
const PayzenSettingsWrapper: React.FC<PayzenSettingsProps> = ({ onEditKeys }) => {
|
||||
return (
|
||||
<Loader>
|
||||
<PayzenSettings />
|
||||
<PayzenSettings onEditKeys={onEditKeys} />
|
||||
</Loader>
|
||||
);
|
||||
}
|
||||
|
||||
Application.Components.component('payzenSettings', react2angular(PayzenSettingsWrapper));
|
||||
Application.Components.component('payzenSettings', react2angular(PayzenSettingsWrapper, ['onEditKeys']));
|
||||
|
||||
@ -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
|
||||
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) {
|
||||
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) {
|
||||
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 <p>, <span>, ...).
|
||||
* The supported tags are <b>, <u>, <i> and <br>.
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button class="btn btn-default m-t-lg" ng-click="requireStripeKeys(allSettings.online_payment_module)" translate>{{ 'app.admin.invoices.payment.edit_keys' }}</button>
|
||||
<button class="btn btn-default m-t-lg" ng-click="selectPaymentGateway(allSettings.online_payment_module)" translate>{{ 'app.admin.invoices.payment.edit_keys' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t" ng-show="allSettings.online_payment_module === 'true' && allSettings.payment_gateway === 'stripe'">
|
||||
@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t" ng-show="allSettings.online_payment_module === 'true' && allSettings.payment_gateway === 'payzen'">
|
||||
<payzen-settings />
|
||||
<payzen-settings on-edit-keys="selectPaymentGateway" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user