feat: created a number input component (base and formik)

fix: replace numeric TextInput fields on the Cashout, Commissions,
Cashboxes, Notifications, Operator Info and Terms & Conditions pages

fix: change the way the number format is defined on the component

fix: parameterize the number of decimal places in the in the number
input and set it's value for the current number inputs on the admin

new-lamassu-admin/package.json

@@ -30,6 +30,7 @@
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.10.2",
+    "react-number-format": "^4.4.1",
     "react-router-dom": "5.1.2",
     "react-virtualized": "^9.21.2",
     "sanctuary": "^2.0.1",

new-lamassu-admin/src/components/inputs/base/NumberInput.js

@@ -0,0 +1,54 @@
+import React, { memo } from 'react'
+import NumberFormat from 'react-number-format'
+
+import TextInput from './TextInput'
+
+const NumberInput = memo(
+  ({
+    name,
+    onChange,
+    onBlur,
+    value,
+    error,
+    suffix,
+    textAlign,
+    width,
+    // lg or sm
+    size,
+    bold,
+    className,
+    decimalPlaces,
+    InputProps,
+    ...props
+  }) => {
+    return (
+      <NumberFormat
+        name={name}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        error={error}
+        suffix={suffix}
+        textAlign={textAlign}
+        width={width}
+        // lg or sm
+        size={size}
+        bold={bold}
+        className={className}
+        customInput={TextInput}
+        decimalScale={decimalPlaces}
+        onValueChange={values => {
+          onChange({
+            target: {
+              id: name,
+              value: values.floatValue
+            }
+          })
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+export default NumberInput

new-lamassu-admin/src/components/inputs/base/index.js

@@ -1,8 +1,17 @@
 import Autocomplete from './Autocomplete'
 import Checkbox from './Checkbox'
+import NumberInput from './NumberInput'
 import RadioGroup from './RadioGroup'
 import SecretInput from './SecretInput'
 import Switch from './Switch'
 import TextInput from './TextInput'
 
-export { Checkbox, TextInput, Switch, SecretInput, RadioGroup, Autocomplete }
+export {
+  Checkbox,
+  TextInput,
+  NumberInput,
+  Switch,
+  SecretInput,
+  RadioGroup,
+  Autocomplete
+}

new-lamassu-admin/src/components/inputs/formik/NumberInput.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react'
+
+import { NumberInput } from '../base'
+
+const NumberInputFormik = memo(({ decimalPlaces, ...props }) => {
+  const { name, onChange, onBlur, value } = props.field
+  const { touched, errors } = props.form
+
+  const error = !!(touched[name] && errors[name])
+
+  return (
+    <NumberInput
+      name={name}
+      onChange={onChange}
+      onBlur={onBlur}
+      value={value}
+      error={error}
+      decimalPlaces={decimalPlaces}
+      {...props}
+    />
+  )
+})
+
+export default NumberInputFormik

new-lamassu-admin/src/components/inputs/formik/index.js

@@ -1,7 +1,15 @@
 import Autocomplete from './Autocomplete'
 import Checkbox from './Checkbox'
+import NumberInput from './NumberInput'
 import RadioGroup from './RadioGroup'
 import SecretInput from './SecretInput'
 import TextInput from './TextInput'
 
-export { Autocomplete, Checkbox, TextInput, SecretInput, RadioGroup }
+export {
+  Autocomplete,
+  Checkbox,
+  TextInput,
+  NumberInput,
+  SecretInput,
+  RadioGroup
+}

new-lamassu-admin/src/pages/Cashout/helper.js

@@ -1,6 +1,6 @@
 import * as Yup from 'yup'
 
-import TextInput from 'src/components/inputs/formik/TextInput'
+import { NumberInput } from 'src/components/inputs/formik'
 
 const DenominationsSchema = Yup.object().shape({
   top: Yup.number().required('Required'),
@@ -26,7 +26,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
       stripe: true,
       width: 200,
       textAlign: 'right',
-      input: TextInput
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: 'bottom',
@@ -36,7 +39,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
       stripe: true,
       textAlign: 'right',
       width: 200,
-      input: TextInput
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: 'zeroConfLimit',
@@ -45,7 +51,10 @@ const getElements = (machines, { fiatCurrency } = {}) => {
       stripe: true,
       textAlign: 'right',
       width: 200,
-      input: TextInput
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
     }
   ]
 }

new-lamassu-admin/src/pages/Commissions/helper.js

@@ -1,7 +1,7 @@
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
-import { TextInput } from 'src/components/inputs/formik'
+import { NumberInput } from 'src/components/inputs/formik'
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
 
 const getOverridesFields = (getData, currency) => {
@@ -54,35 +54,47 @@ const getOverridesFields = (getData, currency) => {
       name: 'cashIn',
       display: 'Cash-in',
       width: 140,
-      input: TextInput,
+      input: NumberInput,
       textAlign: 'right',
-      suffix: '%'
+      suffix: '%',
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: 'cashOut',
       display: 'Cash-out',
       width: 140,
-      input: TextInput,
+      input: NumberInput,
       textAlign: 'right',
-      suffix: '%'
+      suffix: '%',
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: 'fixedFee',
       display: 'Fixed fee',
       width: 140,
-      input: TextInput,
+      input: NumberInput,
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
-      suffix: currency
+      suffix: currency,
+      inputProps: {
+        decimalPlaces: 2
+      }
     },
     {
       name: 'minimumTx',
       display: 'Minimun Tx',
       width: 140,
-      input: TextInput,
+      input: NumberInput,
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
-      suffix: currency
+      suffix: currency,
+      inputProps: {
+        decimalPlaces: 2
+      }
     }
   ]
 }
@@ -93,16 +105,22 @@ const mainFields = currency => [
     display: 'Cash-in',
     width: 169,
     size: 'lg',
-    input: TextInput,
+    input: NumberInput,
-    suffix: '%'
+    suffix: '%',
+    inputProps: {
+      decimalPlaces: 0
+    }
   },
   {
     name: 'cashOut',
     display: 'Cash-out',
     width: 169,
     size: 'lg',
-    input: TextInput,
+    input: NumberInput,
-    suffix: '%'
+    suffix: '%',
+    inputProps: {
+      decimalPlaces: 0
+    }
   },
   {
     name: 'fixedFee',
@@ -111,8 +129,11 @@ const mainFields = currency => [
     size: 'lg',
     doubleHeader: 'Cash-in only',
     textAlign: 'center',
-    input: TextInput,
+    input: NumberInput,
-    suffix: currency
+    suffix: currency,
+    inputProps: {
+      decimalPlaces: 2
+    }
   },
   {
     name: 'minimumTx',
@@ -121,8 +142,11 @@ const mainFields = currency => [
     size: 'lg',
     doubleHeader: 'Cash-in only',
     textAlign: 'center',
-    input: TextInput,
+    input: NumberInput,
-    suffix: currency
+    suffix: currency,
+    inputProps: {
+      decimalPlaces: 2
+    }
   }
 ]
 

new-lamassu-admin/src/pages/Maintenance/Cashboxes.js

@@ -4,7 +4,7 @@ import React from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
-import TextInputFormik from 'src/components/inputs/formik/TextInput'
+import { NumberInput } from 'src/components/inputs/formik'
 import TitleSection from 'src/components/layout/TitleSection'
 
 const ValidationSchema = Yup.object().shape({
@@ -87,14 +87,20 @@ const Cashboxes = () => {
       header: 'Cash-out 1',
       width: 265,
       textAlign: 'left',
-      input: TextInputFormik
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: 'cassette2',
       header: 'Cash-out 2',
       width: 265,
       textAlign: 'left',
-      input: TextInputFormik
+      input: NumberInput,
+      inputProps: {
+        decimalPlaces: 0
+      }
     }
   ]
 

new-lamassu-admin/src/pages/Notifications/components/EditableNumber.js

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { useFormikContext, Field as FormikField } from 'formik'
 import React from 'react'
 
-import TextInput from 'src/components/inputs/formik/TextInput'
+import { NumberInput } from 'src/components/inputs/formik'
 import { Label1, Info1, TL2 } from 'src/components/typography'
 
 import styles from './EditableNumber.styles'
@@ -17,6 +17,7 @@ const EditableNumber = ({
   displayValue,
   decoration,
   className,
+  decimalPlaces = 0,
   width = 80
 }) => {
   const classes = useStyles({ width, editing })
@@ -40,9 +41,10 @@ const EditableNumber = ({
             size="lg"
             fullWidth
             name={name}
-            component={TextInput}
+            component={NumberInput}
             textAlign="right"
             width={width}
+            decimalPlaces={decimalPlaces}
           />
         )}
         <TL2 className={classes.decoration}>{decoration}</TL2>

new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceOverrides.js

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
+import { NumberInput } from 'src/components/inputs/formik'
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
-import TextInputFormik from 'src/components/inputs/formik/TextInput.js'
 
 import NotificationsCtx from '../NotificationsContext'
 
@@ -89,16 +89,22 @@ const CryptoBalanceOverrides = ({ section }) => {
       width: 155,
       textAlign: 'right',
       bold: true,
-      input: TextInputFormik,
+      input: NumberInput,
-      suffix: currency
+      suffix: currency,
+      inputProps: {
+        decimalPlaces: 2
+      }
     },
     {
       name: HIGH_BALANCE_KEY,
       width: 155,
       textAlign: 'right',
       bold: true,
-      input: TextInputFormik,
+      input: NumberInput,
-      suffix: currency
+      suffix: currency,
+      inputProps: {
+        decimalPlaces: 2
+      }
     }
   ]
 

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
+import { NumberInput } from 'src/components/inputs/formik/'
 import Autocomplete from 'src/components/inputs/formik/Autocomplete'
-import TextInputFormik from 'src/components/inputs/formik/TextInput.js'
 
 import NotificationsCtx from '../NotificationsContext'
 
@@ -74,8 +74,11 @@ const FiatBalanceOverrides = ({ section }) => {
       textAlign: 'right',
       doubleHeader: 'Cash-out (Cassette Empty)',
       bold: true,
-      input: TextInputFormik,
+      input: NumberInput,
-      suffix: 'notes'
+      suffix: 'notes',
+      inputProps: {
+        decimalPlaces: 0
+      }
     },
     {
       name: CASSETTE_2_KEY,
@@ -84,8 +87,11 @@ const FiatBalanceOverrides = ({ section }) => {
       textAlign: 'right',
       doubleHeader: 'Cash-out (Cassette Empty)',
       bold: true,
-      input: TextInputFormik,
+      input: NumberInput,
-      suffix: 'notes'
+      suffix: 'notes',
+      inputProps: {
+        decimalPlaces: 0
+      }
     }
   ]
 

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -11,7 +11,7 @@ import * as Yup from 'yup'
 import ErrorMessage from 'src/components/ErrorMessage'
 import { Link } from 'src/components/buttons'
 import Switch from 'src/components/inputs/base/Switch'
-import TextInputFormik from 'src/components/inputs/formik/TextInput'
+import { TextInput, NumberInput } from 'src/components/inputs/formik'
 import {
   P,
   Info2,
@@ -160,7 +160,7 @@ const ContactInfo = () => {
       name: 'name',
       label: 'Full name',
       value: info.name ?? '',
-      component: TextInputFormik
+      component: TextInput
     },
     {
       name: 'phone',
@@ -170,25 +170,25 @@ const ContactInfo = () => {
           info.phone,
           locale.country
         ).formatInternational() ?? '',
-      component: TextInputFormik
+      component: NumberInput
     },
     {
       name: 'email',
       label: 'Email',
       value: info.email ?? '',
-      component: TextInputFormik
+      component: TextInput
     },
     {
       name: 'website',
       label: 'Website',
       value: info.website ?? '',
-      component: TextInputFormik
+      component: TextInput
     },
     {
       name: 'companyNumber',
       label: 'Company number',
       value: info.companyNumber ?? '',
-      component: TextInputFormik
+      component: NumberInput
     }
   ]
 

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js

@@ -10,7 +10,7 @@ import * as Yup from 'yup'
 import ErrorMessage from 'src/components/ErrorMessage'
 import { Button } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
-import TextInputFormik from 'src/components/inputs/formik/TextInput'
+import { TextInput } from 'src/components/inputs/formik'
 import { Info2, Label2 } from 'src/components/typography'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
@@ -149,7 +149,7 @@ const TermsConditions = () => {
                 <Field
                   id={f.name}
                   name={f.name}
-                  component={TextInputFormik}
+                  component={TextInput}
                   width={f.width}
                   placeholder={f.placeholder}
                   type="text"