more

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);
@@ -169,6 +171,7 @@ const CaseDetailsPage = () => {
 
   const handleUploadDoc = () => {
     if (docsAllowed - docsGenerated > 0) {
+      setUploadType("discovery");
       setShowUploadModal(true);
     } else {
       setShowConfirmModal(true);
@@ -186,8 +189,13 @@ const CaseDetailsPage = () => {
     navigate(`/reqedit/${documentId}/interrogatories-out/${caseId}`);
   };
 
-  const handleBack = () => {
-    navigate("/cases");
+  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/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("");
@@ -50,7 +51,9 @@ const UploadModal = (props) => {
   const [docError, setShowDocError] = useState("");
   const fileTypes = ["PDF"];
   const fileName = fileToParse ? fileToParse.name : undefined;
-
+  console.log("uploadType", uploadType);
+  const otherType =
+    uploadType === "complaint" ? "discovery request" : "complaint";
   let docType;
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -250,19 +253,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.
+              NOTE: YOU ARE UPLOADING A {uploadType.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>

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 {