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>
2022-07-26 16:55:18 -07:00
parent 3f57bd1b41
commit 52ebd70726
11 changed files with 532 additions and 199 deletions
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
-      "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "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=="
        }
      }
    },
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/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>
--- a/src/components/Cars/Status/DigitalTwinTab.jsx
+++ b/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;
--- a/src/components/Cars/Status/DigitalTwinTab.test.jsx
+++ b/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();
+  });
+});
--- a/src/components/Cars/Status/snapshots/DigitalTwinTab.test.jsx.snap
+++ b/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>
+`;
--- a/src/components/Cars/Status/snapshots/index.test.jsx.snap
+++ b/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>
--- a/src/components/Cars/Status/index.jsx
+++ b/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>
  );
 };
--- a/src/components/Contexts/mocks/VehicleContext.jsx
+++ b/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];
  }),
--- a/src/components/DigitalTwin/index.js
+++ b/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;
--- a/src/components/VehicleMap/index.jsx
+++ b/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}
        />
--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -1,16 +1,16 @@
 import React from "react";
-import Dialog from '@material-ui/core/Dialog';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import Dialog from "@material-ui/core/Dialog";
+import MuiDialogTitle from "@material-ui/core/DialogTitle";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+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,50 +19,21 @@ 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>
-                {online && (
-                    <div>
-                        {battery != null && (
-                            <p><b>Battery</b>: {battery.percent}%</p>
-                        )}
-                        {doors != null && (
-                            <div className={classes.popupSection}>
-                                <h3>Doors</h3>
-                                {Object.entries(doors).map((value) => (<p key={value[0]}><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+        <p>
+          <b>Connected</b>: {online.toString()}
+        </p>
+        {online && <DigitalTwin {...props} />}
+        {(!online ||
+          (battery == null &&
+            doors == null &&
+            location == null &&
+            windows == null)) && <p>No vehicle data to display.</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 >
+    </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}