feat: brought back the cashout component

style: fixed the cashout component styles according to the specs

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js

@@ -1,4 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
 import React from 'react'
 
 import Chip from 'src/components/Chip'
@@ -12,10 +13,10 @@ import { cashboxStyles, gridStyles } from './Cashbox.styles'
 const cashboxClasses = makeStyles(cashboxStyles)
 const gridClasses = makeStyles(gridStyles)
 
-const Cashbox = ({ percent = 0, cashOut = false }) => {
+const Cashbox = ({ percent = 0, cashOut = false, className }) => {
   const classes = cashboxClasses({ percent, cashOut })
   return (
-    <div className={classes.cashbox}>
+    <div className={classnames(className, classes.cashbox)}>
       <div className={classes.emptyPart}>
         {percent <= 50 && <Label2>{percent.toFixed(0)}%</Label2>}
       </div>
@@ -86,20 +87,30 @@ const CashInFormik = ({
   )
 }
 
-const CashOut = ({ capacity = 500, denomination = 0, currency, notes }) => {
+const CashOut = ({
+  capacity = 500,
+  denomination = 0,
+  currency,
+  notes,
+  className
+}) => {
   const percent = (100 * notes) / capacity
   const classes = gridClasses()
   return (
     <>
       <div className={classes.row}>
         <div className={classes.col}>
-          <Cashbox percent={percent} cashOut />
+          <Cashbox className={className} percent={percent} cashOut />
         </div>
-        <div className={(classes.col, classes.col2)}>
+        <div className={classes.col2}>
-          <div>
+          <div className={classes.innerRow}>
-            <Info2 className={classes.noMarginText}>
+            <Info2 className={classes.noMarginText}>{notes}</Info2>
-              {notes} <Chip label={`${denomination} ${currency.code}`} />
+            <Chip
-            </Info2>
+              className={classes.chip}
+              label={`${denomination} ${currency.code}`}
+            />
+          </div>
+          <div className={classes.innerRow}>
             <Label1 className={classes.noMarginText}>
               {notes * denomination} {currency.code}
             </Label1>

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -44,16 +44,15 @@ const cashboxStyles = {
 
 const gridStyles = {
   row: {
-    height: 36,
+    display: 'flex',
-    width: 183,
+    justifyContent: 'flex-end'
-    display: 'grid',
+  },
-    gridTemplateColumns: 'repeat(2,1fr)',
+  innerRow: {
-    gridTemplateRows: '1fr',
+    display: 'flex',
-    gridColumnGap: 18,
+    justifyContent: 'flex-start'
-    gridRowGap: 0
   },
   col2: {
-    width: 117
+    marginLeft: 16
   },
   noMarginText: {
     marginTop: 0,
@@ -61,6 +60,9 @@ const gridStyles = {
   },
   link: {
     marginTop: spacer
+  },
+  chip: {
+    margin: [[0, 0, 0, 7]]
   }
 }
 

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

@@ -1,22 +1,31 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
 import React from 'react'
 import * as Yup from 'yup'
 
 import { Table as EditableTable } from 'src/components/editableTable'
+import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
 import { NumberInput } from 'src/components/inputs/formik'
 import TitleSection from 'src/components/layout/TitleSection'
+import { fromNamespace } from 'src/utils/config'
+
+import styles from './Cashboxes.styles.js'
+
+const useStyles = makeStyles(styles)
 
 const ValidationSchema = Yup.object().shape({
   name: Yup.string().required('Required'),
   cassette1: Yup.number()
     .required('Required')
     .integer()
-    .min(0),
+    .min(0)
+    .max(500),
   cassette2: Yup.number()
     .required('Required')
     .integer()
     .min(0)
+    .max(500)
 })
 
 const GET_MACHINES_AND_CONFIG = gql`
@@ -52,6 +61,8 @@ const RESET_CASHOUT_BILLS = gql`
 `
 
 const Cashboxes = () => {
+  const classes = useStyles()
+
   const { data } = useQuery(GET_MACHINES_AND_CONFIG)
 
   const [resetCashOut] = useMutation(RESET_CASHOUT_BILLS, {
@@ -62,6 +73,10 @@ const Cashboxes = () => {
     }
   })
 
+  const cashout = data?.config && fromNamespace('cashOut')(data.config)
+  const locale = data?.config && fromNamespace('locale')(data.config)
+  const fiatCurrency = locale?.fiatCurrency
+
   const onSave = (...[, { id, cassette1, cassette2 }]) => {
     return resetCashOut({
       variables: {
@@ -73,6 +88,8 @@ const Cashboxes = () => {
     })
   }
 
+  const getDenomination = id => fromNamespace(id)(cashout)
+
   const elements = [
     {
       name: 'name',
@@ -86,6 +103,14 @@ const Cashboxes = () => {
       header: 'Cash-out 1',
       width: 265,
       textAlign: 'right',
+      view: (value, { id }) => (
+        <CashOut
+          className={classes.cashbox}
+          denomination={getDenomination(id)?.bottom}
+          currency={{ code: fiatCurrency }}
+          notes={value}
+        />
+      ),
       input: NumberInput,
       inputProps: {
         decimalPlaces: 0
@@ -96,6 +121,14 @@ const Cashboxes = () => {
       header: 'Cash-out 2',
       width: 265,
       textAlign: 'right',
+      view: (value, { id }) => (
+        <CashOut
+          className={classes.cashbox}
+          denomination={getDenomination(id)?.top}
+          currency={{ code: fiatCurrency }}
+          notes={value}
+        />
+      ),
       input: NumberInput,
       inputProps: {
         decimalPlaces: 0

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

@@ -0,0 +1,6 @@
+export default {
+  cashbox: {
+    width: 80,
+    height: 36
+  }
+}