From 13e6401b22a83f0d6093698441fc96aa2cbf95d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Thu, 2 Sep 2021 17:26:50 +0100 Subject: [PATCH] feat: use numberOfCassettes on cashout wizard fix: hidden fields showing during editing --- .../src/components/editableTable/Row.js | 11 +- .../src/pages/Cashout/Cashout.js | 3 +- new-lamassu-admin/src/pages/Cashout/Wizard.js | 104 ++++++++-------- .../src/pages/Cashout/WizardStep.js | 9 +- new-lamassu-admin/src/pages/Cashout/helper.js | 111 +++++++----------- .../src/pages/Maintenance/CashCassettes.js | 21 ++-- new-lamassu-admin/src/utils/number.js | 5 +- 7 files changed, 120 insertions(+), 144 deletions(-) diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js index 03bf86f4..95504cb6 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.js +++ b/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) && ( )} - {isEditing && !isField && } - {!isEditing && values && ( + {isEditing && !isField && !isHidden(values) && ( + + )} + {!isEditing && values && !isHidden(values) && (
{view(values[name], values)}
)} - {suffix && ( + {suffix && !isHidden(values) && ( diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js index 38b471ab..49932d17 100644 --- a/new-lamassu-admin/src/pages/Cashout/Cashout.js +++ b/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 ?? [] diff --git a/new-lamassu-admin/src/pages/Cashout/Wizard.js b/new-lamassu-admin/src/pages/Cashout/Wizard.js index d1132583..4db51564 100644 --- a/new-lamassu-admin/src/pages/Cashout/Wizard.js +++ b/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', - component: Autocomplete, - inputProps: { - options: R.map(it => ({ code: it, display: it }))(options), - labelProp: 'display', - valueProp: 'code' - } - }, - { - 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' - } - }, - { - type: 'zeroConfLimit', - display: '0-conf Limit', - schema: Yup.object().shape({ - zeroConfLimit: Yup.number().required() + 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) + }, + 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 }) => { { const classes = useStyles() @@ -40,10 +41,10 @@ const WizardStep = ({
{name} - +
- {step <= 4 && ( + {step <= numberOfCassettes && ( )} - {step === 5 && ( + {step === numberOfCassettes + 1 && ( { - return [ + const elements = [ { name: 'id', header: 'Machine', @@ -40,73 +39,49 @@ 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', - size: 'sm', - stripe: true, - textAlign: 'right', - width: 200, - input: NumberInput, - inputProps: { - decimalPlaces: 0 - }, - suffix: fiatCurrency - }, - { - 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 - }, - { - name: 'zeroConfLimit', - header: '0-conf Limit', - size: 'sm', - stripe: true, - textAlign: 'right', - width: 200, - input: NumberInput, - inputProps: { - decimalPlaces: 0 - }, - suffix: fiatCurrency } ] + + 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', + width: 200, + input: NumberInput, + inputProps: { + decimalPlaces: 0 + }, + suffix: fiatCurrency, + isHidden: machine => + it > + machines.find(({ deviceId }) => deviceId === machine.id) + .numberOfCassettes + }) + return R.add(1, it) + }, + 1 + ) + + elements.push({ + name: 'zeroConfLimit', + header: '0-conf Limit', + size: 'sm', + stripe: true, + textAlign: 'right', + width: 200, + input: NumberInput, + inputProps: { + decimalPlaces: 0 + }, + suffix: fiatCurrency + }) + + return elements } export { DenominationsSchema, getElements } diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js index c3cbe641..9ed9eeec 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js +++ b/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 }) => ( + + ), + isHidden: ({ numberOfCassettes }) => it > numberOfCassettes, input: CashCassetteInput, inputProps: { decimalPlaces: 0 diff --git a/new-lamassu-admin/src/utils/number.js b/new-lamassu-admin/src/utils/number.js index e05d5796..71135689 100644 --- a/new-lamassu-admin/src/utils/number.js +++ b/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 }