feat: add multicassette support on the dashboard

lib/machine-loader.js

@@ -105,6 +105,7 @@ function getMachine (machineId, config) {
     cassette2: r.cassette2,
     cassette3: r.cassette3,
     cassette4: r.cassette4,
+    numberOfCassettes: r.number_of_cassettes,
     version: r.version,
     model: r.model,
     pairedAt: new Date(r.created),

new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js

@@ -10,7 +10,6 @@ const useStyles = makeStyles({
     display: 'flex'
   },
   cashCassette: {
-    width: 80,
     height: 36,
     marginRight: 14
   }

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js

@@ -6,6 +6,7 @@ import TableContainer from '@material-ui/core/TableContainer'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import classnames from 'classnames'
+import * as R from 'ramda'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 
@@ -60,6 +61,10 @@ const MachinesTable = ({ machines, numToRender }) => {
     })
   }
 
+  const maxNumberOfCassettes = Math.max(
+    ...R.map(it => it.numberOfCassettes, machines)
+  )
+
   return (
     <TableContainer className={classes.table}>
       <Table>
@@ -80,18 +85,17 @@ const MachinesTable = ({ machines, numToRender }) => {
                   <TxInIcon />
                 </div>
               </HeaderCell> */}
+            {R.map(
+              it => (
                 <HeaderCell>
                   <div className={classes.header}>
                     <TxOutIcon />
-                <Label2 className={classes.label}> 1</Label2>
+                    <Label2 className={classes.label}> {it + 1}</Label2>
-              </div>
-            </HeaderCell>
-            <HeaderCell>
-              <div className={classes.header}>
-                <TxOutIcon />
-                <Label2 className={classes.label}> 2</Label2>
                   </div>
                 </HeaderCell>
+              ),
+              R.times(R.identity, maxNumberOfCassettes)
+            )}
           </TableRow>
         </TableHead>
         <TableBody>
@@ -120,12 +124,19 @@ const MachinesTable = ({ machines, numToRender }) => {
                   {/*                     <StyledCell align="left">
                       {makePercentageText(machine.cashbox)}
                     </StyledCell> */}
+                  {R.map(
+                    it =>
+                      machine.numberOfCassettes > it ? (
                         <StyledCell align="left">
-                    {makePercentageText(machine.cassette1)}
+                          {makePercentageText(machine[`cassette${it + 1}`])}
                         </StyledCell>
+                      ) : (
                         <StyledCell align="left">
-                    {makePercentageText(machine.cassette2)}
+                          <TL2>{`— %`}</TL2>
                         </StyledCell>
+                      ),
+                    R.times(R.identity, maxNumberOfCassettes)
+                  )}
                 </TableRow>
               )
             }

new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js

@@ -27,6 +27,9 @@ const GET_DATA = gql`
       cashbox
       cassette1
       cassette2
+      cassette3
+      cassette4
+      numberOfCassettes
       statuses {
         label
         type

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.js

@@ -1,18 +1,26 @@
+/* eslint-disable no-unused-vars */
 import { useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
+import * as R from 'ramda'
 import React from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
 import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
-import { NumberInput } from 'src/components/inputs/formik'
+import { NumberInput, CashCassetteInput } from 'src/components/inputs/formik'
 import { fromNamespace } from 'src/utils/config'
 
 import styles from './Cassettes.styles'
 
 const useStyles = makeStyles(styles)
 
+const widthsByNumberOfCassettes = {
+  2: { cashbox: 116, cassette: 280, cassetteGraph: 80, editWidth: 174 },
+  3: { cashbox: 106, cassette: 200, cassetteGraph: 60, editWidth: 145 },
+  4: { cashbox: 106, cassette: 164, cassetteGraph: 40, editWidth: 90 }
+}
+
 const ValidationSchema = Yup.object().shape({
   name: Yup.string().required('Required'),
   cashbox: Yup.number()
@@ -27,6 +35,16 @@ const ValidationSchema = Yup.object().shape({
     .min(0)
     .max(500),
   cassette2: Yup.number()
+    .required('Required')
+    .integer()
+    .min(0)
+    .max(500),
+  cassette3: Yup.number()
+    .required('Required')
+    .integer()
+    .min(0)
+    .max(500),
+  cassette4: Yup.number()
     .required('Required')
     .integer()
     .min(0)
@@ -69,6 +87,7 @@ const CashCassettes = ({ machine, config, refetchData }) => {
   const cashout = data?.config && fromNamespace('cashOut')(data.config)
   const locale = data?.config && fromNamespace('locale')(data.config)
   const fiatCurrency = locale?.fiatCurrency
+  const numberOfCassettes = machine.numberOfCassettes
 
   const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout)
   const isCashOutDisabled = ({ deviceId }) =>
@@ -78,7 +97,7 @@ const CashCassettes = ({ machine, config, refetchData }) => {
     {
       name: 'cashbox',
       header: 'Cashbox',
-      width: 240,
+      width: widthsByNumberOfCassettes[numberOfCassettes].cashbox,
       stripe: false,
       view: value => (
         <CashIn currency={{ code: fiatCurrency }} notes={value} total={0} />
@@ -87,87 +106,44 @@ const CashCassettes = ({ machine, config, refetchData }) => {
       inputProps: {
         decimalPlaces: 0
       }
-    },
-    {
-      name: 'cassette1',
-      header: 'Cash-out 1',
-      width: 265,
-      stripe: true,
-      view: (value, { deviceId }) => (
-        <CashOut
-          className={classes.cashbox}
-          denomination={getCashoutSettings(deviceId)?.cassette1}
-          currency={{ code: fiatCurrency }}
-          notes={value}
-        />
-      ),
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      }
-    },
-    {
-      name: 'cassette2',
-      header: 'Cash-out 2',
-      width: 265,
-      stripe: true,
-      view: (value, { deviceId }) => {
-        return (
-          <CashOut
-            className={classes.cashbox}
-            denomination={getCashoutSettings(deviceId)?.cassette2}
-            currency={{ code: fiatCurrency }}
-            notes={value}
-          />
-        )
-      },
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      }
-    },
-    {
-      name: 'cassette3',
-      header: 'Cash-out 3',
-      width: 265,
-      stripe: true,
-      view: (value, { deviceId }) => {
-        return (
-          <CashOut
-            className={classes.cashbox}
-            denomination={getCashoutSettings(deviceId)?.cassette2}
-            currency={{ code: fiatCurrency }}
-            notes={value}
-          />
-        )
-      },
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      }
-    },
-    {
-      name: 'cassette4',
-      header: 'Cash-out 4',
-      width: 265,
-      stripe: true,
-      view: (value, { deviceId }) => {
-        return (
-          <CashOut
-            className={classes.cashbox}
-            denomination={getCashoutSettings(deviceId)?.cassette2}
-            currency={{ code: fiatCurrency }}
-            notes={value}
-          />
-        )
-      },
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      }
     }
   ]
 
+  R.until(
+    R.gt(R.__, numberOfCassettes),
+    it => {
+      elements.push({
+        name: `cassette${it}`,
+        header: `Cash-out ${it}`,
+        width: widthsByNumberOfCassettes[numberOfCassettes].cassette,
+        stripe: true,
+        doubleHeader: 'Cash-out',
+        view: value => {
+          return (
+            <CashOut
+              className={classes.cashbox}
+              denomination={
+                getCashoutSettings(machine.deviceId)?.[`cassette${it}`]
+              }
+              currency={{ code: fiatCurrency }}
+              notes={value}
+              width={widthsByNumberOfCassettes[numberOfCassettes].cassetteGraph}
+            />
+          )
+        },
+        isHidden: ({ numberOfCassettes }) => it > numberOfCassettes,
+        input: CashCassetteInput,
+        inputProps: {
+          decimalPlaces: 0,
+          width: widthsByNumberOfCassettes[numberOfCassettes].cassetteGraph,
+          inputClassName: classes.cashbox
+        }
+      })
+      return R.add(1, it)
+    },
+    1
+  )
+
   const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
     refetchQueries: () => refetchData()
   })
@@ -191,11 +167,13 @@ const CashCassettes = ({ machine, config, refetchData }) => {
   return machine.name ? (
     <EditableTable
       error={error?.message}
+      enableEdit
+      editWidth={widthsByNumberOfCassettes[numberOfCassettes].editWidth}
       stripeWhen={isCashOutDisabled}
       disableRowEdit={isCashOutDisabled}
       name="cashboxes"
       elements={elements}
-      data={[machine] || []}
+      data={[machine]}
       save={onSave}
       validationSchema={ValidationSchema}
     />

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js

@@ -1,6 +1,5 @@
 const styles = {
   cashbox: {
-    width: 80,
     height: 36
   }
 }

new-lamassu-admin/src/pages/Machines/Machines.js

@@ -32,6 +32,9 @@ const GET_INFO = gql`
       cashbox
       cassette1
       cassette2
+      cassette3
+      cassette4
+      numberOfCassettes
       statuses {
         label
         type
@@ -48,7 +51,7 @@ const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
 
 const Machines = () => {
   const location = useLocation()
-  const { data, refetch } = useQuery(GET_INFO, {
+  const { data, loading, refetch } = useQuery(GET_INFO, {
     variables: {
       deviceId: getMachineID(location.pathname)
     }
@@ -62,6 +65,7 @@ const Machines = () => {
   const machineID = R.path(['deviceId'])(machine) ?? null
 
   return (
+    !loading && (
       <Grid container className={classes.grid}>
         <Grid item xs={3}>
           <Grid item xs={12}>
@@ -116,6 +120,7 @@ const Machines = () => {
         </Grid>
       </Grid>
     )
+  )
 }
 
 export default Machines