Added groups reference modal RPS-57

WIP Changelog.txt

@@ -1,2 +1,5 @@
+New Features: 
+- Added a reference guide for MPI Grouping Guidelines next to the Group Descriptor on the estimate screen.
+
 Bug Fixes: 
-- 
+- Added better error handling on reporting for jobs that did not have a group set.

src/components/atoms/vehicle-group-alert/vehicle-group-alert.atom.jsx

@@ -14,6 +14,7 @@ const models = [
   "journey",
   "nv200",
   "rav4",
+  "odyssey",
 ];
 
 export default function VehicleGroupAlertAtom({ job, showGroup = false }) {

src/components/molecules/job-group/job-group.molecule.jsx

@@ -8,6 +8,7 @@ import { UPDATE_JOB } from "../../../graphql/jobs.queries";
 import ipcTypes from "../../../ipc.types";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
 import { AlertFilled } from "@ant-design/icons";
+import JobsGroupModalMolecule from "../jobs-group-modal/jobs-group-modal.molecule";
 const { ipcRenderer } = window;
 
 const mapStateToProps = createStructuredSelector({
@@ -60,6 +61,7 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
           {loading && <LoadingOutlined />}
         </a>
       </Dropdown>
+      <JobsGroupModalMolecule />
       {!group && (
         <div style={{ marginLeft: ".2rem" }}>
           <AlertFilled style={{ color: "tomato" }} className="blink_me" />

src/components/molecules/jobs-group-modal/jobs-group-modal.molecule.jsx

@@ -0,0 +1,175 @@
+import { Modal, List, Card, Input } from "antd";
+import React, { useState } from "react";
+import { InfoCircleFilled } from "@ant-design/icons";
+
+const data = [
+  {
+    group: "Group 1",
+    makes: [
+      "GEO",
+      "ALFA ROMEO",
+      "TESLA",
+      "PORSCHE",
+      "MERCEDES BENZ-Truck",
+      "LAND ROVER",
+      "MERCEDES BENZ-Van",
+      "LINCOLN-Truck",
+      "BUICK-Truck",
+      "AM GENERAL",
+      "VOLKSWAGEN-Truck",
+      "JAGUAR",
+      "SMART",
+      "HUMMER-Truck",
+      "MERCEDES BENZ",
+      "RAM-Van",
+      "GENESIS",
+      "AUDI BMW-Truck",
+    ],
+  },
+  {
+    group: "Group 2",
+    makes: [
+      "NISSAN-Van",
+      "VOLVO",
+      "MINI",
+      "LEXUS",
+      "LAND ROVER-Truck",
+      "SAAB",
+      "SUBARU",
+      "BMW",
+    ],
+  },
+  {
+    group: "Group 3",
+    makes: [
+      "MAZDA-Truck",
+      "SCION",
+      "NISSAN-Truck",
+      "DODGE-Van",
+      "INFINITI",
+      "JEEP-Truck",
+      "MONACO-Van",
+      "JEEP",
+      "LINCOLN",
+      "KIA",
+      "VOLKSWAGEN",
+      "FIAT",
+      "TOYOTA-Truck",
+      "HYUNDAI",
+      "MAZDA",
+      "SUBARU-Truck",
+      "HUMMER",
+      "EAGLE",
+      "FORD-Truck",
+      "ISUZU",
+    ],
+  },
+  {
+    group: "Group 4",
+    makes: [
+      "ACURA",
+      "HONDA",
+      "HONDA-Truck",
+      "FORD",
+      "DODGE-Truck",
+      "CADILLAC",
+      "TOYOTA",
+      "BUICK",
+      "CHEVROLET-Truck",
+      "PLYMOUTH",
+      "GMC-Truck",
+      "RAM",
+      "AUDI-Truck",
+      "MITSUBISHI",
+      "NISSAN",
+    ],
+  },
+  {
+    group: "Group 5",
+    makes: [
+      "PONTIAC-Truck",
+      "CHRYSLER-Truck",
+      "GMC",
+      "CHRYSLER",
+      "SUZUKI",
+      "DODGE",
+      "ELDORADO",
+      "CHEVROLET",
+    ],
+  },
+  {
+    group: "Group 6",
+    makes: [
+      "CHEVROLET-Van",
+      "PONTIAC",
+      "HYUNDAI-Truck",
+      "CHRYSLER-Van",
+      "GMC-Van",
+      "SUZUKI-Truck",
+      "CADILLAC-Truck",
+      "MERCURY",
+      "RAM-Truck",
+      "OLDSMOBILE",
+      "KIA-Truck",
+      "SATURN",
+      "MITSUBISHI-Truck",
+    ],
+  },
+];
+
+export default function JobsGroupModalMolecule() {
+  const [visible, setVisible] = useState(false);
+  const [search, setSearch] = useState("");
+  return (
+    <div style={{ margin: ".2rem" }}>
+      <Modal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onOk={() => setVisible(false)}
+        width="90%"
+        title="MPI Group Guidelines"
+      >
+        <div>
+          <Input.Search
+            placeholder="Search for Make"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ marginBottom: ".5rem" }}
+          />
+          <List
+            grid={{ gutter: 8, column: 3 }}
+            dataSource={data}
+            renderItem={(item) => (
+              <List.Item>
+                <Card title={item.group}>
+                  <ul>
+                    {item.makes.map((make, idx) => (
+                      <li
+                        style={{
+                          backgroundColor:
+                            search &&
+                            make.toLowerCase().includes(search.toLowerCase())
+                              ? "yellow"
+                              : "",
+                        }}
+                        key={idx}
+                      >
+                        {make}
+                      </li>
+                    ))}
+                  </ul>
+                </Card>
+              </List.Item>
+            )}
+          />
+          <div>
+            This grouping information is provided for reference only and is not
+            guaranteed to be correct. Please confirm with grouping guidelines
+            provided by MPI.
+          </div>
+        </div>
+      </Modal>
+      <InfoCircleFilled onClick={() => setVisible(true)} />
+    </div>
+  );
+}