Merge pull request #43 from kjannette/mon22

Mon22

src/Components/Document/DocumentListPage.js

@@ -171,7 +171,7 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-
+  console.log("allDocs", allDocs);
   const DesktopContent = () => {
     return (
       <>
@@ -204,6 +204,7 @@ const DocumentListPage = ({ perPage }) => {
                       parentCaseNumber={doc.parentCaseNumber}
                       parentCaseName={doc.parentCaseName}
                       parentCaseId={doc.parentCaseId}
+                      createdAt={doc.createdAt}
                       docType={doc.docType}
                       documentId={doc.documentId}
                       dateServed={doc.dateServed}

src/pageElements/Cards.js

@@ -4,7 +4,7 @@ import { FileEarmarkText } from "react-bootstrap-icons";
 import TextInput from "../pageElements/TextInput";
 import Tooltip from "../pageElements/Tooltip";
 import { InfoCircle } from "react-bootstrap-icons";
-
+import { toDate } from "firebase/firestore";
 export const InfoCard = (props) => {
   const { data, onEdit, onCancel, onSave, onChangeInput, isEditing, isBusy } =
     props;
@@ -273,15 +273,20 @@ export const DocCard = (props) => {
     handleNavigate,
     responseGenerations,
     confirmDelete,
+    createdAt,
   } = props;
-
+  const now = new Date().getTime();
+  const uploadedAt = createdAt.toDate();
+  const isReportable = Math.round((now - uploadedAt) / 60 / 1000) > 15;
+  const disabled = docType ? false : true;
+  const tooltipText =
+    "Parsing is taking a bit longer than usual. This usually resolves within 15 minutes. If it does not, click “report” and support will address the issue within 24 hours.";
+  const pendingText =
+    "Parsing in process, please be patient. This should resolve within 10 minutes.";
   const report = (documentId, docType) => {
     console.log("report documentId, docType", documentId, docType);
   };
 
-  const tooltipText =
-    "Parsing is taking a bit longer than usual. This usually resolves within 10 - 15 minutes. If it does not, click “report” and support will address the issue within 24 hours.";
-  const disabled = docType ? false : true;
   return (
     <div className="doc-card-container">
       <div className="doc-card-input">
@@ -289,7 +294,13 @@ export const DocCard = (props) => {
           <FileEarmarkText className="doc-file-icon" size="22px" />
         </div>
         <div className="doc-col2">
-          {title} {disabled ? <Tooltip text={tooltipText} /> : <></>}
+          {title}{" "}
+          {disabled && isReportable ? <Tooltip text={tooltipText} /> : <></>}
+          {disabled && !isReportable ? (
+            <Tooltip text={pendingText} iconStyle="clock" />
+          ) : (
+            <></>
+          )}
         </div>
         {dateServed ? (
           <div className="doc-col3">Served: {dateServed}</div>
@@ -299,7 +310,7 @@ export const DocCard = (props) => {
         <div className="doc-col4">
           <div className="jurisdiction-box">{parentCaseName}</div>
         </div>
-        {disabled ? (
+        {disabled && isReportable ? (
           <div className="doc-col5">
             <Button
               labelText="Report"
@@ -345,3 +356,17 @@ export const DocCard = (props) => {
     </div>
   );
 };
+
+/*
+
+          {disabled ? (
+            isReportable ? (
+              <Tooltip text={tooltipText} />
+            ) : (
+              <Tooltip text={pendingText} iconStyle="clock" />
+            )
+          ) : (
+            <></>
+          )}
+
+          */

src/pageElements/Tooltip.js

@@ -1,18 +1,23 @@
 import { useState } from "react";
 import "../styles/tooltip.scss";
-import { InfoCircle } from "react-bootstrap-icons";
+import { InfoCircle, Clock } from "react-bootstrap-icons";
 
 function Tooltip(props) {
-  const [show, setShow] = useState(false);
-  const { text } = props;
+  const [showMessage, setShowMessage] = useState(false);
+  const { text, iconStyle } = props;
+  const showClock = iconStyle === "clock";
   return (
     <div
       className="tooltip-container"
-      onMouseEnter={() => setShow(true)}
-      onMouseLeave={() => setShow(false)}
+      onMouseEnter={() => setShowMessage(true)}
+      onMouseLeave={() => setShowMessage(false)}
     >
-      <InfoCircle className="infocircle-icon" size="16px" />
-      {show ? <span className="tooltip-text">{text}</span> : <></>}
+      {showClock ? (
+        <Clock className="infocircle-icon" size="16px" />
+      ) : (
+        <InfoCircle className="infocircle-icon" size="16px" />
+      )}
+      {showMessage ? <span className="tooltip-text">{text}</span> : <></>}
     </div>
   );
 }