feat: error handling on forms
This commit is contained in:
parent
a6bb503b95
commit
7d5d963685
20 changed files with 119 additions and 71 deletions
|
|
@ -165,7 +165,7 @@ const groupStriped = elements => {
|
|||
}
|
||||
|
||||
const ERow = ({ editing, disabled, lastOfGroup }) => {
|
||||
const { errors } = useFormikContext()
|
||||
const { touched, errors, values } = useFormikContext()
|
||||
const {
|
||||
elements,
|
||||
enableEdit,
|
||||
|
|
@ -177,7 +177,6 @@ const ERow = ({ editing, disabled, lastOfGroup }) => {
|
|||
|
||||
const classes = useStyles()
|
||||
|
||||
const { values } = useFormikContext()
|
||||
const shouldStripe = stripeWhen && stripeWhen(values) && !editing
|
||||
|
||||
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
||||
|
|
@ -199,12 +198,14 @@ const ERow = ({ editing, disabled, lastOfGroup }) => {
|
|||
[classes.lastOfGroup]: lastOfGroup
|
||||
}
|
||||
|
||||
const touchedErrors = R.pick(R.keys(touched), errors)
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className={classnames(classNames)}
|
||||
size={rowSize}
|
||||
error={errors && errors.length}
|
||||
errorMessage={errors && errors.toString()}>
|
||||
error={touchedErrors && R.keys(touchedErrors).length > 0}
|
||||
errorMessage={touchedErrors && R.values(touchedErrors).join(', ')}>
|
||||
{innerElements.map((it, idx) => {
|
||||
return (
|
||||
<ECol
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ import {
|
|||
spacer,
|
||||
white,
|
||||
tableDoubleHeaderHeight,
|
||||
offColor
|
||||
offColor,
|
||||
errorColor
|
||||
} from 'src/styling/variables'
|
||||
|
||||
const { tl2, p, label1 } = typographyStyles
|
||||
|
|
@ -97,5 +98,9 @@ export default {
|
|||
},
|
||||
actionCol: {
|
||||
marginLeft: 'auto'
|
||||
},
|
||||
errorContent: {
|
||||
padding: [[12, 0, 12, 24]],
|
||||
color: errorColor
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const initialValues = {
|
|||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.required()
|
||||
.max(50, 'Too long')
|
||||
.max(50)
|
||||
})
|
||||
|
||||
const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
|
||||
|
|
|
|||
|
|
@ -5,15 +5,18 @@ import { NumberInput } from 'src/components/inputs/formik'
|
|||
const currencyMax = 999999999
|
||||
const DenominationsSchema = Yup.object().shape({
|
||||
top: Yup.number()
|
||||
.required('Required')
|
||||
.label('Cassette 1 (Top)')
|
||||
.required()
|
||||
.min(0)
|
||||
.max(currencyMax),
|
||||
bottom: Yup.number()
|
||||
.required('Required')
|
||||
.label('Cassette 2 (Bottom)')
|
||||
.required()
|
||||
.min(0)
|
||||
.max(currencyMax),
|
||||
zeroConfLimit: Yup.number()
|
||||
.required('Required')
|
||||
.label('0-conf Limit')
|
||||
.required()
|
||||
.min(0)
|
||||
.max(currencyMax)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -204,42 +204,55 @@ const percentMax = 100
|
|||
const currencyMax = 9999999
|
||||
const schema = Yup.object().shape({
|
||||
cashIn: Yup.number()
|
||||
.label('Cash-in')
|
||||
.min(0)
|
||||
.max(percentMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
cashOut: Yup.number()
|
||||
.label('Cash-out')
|
||||
.min(0)
|
||||
.max(percentMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
fixedFee: Yup.number()
|
||||
.label('Fixed Fee')
|
||||
.min(0)
|
||||
.max(currencyMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
minimumTx: Yup.number()
|
||||
.label('Minimum Tx')
|
||||
.min(0)
|
||||
.max(currencyMax)
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
|
||||
const OverridesSchema = Yup.object().shape({
|
||||
machine: Yup.string().required('Required'),
|
||||
cryptoCurrencies: Yup.array().required('Required'),
|
||||
machine: Yup.string()
|
||||
.nullable()
|
||||
.label('Machine')
|
||||
.required(),
|
||||
cryptoCurrencies: Yup.array()
|
||||
.label('Crypto Currencies')
|
||||
.required(),
|
||||
cashIn: Yup.number()
|
||||
.label('Cash-in')
|
||||
.min(0)
|
||||
.max(percentMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
cashOut: Yup.number()
|
||||
.label('Cash-out')
|
||||
.min(0)
|
||||
.max(percentMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
fixedFee: Yup.number()
|
||||
.label('Fixed Fee')
|
||||
.min(0)
|
||||
.max(currencyMax)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
minimumTx: Yup.number()
|
||||
.label('Minimum Tx')
|
||||
.min(0)
|
||||
.max(currencyMax)
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
|
||||
const defaults = {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ import * as Yup from 'yup'
|
|||
|
||||
import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
|
||||
|
||||
const LANGUAGE_SELECTION_LIMIT = 4
|
||||
|
||||
const getFields = (getData, names, configureCoin, auxElements = []) => {
|
||||
return R.filter(
|
||||
it => R.includes(it.name, names),
|
||||
|
|
@ -92,8 +90,7 @@ const allFields = (getData, configureCoin, auxElements = []) => {
|
|||
options: languageData,
|
||||
valueProp: 'code',
|
||||
getLabel: R.path(['display']),
|
||||
multiple: true,
|
||||
limit: LANGUAGE_SELECTION_LIMIT
|
||||
multiple: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -137,17 +134,34 @@ const overrides = (auxData, auxElements, configureCoin) => {
|
|||
}
|
||||
|
||||
const LocaleSchema = Yup.object().shape({
|
||||
country: Yup.string().required('Required'),
|
||||
fiatCurrency: Yup.string().required('Required'),
|
||||
languages: Yup.array().required('Required'),
|
||||
cryptoCurrencies: Yup.array().required('Required')
|
||||
country: Yup.string()
|
||||
.label('Country')
|
||||
.required(),
|
||||
fiatCurrency: Yup.string()
|
||||
.label('Fiat Currency')
|
||||
.required(),
|
||||
languages: Yup.array()
|
||||
.label('Languages')
|
||||
.required()
|
||||
.max(4),
|
||||
cryptoCurrencies: Yup.array()
|
||||
.label('Crypto Currencies')
|
||||
.required()
|
||||
})
|
||||
|
||||
const OverridesSchema = Yup.object().shape({
|
||||
machine: Yup.string().required('Required'),
|
||||
country: Yup.string().required('Required'),
|
||||
languages: Yup.array().required('Required'),
|
||||
cryptoCurrencies: Yup.array().required('Required')
|
||||
machine: Yup.string()
|
||||
.label('Machine')
|
||||
.required(),
|
||||
country: Yup.string()
|
||||
.label('Country')
|
||||
.required(),
|
||||
languages: Yup.array()
|
||||
.label('Languages')
|
||||
.required(),
|
||||
cryptoCurrencies: Yup.array()
|
||||
.label('Crypto Currencies')
|
||||
.required()
|
||||
})
|
||||
|
||||
const localeDefaults = {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,16 @@ import styles from './CashCassettes.styles.js'
|
|||
const useStyles = makeStyles(styles)
|
||||
|
||||
const ValidationSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Required'),
|
||||
name: Yup.string().required(),
|
||||
cassette1: Yup.number()
|
||||
.required('Required')
|
||||
.label('Cassette 1 (top)')
|
||||
.required()
|
||||
.integer()
|
||||
.min(0)
|
||||
.max(500),
|
||||
cassette2: Yup.number()
|
||||
.required('Required')
|
||||
.label('Cassette 2 (bottom)')
|
||||
.required()
|
||||
.integer()
|
||||
.min(0)
|
||||
.max(500)
|
||||
|
|
|
|||
|
|
@ -56,8 +56,12 @@ const CryptoBalanceOverrides = ({ section }) => {
|
|||
const currencyMax = 9999999
|
||||
const validationSchema = Yup.object().shape(
|
||||
{
|
||||
[CRYPTOCURRENCY_KEY]: Yup.string().required(),
|
||||
[CRYPTOCURRENCY_KEY]: Yup.string()
|
||||
.label('Cryptocurrency')
|
||||
.nullable()
|
||||
.required(),
|
||||
[LOW_BALANCE_KEY]: Yup.number()
|
||||
.label('Low Balance')
|
||||
.when(HIGH_BALANCE_KEY, {
|
||||
is: HIGH_BALANCE_KEY => !HIGH_BALANCE_KEY,
|
||||
then: Yup.number().required()
|
||||
|
|
@ -68,6 +72,7 @@ const CryptoBalanceOverrides = ({ section }) => {
|
|||
.max(currencyMax)
|
||||
.nullable(),
|
||||
[HIGH_BALANCE_KEY]: Yup.number()
|
||||
.label('High Balance')
|
||||
.when(LOW_BALANCE_KEY, {
|
||||
is: LOW_BALANCE_KEY => !LOW_BALANCE_KEY,
|
||||
then: Yup.number().required()
|
||||
|
|
|
|||
|
|
@ -43,8 +43,12 @@ const FiatBalanceOverrides = ({ section }) => {
|
|||
const notesMax = 9999999
|
||||
const validationSchema = Yup.object().shape(
|
||||
{
|
||||
[MACHINE_KEY]: Yup.string().required(),
|
||||
[MACHINE_KEY]: Yup.string()
|
||||
.label('Machine')
|
||||
.nullable()
|
||||
.required(),
|
||||
[CASSETTE_1_KEY]: Yup.number()
|
||||
.label('Cassette 1 (top)')
|
||||
.when(CASSETTE_2_KEY, {
|
||||
is: CASSETTE_2_KEY => !CASSETTE_2_KEY,
|
||||
then: Yup.number().required()
|
||||
|
|
@ -55,6 +59,7 @@ const FiatBalanceOverrides = ({ section }) => {
|
|||
.max(notesMax)
|
||||
.nullable(),
|
||||
[CASSETTE_2_KEY]: Yup.number()
|
||||
.label('Cassette 1 (bottom)')
|
||||
.when(CASSETTE_1_KEY, {
|
||||
is: CASSETTE_1_KEY => !CASSETTE_1_KEY,
|
||||
then: Yup.number().required()
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
token: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
BTCWalletId: Yup.string().max(100, 'Too long'),
|
||||
BTCWalletPassphrase: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
|
|
@ -121,6 +121,6 @@ export default {
|
|||
}),
|
||||
environment: Yup.string()
|
||||
.matches(/(prod|test)/)
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
clientId: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
key: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
secret: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
token: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
confidenceFactor: Yup.number()
|
||||
.integer('Please input a positive integer')
|
||||
.positive('Please input a positive integer')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
apiKey: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
apiSecret: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
endpoint: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,15 +36,15 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
userId: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
walletId: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
clientKey: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
clientSecret: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
apiKey: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
privateKey: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,17 +33,17 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
apiKey: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
domain: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
fromEmail: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.email('Please input a valid email address')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
toEmail: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.email('Please input a valid email address')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,15 +41,15 @@ export default code => ({
|
|||
validationSchema: Yup.object().shape({
|
||||
token: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
environment: Yup.string()
|
||||
.matches(/(prod|test)/)
|
||||
.required('Required'),
|
||||
.required(),
|
||||
[`${code}WalletId`]: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
[`${code}WalletPassphrase`]: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -34,15 +34,15 @@ export default {
|
|||
validationSchema: Yup.object().shape({
|
||||
accountSid: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
authToken: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
fromNumber: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required'),
|
||||
.required(),
|
||||
toNumber: Yup.string()
|
||||
.max(100, 'Too long')
|
||||
.required('Required')
|
||||
.required()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,14 +68,14 @@ const useStyles = makeStyles({
|
|||
}
|
||||
})
|
||||
|
||||
// const direction = Yup.string().required('Required')
|
||||
const triggerType = Yup.string().required('Required')
|
||||
// const direction = Yup.string().required()
|
||||
const triggerType = Yup.string().required()
|
||||
const threshold = Yup.object().shape({
|
||||
threshold: Yup.number(),
|
||||
thresholdDays: Yup.number()
|
||||
})
|
||||
const requirement = Yup.object().shape({
|
||||
requirement: Yup.string().required('Required'),
|
||||
requirement: Yup.string().required(),
|
||||
suspensionDays: Yup.number()
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ const filterClass = type => R.filter(it => it.class === type)
|
|||
const filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos))
|
||||
|
||||
const WalletSchema = Yup.object().shape({
|
||||
ticker: Yup.string().required('Required'),
|
||||
wallet: Yup.string().required('Required'),
|
||||
exchange: Yup.string().required('Required'),
|
||||
zeroConf: Yup.string().required('Required')
|
||||
ticker: Yup.string().required(),
|
||||
wallet: Yup.string().required(),
|
||||
exchange: Yup.string().required(),
|
||||
zeroConf: Yup.string().required()
|
||||
})
|
||||
|
||||
const getElements = (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue