feat: notifications rework

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

@@ -0,0 +1,83 @@
+import { makeStyles } from '@material-ui/core'
+import { Form, Formik } from 'formik'
+import React, { useContext } from 'react'
+import * as Yup from 'yup'
+
+import { TL2 } from 'src/components/typography'
+
+import NotificationsCtx from '../NotificationsContext'
+import Header from '../components/EditHeader'
+import EditableNumber from '../components/EditableNumber'
+
+import styles from './FiatBalanceAlerts.styles.js'
+
+const useStyles = makeStyles(styles)
+
+const schema = Yup.object().shape({
+  fiatBalanceCassette1: Yup.number()
+    .integer()
+    .min(0)
+    .required(),
+  fiatBalanceCassette2: Yup.number()
+    .integer()
+    .min(0)
+    .required()
+})
+
+const NAME = 'fiatBalanceAlerts'
+
+const FiatBalance = ({ section }) => {
+  const { isEditing, isDisabled, setEditing, data, save } = useContext(
+    NotificationsCtx
+  )
+  const classes = useStyles()
+
+  const editing = isEditing(NAME)
+
+  return (
+    <Formik
+      enableReinitialize
+      initialValues={{
+        fiatBalanceCassette1: data?.fiatBalanceCassette1 ?? '',
+        fiatBalanceCassette2: data?.fiatBalanceCassette2 ?? ''
+      }}
+      validationSchema={schema}
+      onSubmit={it => save(section, it)}
+      onReset={() => {
+        setEditing(NAME, false)
+      }}>
+      <Form className={classes.form}>
+        <Header
+          title="Cash out (Empty)"
+          editing={editing}
+          disabled={isDisabled(NAME)}
+          setEditing={it => setEditing(NAME, it)}
+        />
+        <div className={classes.wrapper}>
+          <div className={classes.first}>
+            <TL2 className={classes.title}>Cassette 1 (Top)</TL2>
+            <EditableNumber
+              label="Alert me under"
+              name="fiatBalanceCassette1"
+              editing={editing}
+              displayValue={x => (x === '' ? '-' : x)}
+              decoration="notes"
+            />
+          </div>
+          <div>
+            <TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
+            <EditableNumber
+              label="Alert me under"
+              name="fiatBalanceCassette2"
+              editing={editing}
+              displayValue={x => (x === '' ? '-' : x)}
+              decoration="notes"
+            />
+          </div>
+        </div>
+      </Form>
+    </Formik>
+  )
+}
+
+export default FiatBalance