From a88c5f2a9aa6c410d834bf23ad15c0d144f169a4 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Mon, 18 Oct 2021 14:40:47 +0200
Subject: [PATCH 1/2] fix: add validation errors to the update wizard

---
 .../src/pages/Maintenance/Wizard/Wizard.js    | 26 ++++++++++++++-----
 .../pages/Maintenance/Wizard/WizardStep.js    | 19 +++++++++++---
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js b/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js
index b925cbe6..0a02f39b 100644
--- a/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js
+++ b/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
     }
diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js
index 857f6a86..71909064 100644
--- a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js
+++ b/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>

From d4ae1c3ff2a6746448bf6bb569b8ed62f822d535 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Tue, 2 Nov 2021 19:23:45 +0100
Subject: [PATCH 2/2] fix: set up labels for YUP default messages

---
 .../src/pages/Maintenance/Wizard/Wizard.js    | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js b/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js
index 0a02f39b..355813a1 100644
--- a/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js
+++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/Wizard.js
@@ -80,15 +80,10 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
       type: 'cassette 1',
       schema: Yup.object().shape({
         cassette1Count: Yup.number()
-          .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}.`
-          )
+          .label('Bill count')
+          .required()
+          .min(0)
+          .max(CASHBOX_DEFAULT_CAPACITY)
       }),
       cashoutRequired: true
     },
@@ -96,15 +91,10 @@ const Wizard = ({ machine, cashoutSettings, locale, onClose, save, error }) => {
       type: 'cassette 2',
       schema: Yup.object().shape({
         cassette2Count: Yup.number()
-          .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}.`
-          )
+          .label('Bill count')
+          .required()
+          .min(0)
+          .max(CASHBOX_DEFAULT_CAPACITY)
       }),
       cashoutRequired: true
     }