Push to Prod (#172)

* Fix crash on car table (#158) (#159)

* CEC-1666 Deploy Supplier Accounts to Staging (#165)

* CEC-1965 Supplier update and approval (#162)

* CEC-1965 Supplier update and approval
Fix calling connectedcars for no VINs
Search sets table page to 0

* PR comments

* CEC-1965 Cleanup (#163)

* CEC-1965 Table footer fix (#164)

tiny tiny change

* Push to stage (#171)

* Bump terser from 5.12.0 to 5.14.2 (#170)

Bumps [terser](https://github.com/terser/terser) from 5.12.0 to 5.14.2.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.12.0...v5.14.2)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* CEC-1450 Show Trex version (#169)

* CEC-1450 Show Trex version

* Code smells

* Clean up

* Fixes

* Optimize test

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

package-lock.json

@@ -4038,6 +4038,19 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
@@ -4046,15 +4059,32 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.4",
+      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -7895,60 +7925,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/env-cmd/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/env-cmd/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -15929,13 +15905,13 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.12.0",
+      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "bin": {
@@ -15983,14 +15959,6 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -20213,20 +20181,44 @@
         }
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
       "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew=="
     },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
       "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg=="
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.4",
+      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -23058,44 +23050,6 @@
       "requires": {
         "commander": "^4.0.0",
         "cross-spawn": "^7.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
       }
     },
     "error-ex": {
@@ -28831,13 +28785,13 @@
       }
     },
     "terser": {
-      "version": "5.12.0",
+      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
@@ -28845,11 +28799,6 @@
           "version": "2.20.3",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
         }
       }
     },

src/components/App/__snapshots__/App.test.js.snap

@@ -7484,6 +7484,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-3"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-3"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Digital Twin
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-1424 PrivateTabIndicator-colorSecondary-1426 MuiTabs-indicator"
@@ -7634,6 +7652,12 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-2"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-3"
+              hidden=""
+              id="tabpanel-3"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>

src/components/Cars/Status/DigitalTwinTab.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import DigitalTwin from "../../DigitalTwin";
+import {
+  useVehicleContext,
+  VehicleProvider,
+} from "../../Contexts/VehicleContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { logger } from "../../../services/monitoring";
+
+const Main = (props) => {
+  const { getState } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage } = useStatusContext();
+  const classes = useStyles();
+  const [carState, setCarState] = useState(null);
+  const { vin } = props;
+
+  useEffect(() => {
+    if (!vin) return;
+    (async () => {
+      try {
+        const result = await getState(token, vin);
+        setCarState(result.data);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
+        Digital Twin
+      </Typography>
+      {carState && (
+        <>
+          <div>
+            <b>Connected</b>: {carState.online.toString()}
+          </div>
+          <DigitalTwin {...carState} />
+        </>
+      )}
+    </div>
+  );
+};
+
+const DigitalTwinTab = (props) => (
+  <VehicleProvider>
+    <Main {...props} />
+  </VehicleProvider>
+);
+
+export default DigitalTwinTab;

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

@@ -0,0 +1,36 @@
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import DigitalTwinTab from "./DigitalTwinTab";
+
+const renderDetailsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <DigitalTwinTab vin="TESTVIN1234567890" />
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("DigitalTwinTab", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderDetailsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DigitalTwinTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        data-testid="mocked-vehicleprovider"
+      >
+        <div
+          class="makeStyles-paper-3 makeStyles-tableSize-53"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6"
+            style="padding-bottom: 10px;"
+          >
+            Digital Twin
+          </h6>
+          <div>
+            <b>
+              Connected
+            </b>
+            : 
+            false
+          </div>
+          <div>
+            <p>
+              <b>
+                Battery
+              </b>
+              : 
+              95%
+            </p>
+            <div
+              class="makeStyles-popupSection-40"
+            >
+              <h3>
+                Doors
+              </h3>
+              <p>
+                <b>
+                  hood
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  left_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_front
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  right_rear
+                </b>
+                : 
+                closed
+              </p>
+              <p>
+                <b>
+                  trunk
+                </b>
+                : 
+                closed
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-40"
+            >
+              <h3>
+                Location
+              </h3>
+              <p>
+                <b>
+                  altitude
+                </b>
+                : 
+                17
+              </p>
+              <p>
+                <b>
+                  longitude
+                </b>
+                : 
+                -122.414°
+              </p>
+              <p>
+                <b>
+                  latitude
+                </b>
+                : 
+                37.764°
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-40"
+            >
+              <p>
+                <b>
+                  Trex Version
+                </b>
+                : 
+                1000000
+              </p>
+            </div>
+            <div
+              class="makeStyles-popupSection-40"
+            >
+              <p>
+                <b>
+                  Updated at
+                </b>
+                : 
+                7/26/2022 12:26:38 AM
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -83,6 +83,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-3"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-3"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Digital Twin
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-63 PrivateTabIndicator-colorSecondary-65 MuiTabs-indicator"
@@ -179,6 +197,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-2"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-3"
+            hidden=""
+            id="tabpanel-3"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -7,6 +7,7 @@ import { Box, Tab, Tabs } from "@material-ui/core";
 import CarDetailsTab from "./DetailsTab";
 import CarUpdatesTab from "./CarUpdatesTab";
 import CANFiltersTab from "./CANFiltersTab";
+import DigitalTwinTab from "./DigitalTwinTab";
 import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
@@ -60,6 +61,7 @@ const CarStatus = () => {
           <Tab label="Details" {...tabProps(0)} />
           <Tab label="Car Updates" {...tabProps(1)} />
           <Tab label="CAN Filters" {...tabProps(2)} />
+          <Tab label="Digital Twin" {...tabProps(3)} />
         </Tabs>
       </Box>
 
@@ -74,6 +76,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={2}>
         <CANFiltersTab />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={3}>
+        <DigitalTwinTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -5,17 +5,17 @@ let busy = false;
 const filters = [
   {
     can_id: "123-456",
-    interval: 789
+    interval: 789,
   },
   {
     can_id: "1",
-    interval: 1000
+    interval: 1000,
   },
   {
     can_id: "1000",
-    interval: 1
+    interval: 1,
-  }
+  },
-]
+];
 
 let vehicle = {
   vin: "3C4PDCBG0ET127145",
@@ -24,8 +24,55 @@ let vehicle = {
   trim: "Basic",
   ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
   log_level: "info",
-  canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2, filters: filters },
+  canbus: {
+    enabled: true,
+    data_logger_enabled: true,
+    max_mem_buffer_size: 1,
+    max_disk_buffer_size: 2,
+    filters: filters,
+  },
 };
+let vehicleState = {
+  data: {
+    online: false,
+    battery: {
+      percent: 95,
+    },
+    max_range: {
+      max_miles: 577,
+    },
+    doors: {
+      hood: false,
+      left_front: false,
+      left_rear: false,
+      right_front: false,
+      right_rear: false,
+      trunk: false,
+    },
+    location: {
+      altitude: 17,
+      longitude: -122.414,
+      latitude: 37.764,
+    },
+    door_locks: {
+      driver: false,
+      all: false,
+    },
+    sunroof: {
+      sunroof: 0,
+    },
+    cabin_climate: {
+      cabin_temperature: 0,
+      internal_temperature: 29,
+    },
+    ambient_temperature: {
+      temperature: 26,
+    },
+    trex_version: "1000000",
+    updated: "2022-07-26T00:26:38.880381Z",
+  },
+};
+
 let vehicles = [];
 let models = ["Ocean", "PEAR"];
 let years = [2023, 2024];
@@ -83,7 +130,7 @@ export const useVehicleContext = () => ({
   getModels: jest.fn(() => {
     models = ["Ocean", "PEAR"];
   }),
-  getState: jest.fn(),
+  getState: jest.fn(() => vehicleState),
   getYears: jest.fn(() => {
     years = [2023, 2024];
   }),

src/components/DigitalTwin/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+import useStyles from "../useStyles";
+import { LocalDateTimeString } from "../../utils/dates";
+
+const keyValueTemplate = (key, value) => (
+  <p key={key}>
+    <b>{key}</b>: {value}
+  </p>
+);
+const openCloseState = (value) => (value ? "open" : "closed");
+const mapOpenCloseState = (value) =>
+  keyValueTemplate(value[0], openCloseState(value[1]));
+
+const DigitalTwin = (props) => {
+  const classes = useStyles();
+  const { battery, doors, location, trex_version, updated, windows } = props;
+
+  return (
+    <div>
+      {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
+      {doors != null && (
+        <div className={classes.popupSection}>
+          <h3>Doors</h3>
+          {Object.entries(doors).map(mapOpenCloseState)}
+        </div>
+      )}
+      {windows != null && (
+        <div className={classes.popupSection}>
+          <h3>Windows</h3>
+          {Object.entries(windows).map(mapOpenCloseState)}
+        </div>
+      )}
+      {location != null && (
+        <div className={classes.popupSection}>
+          <h3>Location</h3>
+          {Object.entries(location).map((value) => {
+            if (value[0] === "altitude") {
+              return keyValueTemplate(value[0], value[1]);
+            } else {
+              return keyValueTemplate(value[0], `${value[1]}°`);
+            }
+          })}
+        </div>
+      )}
+      {trex_version && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Trex Version", trex_version)}
+        </div>
+      )}
+      {updated != null && (
+        <div className={classes.popupSection}>
+          {keyValueTemplate("Updated at", LocalDateTimeString(updated))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DigitalTwin;

src/components/VehicleMap/index.jsx

@@ -179,7 +179,8 @@ const Component = () => {
           doors={carState.doors}
           location={carState.location}
           windows={carState.windows}
-          updatedAt={carState.updated}
+          trex_version={carState.trex_version}
+          updated={carState.updated}
           className={classes.popup}
           onClose={handleClose}
         />

src/components/VehicleMap/popup.jsx

@@ -1,16 +1,16 @@
 import React from "react";
-import Dialog from '@material-ui/core/Dialog';
+import Dialog from "@material-ui/core/Dialog";
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogTitle from "@material-ui/core/DialogTitle";
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from "@material-ui/core/IconButton";
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from "@material-ui/icons/Close";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 
 import useStyles from "../useStyles";
-import { LocalDateTimeString } from "../../utils/dates";
+import DigitalTwin from "../DigitalTwin";
 
 const VehiclePopUp = (props) => {
   const classes = useStyles();
-    const { vin, online, battery, doors, location, updatedAt, windows, onClose } = props;
+  const { vin, online, battery, doors, location, windows, onClose } = props;
 
   return (
     <Dialog
@@ -19,48 +19,19 @@ const VehiclePopUp = (props) => {
       open={true}
       onClose={onClose}
     >
-            <DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
+      <DialogTitle align="center" onClose={onClose}>
+        {vin}
+      </DialogTitle>
       <div align="center" className={classes.popUpContent}>
-                <p><b>Connected</b>: {online.toString()}</p>
+        <p>
-                {online && (
+          <b>Connected</b>: {online.toString()}
-                    <div>
+        </p>
-                        {battery != null && (
+        {online && <DigitalTwin {...props} />}
-                            <p><b>Battery</b>: {battery.percent}%</p>
+        {(!online ||
-                        )}
+          (battery == null &&
-                        {doors != null && (
+            doors == null &&
-                            <div className={classes.popupSection}>
+            location == null &&
-                                <h3>Doors</h3>
+            windows == null)) && <p>No vehicle data to display.</p>}
-                                {Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
-                            </div>
-                        )}
-                        {windows != null && (
-                            <div className={classes.popupSection}>
-                                <h3>Windows</h3>
-                                {Object.entries(windows).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
-                            </div>
-                        )}
-                        {location != null && (
-                            <div className={classes.popupSection}>
-                                <h3>Location</h3>
-                                {Object.entries(location).map((value) => {
-                                    if (value[0] === "altitude") {
-                                        return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}</p>);
-                                    } else {
-                                        return (<p key={value[0]}><b>{value[0]}</b>: {value[1]}°</p>)
-                                    }
-                                })}
-                            </div>
-                        )}
-                        {updatedAt != null && (
-                            <div className={classes.popupSection}>
-                                <p><b>Updated at</b>: {LocalDateTimeString(updatedAt)}</p>
-                            </div>
-                        )}
-                    </div>
-                )}
-                {(!online || (battery == null && doors == null && location == null && windows == null)) && (
-                    <p>No vehicle data to display.</p>
-                )}
       </div>
     </Dialog>
   );
@@ -70,10 +41,18 @@ const DialogTitle = (props) => {
   const { children, onClose, ...other } = props;
   const classes = useStyles();
   return (
-        <MuiDialogTitle disableTypography className={classes.ppopUpTItle} {...other}>
+    <MuiDialogTitle
+      disableTypography
+      className={classes.ppopUpTItle}
+      {...other}
+    >
       <Typography variant="h6">{children}</Typography>
       {onClose ? (
-                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
           <CloseIcon />
         </IconButton>
       ) : null}