diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js index 1fbd83cc..6cc6864e 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js @@ -21,10 +21,11 @@ const Cashbox = ({ labelClassName, applyColorVariant, applyFiatBalanceAlertsStyling, - omitInnerPercentage + omitInnerPercentage, + isLow }) => { - const classes = cashboxClasses({ percent, cashOut, applyColorVariant }) - const threshold = 51 + const classes = cashboxClasses({ percent, cashOut, applyColorVariant, isLow }) + const ltHalf = percent <= 51 const showCashBox = { [classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling, @@ -34,12 +35,12 @@ const Cashbox = ({ return (
- {!omitInnerPercentage && percent <= threshold && ( + {!omitInnerPercentage && ltHalf && ( {percent.toFixed(0)}% )}
- {!omitInnerPercentage && percent > threshold && ( + {!omitInnerPercentage && !ltHalf && ( {percent.toFixed(0)}% )}
@@ -115,15 +116,22 @@ const CashOut = ({ currency, notes, className, - editingMode = false + editingMode = false, + threshold }) => { const percent = (100 * notes) / capacity + const isLow = percent < threshold const classes = gridClasses() return ( <>
- +
{!editingMode && (
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 cebc8b4f..5556af4c 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js @@ -11,10 +11,9 @@ const colors = { } } -const colorPicker = ({ percent, cashOut, applyColorVariant }) => { - if (applyColorVariant) return colors[cashOut ? 'cashOut' : 'cashIn'].full +const colorPicker = ({ cashOut, applyColorVariant, isLow }) => { return colors[cashOut ? 'cashOut' : 'cashIn'][ - percent >= 50 ? 'full' : 'empty' + applyColorVariant || !isLow ? 'full' : 'empty' ] } diff --git a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js index 5002b0fb..80e82e77 100644 --- a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js +++ b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js @@ -15,7 +15,7 @@ const useStyles = makeStyles({ } }) -const CashCassetteInput = memo(({ decimalPlaces, ...props }) => { +const CashCassetteInput = memo(({ decimalPlaces, threshold, ...props }) => { const classes = useStyles() const { name, onChange, onBlur, value } = props.field const { touched, errors } = props.form @@ -27,6 +27,7 @@ const CashCassetteInput = memo(({ decimalPlaces, ...props }) => { className={classes.cashCassette} notes={notes} editingMode={true} + threshold={threshold} /> { const machines = R.path(['machines'])(data) ?? [] const config = R.path(['config'])(data) ?? {} + const fillingPercentageSettings = fromNamespace('notifications', config) const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, { refetchQueries: () => ['getData'] }) @@ -198,11 +199,13 @@ const CashCassettes = () => { denomination={getCashoutSettings(id)?.top} currency={{ code: fiatCurrency }} notes={value} + threshold={fillingPercentageSettings.fillingPercentageCassette1} /> ), input: CashCassetteInput, inputProps: { - decimalPlaces: 0 + decimalPlaces: 0, + threshold: fillingPercentageSettings.fillingPercentageCassette1 } }, { @@ -217,12 +220,14 @@ const CashCassettes = () => { denomination={getCashoutSettings(id)?.bottom} currency={{ code: fiatCurrency }} notes={value} + threshold={fillingPercentageSettings.fillingPercentageCassette2} /> ) }, input: CashCassetteInput, inputProps: { - decimalPlaces: 0 + decimalPlaces: 0, + threshold: fillingPercentageSettings.fillingPercentageCassette2 } }, {