Merge pull request #169 from kjannette/prepidd

Prepidd

src/Components/Case/CaseDetailsPage.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { DetailCard } from "../../pageElements/DetailCard.js";
 import Button from "../../pageElements/Button";
 import CreateModal from "../Modals/CreateModal.js";
@@ -9,6 +9,7 @@ import { db } from "../../firebase";
 import { useParams } from "react-router-dom";
 import { AppContext } from "../../Hooks/useContext/appContext.js";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
+import { ArrowLeft } from "react-bootstrap-icons";
 import {
   doc,
   getDoc,
@@ -22,6 +23,7 @@ const CaseDetailsPage = () => {
   const [subCase, setSubCase] = useState(null);
   const navigate = useNavigate();
   const [showUploadModal, setShowUploadModal] = useState();
+  const [uploadType, setUploadType] = useState();
   const [showCreateModal, setShowCreateModal] = useState();
   const [showConfirmModal, setShowConfirmModal] = useState();
   const [isLoading, setIsLoading] = useState(false);
@@ -167,14 +169,6 @@ const CaseDetailsPage = () => {
     fetchData();
   }, [fbUserId]);
 
-  const handleUploadDoc = () => {
-    if (docsAllowed - docsGenerated > 0) {
-      setShowUploadModal(true);
-    } else {
-      setShowConfirmModal(true);
-    }
-  };
-
   const handleNavigate = (docId, caseId) => {
     getDocument(docId, caseId);
   };
@@ -186,8 +180,22 @@ const CaseDetailsPage = () => {
     navigate(`/reqedit/${documentId}/interrogatories-out/${caseId}`);
   };
 
-  const handleBack = () => {
-    navigate("/cases");
+  const handleUploadDoc = () => {
+    if (docsAllowed - docsGenerated > 0) {
+      setUploadType("discovery");
+      setShowUploadModal(true);
+    } else {
+      setShowConfirmModal(true);
+    }
+  };
+
+  const handleUploadComplaint = () => {
+    if (docsAllowed - docsGenerated > 0) {
+      setUploadType("complaint");
+      setShowUploadModal(true);
+    } else {
+      setShowConfirmModal(true);
+    }
   };
 
   const handleConfirmDocType = (docType) => {
@@ -208,23 +216,33 @@ const CaseDetailsPage = () => {
     return (
       <div className="details-button-container">
         <div className="details-butn-wrapper">
-          <Button
-            onClick={() => setShowCreateModal(true)}
-            labelText="Edit Case"
-            className="primary-button"
-          />
+          <div className="details-butn-sub-wrapper-r">
+            <Link className="view-all-link" to="/cases">
+              <span className="arrow-wrapper">
+                <ArrowLeft size="20px" />
+              </span>
+              <span className="details-back-wrapper">Back</span>
+            </Link>
+          </div>
+          <div className="details-butn-sub-wrapper-l">
+            <Button
+              onClick={() => setShowCreateModal(true)}
+              labelText="Edit Case Details"
+              className="primary-button"
+            />
+          </div>
         </div>
-        <div className="details-button-box">
+        <div className="details-complaint-button-box">
           <Button
             className="secondary-button back-button"
-            onClick={handleBack}
-            labelText="Back"
+            onClick={handleUploadComplaint}
+            labelText="Upload Complaint"
           />
-          <div className="upload-button-box">
+          <div className="details-upload-button-box">
             <Button
               className="p-2 mr-2 primary-button"
               onClick={handleUploadDoc}
-              labelText="Upload Document"
+              labelText="Upload Discovery Request"
             />
           </div>
         </div>
@@ -270,6 +288,7 @@ const CaseDetailsPage = () => {
             handleConfirmDocType={handleConfirmDocType}
             fbUserId={fbUserId}
             clientPosition={subCase.clientPosition}
+            uploadType={uploadType}
           />
         ) : null
       ) : null}

src/Components/Dashboard/Dashboard.js

@@ -247,7 +247,7 @@ const Dashboard = () => {
                 </div>
                 <div>
                   <p className="stats-text">
-                    {Math.round(responseCount * 3.2989 * 100) / 100} hours saved
+                    {Math.round(responseCount * 3.1799 * 10) / 10} hours saved
                     using Novodraft
                   </p>
                 </div>

src/Components/Modals/UploadModal.js

@@ -35,6 +35,7 @@ const UploadModal = (props) => {
     setIsLoading,
     clientPosition,
     fbUserId,
+    uploadType,
   } = props;
   const { caseId, caseNumber, jurisdiction, caption, captionTwo } = caseData;
   const [docTitle, setDocTitle] = useState("");
@@ -43,14 +44,19 @@ const UploadModal = (props) => {
   const [fileToUpload, setFileToUpload] = useState();
   const [fileToParse, setFileToParse] = useState("");
   const [fileChanged, setFileChanged] = useState();
-  const [radioValue, setRadioValue] = useState(null);
+  const [radioValue, setRadioValue] = useState(uploadType);
   const [radioValueError, setRadioValueError] = useState("");
   const [showFileDetails, setShowFileDetails] = useState("");
   const [titleError, setShowTitleError] = useState("");
   const [docError, setShowDocError] = useState("");
   const fileTypes = ["PDF"];
   const fileName = fileToParse ? fileToParse.name : undefined;
-
+  console.log("uploadType", uploadType);
+  console.log("radioValue", radioValue);
+  const currentType =
+    uploadType === "complaint" ? "complaint" : "discovery request";
+  const otherType =
+    uploadType === "complaint" ? "discovery request" : "complaint";
   let docType;
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -226,7 +232,7 @@ const UploadModal = (props) => {
   return (
     <Modal show="true" onHide={handleUploadCancel} size="lg">
       <Modal.Header closeButton>
-        <Modal.Title>Document Upload</Modal.Title>
+        <Modal.Title>Upload {currentType}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className="modal-header-text-wrapper">
@@ -250,19 +256,17 @@ const UploadModal = (props) => {
               <ExclamationTriangle
                 style={{
                   color: "red",
-                  marginBottom: "4px",
+                  marginBottom: "6px",
                   marginRight: "8px",
                 }}
               />
-              NOTE: Selecting incorrect document type may result in errors.
-              <p className="upload-modal-header-text red indent">
-                Clicking upload begins document creation.
+              YOU ARE UPLOADING A {currentType.toUpperCase()}
+              <p className="upload-modal-header-text indent">
+                If you intended to upload a {otherType} - click "cancel", then
+                select {otherType}
               </p>
             </span>
           </p>
-          <p className="upload-modal-header-text red right">
-            Document credit will be debited from account.
-          </p>
         </div>
         <Form>
           <Row>
@@ -272,7 +276,14 @@ const UploadModal = (props) => {
                 name={"title"}
                 value={docTitle}
                 onChange={handleTitleInput}
-                label={docTitle ? "" : "Title"}
+                label={
+                  docTitle
+                    ? ""
+                    : `${
+                        currentType.split("")[0].toUpperCase() +
+                        currentType.substring(1, 20)
+                      } title`
+                }
                 error={!!titleError}
                 message={titleError}
               />
@@ -283,7 +294,10 @@ const UploadModal = (props) => {
                 name={"description"}
                 value={docDescription}
                 onChange={handleDescInput}
-                label="Description"
+                label={`${
+                  currentType.split("")[0].toUpperCase() +
+                  currentType.substring(1, 20)
+                } description`}
               />
             </Col>
           </Row>
@@ -294,24 +308,23 @@ const UploadModal = (props) => {
                 name={"date"}
                 value={dateServed}
                 onChange={handleDateInput}
-                label={dateServed ? "" : "Date Served"}
+                label={
+                  dateServed
+                    ? ""
+                    : `${
+                        currentType.split("")[0].toUpperCase() +
+                        currentType.substring(1, 20)
+                      } date served`
+                }
               />
             </Col>
             <Col>
-              <div className="radio-wrapper">
-                <Radiogroup
-                  title="Document type"
-                  options={radioOptions}
-                  value={radioValue}
-                  radioError={radioValueError}
-                  onClick={(e) => handleSetRadioValue(e, "documentType")}
-                />
-              </div>
+              <div></div>
             </Col>
           </Row>
           <Row className="file-upload-row">
             <Col className="mb-3">
-              <Form.Label>Select Document</Form.Label>
+              <Form.Label>Select {currentType}</Form.Label>
               <div className="file-uploader">
                 <FileUploader
                   multiple={true}
@@ -322,7 +335,7 @@ const UploadModal = (props) => {
                   <div className={fileToParse ? "drag-box filled" : "drag-box"}>
                     {fileToParse
                       ? fileToParse[0]?.name
-                      : "Click to select a file or drag and drop here"}
+                      : "Click to select file or drag and drop here"}
                   </div>
                 </FileUploader>
               </div>
@@ -352,3 +365,13 @@ const UploadModal = (props) => {
 };
 
 export default UploadModal;
+
+/*
+                <Radiogroup
+                  title="Document type"
+                  options={radioOptions}
+                  value={radioValue}
+                  radioError={radioValueError}
+                  onClick={(e) => handleSetRadioValue(e, "documentType")}
+                />
+                */

src/Components/OptoutPage.js

@@ -58,6 +58,7 @@ const OptoutPage = () => {
     if (dataValues === null) {
       return;
     }
+    console.log("datavalues", dataValues);
     saveRequestData(dataValues);
     navigate("/");
   }

src/styles/case-details.scss

@@ -61,6 +61,20 @@
   margin-right: 1px;
 }
 
+.details-complaint-button-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 8px;
+  margin-right: 1px;
+}
+
+.details-complaint-button-box > .back-button {
+  &:hover {
+    border: 2px solid #f27300;
+  }
+}
+
 .back-button-box {
   margin-right: 8px;
 }
@@ -102,12 +116,44 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  padding-left: 16px;
+}
+
+.details-butn-wrapper > .primary-button {
+  margin-right: 5px;
 }
 
 .upload-button-box {
   margin-left: 8px;
 }
 
+.details-upload-button-box {
+  display: flex;
+  justify-content: flex-end;
+  width: 260px;
+  margin-left: 8px;
+}
+
+.details-upload-button-box > .primary-button {
+  width: 250px;
+}
+
+.details-upload-button-box {
+  &button {
+    width: 220px;
+  }
+}
+
+.details-butn-sub-wrapper-r {
+  width: 50%;
+}
+
+.details-butn-sub-wrapper-l {
+  display: flex;
+  justify-content: flex-end;
+  width: 50%;
+  padding-right: 5px;
+}
 .detail-text {
   //
 }
@@ -121,3 +167,15 @@
   flex-direction: column;
   flex-grow: 3;
 }
+
+.arrow-wrapper > svg {
+  margin-bottom: 4px !important;
+  margin-right: 4px !important;
+  margin-left: 5px;
+}
+
+.details-back-wrapper {
+  margin-left: 4px;
+  font-size: 1.04rem;
+  padding-top: 3px;
+}

src/styles/modals.scss

@@ -30,6 +30,9 @@
   &.indent {
     margin-left: 23px;
   }
+  &.red {
+    color: red;
+  }
 }
 
 .upload-header-bold {