diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
index d87ee123..2dff1eb2 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
@@ -18,7 +18,7 @@ const cashboxStyles = {
cashbox: {
borderColor: colorPicker,
backgroundColor: colorPicker,
- height: 34,
+ height: 118,
width: 80,
border: '2px solid',
textAlign: 'end',
diff --git a/new-lamassu-admin/src/pages/Notifications/Notifications.js b/new-lamassu-admin/src/pages/Notifications/Notifications.js
index c2b54edd..454aba78 100644
--- a/new-lamassu-admin/src/pages/Notifications/Notifications.js
+++ b/new-lamassu-admin/src/pages/Notifications/Notifications.js
@@ -36,6 +36,8 @@ const SAVE_CONFIG = gql`
}
`
+const FIELDS_WIDTH = 130
+
const Notifications = ({ name: SCREEN_KEY }) => {
const [section, setSection] = useState(null)
const [error, setError] = useState(null)
@@ -97,19 +99,19 @@ const Notifications = ({ name: SCREEN_KEY }) => {
)
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js
index b2739d74..270a9edb 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js
@@ -11,7 +11,7 @@ const HIGH_BALANCE_KEY = 'cryptoHighBalance'
const useStyles = makeStyles(styles)
-const CryptoBalanceAlerts = ({ section }) => {
+const CryptoBalanceAlerts = ({ section, fieldWidth }) => {
const classes = useStyles()
const {
@@ -37,6 +37,7 @@ const CryptoBalanceAlerts = ({ section }) => {
editing={isEditing(LOW_BALANCE_KEY)}
disabled={isDisabled(LOW_BALANCE_KEY)}
setEditing={it => setEditing(LOW_BALANCE_KEY, it)}
+ width={fieldWidth}
/>
@@ -53,6 +54,7 @@ const CryptoBalanceAlerts = ({ section }) => {
editing={isEditing(HIGH_BALANCE_KEY)}
disabled={isDisabled(HIGH_BALANCE_KEY)}
setEditing={it => setEditing(HIGH_BALANCE_KEY, it)}
+ width={fieldWidth}
/>
)
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
index 769ff9fd..a7ddf3b6 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
@@ -5,6 +5,7 @@ import * as Yup from 'yup'
import { TL2 } from 'src/components/typography'
+import { Cashbox } from '../../../components/inputs/cashbox/Cashbox'
import NotificationsCtx from '../NotificationsContext'
import Header from '../components/EditHeader'
import EditableNumber from '../components/EditableNumber'
@@ -13,20 +14,13 @@ 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 FiatBalance = ({
+ section,
+ max = Number.MAX_SAFE_INTEGER,
+ fieldWidth = 80
+}) => {
const { isEditing, isDisabled, setEditing, data, save } = useContext(
NotificationsCtx
)
@@ -34,6 +28,27 @@ const FiatBalance = ({ section }) => {
const editing = isEditing(NAME)
+ const schema = Yup.object().shape({
+ fiatBalanceCassette1: Yup.number()
+ .integer()
+ .min(0)
+ .max(max)
+ .required(),
+ fiatBalanceCassette2: Yup.number()
+ .integer()
+ .min(0)
+ .max(max)
+ .required()
+ })
+
+ const fiatBalanceCassette1Percent = data?.fiatBalanceCassette1
+ ? (100 * data?.fiatBalanceCassette1) / max
+ : 0
+
+ const fiatBalanceCassette2Percent = data?.fiatBalanceCassette2
+ ? (100 * data?.fiatBalanceCassette2) / max
+ : 0
+
return (
{
/>
-
Cassette 1 (Top)
-
(x === '' ? '-' : x)}
- decoration="notes"
- />
+
+
+
+ Cassette 1 (Top)
+ (x === '' ? '-' : x)}
+ decoration="notes"
+ width={fieldWidth}
+ />
+
+
-
-
Cassette 2 (Bottom)
-
(x === '' ? '-' : x)}
- decoration="notes"
- />
+
+
+
+ Cassette 2 (Bottom)
+ (x === '' ? '-' : x)}
+ decoration="notes"
+ width={fieldWidth}
+ />
+
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
index e649ae30..e655567e 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js
@@ -6,9 +6,20 @@ export default {
marginBottom: 36
},
first: {
- width: 200
+ width: 236
},
title: {
marginTop: 0
+ },
+ row: {
+ width: 183,
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2,1fr)',
+ gridTemplateRows: '1fr',
+ gridColumnGap: 18,
+ gridRowGap: 0
+ },
+ col2: {
+ width: 136
}
}
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js
index 9d985a24..303fbc3d 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js
@@ -4,13 +4,14 @@ import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber'
const NAME = 'highValueTransaction'
-const TransactionAlerts = ({ section }) => {
+const TransactionAlerts = ({ section, fieldWidth }) => {
return (
)
}