feat: cashbox on notifications

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js

@@ -17,7 +17,8 @@ import styles from './FiatBalanceAlerts.styles.js'
 
 const useStyles = makeStyles(styles)
 
-const NAME = 'fiatBalanceAlerts'
+const CASH_IN_KEY = 'fiatBalanceAlertsCashIn'
+const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut'
 const DEFAULT_NUMBER_OF_CASSETTES = 2
 
 const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
@@ -36,9 +37,13 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
     DEFAULT_NUMBER_OF_CASSETTES
   )
 
-  const editing = isEditing(NAME)
-
   const schema = Yup.object().shape({
+    fillingPercentageCashbox: Yup.number()
+      .transform(transformNumber)
+      .integer()
+      .min(min)
+      .max(max)
+      .nullable(),
     fillingPercentageCassette1: Yup.number()
       .transform(transformNumber)
       .integer()
@@ -71,6 +76,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
       validateOnChange={false}
       enableReinitialize
       initialValues={{
+        fillingPercentageCashbox: data?.fillingPercentageCashbox ?? '',
         fillingPercentageCassette1: data?.fillingPercentageCassette1 ?? '',
         fillingPercentageCassette2: data?.fillingPercentageCassette2 ?? '',
         fillingPercentageCassette3: data?.fillingPercentageCassette3 ?? '',
@@ -79,16 +85,43 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
       validationSchema={schema}
       onSubmit={it => save(section, schema.cast(it))}
       onReset={() => {
-        setEditing(NAME, false)
+        setEditing(CASH_IN_KEY, false)
+        setEditing(CASH_OUT_KEY, false)
       }}>
       {({ values }) => (
+        <>
+          <Form className={classes.form}>
+            <PromptWhenDirty />
+            <Header
+              title="Cash box (Full)"
+              editing={isEditing(CASH_IN_KEY)}
+              disabled={isDisabled(CASH_IN_KEY)}
+              setEditing={it => setEditing(CASH_IN_KEY, it)}
+            />
+            <div className={classes.wrapper}>
+              <div className={classes.first}>
+                <div className={classes.row}>
+                  <div className={classes.col2}>
+                    <EditableNumber
+                      label="Alert me over"
+                      name="fillingPercentageCashbox"
+                      editing={isEditing(CASH_IN_KEY)}
+                      displayValue={x => (x === '' ? '-' : x)}
+                      decoration="%"
+                      width={fieldWidth}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Form>
           <Form className={classes.form}>
             <PromptWhenDirty />
             <Header
               title="Cash out (Empty)"
-            editing={editing}
+              editing={isEditing(CASH_OUT_KEY)}
-            disabled={isDisabled(NAME)}
+              disabled={isDisabled(CASH_OUT_KEY)}
-            setEditing={it => setEditing(NAME, it)}
+              setEditing={it => setEditing(CASH_OUT_KEY, it)}
             />
             <div className={classes.wrapper}>
               {R.map(
@@ -112,7 +145,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                         <EditableNumber
                           label="Alert me under"
                           name={`fillingPercentageCassette${it + 1}`}
-                        editing={editing}
+                          editing={isEditing(CASH_OUT_KEY)}
                           displayValue={x => (x === '' ? '-' : x)}
                           decoration="%"
                           width={fieldWidth}
@@ -125,6 +158,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
               )}
             </div>
           </Form>
+        </>
       )}
     </Formik>
   )