136 lines
3.8 KiB
JavaScript
136 lines
3.8 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import { Form, Formik } from 'formik'
|
|
import * as R from 'ramda'
|
|
import React, { useContext } from 'react'
|
|
import * as Yup from 'yup'
|
|
|
|
import PromptWhenDirty from 'src/components/PromptWhenDirty'
|
|
import { TL2 } from 'src/components/typography'
|
|
import { transformNumber } from 'src/utils/number'
|
|
|
|
import { Cashbox } from '../../../components/inputs/cashbox/Cashbox'
|
|
import NotificationsCtx from '../NotificationsContext'
|
|
import Header from '../components/EditHeader'
|
|
import EditableNumber from '../components/EditableNumber'
|
|
|
|
import styles from './FiatBalanceAlerts.styles.js'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const NAME = 'fiatBalanceAlerts'
|
|
const DEFAULT_NUMBER_OF_CASSETTES = 2
|
|
|
|
const FiatBalance = ({
|
|
section,
|
|
min = 0,
|
|
max = Number.MAX_SAFE_INTEGER,
|
|
fieldWidth = 80
|
|
}) => {
|
|
const {
|
|
isEditing,
|
|
isDisabled,
|
|
setEditing,
|
|
data,
|
|
save,
|
|
machines
|
|
} = useContext(NotificationsCtx)
|
|
const classes = useStyles()
|
|
|
|
const maxNumberOfCassettes =
|
|
Math.max(...R.map(it => it.numberOfCassettes, machines)) ??
|
|
DEFAULT_NUMBER_OF_CASSETTES
|
|
|
|
const editing = isEditing(NAME)
|
|
|
|
const schema = Yup.object().shape({
|
|
fiatBalanceCassette1: Yup.number()
|
|
.transform(transformNumber)
|
|
.integer()
|
|
.min(min)
|
|
.max(max)
|
|
.nullable(),
|
|
fiatBalanceCassette2: Yup.number()
|
|
.transform(transformNumber)
|
|
.integer()
|
|
.min(min)
|
|
.max(max)
|
|
.nullable(),
|
|
fiatBalanceCassette3: Yup.number()
|
|
.transform(transformNumber)
|
|
.integer()
|
|
.min(min)
|
|
.max(max)
|
|
.nullable(),
|
|
fiatBalanceCassette4: Yup.number()
|
|
.transform(transformNumber)
|
|
.integer()
|
|
.min(min)
|
|
.max(max)
|
|
.nullable()
|
|
})
|
|
|
|
const percentages = {
|
|
cassette1: (100 * (data?.fiatBalanceCassette1 ?? 0)) / max,
|
|
cassette2: (100 * (data?.fiatBalanceCassette2 ?? 0)) / max,
|
|
cassette3: (100 * (data?.fiatBalanceCassette3 ?? 0)) / max,
|
|
cassette4: (100 * (data?.fiatBalanceCassette4 ?? 0)) / max
|
|
}
|
|
|
|
return (
|
|
<Formik
|
|
validateOnBlur={false}
|
|
validateOnChange={false}
|
|
enableReinitialize
|
|
initialValues={{
|
|
fiatBalanceCassette1: data?.fiatBalanceCassette1 ?? '',
|
|
fiatBalanceCassette2: data?.fiatBalanceCassette2 ?? '',
|
|
fiatBalanceCassette3: data?.fiatBalanceCassette3 ?? '',
|
|
fiatBalanceCassette4: data?.fiatBalanceCassette4 ?? ''
|
|
}}
|
|
validationSchema={schema}
|
|
onSubmit={it => save(section, schema.cast(it))}
|
|
onReset={() => {
|
|
setEditing(NAME, false)
|
|
}}>
|
|
<Form className={classes.form}>
|
|
<PromptWhenDirty />
|
|
<Header
|
|
title="Cash out (Empty)"
|
|
editing={editing}
|
|
disabled={isDisabled(NAME)}
|
|
setEditing={it => setEditing(NAME, it)}
|
|
/>
|
|
<div className={classes.wrapper}>
|
|
{R.map(
|
|
it => (
|
|
<>
|
|
<div className={classes.row}>
|
|
<Cashbox
|
|
labelClassName={classes.cashboxLabel}
|
|
emptyPartClassName={classes.cashboxEmptyPart}
|
|
percent={percentages[`cassette${it + 1}`]}
|
|
cashOut
|
|
/>
|
|
<div className={classes.col2}>
|
|
<TL2 className={classes.title}>Cassette {it + 1}</TL2>
|
|
<EditableNumber
|
|
label="Alert me under"
|
|
name={`fiatBalanceCassette${it + 1}`}
|
|
editing={editing}
|
|
displayValue={x => (x === '' ? '-' : x)}
|
|
decoration="notes"
|
|
width={fieldWidth}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
),
|
|
R.times(R.identity, maxNumberOfCassettes)
|
|
)}
|
|
</div>
|
|
</Form>
|
|
</Formik>
|
|
)
|
|
}
|
|
|
|
export default FiatBalance
|