CEC-4581 Show battery voltage in digital twin (#365)

* CEC-4581 Show battery voltage in digital twin

* Fix warning

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

@@ -55,6 +55,13 @@ exports[`DigitalTwinTab Render 1`] = `
                 : 
                 12000 km
               </p>
+              <p>
+                <b>
+                  Voltage
+                </b>
+                : 
+                12.5 V
+              </p>
               <p>
                 <b>
                   Max Range

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -39,6 +39,7 @@ let vehicleState = {
     battery: {
       total_mileage_odometer: 12000,
       percent: 95,
+      battery_voltage: 12.5,
     },
     max_range: {
       max_miles: 577,

src/components/DigitalTwin/index.js

@@ -8,6 +8,11 @@ const UNKNOWN = "unknown";
 const LOCKED = "Locked";
 const UNLOCKED = "Unlocked";
 
+const appendUnits = (value, units) => {
+  if (value || value === 0) return `${value}${units}`;
+  return UNKNOWN;
+}
+
 const keyValueTemplate = (key, value) => (
   <p key={key}>
     <b>{key}</b>: {value}
@@ -37,16 +42,17 @@ const DigitalTwin = (props) => {
       {(battery || max_range) && (
         <div className={classes.popupSection}>
           <h3>Battery</h3>
-          {keyValueTemplate("Percentage", `${battery?.percent || 0}%`)}
-          {keyValueTemplate("Total Mileage", `${battery?.total_mileage_odometer} km` || UNKNOWN)}
-          {keyValueTemplate("Max Range", `${max_range?.max_miles} km` || UNKNOWN)}
+          {keyValueTemplate("Percentage", appendUnits(battery?.percent || 0, "%"))}
+          {keyValueTemplate("Total Mileage", appendUnits(battery?.total_mileage_odometer, " km"))}
+          {keyValueTemplate("Voltage", appendUnits(battery?.battery_voltage, " V"))}
+          {keyValueTemplate("Max Range", appendUnits(max_range?.max_miles, " km"))}
         </div>
       )}
       {(vcu0x260 || charging_metrics) && (
         <div className={classes.popupSection}>
           <h3>Charging</h3>
           {keyValueTemplate("Charge Type", vcu0x260?.charge_type || UNKNOWN)}
-          {keyValueTemplate("Remaining Time", `${charging_metrics?.remaining_charging_time} min` || UNKNOWN)}
+          {keyValueTemplate("Remaining Time", appendUnits(charging_metrics?.remaining_charging_time, " min"))}
         </div>
       )}
       {doors && (
@@ -95,9 +101,9 @@ const DigitalTwin = (props) => {
               return keyValueTemplate(value[0], "Invalid")
             }
             if (value[0] === "altitude") {
-              return keyValueTemplate(value[0], `${value[1]} m`);
+              return keyValueTemplate(value[0], appendUnits(value[1], " m"));
             } else {
-              return keyValueTemplate(value[0], `${value[1]}°`);
+              return keyValueTemplate(value[0], appendUnits(value[1], "°"));
             }
           })}
         </div>
@@ -124,7 +130,7 @@ const DigitalTwin = (props) => {
       )}
       {vehicle_speed && (
         <div className={classes.popupSection}>
-          {keyValueTemplate("Vehicle Speed", `${vehicle_speed.speed} km/h`)}
+          {keyValueTemplate("Vehicle Speed", appendUnits(vehicle_speed?.speed, " km/h"))}
         </div>
       )}
     </div>