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 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>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue