diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
index 9c8e2633..0cb8ffe8 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
@@ -19,7 +19,7 @@ const cashboxStyles = {
borderColor: colorPicker,
backgroundColor: colorPicker,
height: 118,
- width: 80,
+ width: ({ width }) => width ?? 80,
border: '2px solid',
textAlign: 'end',
display: 'inline-block'
@@ -55,7 +55,7 @@ const gridStyles = {
justifyContent: 'flex-start'
},
col2: {
- marginLeft: 16
+ marginLeft: 14
},
noMarginText: {
marginTop: 0,
diff --git a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js
index 5002b0fb..887522b0 100644
--- a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js
+++ b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js
@@ -1,4 +1,5 @@
import { makeStyles } from '@material-ui/core'
+import classNames from 'classnames'
import React, { memo, useState } from 'react'
import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
@@ -11,37 +12,40 @@ const useStyles = makeStyles({
cashCassette: {
width: 80,
height: 36,
- marginRight: 16
+ marginRight: 14
}
})
-const CashCassetteInput = memo(({ decimalPlaces, ...props }) => {
- const classes = useStyles()
- const { name, onChange, onBlur, value } = props.field
- const { touched, errors } = props.form
- const [notes, setNotes] = useState(value)
- const error = !!(touched[name] && errors[name])
- return (
-
-
- {
- setNotes(e.target.value)
- return onChange(e)
- }}
- onBlur={onBlur}
- value={value}
- error={error}
- decimalPlaces={decimalPlaces}
- {...props}
- />
-
- )
-})
+const CashCassetteInput = memo(
+ ({ decimalPlaces, width, inputClassName, ...props }) => {
+ const classes = useStyles()
+ const { name, onChange, onBlur, value } = props.field
+ const { touched, errors } = props.form
+ const [notes, setNotes] = useState(value)
+ const error = !!(touched[name] && errors[name])
+ return (
+
+
+ {
+ setNotes(e.target.value)
+ return onChange(e)
+ }}
+ onBlur={onBlur}
+ value={value}
+ error={error}
+ decimalPlaces={decimalPlaces}
+ {...props}
+ />
+
+ )
+ }
+)
export default CashCassetteInput
diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js
index 49932d17..94df5816 100644
--- a/new-lamassu-admin/src/pages/Cashout/Cashout.js
+++ b/new-lamassu-admin/src/pages/Cashout/Cashout.js
@@ -18,8 +18,7 @@ import { DenominationsSchema, getElements } from './helper'
const useStyles = makeStyles({
fudgeFactor: {
display: 'flex',
- alignItems: 'center',
- marginRight: 156
+ alignItems: 'center'
},
switchLabel: {
margin: 6,
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.js
index d2270fab..b910cf01 100644
--- a/new-lamassu-admin/src/pages/Cashout/WizardStep.js
+++ b/new-lamassu-admin/src/pages/Cashout/WizardStep.js
@@ -9,11 +9,36 @@ import { NumberInput } from 'src/components/inputs/formik'
import { Info2, H4, P, Info1, Label1 } from 'src/components/typography'
import cassetteOne from 'src/styling/icons/cassettes/cashout-cassette-1.svg'
import cassetteTwo from 'src/styling/icons/cassettes/cashout-cassette-2.svg'
+import tejo3CassetteOne from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-1-left.svg'
+import tejo3CassetteTwo from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-2-left.svg'
+import tejo3CassetteThree from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-3-left.svg'
+import tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-1-left.svg'
+import tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg'
+import tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'
+import tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
import styles from './WizardStep.styles'
const useStyles = makeStyles(styles)
+const getCassetesArtworks = () => ({
+ 2: {
+ 1: cassetteOne,
+ 2: cassetteTwo
+ },
+ 3: {
+ 1: tejo3CassetteOne,
+ 2: tejo3CassetteTwo,
+ 3: tejo3CassetteThree
+ },
+ 4: {
+ 1: tejo4CassetteOne,
+ 2: tejo4CassetteTwo,
+ 3: tejo4CassetteThree,
+ 4: tejo4CassetteFour
+ }
+})
+
const WizardStep = ({
name,
step,
@@ -30,15 +55,8 @@ const WizardStep = ({
const label = lastStep ? 'Finish' : 'Next'
- const cassetesArtworks = {
- 1: cassetteOne,
- 2: cassetteTwo,
- 3: cassetteOne,
- 4: cassetteTwo
- }
-
return (
-
+ <>
{name}
@@ -92,8 +110,8 @@ const WizardStep = ({
className={classes.stepImage}
alt="cassette"
width="148"
- height="196"
- src={cassetesArtworks[step]}>
+ height="205"
+ src={getCassetesArtworks()[numberOfCassettes][step]}>