From bb5f1fb1d3e40b4998f20eee915a692df210e0b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Mon, 21 Jun 2021 18:55:36 +0100
Subject: [PATCH] refactor: use a specific prop for each different cashbox
 styling

---
 .../src/components/inputs/cashbox/Cashbox.js  | 19 +++++++++++++------
 .../inputs/cashbox/Cashbox.styles.js          |  4 ++--
 .../sections/FiatBalanceAlerts.js             |  8 ++++++--
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
index 294c355e..a35060af 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
@@ -19,25 +19,32 @@ const Cashbox = ({
   className,
   emptyPartClassName,
   labelClassName,
-  inFiatBalanceAlerts
+  applyColorVariant,
+  applyFiatBalanceAlertsStyling,
+  removeInnerPercentage
 }) => {
-  const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts })
+  console.log(
+    applyColorVariant,
+    applyFiatBalanceAlertsStyling,
+    removeInnerPercentage
+  )
+  const classes = cashboxClasses({ percent, cashOut, applyColorVariant })
   const threshold = 51
 
   const showCashBox = {
-    [classes.fiatBalanceAlertCashbox]: inFiatBalanceAlerts,
-    [classes.cashbox]: !inFiatBalanceAlerts
+    [classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
+    [classes.cashbox]: !applyFiatBalanceAlertsStyling
   }
 
   return (
     <div className={classnames(className, showCashBox)}>
       <div className={classnames(emptyPartClassName, classes.emptyPart)}>
-        {!inFiatBalanceAlerts && percent <= threshold && (
+        {!removeInnerPercentage && percent <= threshold && (
           <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
         )}
       </div>
       <div className={classes.fullPart}>
-        {!inFiatBalanceAlerts && percent > threshold && (
+        {!removeInnerPercentage && percent > threshold && (
           <Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
         )}
       </div>
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
index f14f711e..cebc8b4f 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
@@ -11,8 +11,8 @@ const colors = {
   }
 }
 
-const colorPicker = ({ percent, cashOut, inFiatBalanceAlerts }) => {
-  if (inFiatBalanceAlerts) return colors[cashOut ? 'cashOut' : 'cashIn'].full
+const colorPicker = ({ percent, cashOut, applyColorVariant }) => {
+  if (applyColorVariant) return colors[cashOut ? 'cashOut' : 'cashIn'].full
   return colors[cashOut ? 'cashOut' : 'cashIn'][
     percent >= 50 ? 'full' : 'empty'
   ]
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
index bb49e187..6aaff131 100644
--- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
+++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
@@ -77,7 +77,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                     values.fillingPercentageCassette1 ??
                     data?.fillingPercentageCassette1
                   }
-                  inFiatBalanceAlerts={true}
+                  applyColorVariant
+                  applyFiatBalanceAlertsStyling
+                  removeInnerPercentage
                   cashOut
                 />
                 <div className={classes.col2}>
@@ -101,7 +103,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
                   values.fillingPercentageCassette2 ??
                   data?.fillingPercentageCassette2
                 }
-                inFiatBalanceAlerts={true}
+                applyColorVariant
+                applyFiatBalanceAlertsStyling
+                removeInnerPercentage
                 cashOut
               />
               <div className={classes.col2}>