From 82d722d8f521b5dedc7955f1d6b347a1138170e8 Mon Sep 17 00:00:00 2001
From: Paul Adamsen <117673433+pauladamseniii@users.noreply.github.com>
Date: Mon, 5 Jun 2023 17:30:44 -0400
Subject: [PATCH] CEC-4351 - units for digital twin props (#347)

* CEC-4351 - units for digital twin props

* fix mocked data
---
 .../Status/__snapshots__/DigitalTwinTab.test.jsx.snap  |  8 ++++----
 src/components/Contexts/__mocks__/VehicleContext.jsx   |  1 +
 src/components/DigitalTwin/index.js                    | 10 +++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
index 1f8ffc2..2f68f73 100644
--- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
@@ -53,14 +53,14 @@ exports[`DigitalTwinTab Render 1`] = `
                   Total Mileage
                 </b>
                 : 
-                unknown
+                12000 km
               </p>
               <p>
                 <b>
                   Max Range
                 </b>
                 : 
-                577
+                577 km
               </p>
             </div>
             <div
@@ -158,7 +158,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   altitude
                 </b>
                 : 
-                17
+                17 m
               </p>
               <p>
                 <b>
@@ -227,7 +227,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   Vehicle Speed
                 </b>
                 : 
-                77.7
+                77.7 km/h
               </p>
             </div>
           </div>
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index 90844b5..1fca329 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -37,6 +37,7 @@ let vehicleState = {
     online: false,
     online_hmi: true,
     battery: {
+      total_mileage_odometer: 12000,
       percent: 95,
     },
     max_range: {
diff --git a/src/components/DigitalTwin/index.js b/src/components/DigitalTwin/index.js
index 804e9e0..8548dc5 100644
--- a/src/components/DigitalTwin/index.js
+++ b/src/components/DigitalTwin/index.js
@@ -38,15 +38,15 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Battery</h3>
           {keyValueTemplate("Percentage", `${battery?.percent || 0}%`)}
-          {keyValueTemplate("Total Mileage", battery?.total_mileage_odometer || UNKNOWN)}
-          {keyValueTemplate("Max Range", max_range?.max_miles || UNKNOWN)}
+          {keyValueTemplate("Total Mileage", `${battery?.total_mileage_odometer} km` || UNKNOWN)}
+          {keyValueTemplate("Max Range", `${max_range?.max_miles} km` || UNKNOWN)}
         </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 || UNKNOWN)}
+          {keyValueTemplate("Remaining Time", `${charging_metrics?.remaining_charging_time} min` || UNKNOWN)}
         </div>
       )}
       {doors && (
@@ -95,7 +95,7 @@ const DigitalTwin = (props) => {
               return keyValueTemplate(value[0], "Invalid")
             }
             if (value[0] === "altitude") {
-              return keyValueTemplate(value[0], value[1]);
+              return keyValueTemplate(value[0], `${value[1]} m`);
             } else {
               return keyValueTemplate(value[0], `${value[1]}°`);
             }
@@ -124,7 +124,7 @@ const DigitalTwin = (props) => {
       )}
       {vehicle_speed && (
         <div className={classes.popupSection}>
-          {keyValueTemplate("Vehicle Speed", vehicle_speed.speed)}
+          {keyValueTemplate("Vehicle Speed", `${vehicle_speed.speed} km/h`)}
         </div>
       )}
     </div>