feat: bill picker available on cashout and commission screens

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

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}

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) && <EmptyTable message="No machines so far" />}
       {wizard && (

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

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,
+      view: it => it,
-      inputProps: {
+      input: options?.length > 0 ? Autocomplete : NumberInput,
-        decimalPlaces: 0
+      inputProps: cassetteProps,
-      },
+      suffix: R.prop('fiatCurrency')(locale),
-      suffix: fiatCurrency,
       bold: bold
     },
     {
       name: 'bottom',
       header: 'Cassette 2 (Bottom)',
-      size: 'sm',
       stripe: true,
       textAlign: 'right',
       width: 250,
-      input: NumberInput,
+      view: it => it,
-      inputProps: {
+      input: options?.length > 0 ? Autocomplete : NumberInput,
-        decimalPlaces: 0
+      inputProps: cassetteProps,
-      },
+      suffix: R.prop('fiatCurrency')(locale),
-      suffix: fiatCurrency
+      bold: bold
     }
   ]
 }

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 && (
         <CommissionsDetails
           config={config}
+          locale={localeConfig}
           currency={currency}
           data={data}
           error={error}
           save={save}
           saveOverrides={saveOverrides}
+          classes={classes}
         />
       )}
       {showMachines && (

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}
           />

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, NumberInput } from 'src/components/inputs/formik'
-import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
 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,
+      width: 169,
-      input: NumberInput,
+      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) => {
+// const getTextStyle = (obj, isEditing) => {
-  return { color: obj.default ? primaryColor : secondaryColorDark }
+//   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
       }

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 (
     <div className={classes.wrapper}>
       <TitleSection title="Commissions" />
@@ -56,7 +64,7 @@ function Commissions({ isActive, doContinue }) {
           save={save}
           validationSchema={schema}
           data={[]}
-          elements={mainFields(currency)}
+          elements={mainFields(currency, locale, commissionClasses)}
         />
       </Section>
     </div>

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 }