Further updates on production board + AAMVA decoding built into project BOD-75

client/package.json

@@ -8,8 +8,8 @@
     "@nivo/pie": "^0.62.0",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.7.0",
+    "@tanem/react-nprogress": "^3.0.30",
     "@tinymce/tinymce-react": "^3.6.0",
-    "aamva": "^1.2.0",
     "antd": "^4.3.3",
     "apollo-boost": "^0.4.9",
     "apollo-link-context": "^1.0.20",

client/src/App/App.styles.scss

@@ -31,3 +31,18 @@
     justify-content: space-around;
   }
 }
+
+.ellipses {
+  display: inline-block; /* for em, a, span, etc (inline by default) */
+  text-overflow: ellipsis;
+  width: calc(95%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.tight-antd-rows {
+  .ant-row {
+    margin: 0rem;
+    line-height: 1rem;
+  }
+}

client/src/components/contract-form/contract-form.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, DatePicker, InputNumber, Button } from "antd";
-import aamva from "aamva";
+import aamva from "../../utils/aamva";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 
@@ -12,251 +12,228 @@ export default function ContractFormComponent() {
     <div>
       <div style={{ background: "#f00" }}>
         TEST AREA
-        <Input value={state} onChange={e => setState(e.target.value)} />
+        <Input.TextArea
+          //value={state}
+          rows={3}
+          onPressEnter={(e) => {
+            console.log("e", e);
+            setState(e.target.value);
+          }}
+        />
         <Button
           onClick={() => {
-            console.log("state", state);
-            //let data = state;
-
-            var data =
-              "%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^           ?            ;6360100462172082009=2101198299090=?            #! 33435      I               1600                                   ECCECC00000?";
-            data = data.replace(/\n/, "");
-            // replace spaces with regular space
-            data = data.replace(/\s/g, " ");
-            var track = data.match(/(.*?\?)(.*?\?)(.*?\?)/);
-            console.log("data", data);
-            console.log("track", track);
-            const a = aamva.stripe(data);
-            console.log(JSON.stringify(a));
-          }}
-        >
+            var res = aamva.parse(state);
+            console.log("Entire object", res);
+          }}>
           Decode
         </Button>
       </div>
 
       <Form.Item
         label={t("contracts.fields.status")}
-        name="status"
+        name='status'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <ContractStatusSelector />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.start")}
-        name="start"
+        name='start'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.scheduledreturn")}
-        name="scheduledreturn"
+        name='scheduledreturn'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
+      <Form.Item label={t("contracts.fields.actualreturn")} name='actualreturn'>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmstart")}
-        name="kmstart"
+        name='kmstart'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <InputNumber />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.kmend")} name="kmend">
+      <Form.Item label={t("contracts.fields.kmend")} name='kmend'>
         <InputNumber />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlnumber")}
-        name="driver_dlnumber"
+        name='driver_dlnumber'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlexpiry")}
-        name="driver_dlexpiry"
+        name='driver_dlexpiry'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dlst")}
-        name="driver_dlst"
+        name='driver_dlst'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_fn")}
-        name="driver_fn"
+        name='driver_fn'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_ln")}
-        name="driver_ln"
+        name='driver_ln'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_addr1")}
-        name="driver_addr1"
+        name='driver_addr1'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
-      <Form.Item label={t("contracts.fields.driver_addr2")} name="driver_addr2">
+      <Form.Item label={t("contracts.fields.driver_addr2")} name='driver_addr2'>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_city")}
-        name="driver_city"
+        name='driver_city'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_state")}
-        name="driver_state"
+        name='driver_state'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_zip")}
-        name="driver_zip"
+        name='driver_zip'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_ph1")}
-        name="driver_ph1"
+        name='driver_ph1'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <InputPhone />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dob")}
-        name="driver_dob"
+        name='driver_dob'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <DatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_num")}
-        name="cc_num"
+        name='cc_num'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_expiry")}
-        name="cc_expiry"
+        name='cc_expiry'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.cc_cardholder")}
-        name="cc_cardholder"
+        name='cc_cardholder'
         rules={[
           {
             required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+            message: t("general.validation.required"),
+          },
+        ]}>
         <Input />
       </Form.Item>
     </div>

client/src/components/indefinite-loading/indefinite-loading.component.jsx

@@ -0,0 +1,43 @@
+import { useNProgress } from "@tanem/react-nprogress";
+import React from "react";
+
+export default function IndefiniteLoading({ loading }) {
+  const { animationDuration, isFinished, progress } = useNProgress({
+    isAnimating: loading,
+  });
+
+  return (
+    <div
+      style={{
+        opacity: isFinished ? 0 : 1,
+        pointerEvents: "none",
+        transition: `opacity ${animationDuration}ms linear`,
+      }}>
+      <div
+        style={{
+          background: "#29d",
+          height: 4,
+          left: 0,
+          marginLeft: `${(-1 + progress) * 100}%`,
+          position: "fixed",
+          top: 0,
+          transition: `margin-left ${animationDuration}ms linear`,
+          width: "100%",
+          zIndex: 1031,
+        }}>
+        <div
+          style={{
+            boxShadow: "0 0 10px #29d, 0 0 5px #29d",
+            display: "block",
+            height: "100%",
+            opacity: 1,
+            position: "absolute",
+            right: 0,
+            transform: "rotate(3deg) translate(0px, -4px)",
+            width: 100,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/production-board-kanban-card/production-board-card.styles.scss

@@ -0,0 +1,3 @@
+.imex-kanban-card {
+  padding: 0px !important;
+}

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -4,32 +4,52 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
 import { EyeFilled } from "@ant-design/icons";
 import { Link } from "react-router-dom";
+import "./production-board-card.styles.scss";
 
 export default function ProductionBoardCard(card) {
   // console.log("card", card);
   return (
     <Card
-      className='react-kanban-card'
+      className='react-kanban-card imex-kanban-card tight-antd-rows'
       style={{ margin: ".2rem 0rem" }}
-      actions={[
-        <ProductionAlert record={card} key='alert' />,
-        <Link to={`/manage/jobs/${card.id}`}>
-          <EyeFilled key='setting' />
-        </Link>,
-      ]}
       size='small'
-      title={`${card.ro_number || card.est_number} - ${card.ownr_ln} - ${
-        card.v_model_yr
-      } ${card.v_make_desc.substring(0, 4) || ""} ${card.v_model_desc || ""}`}>
+      title={`${card.ro_number || card.est_number} - ${card.v_model_yr} ${
+        card.v_make_desc || ""
+      } ${card.v_model_desc || ""}`}>
+      <Row>
+        <Col span={24}>
+          <div className='ellipses'>{`${card.ownr_fn || ""} ${
+            card.ownr_ln || ""
+          } ${card.ownr_co_nm || ""}`}</div>
+        </Col>
+      </Row>
       <Row>
         <Col span={12}>
-          <div>{`B: ${card.labhrs || "?"}`}</div>
-          <div>{`R: ${card.labhrs || "?"}`}</div>
+          <div className='ellipses'>{card.clm_no || ""}</div>
         </Col>
         <Col span={12}>
+          <div className='ellipses'>{card.ins_co_nm || ""}</div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
+          <div className='imex-flex-row imex-flex-row__flex-space-around'>
+            <div>{`B: ${card.labhrs || "?"}`}</div>
+            <div>{`R: ${card.labhrs || "?"}`}</div>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
           <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
         </Col>
       </Row>
+      <div className='imex-flex-row imex-flex-row__flex-space-around'>
+        <ProductionAlert record={card} key='alert' />
+        <Link to={`/manage/jobs/${card.id}`}>
+          <EyeFilled key='setting' />
+        </Link>
+      </div>
     </Card>
   );
 }

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -10,6 +10,7 @@ import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import { createBoardData } from "./production-board-kanban.utils.js";
+import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -19,10 +20,14 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const [boardLanes, setBoardLanes] = useState({
     columns: [{ id: "Loading...", title: "Loading...", cards: [] }],
   });
+
+  const [isMoving, setIsMoving] = useState(false);
+
   const { t } = useTranslation();
   useEffect(() => {
     setBoardLanes(createBoardData(bodyshop.md_ro_statuses.open_statuses, data));
-  }, [data, setBoardLanes, bodyshop.md_ro_statuses.open_statuses]);
+    setIsMoving(false);
+  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses.open_statuses]);
 
   const findById = (id) => {
     return id;
@@ -32,10 +37,9 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
   const client = useApolloClient();
 
   const handleDragEnd = async (card, source, destination) => {
+    setIsMoving(true);
     setBoardLanes(moveCard(boardLanes, source, destination));
-
     const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
-
     const sourceColumn = boardLanes.columns.find(
       (x) => x.id === source.fromColumnId
     );
@@ -67,16 +71,16 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
 
     let movedCardNewKanbanParent;
     if (movedCardWillBeFirst) {
-      console.log("==>New Card is first.");
+      console.log("==> New Card is first.");
       movedCardNewKanbanParent = "-1";
     } else if (movedCardWillBeLast) {
-      console.log("==>New Card is last.");
+      console.log("==> New Card is last.");
       movedCardNewKanbanParent = lastCardInDestinationColumn.id;
     } else if (!!newChildCard) {
-      console.log("==>New Card is somewhere in the middle");
+      console.log("==> New Card is somewhere in the middle");
       movedCardNewKanbanParent = newChildCard.kanbanparent;
     } else {
-      throw new Error("==>!!!!!!Couldn't find a parent.!!!!<==");
+      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
     const newChildCardNewParent = newChildCard ? card.id : null;
     const update = await client.mutate({
@@ -99,10 +103,15 @@ export function ProductionBoardKanbanComponent({ data, bodyshop }) {
     }
   };
 
+  console.log("ismMoving", isMoving);
+
   return (
     <div>
+      <IndefiniteLoading loading={isMoving} />
+      <div>{isMoving}</div>
       <Board
         children={boardLanes}
+        disableCardDrag={isMoving}
         renderCard={ProductionBoardCard}
         onCardDragEnd={handleDragEnd}
       />

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -41,7 +41,11 @@ export default function ProductionListColumnAlert({ record }) {
         </Menu>
       }
       trigger={["contextMenu"]}>
-      <div style={{ width: "100%", height: "19px" }}>
+      <div
+        style={{
+          //width: "100%",
+          height: "19px",
+        }}>
         {record.production_vars && record.production_vars.alert ? (
           <ExclamationCircleFilled className='production-alert' />
         ) : null}

client/src/utils/aamva.js

@@ -0,0 +1,559 @@
+(function (global) {
+  var parse = function (data) {
+    data = data.replace(/\n/, "");
+    // replace spaces with regular space
+    data = data.replace(/\s/g, " ");
+
+    if (/^@/.test(data) === true) {
+      return pdf417(data);
+    } else if (/^%/.test(data) === true) {
+      return stripe(data);
+    } else {
+      console.log("couldnt identify format");
+    }
+  };
+
+  var parseDate = function (date) {
+    var start = parseInt(date[0] + date[1]);
+    if (start < 13) {
+      return (
+        date[4] +
+        date[5] +
+        date[6] +
+        date[7] +
+        date[0] +
+        date[1] +
+        date[2] +
+        date[3]
+      );
+    }
+    return date;
+  };
+
+  var stripe = function (data) {
+    data = data.replace(/\n/, "");
+    // replace spaces with regular space
+    data = data.replace(/\s/g, " ");
+    var track = data.match(/(.*?\?)(.*?\?)(.*?\?)/);
+    var res1 = track[1].match(
+      /(\%)([A-Z]{2})([^\^]{0,13})\^?([^\^]{0,35})\^?([^\^]{0,60})\^?\s*?\?/
+    );
+    var res2 = track[2].match(
+      /(;)(\d{6})(\d{0,13})(\=)(\d{4})(\d{8})(\d{0,5})\=?\?/
+    );
+    var res3 = track[3].match(
+      /(\#|\%|\+)(\d|\!|\")(\d|\s|.)([0-9A-Z ]{11})([0-9A-Z ]{2})([0-9A-Z ]{10})([0-9A-Z ]{4})([12MF ]{1})([0-9A-Z ]{3})([0-9A-Z ]{3})([0-9A-Z ]{3})([0-9A-Z ]{3})(.*?)\?/
+    );
+    var state = res1[2];
+    return {
+      state: state,
+      city: res1[3],
+      name: (function () {
+        var res = res1[4].match(
+          /([^\$]{0,35})\$?([^\$]{0,35})?\$?([^\$]{0,35})?/
+        );
+        if (!res) return;
+        return {
+          last: res[1],
+          first: res[2],
+          middle: res[3],
+        };
+      })(),
+      address: res1[5],
+      iso_iin: res2[2],
+      dl: res2[3],
+      expiration_date: parseDate(res2[5]),
+      birthday: (function () {
+        var dob = res2[6].match(/(\d{4})(\d{2})(\d{2})/);
+        if (!dob) return;
+
+        if (dob[2] === "99") {
+          /* FL decided to reverse 2012 aamva spec, 99 means here
+                      that dob month === to expiration month, it should be
+                      opposite
+                      */
+          var exp_dt = res2[5].match(/(\d{2})(\d{2})/);
+          dob[2] = exp_dt[2];
+        }
+        //dob[2]--; what was this for?
+        return dob[1] + dob[2] + dob[3];
+      })(),
+      dl_overflow: res2[7],
+      cds_version: res3[1],
+      jurisdiction_version: res3[2],
+      postal_code: res3[4],
+      klass: res3[5],
+      class: res3[5],
+      restrictions: res3[6],
+      endorsments: res3[7],
+      sex: (function () {
+        switch (Number(res3[8])) {
+          case 1:
+            return "MALE";
+            break;
+          case 2:
+            return "FEMALE";
+            break;
+          default:
+            return "MISSING/INVALID";
+            break;
+        }
+      })(),
+      height: res3[9],
+      weight: res3[10],
+      hair_color: res3[11],
+      eye_color: res3[12],
+      misc: res3[13],
+      id: (function () {
+        var id;
+        switch (state) {
+          case "FL":
+            var res = res2[3].match(/(\d{2})(.*)/);
+            if (!res) return;
+            id = String.fromCharCode(Number(res[1]) + 64) + res[2] + res2[7];
+            break;
+          default:
+            id = res2[3];
+            break;
+        }
+        return id;
+      })(),
+    };
+  };
+
+  var pdf417 = function (data) {
+    data = data.replace(/\n/, "");
+    // replace spaces with regular space
+    data = data.replace(/\s/g, " ");
+
+    // get version of aamva (before 2000 or after)
+    var version = data.match(/[A-Z ]{5}\d{6}(\d{2})/);
+
+    var parseRegex;
+
+    /* version 01 year 2000 */
+    switch (Number(version[1])) {
+      case 1: {
+        parseRegex = new RegExp(
+          "(DAQ.*?)?" + // Drivers license number
+          "(DAA.*?)?" + // Driver License Name
+          "(DAG.*?)?" + // Driver Mailing Street Address
+          "(DAI.*?)?" + // Driver Mailing City
+          "(DAJ.*?)?" + // Driver Mailing Jurisdiction Code
+          "(DAK.*?)?" + // Driver Mailing Postal Code
+          "(DAQ.*?)?" + // Driver License/ID Number
+          "(DAR.*?)?" + // Driver License Classification Code
+          "(DAS.*?)?" + // Driver License Restriction Code
+          "(DAT.*?)?" + // Driver License Endorsements Code
+          "(DBA.*?)?" + // Driver License Expiration Date
+          "(DBB.*?)?" + // Date of Birth
+          "(DBC.*?)?" + // Driver Sex
+          "(DBD.*?)?" + // Driver License or ID Document Issue Date
+            /* optional
+                  '(DAU.*?)?' + // Height (FT/IN)
+                  '(DAW.*?)?' + // Weight (LBS)
+                  '(DAY.*?)?' + // Eye Color
+                  '(DAZ.*?)?' + // Hair Color
+                  '(DBK.*?)?' + // Social Security Number
+                  '(PAA.*?)?' + // Driver Permit Classification Code
+                  '(PAB.*?)?' + // Driver Permit Expiration Date
+                  '(PAC.*?)?' + // Permit Identifier
+                  '(PAD.*?)?' + // Driver Permit Issue Date
+                  '(PAE.*?)?' + // Driver Permit Restriction Code
+                  '(PAF.*?)?' + // Driver Permit Endorsement Code
+                  '(DAB.*?)?' + // Driver Last Name
+                  '(DAC.*?)?' + // Driver First Name
+                  '(DAD.*?)?' + // Driver Middle Name or Initial
+                  '(DAE.*?)?' + // Driver Name Suffix
+                  '(DAF.*?)?' + // Driver Name Prefix
+                  '(DAH.*?)?' + // Driver Mailing Street Address 2
+                  '(DAL.*?)?' + // Driver Residence Street Address 1
+                  '(DAM.*?)?' + // Driver Residence Street Address 2
+                  '(DAN.*?)?' + // Driver Residence City
+                  '(DAO.*?)?' + // Driver Residence Jurisdiction Code
+                  '(DAP.*?)?' + // Driver Residence Postal Code
+                  '(DAV.*?)?' + // Height (CM)
+                  '(DAX.*?)?' + // Weight (KG)
+                  '(DBE.*?)?' + // Issue Timestamp
+                  '(DBF.*?)?' + // Number of Duplicates
+                  '(DBG.*?)?' + // Medical Indicator/Codes
+                  '(DBH.*?)?' + // Organ Donor
+                  '(DBI.*?)?' + // Non-Resident Indicator
+                  '(DBJ.*?)?' + // Unique Customer Identifier
+                  '(DBL.*?)?' + // Driver "AKA" Date Of Birth
+                  '(DBM.*?)?' + // Driver "AKA" Social Security Number
+                  '(DBN.*?)?' + // Driver "AKA" Name
+                  '(DBO.*?)?' + // Driver "AKA" Last Name
+                  '(DBP.*?)?' + // Driver "AKA" First Name
+                  '(DBQ.*?)?' + // Driver "AKA" Middle Name
+                  '(DBR.*?)?' + // Driver "AKA" Suffix
+                  '(DBS.*?)?'   // Driver "AKA" Prefix
+                  */
+            "$"
+        );
+        break;
+      }
+      /* version 02 year 2003 */
+      case 2: {
+        parseRegex = new RegExp(
+          "(DCA.*?)?" + // Jurisdiction-specific vehicle class
+          "(DCB.*?)?" + // Jurisdiction-specific restriction codes
+          "(DCD.*?)?" + // Jurisdiction-specific endorsement codes
+          "(DBA.*?)?" + // Document Expiration Date
+          "(DCS.*?)?" + // Customer Family Name
+          "(DCT.*?)?" + // Customer Given Names
+          "(DCU.*?)?" + // Name Suffix
+          "(DBD.*?)?" + // Document Issue Date
+          "(DBB.*?)?" + // Date of Birth
+          "(DBC.*?)?" + // Physical Description – Sex
+          "(DAY.*?)?" + // Physical Description – Eye Color
+          "(DAU.*?)?" + // Physical Description – Height
+          "(DCE.*?)?" + // Physical Description – Weight Range
+          "(DAG.*?)?" + // Address – Street 1
+          "(DAI.*?)?" + // Address – City
+          "(DAJ.*?)?" + // Address – Jurisdiction Code
+          "(DAK.*?)?" + // Address – Postal Code
+          "(DAQ.*?)?" + // Customer ID Number
+          "(DCF.*?)?" + // Document Discriminator
+          "(DCG.*?)?" + // Country Identification
+          "(DCH.*?)?" + // Federal Commercial Vehicle Codes
+            /* optional elements
+                  '(DAH.*?)?' + // Address – Street 2
+                  '(DAZ.*?)?' + // Hair color
+                  '(DCI.*?)?' + // Place of birth
+                  '(DCJ.*?)?' + // Audit information
+                  '(DCK.*?)?' + // Inventory control number
+                  '(DBN.*?)?' + // Alias / AKA Family Name
+                  '(DCL.*?)?' + // Race / ethnicity
+
+                  '(DCM.*?)?' + // Standard vehicle classification
+                  '(DCN.*?)?' + // Standard endorsement code
+                  '(DCO.*?)?' + // Standard restriction code
+                  '(DCP.*?)?' + // Jurisdiction- specific vehicle classification description
+                  '(DCQ.*?)?' + // Jurisdiction- specific endorsement code description
+                  '(DCR.*?)?'  // Jurisdiction- specific restriction code description
+                  */
+            "$"
+        );
+        break;
+      }
+      /* version 03 year 2005 */
+      case 3: {
+        parseRegex = new RegExp(
+          "(DCA.*?)?" + // Jurisdiction-specific vehicle class
+          "(DCB.*?)?" + // Jurisdiction-specific restriction codes
+          "(DCD.*?)?" + // Jurisdiction-specific endorsement codes
+          "(DBA.*?)?" + // Document Expiration Date
+          "(DCS.*?)?" + // Customer Family Name
+          "(DCT.*?)?" + // Customer Given Names
+          "(DBD.*?)?" + // Document Issue Date
+          "(DBB.*?)?" + // Date of Birth
+          "(DBC.*?)?" + // Physical Description – Sex
+          "(DAY.*?)?" + // Physical Description – Eye Color
+          "(DAU.*?)?" + // Physical Description – Height
+          "(DAG.*?)?" + // Address – Street 1
+          "(DAI.*?)?" + // Address – City
+          "(DAJ.*?)?" + // Address – Jurisdiction Code
+          "(DAK.*?)?" + // Address – Postal Code
+          "(DAQ.*?)?" + // Customer ID Number
+          "(DCF.*?)?" + // Document Discriminator
+          "(DCG.*?)?" + // Country Identification
+          "(DCH.*?)?" + // Federal Commercial Vehicle Codes
+            /* optional elements
+                  + '(DAH.*?)?' + // Address – Street 2
+                  '(DAZ.*?)?' + // Hair color
+                  '(DCI.*?)?' + // Place of birth
+                  '(DCJ.*?)?' + // Audit information
+                  '(DCK.*?)?' + // Inventory control number
+                  '(DBN.*?)?' + // Alias / AKA Family Name
+                  '(DBG.*?)?' + // Alias / AKA Given Name
+                  '(DBS.*?)?' + // Alias / AKA Suffix Name
+                  '(DCU.*?)?' + // Name Suffix
+                  '(DCE.*?)?' + // Physical Description – Weight Range
+                  '(DCL.*?)?' + // Race / ethnicity
+                  '(DCM.*?)?' + // Standard vehicle classification
+                  '(DCN.*?)?' + // Standard endorsement code
+                  '(DCO.*?)?' + // Standard restriction code
+                  '(DCP.*?)?' + // Jurisdiction- specific vehicle classification description
+                  '(DCQ.*?)?' + // Jurisdiction- specific endorsement code description
+                  '(DCR.*?)?'  // Jurisdiction- specific restriction code description
+                  */
+            "$"
+        );
+        break;
+      }
+      case 6: {
+        parseRegex = new RegExp(
+          "(DAQ.*?)?" +
+            "(DCS.*?)?" +
+            "(DDE.*?)?" +
+            "(DAC.*?)?" +
+            "(DDF.*?)?" +
+            "(DAD.*?)?" +
+            "(DDG.*?)?" +
+            "(DCA.*?)?" +
+            "(DCB.*?)?" +
+            "(DCD.*?)?" +
+            "(DBD.*?)?" +
+            "(DBB.*?)?" +
+            "(DBA.*?)?" +
+            "(DBC.*?)?" +
+            "(DAU.*?)?" +
+            "(DAY.*?)?" +
+            "(DAG.*?)?" +
+            "(DAI.*?)?" +
+            "(DAJ.*?)?" +
+            "(DAK.*?)?" +
+            "(DCF.*?)?" +
+            /* optional */
+            "$"
+        );
+        break;
+      }
+      /* version 07 year 2012 */
+      case 7: {
+        parseRegex = new RegExp(
+          "(DCA.*?)?" + // Jurisdiction-specific vehicle class
+          "(DCB.*?)?" + // Jurisdiction-specific restriction codes
+          "(DCD.*?)?" + // Jurisdiction-specific endorsement codes
+          "(DBA.*?)?" + // Document Expiration Date
+          "(DCS.*?)?" + // Customer Family Name
+          "(DAC.*?)?" + // Customer First Name
+          "(DAD.*?)?" + // Customer Middle Name(s)
+          "(DBD.*?)?" + // Document Issue Date
+          "(DBB.*?)?" + // Date of Birth
+          "(DBC.*?)?" + // Physical Description – Sex
+          "(DAY.*?)?" + // Physical Description – Eye Color
+          "(DAU.*?)?" + // Physical Description – Height
+          "(DAG.*?)?" + // Address – Street 1
+          "(DAI.*?)?" + // Address – City
+          "(DAJ.*?)?" + // Address – Jurisdiction Code
+          "(DAK.*?)?" + // Address – Postal Code
+          "(DAQ.*?)?" + // Customer ID Number
+          "(DCF.*?)?" + // Document Discriminator
+          "(DCG.*?)?" + // Country Identification
+          "(DDE.*?)?" + // Family name truncation
+          "(DDF.*?)?" + // First name truncation
+          "(DDG.*?)?" + // Middle name truncation
+            /* optional elements
+                  '(DAH.*?)?' + // Address – Street 2
+                  '(DAZ.*?)?' + // Hair color
+                  '(DCI.*?)?' + // Place of birth
+                  '(DCJ.*?)?' + // Audit information
+                  '(DCK.*?)?' + // Inventory control number
+                  '(DBN.*?)?' + // Alias / AKA Family Name
+                  '(DBG.*?)?' + // Alias / AKA Given Name
+                  '(DBS.*?)?' + // Alias / AKA Suffix Name
+                  '(DCU.*?)?' + // Name Suffix
+                  '(DCE.*?)?' + // Physical Description – Weight Range
+                  '(DCL.*?)?' + // Race / ethnicity
+                  '(DCM.*?)?' + // Standard vehicle classification
+                  '(DCN.*?)?' + // Standard endorsement code
+                  '(DCO.*?)?' + // Standard restriction code
+                  '(DCP.*?)?' + // Jurisdiction- specific vehicle classification description
+                  '(DCQ.*?)?' + // Jurisdiction- specific endorsement code description
+                  '(DCR.*?)?' + // Jurisdiction- specific restriction code description
+                  '(DDA.*?)?' + // Compliance Type
+                  '(DDB.*?)?' + // Card Revision Date
+                  '(DDC.*?)?' + // HAZMAT Endorsement Expiration Date
+                  '(DDD.*?)?' + // Limited Duration Document Indicator
+                  '(DAW.*?)?' + // Weight (pounds)
+                  '(DAX.*?)?' + // Weight (kilograms)
+                  '(DDH.*?)?' + // Under 18 Until
+                  '(DDI.*?)?' + // Under 19 Until
+                  '(DDJ.*?)?' + // Under 21 Until
+                  '(DDK.*?)?' + // Organ Donor Indicator
+                  '(DDL.*?)?'   // Veteran Indicator
+                  */
+            "$"
+        );
+        break;
+      }
+      case 8:
+      case 9: {
+        var prefixes = [
+          "DCA", // jurisdiction vehicle class
+          "DCB", // jurisdiction restriction codes
+          "DCD", // jurisdiction endorsement codes
+          "DBA", // doc. expiration date
+          "DCS", // customer family name
+          "DAC", // first name
+          "DAD", // middle names (comma seperated)
+          "DBD", // doc. issue date
+          "DBB", // date of birth (MMDDCCYY for U.S., CCYYMMDD for Canada)
+          "DBC", // gender (1-name, 2-female, 9-not specified)
+          "DAY", // eye color (ansi d-20 codes)
+          "DAU", // height
+          "DAG", // street 1
+          "DAI", // city
+          "DAJ", // state
+          "DAK", // zip
+          "DAQ", // customer id number
+          "DCF", // doc. distriminator
+          "DCG", // country identification (USA/CAN)
+          "DDE", // last name truncated (T-trucated, N-not, U-unknown)
+          "DDF", // first name truncated (T-trucated, N-not, U-unknown)
+          "DDG", // middle name truncated (T-trucated, N-not, U-unknown)
+          // optionals
+          "DAH", // street address line 2
+          "DAZ", // hair color
+          "DCI", // place of birth
+          "DCJ", // audit info
+          "DCK", // inventory control number
+          "DBN", // alias last name
+          "DBG", // alias first name
+          "DBS", // aliast suffix name
+          "DCU", // name suffix . (JR, SR, 1ST, 2ND...)
+          "DCE", // weight range
+          "DCL", // race / ethnicity (AAMVA D20 code)
+          "DCM", // vehicle classification
+          "DCN", // standard endorsement code
+          "DCO", // standard restriction code
+          "DCP", // vehicle classification description
+          "DCQ", // endorsement code description
+          "DCR", // restriction code description
+          "DDA", // compliance type
+          "DDB", // card revision date
+          "DDC", // hazmat endorsement exp. date
+          "DDD", // limited duration doc. indicator
+          "DAW", // weight lbs
+          "DAX", // weight kg
+          "DDH", // under 18 until, date turns 18 (MMDDCCYY for U.S., CCYYMMDD for Canada)
+          "DDI", // under 19 until, date turns 19 (MMDDCCYY for U.S., CCYYMMDD for Canada)
+          "DDJ", // under 21 until, date turns 21 (MMDDCCYY for U.S., CCYYMMDD for Canada)
+          "DDK", // organ donor (1-yes)
+          "DDL", // veteran indicator (1-yes)
+        ];
+        var regExStr = "";
+        var prefixIdxs = [];
+        for (var i = 0; i < prefixes.length; i++) {
+          var idx = data.indexOf(prefixes[i]);
+          if (idx !== -1) {
+            prefixIdxs.push({
+              prefix: prefixes[i],
+              index: idx,
+            });
+          }
+        }
+        // if prefixes are not in order as found in the string, the regex will not perform as expected
+        prefixIdxs.sort((a, b) => (a.index > b.index ? 1 : -1));
+        prefixIdxs.forEach((obj) => (regExStr += `(${obj.prefix}.*?)?`));
+        regExStr += "$";
+
+        parseRegex = new RegExp(regExStr);
+        break;
+      }
+      default: {
+        console.log("unable to get version", version);
+        // probably not a right parse...
+      }
+    }
+
+    var parsedData = {};
+    var res = data.match(parseRegex);
+
+    for (var i = 1; i < res.length; i++) {
+      if (res[i] !== undefined) {
+        parsedData[String(res[i]).substring(0, 3)] = res[i].substring(3).trim();
+      }
+    }
+
+    switch (Number(version[1])) {
+      case 1: {
+        // version one joining all of the names in one string
+        var name = parsedData.DAA.split(",");
+        parsedData.DCS = name[0];
+        parsedData.DAC = name[1];
+        parsedData.DAD = name[2];
+
+        // drivers license class
+        parsedData.DCA = parsedData.DAR;
+
+        // date on 01 is CCYYMMDD while on 07 MMDDCCYY
+        parsedData.DBB =
+          parsedData.DBB.substring(4, 6) + // month
+          parsedData.DBB.substring(6, 8) + // day
+          parsedData.DBB.substring(0, 4); // year
+        break;
+      }
+      case 3: {
+        // version 3 putting middle and first names in the same field
+        var name = parsedData.DCT.split(",");
+        parsedData.DAC = name[0]; // first name
+        parsedData.DAD = name[1]; // middle name
+        break;
+      }
+      default: {
+        console.log("no version matched");
+        break;
+      }
+    }
+
+    var rawData = {
+      state: parsedData.DAJ,
+      city: parsedData.DAI,
+      name: (function () {
+        return {
+          last: parsedData.DCS,
+          first: parsedData.DAC,
+          middle: parsedData.DAD,
+        };
+      })(),
+      address: parsedData.DAG,
+      iso_iin: undefined,
+      dl: parsedData.DAQ,
+      expiration_date: parseDate(parsedData.DBA),
+      birthday: (function () {
+        if (!parsedData.DBB) return;
+        var match = parsedData.DBB.match(/(\d{2})(\d{2})(\d{4})/);
+        if (!match) return;
+        return match[3] + match[1] + match[2];
+      })(),
+      dl_overflow: undefined,
+      cds_version: undefined,
+      jurisdiction_version: undefined,
+      postal_code: parsedData.DAK
+        ? parsedData.DAK.match(/\d{-}\d+/)
+          ? parsedData.DAK
+          : parsedData.DAK.substring(0, 5)
+        : undefined,
+      klass: parsedData.DCA,
+      class: parsedData.DCA,
+      restrictions: undefined,
+      endorsments: undefined,
+      sex: (function () {
+        switch (Number(parsedData.DBC)) {
+          case 1:
+            return "MALE";
+            break;
+          case 2:
+            return "FEMALE";
+            break;
+          default:
+            if (parsedData.DBC[0] === "M") {
+              return "MALE";
+            } else if (parsedData.DBC[0] === "F") {
+              return "FEMALE";
+            }
+            return "MISSING/INVALID";
+            break;
+        }
+      })(),
+      height: undefined,
+      weight: undefined,
+      hair_color: undefined,
+      eye_color: undefined,
+      misc: undefined,
+      id: (function () {
+        if (!parsedData.DAQ) return;
+        return parsedData.DAQ.replace(/[^A-ZA-Z0-9]/g, "");
+      })(),
+    };
+
+    return rawData;
+  };
+
+  global.parse = parse;
+  global.stripe = stripe;
+  global.pdf417 = pdf417;
+})(this);

client/yarn.lock

@@ -2129,6 +2129,16 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@tanem/react-nprogress@^3.0.30":
+  version "3.0.30"
+  resolved "https://registry.yarnpkg.com/@tanem/react-nprogress/-/react-nprogress-3.0.30.tgz#16d22cb835646404a54ea3c528deed58a6ed2f97"
+  integrity sha512-cj1+kC0ciCncOhiYV9CH9LcclPC6gRtgsGmyaMt3HsXzxJkJErdv1EZrxQyhI18GgLhF/C2dHW9ymvDDKGRrrQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.7.2"
+    react-use "^15.2.2"
+
 "@tinymce/tinymce-react@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.6.0.tgz#6e33e89b7bb0240c4ffa892a8e1924688f479b4b"
@@ -2213,6 +2223,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/js-cookie@2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
+  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+
 "@types/json-schema@^7.0.3":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
@@ -2487,6 +2502,11 @@
   dependencies:
     tslib "^1.9.3"
 
+"@xobotyi/scrollbar-width@1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2497,11 +2517,6 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-aamva@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aamva/-/aamva-1.2.0.tgz#2b96e123cefa74705217e47fe39d051536215d79"
-  integrity sha512-0Ay2i8CMsGrYk/xtg7Um1lEjFDypZ9tcSvxMvvkGAbtxiJ3v0tn/7fIDqaMsSy4ANHkekQKGzm6L21mS8zrc1g==
-
 abab@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
@@ -3461,7 +3476,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bowser@^1.0.0:
+bowser@^1.0.0, bowser@^1.7.3:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
   integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
@@ -4457,6 +4472,14 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-loader@3.4.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
@@ -4524,6 +4547,14 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
+css-tree@^1.0.0-alpha.28:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
+  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
+  dependencies:
+    mdn-data "2.0.6"
+    source-map "^0.6.1"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -4651,6 +4682,11 @@ csstype@^2.2.0, csstype@^2.6.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
   integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
 
+csstype@^2.5.5:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -5319,6 +5355,13 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
+  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
+  dependencies:
+    stackframe "^1.1.1"
+
 es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4:
   version "1.17.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
@@ -5793,6 +5836,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -5815,6 +5863,16 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
+
+fastest-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz#9122d406d4c9d98bea644a6b6853d5874b87b028"
+  integrity sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg=
+
 faye-websocket@0.11.3, faye-websocket@~0.11.1:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
@@ -6721,7 +6779,7 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-hyphenate-style-name@^1.0.1:
+hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
@@ -6904,6 +6962,14 @@ inline-style-prefixer@^2.0.0:
     bowser "^1.0.0"
     hyphenate-style-name "^1.0.1"
 
+inline-style-prefixer@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz#d390957d26f281255fe101da863158ac6eb60911"
+  integrity sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
 inquirer@7.0.4, inquirer@^7.0.0:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
@@ -7785,6 +7851,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
   integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -8360,6 +8431,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdn-data@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
+  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8707,6 +8783,20 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nano-css@^5.2.1:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.0.tgz#9d3cd29788d48b6a07f52aa4aec7cf4da427b6b5"
+  integrity sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==
+  dependencies:
+    css-tree "^1.0.0-alpha.28"
+    csstype "^2.5.5"
+    fastest-stable-stringify "^1.0.1"
+    inline-style-prefixer "^4.0.0"
+    rtl-css-js "^1.9.0"
+    sourcemap-codec "^1.4.1"
+    stacktrace-js "^2.0.0"
+    stylis "3.5.0"
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11462,6 +11552,31 @@ react-trello@^2.2.6:
     trello-smooth-dnd "1.0.0"
     uuid "^3.3.2"
 
+react-universal-interface@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
+  integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
+
+react-use@^15.2.2:
+  version "15.3.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-15.3.0.tgz#42946aa6e7bf571104173439cc7b7e26a4ca4c51"
+  integrity sha512-4fFSn2eVbmRPlxHFeBy8uiCyrwMzavMs4hvzeDUFszijda9ZM6S0ElleqKHS+SmwpMFEFIk7dIzzJQZzJYcAXw==
+  dependencies:
+    "@types/js-cookie" "2.2.6"
+    "@xobotyi/scrollbar-width" "1.9.5"
+    copy-to-clipboard "^3.2.0"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.2.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^2.1.0"
+    ts-easing "^0.2.0"
+    tslib "^2.0.0"
+
 react-virtualized@^9.21.2:
   version "9.21.2"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.2.tgz#02e6df65c1e020c8dbf574ec4ce971652afca84e"
@@ -12025,6 +12140,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-css-js@^1.9.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.14.0.tgz#daa4f192a92509e292a0519f4b255e6e3c076b7d"
+  integrity sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 run-async@^2.2.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.0.tgz#e59054a5b86876cfae07f431d18cbaddc594f1e8"
@@ -12162,6 +12284,11 @@ schema-utils@^2.6.5:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+screenfull@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.2.tgz#b9acdcf1ec676a948674df5cd0ff66b902b0bed7"
+  integrity sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==
+
 scroll-into-view-if-needed@^2.2.20:
   version "2.2.24"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.24.tgz#12bca532990769bd509115a49edcfa755e92a0ea"
@@ -12268,6 +12395,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-harmonic-interval@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
+  integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -12510,6 +12642,11 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+
 source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -12532,6 +12669,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.4.1:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -12633,11 +12775,40 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+stack-generator@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
+  integrity sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==
+  dependencies:
+    stackframe "^1.1.1"
+
 stack-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
+stackframe@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
+  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
+
+stacktrace-gps@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz#7688dc2fc09ffb3a13165ebe0dbcaf41bcf0c69a"
+  integrity sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==
+  dependencies:
+    source-map "0.5.6"
+    stackframe "^1.1.1"
+
+stacktrace-js@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
+  dependencies:
+    error-stack-parser "^2.0.6"
+    stack-generator "^2.0.5"
+    stacktrace-gps "^3.0.4"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -12935,6 +13106,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
+  integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
+
 subscriptions-transport-ws@^0.9.16:
   version "0.9.16"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.16.tgz#90a422f0771d9c32069294c08608af2d47f596ec"
@@ -13096,6 +13272,11 @@ throat@^4.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
 
+throttle-debounce@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.2.1.tgz#fbd933ae6793448816f7d5b3cae259d464c98137"
+  integrity sha512-i9hAVld1f+woAiyNGqWelpDD5W1tpMroL3NofTz9xzwq6acWBlO2dC8k5EFSZepU6oOINtV5Q3aSPoRg7o4+fA==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -13256,6 +13437,11 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+ts-easing@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
+  integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
+
 ts-invariant@^0.4.0, ts-invariant@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"
@@ -13273,6 +13459,11 @@ tslib@1.11.1, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"