Merge pull request #26 from kjannette/gem8

Gem8

src/Components/Case/CaseDetailsPage.js

@@ -20,7 +20,8 @@ const CaseDetailsPage = () => {
   const { appState } = useContext(AppContext);
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
-  const message = "Parsing document.  This may take several minutes.";
+  const message =
+    "Parsing document.  Please be patient, this may take several minutes.";
 
   const handleNavigate = () => {
     navigate("/documents");

src/Components/Document/DocEditPage.js

@@ -6,13 +6,16 @@ import { Link, useNavigate } from "react-router-dom";
 import EditElement from "../../pageElements/EditElement";
 import { db } from "../../firebase";
 import {
+  collection,
   updateDoc,
   onSnapshot,
   doc,
   getDoc,
+  setDoc,
   increment,
 } from "firebase/firestore";
 import { AppContext } from "../../Hooks/useContext/appContext";
+
 import Button from "../../pageElements/Button";
 import ConfirmModal from "../Modals/ConfirmModal";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
@@ -35,6 +38,8 @@ const DocEditPage = () => {
   const [saveDocumentId, setSaveDocumentId] = useState("");
   const [showSaveModal, setShowSaveModal] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isReport, setIsReport] = useState(false);
+  const [issueText, setIssueText] = useState("");
   const [responsesCreated, setResponsesCreated] = useState(
     parseInt(responseGenerations)
   );
@@ -107,7 +112,6 @@ const DocEditPage = () => {
 
   const messages = [
     "Generating responses. Please be patient, this may take several minutes.",
-    'Do not click "back" on your browser.',
   ];
 
   /*
@@ -511,6 +515,31 @@ const DocEditPage = () => {
     setShowSaveModal(true);
   };
 
+  const handleReport = () => {
+    setShowSaveModal(false);
+    setIsReport(false);
+  };
+
+  const handleConfirmReport = () => {
+    setShowSaveModal(true);
+    setIsReport(true);
+  };
+
+  async function reportDoc() {
+    const data = {
+      documentId: documentId,
+      caseId: caseId,
+      appUserId: appUserId,
+      issueDescription: issueText,
+    };
+    try {
+      const reportRef = collection(db, "supportrequests");
+      await setDoc(doc(reportRef, documentId), data);
+    } catch (err) {
+      console.log("Error saving case to db:", err);
+    }
+  }
+
   const onScrollClick = () => {
     const bottom = window.document.scrollingElement.scrollHeight;
     const place = window.scrollY;
@@ -544,7 +573,7 @@ const DocEditPage = () => {
     fetchedCase?.clientPosition == "Defendant"
       ? fetchedCase?.plaintiffParties
       : fetchedCase?.defendantParties;
-  console.log("parsedRogs", parsedRogs);
+
   const editingContent = () => {
     return (
       <>
@@ -587,6 +616,12 @@ const DocEditPage = () => {
                 </div>
               </div>
             ))}
+            <div
+              className="docedit-report-container"
+              onClick={() => handleConfirmReport()}
+            >
+              <div className="docedit-report-link">Report an issue</div>
+            </div>
             <div className="doc-editing-button-container">
               <div className="generate-button-box">
                 {/*  TODO: add tooltip: "This will save the document and create a .docx file that will (be downloaded?  saved somewhere?" */}
@@ -615,7 +650,7 @@ const DocEditPage = () => {
             </div>
           </div>
         </div>
-        {showSaveModal && documentId !== null ? (
+        {showSaveModal && !isReport && documentId !== null ? (
           <ConfirmModal
             onCancel={handleCancelSave}
             onConfirm={handleSave}
@@ -625,6 +660,22 @@ const DocEditPage = () => {
             }
           />
         ) : null}
+        {showSaveModal && isReport && documentId !== null ? (
+          <ConfirmModal
+            isReport={isReport}
+            onCancel={handleCancelSave}
+            onConfirm={handleReport}
+            buttonLabelText="Report Issue"
+            documentId={documentId}
+            caseId={caseId}
+            appUserId={appUserId}
+            issuetext={issueText}
+            setIssueText={setIssueText}
+            modalText={
+              "Date/time and document id automatically logged. Support will address this within 24 hours."
+            }
+          />
+        ) : null}
       </>
     );
   };

src/Components/Modals/ConfirmModal.js

@@ -1,19 +1,51 @@
+import { useState } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
+import TextInput from "../../pageElements/TextInput";
 
+import { db } from "../../firebase";
 const ConfirmModal = ({
   onCancel,
   onConfirm,
   buttonLabelText,
   modalText,
   isBusy,
+  isReport,
+  appUserId,
+  caseId,
+  documentId,
+  issueText,
+  setIssueText,
+  reportDoc,
 }) => {
+  console.log("isReport", isReport);
+
   return (
     <Modal show="true" onHide={onCancel} size="lg">
       <Modal.Header closeButton>
+        {isReport ? (
+          <Modal.Title>Report an issue</Modal.Title>
+        ) : (
           <Modal.Title>Confirmation</Modal.Title>
+        )}
       </Modal.Header>
-      <Modal.Body>{modalText}</Modal.Body>
+      <Modal.Body>
+        <span>{modalText}</span>
+        {isReport ? (
+          <div style={{ marginTop: "16px" }}>
+            <TextInput
+              key={"captionTwo"}
+              name={"captionTwo"}
+              value={issueText}
+              message={"data.captionTwo.message"}
+              onChange={(e) => setIssueText(e.target.value)}
+              label={issueText ? "" : "Description of issue"}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+      </Modal.Body>
       <Modal.Footer>
         <Button
           disabled={isBusy}

src/styles/docedit-page.scss

@@ -52,7 +52,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  margin-top: 1rem;
+  margin-top: 0.6rem;
 }
 
 .edit-back-button {
@@ -359,6 +359,16 @@
   margin-top: 50px;
 }
 
+.docedit-report-link {
+  font-size: 0.95rem;
+  color: red;
+}
+
+.docedit-report-link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 @media only screen and (max-width: 1140px) {
   .scroll-button {
     right: 30px;