feat: use numberOfCassettes on cashout wizard

fix: hidden fields showing during editing

new-lamassu-admin/src/components/editableTable/Row.js

@@ -131,6 +131,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
     suffix,
     SuffixComponent = TL2,
     textStyle = it => {},
+    isHidden = it => false,
     view = it => it?.toString(),
     inputProps = {}
   } = config
@@ -165,16 +166,18 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
       size={size}
       bold={bold}
       textAlign={textAlign}>
-      {isEditing && isField && (
+      {isEditing && isField && !isHidden(values) && (
         <Field name={name} component={input} {...innerProps} />
       )}
-      {isEditing && !isField && <config.input name={name} />}
-      {!isEditing && values && (
+      {isEditing && !isField && !isHidden(values) && (
+        <config.input name={name} />
+      )}
+      {!isEditing && values && !isHidden(values) && (
         <div style={textStyle(values, isEditing)}>
           {view(values[name], values)}
         </div>
       )}
-      {suffix && (
+      {suffix && !isHidden(values) && (
         <SuffixComponent
           className={classes.suffix}
           style={isEditing ? {} : textStyle(values, isEditing)}>

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

@@ -43,6 +43,7 @@ const GET_INFO = gql`
       cassette2
       cassette3
       cassette4
+      numberOfCassettes
     }
     config
   }
@@ -65,8 +66,6 @@ const CashOut = ({ name: SCREEN_KEY }) => {
 
   const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
 
-  console.log('config', config)
-
   const fudgeFactorActive = config?.fudgeFactorActive ?? false
   const locale = data?.config && fromNamespace('locale')(data.config)
   const machines = data?.machines ?? []

new-lamassu-admin/src/pages/Cashout/Wizard.js

@@ -6,12 +6,12 @@ import Modal from 'src/components/Modal'
 import { Autocomplete } from 'src/components/inputs/formik'
 import denominations from 'src/utils/bill-denominations'
 import { toNamespace } from 'src/utils/config'
+import { transformNumber } from 'src/utils/number'
 
 import WizardSplash from './WizardSplash'
 import WizardStep from './WizardStep'
 import { DenominationsSchema } from './helper'
 
-const LAST_STEP = 6
 const MODAL_WIDTH = 554
 const MODAL_HEIGHT = 520
 
@@ -25,6 +25,7 @@ const getOptions = R.curry((locale, denomiations) => {
 })
 
 const Wizard = ({ machine, locale, onClose, save, error }) => {
+  const LAST_STEP = machine.numberOfCassettes + 2
   const [{ step, config }, setState] = useState({
     step: 0,
     config: { active: true }
@@ -38,7 +39,10 @@ const Wizard = ({ machine, locale, onClose, save, error }) => {
   const onContinue = async it => {
     if (isLastStep) {
       return save(
-        toNamespace(machine.deviceId, DenominationsSchema.cast(config))
+        toNamespace(
+          machine.deviceId,
+          DenominationsSchema.cast(config, { assert: false })
+        )
       )
     }
 
@@ -50,62 +54,55 @@ const Wizard = ({ machine, locale, onClose, save, error }) => {
     })
   }
 
-  const steps = [
-    {
-      type: 'cassette1',
-      display: 'Cassette 1',
+  const steps = []
+
+  R.until(
+    R.gt(R.__, machine.numberOfCassettes),
+    it => {
+      steps.push({
+        type: `cassette${it}`,
+        display: `Cassette ${it}`,
         component: Autocomplete,
         inputProps: {
           options: R.map(it => ({ code: it, display: it }))(options),
           labelProp: 'display',
           valueProp: 'code'
         }
+      })
+      return R.add(1, it)
     },
-    {
-      type: 'cassette2',
-      display: 'Cassette 2',
-      component: Autocomplete,
-      inputProps: {
-        options: R.map(it => ({ code: it, display: it }))(options),
-        labelProp: 'display',
-        valueProp: 'code'
-      }
-    },
-    {
-      type: 'cassette3',
-      display: 'Cassette 3',
-      component: Autocomplete,
-      inputProps: {
-        options: R.map(it => ({ code: it, display: it }))(options),
-        labelProp: 'display',
-        valueProp: 'code'
-      }
-    },
-    {
-      type: 'cassette4',
-      display: 'Cassette 4',
-      component: Autocomplete,
-      inputProps: {
-        options: R.map(it => ({ code: it, display: it }))(options),
-        labelProp: 'display',
-        valueProp: 'code'
-      }
-    },
-    {
+    1
+  )
+
+  steps.push({
     type: 'zeroConfLimit',
     display: '0-conf Limit',
     schema: Yup.object().shape({
       zeroConfLimit: Yup.number().required()
     })
-    }
-  ]
+  })
 
   const schema = () =>
     Yup.object().shape({
       cassette1: Yup.number().required(),
-      cassette2: step >= 2 ? Yup.number().required() : Yup.number(),
-      cassette3: step >= 3 ? Yup.number().required() : Yup.number(),
-      cassette4: step >= 4 ? Yup.number().required() : Yup.number()
+      cassette2:
+        machine.numberOfCassettes > 1 && step >= 2
+          ? Yup.number().required()
+          : Yup.number()
+              .transform(transformNumber)
+              .nullable(),
+      cassette3:
+        machine.numberOfCassettes > 2 && step >= 3
+          ? Yup.number().required()
+          : Yup.number()
+              .transform(transformNumber)
+              .nullable(),
+      cassette4:
+        machine.numberOfCassettes > 3 && step >= 4
+          ? Yup.number().required()
+          : Yup.number()
+              .transform(transformNumber)
+              .nullable()
     })
 
   return (
@@ -122,6 +119,7 @@ const Wizard = ({ machine, locale, onClose, save, error }) => {
         <WizardStep
           step={step}
           name={machine.name}
+          numberOfCassettes={machine.numberOfCassettes}
           error={error}
           lastStep={isLastStep}
           steps={steps}

new-lamassu-admin/src/pages/Cashout/WizardStep.js

@@ -23,7 +23,8 @@ const WizardStep = ({
   onContinue,
   steps,
   fiatCurrency,
-  options
+  options,
+  numberOfCassettes
 }) => {
   const classes = useStyles()
 
@@ -40,10 +41,10 @@ const WizardStep = ({
     <div className={classes.content}>
       <div className={classes.titleDiv}>
         <Info2 className={classes.title}>{name}</Info2>
-        <Stepper steps={6} currentStep={step} />
+        <Stepper steps={steps.length + 1} currentStep={step} />
       </div>
 
-      {step <= 4 && (
+      {step <= numberOfCassettes && (
         <Formik
           validateOnBlur={false}
           validateOnChange={false}
@@ -102,7 +103,7 @@ const WizardStep = ({
         </Formik>
       )}
 
-      {step === 5 && (
+      {step === numberOfCassettes + 1 && (
         <Formik
           validateOnBlur={false}
           validateOnChange={false}

new-lamassu-admin/src/pages/Cashout/helper.js

@@ -1,3 +1,4 @@
+import * as R from 'ramda'
 import * as Yup from 'yup'
 
 import { NumberInput } from 'src/components/inputs/formik'
@@ -16,12 +17,10 @@ const DenominationsSchema = Yup.object().shape({
     .max(currencyMax),
   cassette3: Yup.number()
     .label('Cassette 3')
-    .required()
     .min(1)
     .max(currencyMax),
   cassette4: Yup.number()
     .label('Cassette 4')
-    .required()
     .min(1)
     .max(currencyMax),
   zeroConfLimit: Yup.number()
@@ -32,7 +31,7 @@ const DenominationsSchema = Yup.object().shape({
 })
 
 const getElements = (machines, { fiatCurrency } = {}) => {
-  return [
+  const elements = [
     {
       name: 'id',
       header: 'Machine',
@@ -40,23 +39,15 @@ const getElements = (machines, { fiatCurrency } = {}) => {
       view: it => machines.find(({ deviceId }) => deviceId === it).name,
       size: 'sm',
       editable: false
-    },
-    {
-      name: 'cassette1',
-      header: 'Cassette 1',
-      size: 'sm',
-      stripe: true,
-      width: 200,
-      textAlign: 'right',
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      },
-      suffix: fiatCurrency
-    },
-    {
-      name: 'cassette2',
-      header: 'Cassette 2',
+    }
+  ]
+
+  R.until(
+    R.gt(R.__, Math.max(...R.map(it => it.numberOfCassettes, machines))),
+    it => {
+      elements.push({
+        name: `cassette${it}`,
+        header: `Cassette ${it}`,
         size: 'sm',
         stripe: true,
         textAlign: 'right',
@@ -65,35 +56,18 @@ const getElements = (machines, { fiatCurrency } = {}) => {
         inputProps: {
           decimalPlaces: 0
         },
-      suffix: fiatCurrency
+        suffix: fiatCurrency,
+        isHidden: machine =>
+          it >
+          machines.find(({ deviceId }) => deviceId === machine.id)
+            .numberOfCassettes
+      })
+      return R.add(1, it)
     },
-    {
-      name: 'cassette3',
-      header: 'Cassette 3',
-      size: 'sm',
-      stripe: true,
-      textAlign: 'right',
-      width: 200,
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      },
-      suffix: fiatCurrency
-    },
-    {
-      name: 'cassette4',
-      header: 'Cassette 4',
-      size: 'sm',
-      stripe: true,
-      textAlign: 'right',
-      width: 200,
-      input: NumberInput,
-      inputProps: {
-        decimalPlaces: 0
-      },
-      suffix: fiatCurrency
-    },
-    {
+    1
+  )
+
+  elements.push({
     name: 'zeroConfLimit',
     header: '0-conf Limit',
     size: 'sm',
@@ -105,8 +79,9 @@ const getElements = (machines, { fiatCurrency } = {}) => {
       decimalPlaces: 0
     },
     suffix: fiatCurrency
-    }
-  ]
+  })
+
+  return elements
 }
 
 export { DenominationsSchema, getElements }

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

@@ -172,18 +172,15 @@ const CashCassettes = () => {
         header: `Cassette ${it}`,
         width: 265,
         stripe: true,
-        view: (value, { id, numberOfCassettes }) => {
-          return it > numberOfCassettes ? (
-            <></>
-          ) : (
+        view: (value, { id }) => (
           <CashOut
             className={classes.cashbox}
             denomination={getCashoutSettings(id)?.[`cassette${it}`]}
             currency={{ code: fiatCurrency }}
             notes={value}
           />
-          )
-        },
+        ),
+        isHidden: ({ numberOfCassettes }) => it > numberOfCassettes,
         input: CashCassetteInput,
         inputProps: {
           decimalPlaces: 0

new-lamassu-admin/src/utils/number.js

@@ -2,6 +2,9 @@ import * as R from 'ramda'
 
 const isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)))
 
-const transformNumber = value => (isValidNumber(value) ? value : null)
+const transformNumber = value => {
+  console.log('value', value)
+  return isValidNumber(value) ? value : null
+}
 
 export { transformNumber }