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 NAME = 'fiatBalanceAlerts'
const CASH_IN_KEY = 'fiatBalanceAlertsCashIn'
const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut'
const DEFAULT_NUMBER_OF_CASSETTES = 2
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
)
const editing = isEditing(NAME)
const schema = Yup.object().shape({
fillingPercentageCashbox: Yup.number()
.transform(transformNumber)
.integer()
.min(min)
.max(max)
.nullable(),
fillingPercentageCassette1: Yup.number()
.transform(transformNumber)
.integer()
@ -71,6 +76,7 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
validateOnChange={false}
enableReinitialize
initialValues={{
fillingPercentageCashbox: data?.fillingPercentageCashbox ?? '',
fillingPercentageCassette1: data?.fillingPercentageCassette1 ?? '',
fillingPercentageCassette2: data?.fillingPercentageCassette2 ?? '',
fillingPercentageCassette3: data?.fillingPercentageCassette3 ?? '',
@ -79,52 +85,80 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
validationSchema={schema}
onSubmit={it => save(section, schema.cast(it))}
onReset={() => {
setEditing(NAME, false)
setEditing(CASH_IN_KEY, false)
setEditing(CASH_OUT_KEY, false)
}}>
{({ values }) => (
<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={
values[`fillingPercentageCassette${it + 1}`] ??
data[`cassette${it + 1}`]
}
applyColorVariant
applyFiatBalanceAlertsStyling
omitInnerPercentage
cashOut
<>
<Form className={classes.form}>
<PromptWhenDirty />
<Header
title="Cash box (Full)"
editing={isEditing(CASH_IN_KEY)}
disabled={isDisabled(CASH_IN_KEY)}
setEditing={it => setEditing(CASH_IN_KEY, it)}
/>
<div className={classes.wrapper}>
<div className={classes.first}>
<div className={classes.row}>
<div className={classes.col2}>
<EditableNumber
label="Alert me over"
name="fillingPercentageCashbox"
editing={isEditing(CASH_IN_KEY)}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
width={fieldWidth}
/>
<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>
</>
),
R.times(R.identity, maxNumberOfCassettes)
)}
</div>
</Form>
</div>
</div>
</div>
</Form>
<Form className={classes.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>
)