feat: cashbox on notifications

This commit is contained in:
Sérgio Salgado 2020-12-04 14:42:11 +00:00 committed by André Sá
parent d62db527de
commit b3b7c6f61a

View file

@ -17,7 +17,8 @@ import styles from './FiatBalanceAlerts.styles.js'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
const NAME = 'fiatBalanceAlerts' const CASH_IN_KEY = 'fiatBalanceAlertsCashIn'
const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut'
const DEFAULT_NUMBER_OF_CASSETTES = 2 const DEFAULT_NUMBER_OF_CASSETTES = 2
const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => { const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
@ -36,9 +37,13 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
DEFAULT_NUMBER_OF_CASSETTES DEFAULT_NUMBER_OF_CASSETTES
) )
const editing = isEditing(NAME)
const schema = Yup.object().shape({ const schema = Yup.object().shape({
fillingPercentageCashbox: Yup.number()
.transform(transformNumber)
.integer()
.min(min)
.max(max)
.nullable(),
fillingPercentageCassette1: Yup.number() fillingPercentageCassette1: Yup.number()
.transform(transformNumber) .transform(transformNumber)
.integer() .integer()
@ -71,6 +76,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
validateOnChange={false} validateOnChange={false}
enableReinitialize enableReinitialize
initialValues={{ initialValues={{
fillingPercentageCashbox: data?.fillingPercentageCashbox ?? '',
fillingPercentageCassette1: data?.fillingPercentageCassette1 ?? '', fillingPercentageCassette1: data?.fillingPercentageCassette1 ?? '',
fillingPercentageCassette2: data?.fillingPercentageCassette2 ?? '', fillingPercentageCassette2: data?.fillingPercentageCassette2 ?? '',
fillingPercentageCassette3: data?.fillingPercentageCassette3 ?? '', fillingPercentageCassette3: data?.fillingPercentageCassette3 ?? '',
@ -79,52 +85,80 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
validationSchema={schema} validationSchema={schema}
onSubmit={it => save(section, schema.cast(it))} onSubmit={it => save(section, schema.cast(it))}
onReset={() => { onReset={() => {
setEditing(NAME, false) setEditing(CASH_IN_KEY, false)
setEditing(CASH_OUT_KEY, false)
}}> }}>
{({ values }) => ( {({ values }) => (
<Form className={classes.form}> <>
<PromptWhenDirty /> <Form className={classes.form}>
<Header <PromptWhenDirty />
title="Cash out (Empty)" <Header
editing={editing} title="Cash box (Full)"
disabled={isDisabled(NAME)} editing={isEditing(CASH_IN_KEY)}
setEditing={it => setEditing(NAME, it)} disabled={isDisabled(CASH_IN_KEY)}
/> setEditing={it => setEditing(CASH_IN_KEY, it)}
<div className={classes.wrapper}> />
{R.map( <div className={classes.wrapper}>
it => ( <div className={classes.first}>
<> <div className={classes.row}>
<div className={classes.row}> <div className={classes.col2}>
<Cashbox <EditableNumber
labelClassName={classes.cashboxLabel} label="Alert me over"
emptyPartClassName={classes.cashboxEmptyPart} name="fillingPercentageCashbox"
percent={ editing={isEditing(CASH_IN_KEY)}
values[`fillingPercentageCassette${it + 1}`] ?? displayValue={x => (x === '' ? '-' : x)}
data[`cassette${it + 1}`] decoration="%"
} width={fieldWidth}
applyColorVariant
applyFiatBalanceAlertsStyling
omitInnerPercentage
cashOut
/> />
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette {it + 1}</TL2>
<EditableNumber
label="Alert me under"
name={`fillingPercentageCassette${it + 1}`}
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
width={fieldWidth}
/>
</div>
</div> </div>
</> </div>
), </div>
R.times(R.identity, maxNumberOfCassettes) </div>
)} </Form>
</div> <Form className={classes.form}>
</Form> <PromptWhenDirty />
<Header
title="Cash out (Empty)"
editing={isEditing(CASH_OUT_KEY)}
disabled={isDisabled(CASH_OUT_KEY)}
setEditing={it => setEditing(CASH_OUT_KEY, it)}
/>
<div className={classes.wrapper}>
{R.map(
it => (
<>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={
values[`fillingPercentageCassette${it + 1}`] ??
data[`cassette${it + 1}`]
}
applyColorVariant
applyFiatBalanceAlertsStyling
omitInnerPercentage
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette {it + 1}</TL2>
<EditableNumber
label="Alert me under"
name={`fillingPercentageCassette${it + 1}`}
editing={isEditing(CASH_OUT_KEY)}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
width={fieldWidth}
/>
</div>
</div>
</>
),
R.times(R.identity, maxNumberOfCassettes)
)}
</div>
</Form>
</>
)} )}
</Formik> </Formik>
) )