feat: create a new batching function which pairs with machine value updates

refactor: abstract amount of cassettes from the cassette wizard

fix: dashboard cassettes

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

@@ -2,12 +2,15 @@ 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 React, { useState } from 'react'
 import * as Yup from 'yup'
 
+import { IconButton } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
 import { NumberInput, CashCassetteInput } from 'src/components/inputs/formik'
+import Wizard from 'src/pages/Maintenance/Wizard/Wizard'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { fromNamespace } from 'src/utils/config'
 
 import styles from './Cassettes.styles'
@@ -82,6 +85,8 @@ const SET_CASSETTE_BILLS = gql`
 const CashCassettes = ({ machine, config, refetchData }) => {
   const classes = useStyles()
 
+  const [wizard, setWizard] = useState(false)
+
   const cashout = config && fromNamespace('cashOut')(config)
   const locale = config && fromNamespace('locale')(config)
   const fillingPercentageSettings =
@@ -147,39 +152,62 @@ const CashCassettes = ({ machine, config, refetchData }) => {
     1
   )
 
+  elements.push({
+    name: 'edit',
+    header: 'Edit',
+    width: 87,
+    view: () => {
+      return (
+        <IconButton
+          onClick={() => {
+            setWizard(true)
+          }}>
+          <EditIcon />
+        </IconButton>
+      )
+    }
+  })
+
   const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
     refetchQueries: () => refetchData()
   })
 
-  const onSave = (
-    ...[, { deviceId, cashbox, cassette1, cassette2, cassette3, cassette4 }]
-  ) => {
-    return setCassetteBills({
+  const onSave = (_, cashbox, cassettes) =>
+    setCassetteBills({
       variables: {
         action: 'setCassetteBills',
-        deviceId: deviceId,
+        deviceId: machine.deviceId,
         cashbox,
-        cassette1,
-        cassette2,
-        cassette3,
-        cassette4
+        ...cassettes
       }
     })
-  }
 
   return machine.name ? (
-    <EditableTable
-      error={error?.message}
-      enableEdit
-      editWidth={widthsByNumberOfCassettes[numberOfCassettes].editWidth}
-      stripeWhen={isCashOutDisabled}
-      disableRowEdit={isCashOutDisabled}
-      name="cashboxes"
-      elements={elements}
-      data={[machine] || []}
-      save={onSave}
-      validationSchema={ValidationSchema}
-    />
+    <>
+      <EditableTable
+        error={error?.message}
+        editWidth={widthsByNumberOfCassettes[numberOfCassettes].editWidth}
+        stripeWhen={isCashOutDisabled}
+        disableRowEdit={isCashOutDisabled}
+        name="cashboxes"
+        elements={elements}
+        data={[machine]}
+        save={onSave}
+        validationSchema={ValidationSchema}
+      />
+      {wizard && (
+        <Wizard
+          machine={machine}
+          cashoutSettings={getCashoutSettings(machine.deviceId)}
+          onClose={() => {
+            setWizard(false)
+          }}
+          error={error?.message}
+          save={onSave}
+          locale={locale}
+        />
+      )}
+    </>
   ) : null
 }