feat: cashbox on notifications
This commit is contained in:
parent
d62db527de
commit
b3b7c6f61a
1 changed files with 79 additions and 45 deletions
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue