1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-29 18:52:22 +01:00

validate payzen paramaters in the form

This commit is contained in:
Sylvain 2021-03-31 17:58:09 +02:00
parent 54c1a3cfd9
commit 69352c07df
7 changed files with 57 additions and 14 deletions

View File

@ -26,8 +26,8 @@ export const FabInput: React.FC<FabInputProps> = ({ id, onChange, value, icon, c
const [inputValue, setInputValue] = useState<any>(value);
useEffect(() => {
setInputValue(value);
if (value) {
setInputValue(value);
onChange(value);
}
}, [value]);

View File

@ -8,27 +8,29 @@ import { useTranslation } from 'react-i18next';
import SettingAPI from '../api/setting';
import { SettingName } from '../models/setting';
import { FabInput } from './fab-input';
import { enableMapSet } from 'immer';
import { useImmer } from 'use-immer';
enableMapSet();
interface PayZenKeysFormProps {
onValidKeys: (payZenSettings: Map<SettingName, string>) => void
}
const payZenSettings = [SettingName.PayZenUsername, SettingName.PayZenPassword, SettingName.PayZenEndpoint, SettingName.PayZenHmacKey, SettingName.PayZenPublicKey];
const payZenSettings: Array<SettingName> = [SettingName.PayZenUsername, SettingName.PayZenPassword, SettingName.PayZenEndpoint, SettingName.PayZenHmacKey, SettingName.PayZenPublicKey];
const payZenKeys = SettingAPI.query(payZenSettings);
const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys }) => {
const { t } = useTranslation('admin');
const defaultSettings: [SettingName, string][] = payZenSettings.map(name => [name, '']);
const [settings, setSettings] = useState<Map<SettingName, string>>(new Map(defaultSettings));
const [settings, updateSettings] = useImmer<Map<SettingName, string>>(new Map(payZenSettings.map(name => [name, ''])));
const [restApiAddOn, setRestApiAddOn] = useState<ReactNode>(null);
const [restApiAddOnClassName, setRestApiAddOnClassName] = useState<string>('');
const [publicKeyAddOn, setPublicKeyAddOn] = useState<ReactNode>(null);
const [publicKeyAddOnClassName, setPublicKeyAddOnClassName] = useState<string>('');
useEffect(() => {
setSettings(payZenKeys.read());
updateSettings(payZenKeys.read());
}, []);
useEffect(() => {
@ -38,7 +40,6 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
}
}, [publicKeyAddOnClassName, restApiAddOnClassName]);
/**
* Check if the inputted public key is valid and assign it to the settings if the key is valid
*/
@ -48,7 +49,7 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
setPublicKeyAddOnClassName('key-invalid');
return;
}
setSettings(new Map(settings).set(SettingName.PayZenPublicKey, key));
updateSettings(draft => draft.set(SettingName.PayZenPublicKey, key));
setPublicKeyAddOn(<i className="fa fa-check" />);
setPublicKeyAddOnClassName('key-valid');
}
@ -58,10 +59,22 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys })
*/
const testRestApi = (setting: SettingName.PayZenUsername | SettingName.PayZenPassword | SettingName.PayZenEndpoint | SettingName.PayZenHmacKey) => {
return (key: string) => {
updateSettings(draft => draft.set(setting, key));
let valid = true;
for (const settingKey of [SettingName.PayZenUsername, SettingName.PayZenPassword, SettingName.PayZenEndpoint, SettingName.PayZenHmacKey]) {
if (!settings.get(settingKey)) {
valid = false;
break;
}
}
if (valid) {
setRestApiAddOn(<i className="fa fa-check" />);
setRestApiAddOnClassName('key-valid');
}
// if (!key.match(/^sk_/)) {
setRestApiAddOn(<i className="fa fa-times" />);
setRestApiAddOnClassName('key-invalid');
return;
// setRestApiAddOn(<i className="fa fa-times" />);
// setRestApiAddOnClassName('key-invalid');
// return;
// }
// StripeAPI.listAllCharges(key).then(() => {
// setSecretKey(key);

View File

@ -78,6 +78,14 @@ const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, to
setPreventConfirmGateway(false);
}
/**
* Callback triggered when the embedded for has validated all the PayZen keys
*/
const handleValidPayZenKeys = (payZenKeys: Map<SettingName, string>): void => {
setGatewayConfig(payZenKeys);
setPreventConfirmGateway(false);
}
/**
* Send the new gateway settings to the API to save them
*/
@ -117,7 +125,7 @@ const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, to
<option value={Gateway.PayZen}>{t('app.admin.invoices.payment.gateway_modal.payzen')}</option>
</select>
{selectedGateway === Gateway.Stripe && <StripeKeysForm onValidKeys={handleValidStripeKeys} />}
{selectedGateway === Gateway.PayZen && <PayZenKeysForm onValidKeys={handleValidStripeKeys} />}
{selectedGateway === Gateway.PayZen && <PayZenKeysForm onValidKeys={handleValidPayZenKeys} />}
</FabModal>
);
};

View File

@ -2,7 +2,7 @@
* Form to set the stripe's public and private keys
*/
import React, { ReactNode, useEffect, useState } from 'react';
import React, { ReactNode, useEffect, useRef, useState } from 'react';
import { Loader } from './loader';
import { useTranslation } from 'react-i18next';
import SettingAPI from '../api/setting';
@ -20,6 +20,8 @@ const stripeKeys = SettingAPI.query([SettingName.StripePublicKey, SettingName.St
const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys }) => {
const { t } = useTranslation('admin');
const mounted = useRef(null);
const [publicKey, setPublicKey] = useState<string>('');
const [publicKeyAddOn, setPublicKeyAddOn] = useState<ReactNode>(null);
const [publicKeyAddOnClassName, setPublicKeyAddOnClassName] = useState<string>('');
@ -51,10 +53,14 @@ const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys })
return;
}
StripeAPI.createPIIToken(key, 'test').then(() => {
if (!mounted.current) return;
setPublicKey(key);
setPublicKeyAddOn(<i className="fa fa-check" />);
setPublicKeyAddOnClassName('key-valid');
}, reason => {
if (!mounted.current) return;
if (reason.response.status === 401) {
setPublicKeyAddOn(<i className="fa fa-times" />);
setPublicKeyAddOnClassName('key-invalid');
@ -72,10 +78,14 @@ const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ onValidKeys })
return;
}
StripeAPI.listAllCharges(key).then(() => {
if (!mounted.current) return;
setSecretKey(key);
setSecretKeyAddOn(<i className="fa fa-check" />);
setSecretKeyAddOnClassName('key-valid');
}, reason => {
if (!mounted.current) return;
if (reason.response.status === 401) {
setSecretKeyAddOn(<i className="fa fa-times" />);
setSecretKeyAddOnClassName('key-invalid');

View File

@ -34,7 +34,7 @@
display: block;
position: absolute;
top: 0;
right: -35px;
right: -40px;
font-size: 1em;
padding: 3px 12px;
font-weight: 400;

View File

@ -88,6 +88,7 @@
"i18next": "^19.8.3",
"i18next-http-backend": "^1.0.21",
"i18next-icu": "^1.4.2",
"immer": "^9.0.1",
"jasny-bootstrap": "3.1",
"jquery": ">=3.5.0",
"jquery-ujs": "^1.2.2",
@ -109,7 +110,8 @@
"twitter-fetcher": "^18.0.2",
"typescript": "^4.0.5",
"ui-select": "0.19",
"underscore": "1.7"
"underscore": "1.7",
"use-immer": "^0.5.1"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0",

View File

@ -4813,6 +4813,11 @@ ignore@^5.1.1:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.4.tgz#84b7b3dbe64552b6ef0eca99f6743dbec6d97adf"
integrity sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==
immer@^9.0.1:
version "9.0.1"
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.1.tgz#1116368e051f9a0fd188c5136b6efb74ed69c57f"
integrity sha512-7CCw1DSgr8kKYXTYOI1qMM/f5qxT5vIVMeGLDCDX8CSxsggr1Sjdoha4OhsP0AZ1UvWbyZlILHvLjaynuu02Mg==
import-cwd@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@ -9366,6 +9371,11 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
use-immer@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/use-immer/-/use-immer-0.5.1.tgz#3862ebbb194ebfe66b8eb221082c2fb2585f8fe1"
integrity sha512-Orb7PokM+jiLQfA1oJ3B3P7Guq0c2IxUHHmBpLeEMnJiz4ZOMlj9mkqq6D7iXJsnurRX0EOB134annf3RjEWHw==
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"