Merge pull request #912 from SiIky/fix/dCHZvkoj/low_cassette_colors/dev

fix: change color according to notification settings

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js

@@ -3,11 +3,8 @@ import classnames from 'classnames'
 import React from 'react'
 
 import Chip from 'src/components/Chip'
-import { Link } from 'src/components/buttons'
 import { Info2, Label1, Label2 } from 'src/components/typography'
 
-import TextInputFormik from '../base/TextInput'
-
 import { cashboxStyles, gridStyles } from './Cashbox.styles'
 
 const cashboxClasses = makeStyles(cashboxStyles)
@@ -21,10 +18,11 @@ const Cashbox = ({
   labelClassName,
   applyColorVariant,
   applyFiatBalanceAlertsStyling,
-  omitInnerPercentage
+  omitInnerPercentage,
+  isLow
 }) => {
-  const classes = cashboxClasses({ percent, cashOut, applyColorVariant })
+  const classes = cashboxClasses({ percent, cashOut, applyColorVariant, isLow })
-  const threshold = 51
+  const ltHalf = percent <= 51
 
   const showCashBox = {
     [classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
@@ -34,12 +32,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>
@@ -71,59 +69,28 @@ const CashIn = ({ currency, notes, total }) => {
   )
 }
 
-const CashInFormik = ({
-  capacity = 1000,
-  onEmpty,
-  field: {
-    value: { notes, deviceId }
-  },
-  form: { setFieldValue }
-}) => {
-  const classes = gridClasses()
-
-  return (
-    <>
-      <div className={classes.row}>
-        <div>
-          <Cashbox percent={(100 * notes) / capacity} />
-        </div>
-        <div className={classes.col2}>
-          <div>
-            <Link
-              onClick={() => {
-                onEmpty({
-                  variables: {
-                    deviceId,
-                    action: 'emptyCashInBills'
-                  }
-                }).then(() => setFieldValue('cashin.notes', 0))
-              }}
-              className={classes.link}
-              color={'primary'}>
-              Empty
-            </Link>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
 const CashOut = ({
   capacity = 500,
   denomination = 0,
   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}>
@@ -146,42 +113,4 @@ const CashOut = ({
   )
 }
 
-const CashOutFormik = ({ capacity = 500, ...props }) => {
+export { Cashbox, CashIn, CashOut }
-  const {
-    name,
-    onChange,
-    onBlur,
-    value: { notes }
-  } = props.field
-  const { touched, errors } = props.form
-
-  const error = !!(touched[name] && errors[name])
-
-  const percent = (100 * notes) / capacity
-  const classes = gridClasses()
-
-  return (
-    <>
-      <div className={classes.row}>
-        <div className={classes.col}>
-          <Cashbox percent={percent} cashOut />
-        </div>
-        <div className={(classes.col, classes.col2)}>
-          <div>
-            <TextInputFormik
-              fullWidth
-              name={name + '.notes'}
-              onChange={onChange}
-              onBlur={onBlur}
-              value={notes}
-              error={error}
-              {...props}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export { Cashbox, CashIn, CashInFormik, CashOut, CashOutFormik }

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -11,10 +11,9 @@ const colors = {
   }
 }
 
-const colorPicker = ({ percent, cashOut, applyColorVariant }) => {
+const colorPicker = ({ cashOut, applyColorVariant, isLow }) => {
-  if (applyColorVariant) return colors[cashOut ? 'cashOut' : 'cashIn'].full
   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/Machines/MachineComponents/Cassettes/Cassettes.js

@@ -57,11 +57,12 @@ const SET_CASSETTE_BILLS = gql`
 `
 
 const CashCassettes = ({ machine, config, refetchData }) => {
-  const data = { machine, config }
   const classes = useStyles()
 
-  const cashout = data?.config && fromNamespace('cashOut')(data.config)
+  const cashout = config && fromNamespace('cashOut')(config)
-  const locale = data?.config && fromNamespace('locale')(data.config)
+  const locale = config && fromNamespace('locale')(config)
+  const fillingPercentageSettings =
+    config && fromNamespace('notifications', config)
   const fiatCurrency = locale?.fiatCurrency
 
   const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout)
@@ -93,6 +94,7 @@ const CashCassettes = ({ machine, config, refetchData }) => {
           denomination={getCashoutSettings(deviceId)?.top}
           currency={{ code: fiatCurrency }}
           notes={value}
+          threshold={fillingPercentageSettings.fillingPercentageCassette1}
         />
       ),
       input: NumberInput,
@@ -112,6 +114,7 @@ const CashCassettes = ({ machine, config, refetchData }) => {
             denomination={getCashoutSettings(deviceId)?.bottom}
             currency={{ code: fiatCurrency }}
             notes={value}
+            threshold={fillingPercentageSettings.fillingPercentageCassette2}
           />
         )
       },

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
       }
     },
     {