diff --git a/new-lamassu-admin/src/components/editableTable/Row.styles.js b/new-lamassu-admin/src/components/editableTable/Row.styles.js
index ef393f1a..9bfdb0aa 100644
--- a/new-lamassu-admin/src/components/editableTable/Row.styles.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.styles.js
@@ -18,12 +18,12 @@ export default {
const justifyContent = textAlign === 'right' ? 'end' : textAlign
return {
display: 'flex',
- alignItems: 'baseline',
+ alignItems: 'center',
justifyContent
}
},
suffix: {
- marginLeft: 7
+ margin: [[0, 0, 0, 7]]
},
size: ({ size }) => bySize(size),
bold
diff --git a/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js b/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js
index 6355e10e..ce09f0c9 100644
--- a/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js
+++ b/new-lamassu-admin/src/components/inputs/formik/Autocomplete.js
@@ -31,7 +31,7 @@ const AutocompleteFormik = ({ options, onChange, ...props }) => {
setFieldValue(name, item)
}}
onBlur={innerOnBlur}
- value={value}
+ value={value || ''}
error={error}
open={open}
options={innerOptions}
diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js
index d07527cf..d53db534 100644
--- a/new-lamassu-admin/src/pages/Cashout/Cashout.js
+++ b/new-lamassu-admin/src/pages/Cashout/Cashout.js
@@ -24,6 +24,9 @@ const useStyles = makeStyles({
switchLabel: {
margin: 6,
width: 24
+ },
+ autoComplete: {
+ width: '100%'
}
})
@@ -114,7 +117,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
error={error?.message}
validationSchema={DenominationsSchema}
disableRowEdit={R.compose(R.not, R.path(['active']))}
- elements={getElements(machines, locale)}
+ elements={getElements(machines, locale, classes)}
/>
{R.isEmpty(machines) && }
{wizard && (
diff --git a/new-lamassu-admin/src/pages/Cashout/Wizard.js b/new-lamassu-admin/src/pages/Cashout/Wizard.js
index fe018c01..5e9eae55 100644
--- a/new-lamassu-admin/src/pages/Cashout/Wizard.js
+++ b/new-lamassu-admin/src/pages/Cashout/Wizard.js
@@ -5,6 +5,7 @@ import * as Yup from 'yup'
import Modal from 'src/components/Modal'
import { Autocomplete } from 'src/components/inputs/formik'
import denominations from 'src/utils/bill-denominations'
+import { getBillOptions } from 'src/utils/bill-options'
import { toNamespace } from 'src/utils/config'
import WizardSplash from './WizardSplash'
@@ -15,22 +16,13 @@ const LAST_STEP = 3
const MODAL_WIDTH = 554
const MODAL_HEIGHT = 520
-const getOptions = R.curry((locale, denomiations) => {
- const currency = R.prop('fiatCurrency')(locale)
- return R.compose(
- R.map(code => ({ code, display: code })),
- R.keys,
- R.path([currency])
- )(denomiations)
-})
-
const Wizard = ({ machine, locale, onClose, save, error }) => {
const [{ step, config }, setState] = useState({
step: 0,
config: { active: true }
})
- const options = getOptions(locale, denominations)
+ const options = getBillOptions(locale, denominations)
const title = `Enable cash-out`
const isLastStep = step === LAST_STEP
diff --git a/new-lamassu-admin/src/pages/Cashout/helper.js b/new-lamassu-admin/src/pages/Cashout/helper.js
index c9c2235b..7a9a4c72 100644
--- a/new-lamassu-admin/src/pages/Cashout/helper.js
+++ b/new-lamassu-admin/src/pages/Cashout/helper.js
@@ -1,7 +1,10 @@
+import * as R from 'ramda'
import * as Yup from 'yup'
-import { NumberInput } from 'src/components/inputs/formik'
+import { Autocomplete, NumberInput } from 'src/components/inputs/formik'
import { bold } from 'src/styling/helpers'
+import denominations from 'src/utils/bill-denominations'
+import { getBillOptions } from 'src/utils/bill-options'
import { CURRENCY_MAX } from 'src/utils/constants'
const DenominationsSchema = Yup.object().shape({
@@ -17,7 +20,18 @@ const DenominationsSchema = Yup.object().shape({
.max(CURRENCY_MAX)
})
-const getElements = (machines, { fiatCurrency } = {}) => {
+const getElements = (machines, locale = {}, classes) => {
+ const options = getBillOptions(locale, denominations)
+ const cassetteProps =
+ options?.length > 0
+ ? {
+ options: options,
+ labelProp: 'display',
+ valueProp: 'code',
+ className: classes.autoComplete
+ }
+ : { decimalPlaces: 0 }
+
return [
{
name: 'id',
@@ -33,25 +47,23 @@ const getElements = (machines, { fiatCurrency } = {}) => {
stripe: true,
width: 250,
textAlign: 'right',
- input: NumberInput,
- inputProps: {
- decimalPlaces: 0
- },
- suffix: fiatCurrency,
+ view: it => it,
+ input: options?.length > 0 ? Autocomplete : NumberInput,
+ inputProps: cassetteProps,
+ suffix: R.prop('fiatCurrency')(locale),
bold: bold
},
{
name: 'bottom',
header: 'Cassette 2 (Bottom)',
- size: 'sm',
stripe: true,
textAlign: 'right',
width: 250,
- input: NumberInput,
- inputProps: {
- decimalPlaces: 0
- },
- suffix: fiatCurrency
+ view: it => it,
+ input: options?.length > 0 ? Autocomplete : NumberInput,
+ inputProps: cassetteProps,
+ suffix: R.prop('fiatCurrency')(locale),
+ bold: bold
}
]
}
diff --git a/new-lamassu-admin/src/pages/Commissions/Commissions.js b/new-lamassu-admin/src/pages/Commissions/Commissions.js
index d220621a..a2cdba4d 100644
--- a/new-lamassu-admin/src/pages/Commissions/Commissions.js
+++ b/new-lamassu-admin/src/pages/Commissions/Commissions.js
@@ -16,6 +16,13 @@ import CommissionsList from './components/CommissionsList'
const styles = {
listViewButton: {
marginLeft: 4
+ },
+ autoComplete: {
+ width: '100%'
+ },
+ bold: {
+ fontWeight: 'bold',
+ height: 200
}
}
@@ -121,11 +128,13 @@ const Commissions = ({ name: SCREEN_KEY }) => {
{!showMachines && (
)}
{showMachines && (
diff --git a/new-lamassu-admin/src/pages/Commissions/components/CommissionsDetails.js b/new-lamassu-admin/src/pages/Commissions/components/CommissionsDetails.js
index 77153ee3..9032f35b 100644
--- a/new-lamassu-admin/src/pages/Commissions/components/CommissionsDetails.js
+++ b/new-lamassu-admin/src/pages/Commissions/components/CommissionsDetails.js
@@ -14,7 +14,7 @@ import {
} from 'src/pages/Commissions/helper'
const CommissionsDetails = memo(
- ({ config, currency, data, error, save, saveOverrides }) => {
+ ({ config, locale, currency, data, error, save, saveOverrides, classes }) => {
const [isEditingDefault, setEditingDefault] = useState(false)
const [isEditingOverrides, setEditingOverrides] = useState(false)
@@ -43,7 +43,7 @@ const CommissionsDetails = memo(
save={save}
validationSchema={schema}
data={R.of(commission)}
- elements={mainFields(currency)}
+ elements={mainFields(currency, locale, classes)}
setEditing={onEditingDefault}
forceDisable={isEditingOverrides}
/>
@@ -65,7 +65,13 @@ const CommissionsDetails = memo(
data
)}
data={orderedCommissionsOverrides}
- elements={overrides(data, currency, orderedCommissionsOverrides)}
+ elements={overrides(
+ data,
+ currency,
+ orderedCommissionsOverrides,
+ locale,
+ classes
+ )}
setEditing={onEditingOverrides}
forceDisable={isEditingDefault}
/>
diff --git a/new-lamassu-admin/src/pages/Commissions/helper.js b/new-lamassu-admin/src/pages/Commissions/helper.js
index ecea4753..4a7e072b 100644
--- a/new-lamassu-admin/src/pages/Commissions/helper.js
+++ b/new-lamassu-admin/src/pages/Commissions/helper.js
@@ -4,12 +4,10 @@ import React from 'react'
import { v4 } from 'uuid'
import * as Yup from 'yup'
-import { NumberInput } from 'src/components/inputs/formik'
-import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
+import { Autocomplete, NumberInput } from 'src/components/inputs/formik'
import { bold } from 'src/styling/helpers'
import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
-import { primaryColor, secondaryColorDark } from 'src/styling/variables'
import { CURRENCY_MAX } from 'src/utils/constants'
const ALL_MACHINES = {
@@ -145,10 +143,12 @@ const getOverridesFields = (getData, currency, auxElements) => {
{
name: 'minimumTx',
display: 'Minimun Tx',
- width: 144,
- input: NumberInput,
+ width: 169,
+ size: 'lg',
doubleHeader: 'Cash-in only',
- textAlign: 'right',
+ textAlign: 'center',
+ editingAlign: 'right',
+ input: NumberInput,
suffix: currency,
bold: bold,
inputProps: {
@@ -445,9 +445,9 @@ const getListCommissionsSchema = () => {
})
}
-const getTextStyle = (obj, isEditing) => {
- return { color: obj.default ? primaryColor : secondaryColorDark }
-}
+// const getTextStyle = (obj, isEditing) => {
+// return { color: obj.default ? primaryColor : secondaryColorDark }
+// }
const commissionsList = (auxData, currency, auxElements) => {
const getData = R.path(R.__, auxData)
@@ -482,7 +482,7 @@ const getListCommissionsFields = (getData, currency, defaults) => {
input: NumberInput,
textAlign: 'right',
suffix: '%',
- textStyle: obj => getTextStyle(obj),
+ // textStyle: obj => getTextStyle(obj),
inputProps: {
decimalPlaces: 3
}
@@ -496,7 +496,7 @@ const getListCommissionsFields = (getData, currency, defaults) => {
textAlign: 'right',
greenText: true,
suffix: '%',
- textStyle: obj => getTextStyle(obj),
+ // textStyle: obj => getTextStyle(obj),
inputProps: {
decimalPlaces: 3
}
@@ -509,7 +509,7 @@ const getListCommissionsFields = (getData, currency, defaults) => {
doubleHeader: 'Cash-in only',
textAlign: 'right',
suffix: currency,
- textStyle: obj => getTextStyle(obj),
+ // textStyle: obj => getTextStyle(obj),
inputProps: {
decimalPlaces: 2
}
@@ -522,7 +522,7 @@ const getListCommissionsFields = (getData, currency, defaults) => {
doubleHeader: 'Cash-in only',
textAlign: 'right',
suffix: currency,
- textStyle: obj => getTextStyle(obj),
+ // textStyle: obj => getTextStyle(obj),
inputProps: {
decimalPlaces: 2
}
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Commissions.js b/new-lamassu-admin/src/pages/Wizard/components/Commissions.js
index 0a7302f0..74596853 100644
--- a/new-lamassu-admin/src/pages/Wizard/components/Commissions.js
+++ b/new-lamassu-admin/src/pages/Wizard/components/Commissions.js
@@ -12,6 +12,11 @@ import { mainFields, defaults, schema } from 'src/pages/Commissions/helper'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
const useStyles = makeStyles(styles)
+const useCommissionStyles = makeStyles({
+ autoComplete: {
+ width: '100%'
+ }
+})
const GET_DATA = gql`
query getData {
@@ -26,6 +31,7 @@ const SAVE_CONFIG = gql`
function Commissions({ isActive, doContinue }) {
const classes = useStyles()
+ const commissionClasses = useCommissionStyles()
const { data } = useQuery(GET_DATA)
const [saveConfig] = useMutation(SAVE_CONFIG, {
@@ -41,6 +47,8 @@ function Commissions({ isActive, doContinue }) {
fromNamespace(namespaces.LOCALE)(data?.config)
)
+ const locale = fromNamespace(namespaces.LOCALE)(data?.config)
+
return (
@@ -56,7 +64,7 @@ function Commissions({ isActive, doContinue }) {
save={save}
validationSchema={schema}
data={[]}
- elements={mainFields(currency)}
+ elements={mainFields(currency, locale, commissionClasses)}
/>
diff --git a/new-lamassu-admin/src/utils/bill-options.js b/new-lamassu-admin/src/utils/bill-options.js
new file mode 100644
index 00000000..0678969b
--- /dev/null
+++ b/new-lamassu-admin/src/utils/bill-options.js
@@ -0,0 +1,12 @@
+import * as R from 'ramda'
+
+const getBillOptions = R.curry((locale, denomiations) => {
+ const currency = R.prop('fiatCurrency')(locale)
+ return R.compose(
+ R.map(code => ({ code, display: code })),
+ R.keys,
+ R.path([currency])
+ )(denomiations)
+})
+
+export { getBillOptions }