42f19e9d02
fix: on and off should have a fixed width fix: fist screen should be two p fix: autofocus on fields after next fix: spacing fix: button position fix: make the denominations a dropdown fix: fiat should shown input suffix fix: wizard should have splash image fix: add missing warning icon fix: eslint fix: modal fiat should be a suffix fix: increase modal height to match the spec fix: confirmation step has repeated title fix: label should cover both the input and the suffix fix: use code+display to benefit from dropdown improvements
99 lines
2.3 KiB
JavaScript
99 lines
2.3 KiB
JavaScript
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
import * as Yup from 'yup'
|
|
|
|
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 WizardSplash from './WizardSplash'
|
|
import WizardStep from './WizardStep'
|
|
import { DenominationsSchema } from './helper'
|
|
|
|
const LAST_STEP = 3
|
|
const MODAL_WIDTH = 554
|
|
const MODAL_HEIGHT = 520
|
|
|
|
const getOptions = R.curry((locale, denomiations) => {
|
|
const currency = R.prop('fiatCurrency')(locale)
|
|
return R.compose(
|
|
R.map(code => ({ code, display: code })),
|
|
R.keys,
|
|
R.path([currency])
|
|
)(denomiations)
|
|
})
|
|
|
|
const Wizard = ({ machine, locale, onClose, save, error }) => {
|
|
const [{ step, config }, setState] = useState({
|
|
step: 0,
|
|
config: { active: true }
|
|
})
|
|
|
|
const options = getOptions(locale, denominations)
|
|
|
|
const title = `Enable cash-out`
|
|
const isLastStep = step === LAST_STEP
|
|
|
|
const onContinue = async it => {
|
|
if (isLastStep) {
|
|
return save(
|
|
toNamespace(machine.deviceId, DenominationsSchema.cast(config))
|
|
)
|
|
}
|
|
|
|
const newConfig = R.merge(config, it)
|
|
|
|
setState({
|
|
step: step + 1,
|
|
config: newConfig
|
|
})
|
|
}
|
|
|
|
const steps = [
|
|
{
|
|
type: 'top',
|
|
display: 'Cassette 1 (Top)',
|
|
component: Autocomplete
|
|
},
|
|
{
|
|
type: 'bottom',
|
|
display: 'Cassette 2',
|
|
component: Autocomplete
|
|
}
|
|
]
|
|
|
|
const schema = () =>
|
|
Yup.object().shape({
|
|
top: Yup.number().required(),
|
|
bottom: step >= 2 ? Yup.number().required() : Yup.number()
|
|
})
|
|
|
|
return (
|
|
<Modal
|
|
title={step === 0 ? null : title}
|
|
handleClose={onClose}
|
|
width={MODAL_WIDTH}
|
|
height={MODAL_HEIGHT}
|
|
open={true}>
|
|
{step === 0 && (
|
|
<WizardSplash name={machine.name} onContinue={() => onContinue()} />
|
|
)}
|
|
{step !== 0 && (
|
|
<WizardStep
|
|
step={step}
|
|
name={machine.name}
|
|
error={error}
|
|
lastStep={isLastStep}
|
|
steps={steps}
|
|
fiatCurrency={locale.fiatCurrency}
|
|
options={options}
|
|
schema={schema()}
|
|
onContinue={onContinue}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default Wizard
|