154 lines
4 KiB
JavaScript
154 lines
4 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import classnames from 'classnames'
|
|
import * as R from 'ramda'
|
|
import React, { useReducer, useEffect } from 'react'
|
|
|
|
import ErrorMessage from 'src/components/ErrorMessage'
|
|
import Stepper from 'src/components/Stepper'
|
|
import { Button } from 'src/components/buttons'
|
|
import { RadioGroup, Autocomplete } from 'src/components/inputs'
|
|
import { Info2, H4 } from 'src/components/typography'
|
|
import FormRenderer from 'src/pages/Services/FormRenderer'
|
|
import schema from 'src/pages/Services/schemas'
|
|
import { startCase } from 'src/utils/string'
|
|
|
|
import styles from './WizardStep.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const initialState = {
|
|
form: null,
|
|
selected: null,
|
|
isNew: false,
|
|
iError: false
|
|
}
|
|
|
|
const reducer = (state, action) => {
|
|
switch (action.type) {
|
|
case 'select':
|
|
return {
|
|
form: null,
|
|
selected: action.selected,
|
|
isNew: null,
|
|
iError: false
|
|
}
|
|
case 'new':
|
|
return { form: state.form, selected: null, isNew: true, iError: false }
|
|
case 'form':
|
|
return {
|
|
form: action.form,
|
|
selected: action.form.code,
|
|
isNew: true,
|
|
iError: false
|
|
}
|
|
case 'error':
|
|
return R.merge(state, { innerError: true })
|
|
case 'reset':
|
|
return initialState
|
|
default:
|
|
throw new Error()
|
|
}
|
|
}
|
|
|
|
const WizardStep = ({
|
|
type,
|
|
name,
|
|
step,
|
|
error,
|
|
lastStep,
|
|
onContinue,
|
|
filled,
|
|
unfilled,
|
|
getValue
|
|
}) => {
|
|
const classes = useStyles()
|
|
const [{ innerError, selected, form, isNew }, dispatch] = useReducer(
|
|
reducer,
|
|
initialState
|
|
)
|
|
|
|
useEffect(() => {
|
|
dispatch({ type: 'reset' })
|
|
}, [step])
|
|
|
|
const innerContinue = (config, account) => {
|
|
if (!config || !config[type]) {
|
|
return dispatch({ type: 'error' })
|
|
}
|
|
onContinue(config, account)
|
|
}
|
|
|
|
const label = lastStep ? 'Finish' : 'Next'
|
|
const displayName = name ?? type
|
|
const subtitleClass = {
|
|
[classes.subtitle]: true,
|
|
[classes.error]: innerError
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Info2 className={classes.title}>{startCase(type)}</Info2>
|
|
<Stepper steps={4} currentStep={step} />
|
|
<H4 className={classnames(subtitleClass)}>
|
|
Select a {displayName} or set up a new one
|
|
</H4>
|
|
<RadioGroup
|
|
options={filled}
|
|
value={selected}
|
|
className={classes.radioGroup}
|
|
onChange={(evt, it) => {
|
|
dispatch({ type: 'select', selected: it })
|
|
}}
|
|
labelClassName={classes.radioLabel}
|
|
radioClassName={classes.radio}
|
|
/>
|
|
<div className={classes.setupNew}>
|
|
{!R.isEmpty(unfilled) && !R.isNil(unfilled) && (
|
|
<RadioGroup
|
|
value={isNew}
|
|
onChange={(evt, it) => {
|
|
dispatch({ type: 'new' })
|
|
}}
|
|
labelClassName={classes.radioLabel}
|
|
radioClassName={classes.radio}
|
|
options={[{ display: 'Set up new', code: true }]}
|
|
/>
|
|
)}
|
|
{isNew && (
|
|
<Autocomplete
|
|
fullWidth
|
|
label={`Select ${displayName}`}
|
|
className={classes.picker}
|
|
getOptionSelected={R.eqProps('code')}
|
|
getLabel={R.path(['display'])}
|
|
options={unfilled}
|
|
onChange={(evt, it) => {
|
|
dispatch({ type: 'form', form: it })
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
{form && (
|
|
<FormRenderer
|
|
save={it => innerContinue({ [type]: form.code }, { [form.code]: it })}
|
|
elements={schema[form.code].elements}
|
|
validationSchema={schema[form.code].validationSchema}
|
|
value={getValue(form.code)}
|
|
buttonLabel={label}
|
|
/>
|
|
)}
|
|
{!form && (
|
|
<div className={classes.submit}>
|
|
{error && <ErrorMessage>Failed to save</ErrorMessage>}
|
|
<Button
|
|
className={classes.button}
|
|
onClick={() => innerContinue({ [type]: selected })}>
|
|
{label}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default WizardStep
|