feat: add multicassette support on the dashboard

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}
     />