Fix: remove inline styles and comment out cashIn total calculations

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

@@ -49,15 +49,19 @@ const GET_MACHINES_AND_CONFIG = gql`
       cassette2
     }
     config
-    bills {
-      fiat
-      deviceId
-      created
-      cashbox
-    }
   }
 `
 
+/* 
+  // for cash in total calculation
+  bills {
+    fiat
+    deviceId
+    created
+    cashbox
+  }
+*/
+
 const SET_CASSETTE_BILLS = gql`
   mutation MachineAction(
     $deviceId: ID!

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

@@ -1,19 +1,27 @@
-/*eslint-disable*/
 import { makeStyles } from '@material-ui/core'
+// import BigNumber from 'bignumber.js'
 import * as R from 'ramda'
 import React from 'react'
-import BigNumber from "bignumber.js"
+
 import { Info1, Info2, Info3 } from 'src/components/typography/index'
-import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
+// 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 { fromNamespace } from 'src/utils/config'
 
 import styles from './CashCassettesFooter.styles.js'
 const useStyles = makeStyles(styles)
 
-const sortDate = function(a, b) { return new Date(b.created).getTime() - new Date(a.created).getTime()}
+/* const sortDate = function(a, b) {
+  return new Date(b.created).getTime() - new Date(a.created).getTime()
+} */
 
-const CashCassettesFooter = ({ machines, config, currencyCode, bills, deviceIds }) => {
+const CashCassettesFooter = ({
+  machines,
+  config,
+  currencyCode,
+  bills,
+  deviceIds
+}) => {
   const classes = useStyles()
   const cashout = config && fromNamespace('cashOut')(config)
   const getCashoutSettings = id => fromNamespace(id)(cashout)
@@ -21,50 +29,46 @@ const CashCassettesFooter = ({ machines, config, currencyCode, bills, deviceIds
     (acc[0] += cassette1 * getCashoutSettings(id).top),
     (acc[1] += cassette2 * getCashoutSettings(id).bottom)
   ]
-  const totalInCassettes = R.sum(R.reduce(reducerFn, [0,0], machines))
+  const totalInCassettes = R.sum(R.reduce(reducerFn, [0, 0], machines))
-  const totalInCashBox = R.sum(R.flatten(R.map(id => {
-    const sliceIdx = R.path([id, 0, 'cashbox'])(bills) ?? 0
-    return R.map(R.prop('fiat'), R.slice(0, sliceIdx, R.sort(sortDate, bills[id] ?? [])))
-  }, deviceIds)))
-  const total = new BigNumber(totalInCassettes + totalInCashBox).toFormat(0)
 
+  /*   const totalInCashBox = R.sum(
+    R.flatten(
+      R.map(id => {
+        const sliceIdx = R.path([id, 0, 'cashbox'])(bills) ?? 0
+        return R.map(
+          R.prop('fiat'),
+          R.slice(0, sliceIdx, R.sort(sortDate, bills[id] ?? []))
+        )
+      }, deviceIds)
+    )
+  ) */
+
+  // const total = new BigNumber(totalInCassettes + totalInCashBox).toFormat(0)
 
   return (
     <div className={classes.footerContainer}>
       <div className={classes.footerContent}>
         <Info3 className={classes.footerLabel}>Cash value in System</Info3>
-        <div style={{ display: 'flex' }}>
+        {/*         <div className={classes.flex}>
-          <TxInIcon
+          <TxInIcon className={classes.icon} />
-            style={{
+          <Info2 className={classes.iconLabel}>Cash-in:</Info2>
-              alignSelf: 'center',
+          <Info1 className={classes.valueDisplay}>
-              height: 20,
+            {totalInCashBox} {currencyCode}
-              width: 20,
+          </Info1>
-              marginRight: 8
+        </div> */}
-            }}
+        <div className={classes.flex}>
-          />
+          <TxOutIcon className={classes.icon} />
-          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>
+          <Info2 className={classes.iconLabel}>Cash-out:</Info2>
-            Cash-in:
+          <Info1 className={classes.valueDisplay}>
-          </Info2>
+            {totalInCassettes} {currencyCode}
-          <Info1 style={{ alignSelf: 'center' }}>{totalInCashBox} {currencyCode}</Info1>
+          </Info1>
-        </div>
-        <div style={{ display: 'flex' }}>
-          <TxOutIcon
-            style={{
-              alignSelf: 'center',
-              height: 20,
-              width: 20,
-              marginRight: 8
-            }}
-          />
-          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>
-            Cash-out:
-          </Info2>
-          <Info1 style={{ alignSelf: 'center' }}>{totalInCassettes} {currencyCode}</Info1>
-        </div>
-        <div style={{ display: 'flex' }}>
-          <Info2 style={{ alignSelf: 'center', marginRight: 8 }}>Total:</Info2>
-          <Info1 style={{ alignSelf: 'center' }}>{total} {currencyCode}</Info1>
         </div>
+        {/*         <div className={classes.flex}>
+          <Info2 className={classes.iconLabel}>Total:</Info2>
+          <Info1 className={classes.valueDisplay}>
+            {total} {currencyCode}
+          </Info1>
+        </div> */}
       </div>
     </div>
   )

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

@@ -7,19 +7,38 @@ export default {
   },
   footerContent: {
     width: 1200,
-    height: 64,
+    maxHeight: 64,
     display: 'flex',
-    justifyContent: 'space-around'
+    justifyContent: 'space-around',
+    position: 'fixed'
   },
   footerContainer: {
     position: 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
     height: 64,
+    left: 0,
+    bottom: 0,
+    width: '100vw',
     backgroundColor: 'white',
     display: 'flex',
     justifyContent: 'space-around',
     boxShadow: [[0, -1, 10, 0, 'rgba(50, 50, 50, 0.1)']]
+  },
+  flex: {
+    display: 'flex',
+    // temp marginLeft until cashIn square is enabled
+    marginLeft: -640
+  },
+  icon: {
+    alignSelf: 'center',
+    height: 20,
+    width: 20,
+    marginRight: 8
+  },
+  iconLabel: {
+    alignSelf: 'center',
+    marginRight: 8
+  },
+  valueDisplay: {
+    alignSelf: 'center'
   }
 }