Merge pull request #883 from ubavic/fix/bill_count_validation_error_missing
fix: add validation errors to the update wizard
This commit is contained in:
commit
82f1eaa87c
2 changed files with 19 additions and 4 deletions
|
|
@ -76,7 +76,7 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
|
||||||
{
|
{
|
||||||
type: 'cashbox',
|
type: 'cashbox',
|
||||||
schema: Yup.object().shape({
|
schema: Yup.object().shape({
|
||||||
wasCashboxEmptied: Yup.string().required()
|
wasCashboxEmptied: Yup.string().required('Select one option.')
|
||||||
}),
|
}),
|
||||||
cashoutRequired: false
|
cashoutRequired: false
|
||||||
},
|
},
|
||||||
|
|
@ -84,6 +84,7 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
|
||||||
type: 'cassette 1',
|
type: 'cassette 1',
|
||||||
schema: Yup.object().shape({
|
schema: Yup.object().shape({
|
||||||
cassette1Count: Yup.number()
|
cassette1Count: Yup.number()
|
||||||
|
.label('Bill count')
|
||||||
.required()
|
.required()
|
||||||
.min(0)
|
.min(0)
|
||||||
.max(CASHBOX_DEFAULT_CAPACITY)
|
.max(CASHBOX_DEFAULT_CAPACITY)
|
||||||
|
|
@ -94,6 +95,7 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
|
||||||
type: 'cassette 2',
|
type: 'cassette 2',
|
||||||
schema: Yup.object().shape({
|
schema: Yup.object().shape({
|
||||||
cassette2Count: Yup.number()
|
cassette2Count: Yup.number()
|
||||||
|
.label('Bill count')
|
||||||
.required()
|
.required()
|
||||||
.min(0)
|
.min(0)
|
||||||
.max(CASHBOX_DEFAULT_CAPACITY)
|
.max(CASHBOX_DEFAULT_CAPACITY)
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import cashbox from 'src/styling/icons/cassettes/acceptor-left.svg'
|
||||||
import cassetteOne from 'src/styling/icons/cassettes/dispenser-1.svg'
|
import cassetteOne from 'src/styling/icons/cassettes/dispenser-1.svg'
|
||||||
import cassetteTwo from 'src/styling/icons/cassettes/dispenser-2.svg'
|
import cassetteTwo from 'src/styling/icons/cassettes/dispenser-2.svg'
|
||||||
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
|
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
|
||||||
import { comet } from 'src/styling/variables'
|
import { comet, errorColor } from 'src/styling/variables'
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
content: {
|
content: {
|
||||||
|
|
@ -83,6 +83,9 @@ const styles = {
|
||||||
},
|
},
|
||||||
fiatTotal: {
|
fiatTotal: {
|
||||||
color: comet
|
color: comet
|
||||||
|
},
|
||||||
|
errorMessage: {
|
||||||
|
color: errorColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -142,7 +145,7 @@ const WizardStep = ({
|
||||||
initialValues={{ wasCashboxEmptied: '' }}
|
initialValues={{ wasCashboxEmptied: '' }}
|
||||||
enableReinitialize
|
enableReinitialize
|
||||||
validationSchema={steps[step - 1].schema}>
|
validationSchema={steps[step - 1].schema}>
|
||||||
{({ values }) => (
|
{({ values, errors }) => (
|
||||||
<Form>
|
<Form>
|
||||||
<div
|
<div
|
||||||
className={classnames(classes.horizontalAlign, classes.form)}>
|
className={classnames(classes.horizontalAlign, classes.form)}>
|
||||||
|
|
@ -163,6 +166,11 @@ const WizardStep = ({
|
||||||
options={stepOneRadioOptions}
|
options={stepOneRadioOptions}
|
||||||
className={classes.horizontalAlign}
|
className={classes.horizontalAlign}
|
||||||
/>
|
/>
|
||||||
|
{errors.wasCashboxEmptied && (
|
||||||
|
<div className={classes.errorMessage}>
|
||||||
|
{errors.wasCashboxEmptied}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div
|
<div
|
||||||
className={classnames(
|
className={classnames(
|
||||||
classes.horizontalAlign,
|
classes.horizontalAlign,
|
||||||
|
|
@ -205,7 +213,7 @@ const WizardStep = ({
|
||||||
initialValues={{ cassette1Count: '', cassette2Count: '' }}
|
initialValues={{ cassette1Count: '', cassette2Count: '' }}
|
||||||
enableReinitialize
|
enableReinitialize
|
||||||
validationSchema={steps[step - 1].schema}>
|
validationSchema={steps[step - 1].schema}>
|
||||||
{({ values }) => (
|
{({ values, errors }) => (
|
||||||
<Form>
|
<Form>
|
||||||
<div
|
<div
|
||||||
className={classnames(classes.horizontalAlign, classes.form)}>
|
className={classnames(classes.horizontalAlign, classes.form)}>
|
||||||
|
|
@ -269,6 +277,11 @@ const WizardStep = ({
|
||||||
cassetteInfo.denomination}{' '}
|
cassetteInfo.denomination}{' '}
|
||||||
{fiatCurrency}
|
{fiatCurrency}
|
||||||
</P>
|
</P>
|
||||||
|
<P className={classes.errorMessage}>
|
||||||
|
{step === 2
|
||||||
|
? errors.cassette1Count
|
||||||
|
: errors.cassette2Count}
|
||||||
|
</P>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue