fix: add validation errors to the update wizard

new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js

@@ -72,7 +72,7 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
     {
       type: 'cashbox',
       schema: Yup.object().shape({
-        wasCashboxEmptied: Yup.string().required()
+        wasCashboxEmptied: Yup.string().required('Select one option.')
       }),
       cashoutRequired: false
     },
@@ -80,9 +80,15 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
       type: 'cassette 1',
       schema: Yup.object().shape({
         cassette1Count: Yup.number()
-          .required()
-          .min(0)
-          .max(CASHBOX_DEFAULT_CAPACITY)
+          .required('Bill count is a required.')
+          .min(
+            0,
+            ({ min }) => `Bill count must be greater than or equal to ${min}.`
+          )
+          .max(
+            CASHBOX_DEFAULT_CAPACITY,
+            ({ max }) => `Bill count must be less than or equal to ${max}.`
+          )
       }),
       cashoutRequired: true
     },
@@ -90,9 +96,15 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
       type: 'cassette 2',
       schema: Yup.object().shape({
         cassette2Count: Yup.number()
-          .required()
-          .min(0)
-          .max(CASHBOX_DEFAULT_CAPACITY)
+          .required('Bill count is a required.')
+          .min(
+            0,
+            ({ min }) => `Bill count must be greater than or equal to ${min}.`
+          )
+          .max(
+            CASHBOX_DEFAULT_CAPACITY,
+            ({ max }) => `Bill count must be less than or equal to ${max}.`
+          )
       }),
       cashoutRequired: true
     }

new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js

@@ -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 cassetteTwo from 'src/styling/icons/cassettes/dispenser-2.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 = {
   content: {
@@ -83,6 +83,9 @@ const styles = {
   },
   fiatTotal: {
     color: comet
+  },
+  errorMessage: {
+    color: errorColor
   }
 }
 
@@ -142,7 +145,7 @@ const WizardStep = ({
           initialValues={{ wasCashboxEmptied: '' }}
           enableReinitialize
           validationSchema={steps[step - 1].schema}>
-          {({ values }) => (
+          {({ values, errors }) => (
             <Form>
               <div
                 className={classnames(classes.horizontalAlign, classes.form)}>
@@ -163,6 +166,11 @@ const WizardStep = ({
                       options={stepOneRadioOptions}
                       className={classes.horizontalAlign}
                     />
+                    {errors.wasCashboxEmptied && (
+                      <div className={classes.errorMessage}>
+                        {errors.wasCashboxEmptied}
+                      </div>
+                    )}
                     <div
                       className={classnames(
                         classes.horizontalAlign,
@@ -205,7 +213,7 @@ const WizardStep = ({
           initialValues={{ cassette1Count: '', cassette2Count: '' }}
           enableReinitialize
           validationSchema={steps[step - 1].schema}>
-          {({ values }) => (
+          {({ values, errors }) => (
             <Form>
               <div
                 className={classnames(classes.horizontalAlign, classes.form)}>
@@ -269,6 +277,11 @@ const WizardStep = ({
                           cassetteInfo.denomination}{' '}
                       {fiatCurrency}
                     </P>
+                    <P className={classes.errorMessage}>
+                      {step === 2
+                        ? errors.cassette1Count
+                        : errors.cassette2Count}
+                    </P>
                   </div>
                 </div>
               </div>