fix: change color according to notification settings

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 (
     <div className={classnames(className, showCashBox)}>
       <div className={classnames(emptyPartClassName, classes.emptyPart)}>
-        {!omitInnerPercentage && percent <= threshold && (
+        {!omitInnerPercentage && ltHalf && (
           <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
         )}
       </div>
       <div className={classes.fullPart}>
-        {!omitInnerPercentage && percent > threshold && (
+        {!omitInnerPercentage && !ltHalf && (
           <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
         )}
       </div>
@@ -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 (
     <>
       <div className={classes.row}>
         <div className={classes.col}>
-          <Cashbox className={className} percent={percent} cashOut />
+          <Cashbox
+            className={className}
+            percent={percent}
+            cashOut
+            isLow={isLow}
+          />
         </div>
         {!editingMode && (
           <div className={classes.col2}>

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'
   ]
 }
 

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}
       />
       <NumberInput
         name={name}

new-lamassu-admin/src/pages/Maintenance/CashCassettes.js

@@ -113,6 +113,7 @@ const CashCassettes = () => {
 
   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
       }
     },
     {