From 2eda9645b32aa5ccf8c23f31a359b15333b8f996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Fri, 9 Jul 2021 15:37:11 +0100
Subject: [PATCH] fix: always display a selected radio option and styling

---
 .../src/pages/Maintenance/CashCassettes.js       | 16 +++++++++++-----
 .../pages/Maintenance/CashCassettes.styles.js    |  6 +++---
 new-lamassu-admin/src/utils/constants.js         |  5 ++++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js
index 263da2fd..0130923d 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.js
@@ -18,6 +18,8 @@ import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enable
 import { ReactComponent as ReverseHistoryIcon } from 'src/styling/icons/circle buttons/history/white.svg'
 import { ReactComponent as HistoryIcon } from 'src/styling/icons/circle buttons/history/zodiac.svg'
 import { fromNamespace, toNamespace } from 'src/utils/config'
+import { MANUAL, AUTOMATIC } from 'src/utils/constants.js'
+import { onlyFirstToUpper } from 'src/utils/string'
 
 import styles from './CashCassettes.styles.js'
 import CashCassettesFooter from './CashCassettesFooter'
@@ -156,8 +158,8 @@ const CashCassettes = () => {
   const isCashOutDisabled = ({ id }) => !getCashoutSettings(id).active
 
   const radioButtonOptions = [
-    { display: 'Automatic', code: 'Automatic' },
-    { display: 'Manual', code: 'Manual' }
+    { display: 'Automatic', code: AUTOMATIC },
+    { display: 'Manual', code: MANUAL }
   ]
 
   const handleRadioButtons = evt => {
@@ -262,7 +264,11 @@ const CashCassettes = () => {
               alignItems="center"
               justifyContent="end"
               mr="-4px">
-              <P className={classes.selection}>{cashboxReset}</P>
+              {cashboxReset && (
+                <P className={classes.selection}>
+                  {onlyFirstToUpper(cashboxReset)}
+                </P>
+              )}
               <IconButton
                 onClick={() => setEditingSchema(true)}
                 className={classes.button}>
@@ -326,7 +332,7 @@ const CashCassettes = () => {
           </P>
           <RadioGroup
             name="set-automatic-reset"
-            value={selectedRadio}
+            value={selectedRadio ?? cashboxReset}
             options={[radioButtonOptions[0]]}
             onChange={handleRadioButtons}
             className={classes.radioButtons}
@@ -337,7 +343,7 @@ const CashCassettes = () => {
           </P>
           <RadioGroup
             name="set-manual-reset"
-            value={selectedRadio}
+            value={selectedRadio ?? cashboxReset}
             options={[radioButtonOptions[1]]}
             onChange={handleRadioButtons}
             className={classes.radioButtons}
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
index 222de7ba..3310015c 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashCassettes.styles.js
@@ -20,13 +20,13 @@ export default {
   },
   descriptions: {
     color: offColor,
-    marginTop: '0px'
+    marginTop: 0
   },
   cashboxReset: {
     color: offColor,
-    margin: '13px 0px -5px 20px'
+    margin: [[13, 0, -5, 20]]
   },
   selection: {
-    marginRight: '12px'
+    marginRight: 12
   }
 }
diff --git a/new-lamassu-admin/src/utils/constants.js b/new-lamassu-admin/src/utils/constants.js
index c245e403..5a211c45 100644
--- a/new-lamassu-admin/src/utils/constants.js
+++ b/new-lamassu-admin/src/utils/constants.js
@@ -1,3 +1,6 @@
 const CURRENCY_MAX = 9999999
 
-export { CURRENCY_MAX }
+const AUTOMATIC = 'automatic'
+const MANUAL = 'manual'
+
+export { CURRENCY_MAX, AUTOMATIC, MANUAL }