Merge pull request #109 from kjannette/request

Request

src/Components/Dashboard/Dashboard.js

@@ -30,6 +30,7 @@ const Dashboard = () => {
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
   const isDashboard = true;
+
   useEffect(() => {
     if (count.current == null) {
       setIsMobile(window.innerWidth < 440);

src/Components/Document/DocumentListPage.js

@@ -136,6 +136,10 @@ const DocumentListPage = ({ perPage }) => {
     { label: "Associated case name z - a", value: "parentCaseName2" },
   ];
 
+  const handleNovos = (e) => {
+    navigate("/how-to");
+  };
+
   function handleNavigate(
     documentId,
     responseGenerations,
@@ -188,7 +192,16 @@ const DocumentListPage = ({ perPage }) => {
               <div className="document-list-upper-wrapper">
                 <div className="list-upper-left">
                   <div className="toggle-outer">
-                    <div className="toggle-header"> Response Verbosity</div>
+                    <div className="toggle-header">
+                      {" "}
+                      <p
+                        onClick={handleNovos}
+                        href=""
+                        className="doclist-toggle-link"
+                      >
+                        Novos
+                      </p>
+                    </div>
                     <div className="toggle-box">
                       <p className="select-billing-text">Min</p>
                       <Toggle value={verbValue} onClick={handleToggle} />

src/Components/Login/Login.js

@@ -20,12 +20,14 @@ const Login = () => {
     }
     setIsBusy(true);
     setNotice("");
+
     try {
       const userCredential = await signInWithEmailAndPassword(
         auth,
         email,
         password
       );
+
       // Signed in
       userCredential?.user && navigate("/dashboard");
     } catch (error) {

src/Components/Modals/UploadModal.js

@@ -6,11 +6,13 @@ import Button from "../../pageElements/Button";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
+import Radiogroup from "../../pageElements/Radiogroup";
 import { useNavigate } from "react-router-dom";
 import { collection, setDoc, doc } from "firebase/firestore";
 import { db } from "../../firebase";
 import { v4 as uuidv4 } from "uuid";
 import TextInput from "../../pageElements/TextInput";
+import { ExclamationTriangle } from "react-bootstrap-icons";
 import Radio from "../../pageElements/Radio";
 import "../../styles/modals.scss";
 
@@ -30,6 +32,8 @@ const UploadModal = (props) => {
   const [fileToUpload, setFileToUpload] = useState();
   const [fileToParse, setFileToParse] = useState("");
   const [fileChanged, setFileChanged] = useState();
+  const [radioValue, setRadioValue] = useState(null);
+  const [radioValueError, setRadioValueError] = useState("");
   const [showFileDetails, setShowFileDetails] = useState("");
   const [titleError, setShowTitleError] = useState("");
   const [docError, setShowDocError] = useState("");
@@ -41,6 +45,19 @@ const UploadModal = (props) => {
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
 
+  const radioOptions = [
+    {
+      name: "Discovery request",
+      label: "Discovery request",
+      value: "discovery-request",
+    },
+    { name: "Complaint", label: "Complaint", value: "complaint" },
+  ];
+
+  const handleSetRadioValue = (e) => {
+    setRadioValue(e.value);
+  };
+
   async function saveToDb(uuidName) {
     const createdAt = new Date();
     const data = {
@@ -72,12 +89,21 @@ const UploadModal = (props) => {
 
   async function uploadFile(file) {
     try {
-      const response = await fetch(`${apiUrl}/parseNewDoc`, {
-        method: "POST",
-        body: file,
-      });
-      const res = response;
-      return res;
+      if (radioValue === "complaint") {
+        const response = await fetch(`${apiUrl}/v1/gen-disc-request`, {
+          method: "POST",
+          body: file,
+        });
+        const res = response;
+        return res;
+      } else {
+        const response = await fetch(`${apiUrl}/parseNewDoc`, {
+          method: "POST",
+          body: file,
+        });
+        const res = response;
+        return res;
+      }
     } catch (error) {
       console.error("Error:", error);
     }
@@ -112,9 +138,10 @@ const UploadModal = (props) => {
   }
 
   async function handleUpload() {
-    if (!docTitle && !fileToParse) {
+    if (!docTitle && !fileToParse && !radioValue) {
       setShowDocError("Please select a document to upload.");
       setShowTitleError("Please enter a document title");
+      setRadioValueError("Please select document type");
       return;
     } else if (!docTitle) {
       setShowTitleError("Please enter a document title");
@@ -173,17 +200,37 @@ const UploadModal = (props) => {
       <Modal.Body>
         <div className="modal-header-text-wrapper">
           <p className="upload-modal-header-text">
-            Select a document in pdf format for upload. Enter the document title
-            below. Document description is optional.
+            Select a .pdf file for upload, then 1. enter title, and 2. choose
+            document type (other fields optional).
           </p>
           <p className="upload-modal-header-text">
-            This document will be associated with {caption} v. {captionTwo}
+            The document created will be associated with{" "}
+            <em>
+              {caption} v. {captionTwo}
+            </em>
             {caseNumber ? `, ${caseNumber}` : ""}.
           </p>
           <p className="upload-modal-header-text">
-            If that is not the case you want to associate with this document,
-            click "cancel", go back and select the intended case from your
-            active case list.
+            If that is not the correct case: 1. click cancel 2. click back, then
+            3. select correct case from active cases.
+          </p>
+          <p className="upload-modal-header-text red">
+            <span className="upload-header-text">
+              <ExclamationTriangle
+                style={{
+                  color: "red",
+                  marginBottom: "4px",
+                  marginRight: "8px",
+                }}
+              />
+              NOTE: Selecting incorrect document type may result in errors.
+              <p className="upload-modal-header-text red indent">
+                Clicking upload begins document creation.
+              </p>
+            </span>
+          </p>
+          <p className="upload-modal-header-text red right">
+            Document credit will be debited from account.
           </p>
         </div>
         <Form>
@@ -219,9 +266,19 @@ const UploadModal = (props) => {
                 label={dateServed ? "" : "Date Served"}
               />
             </Col>
-            <Col />
+            <Col>
+              <div className="radio-wrapper">
+                <Radiogroup
+                  title="Document type"
+                  options={radioOptions}
+                  value={radioValue}
+                  radioError={radioValueError}
+                  onClick={(e) => handleSetRadioValue(e, "documentType")}
+                />
+              </div>
+            </Col>
           </Row>
-          <Row>
+          <Row className="file-upload-row">
             <Col className="mb-3">
               <Form.Label>Select Document</Form.Label>
               <div className="file-uploader">
@@ -256,7 +313,7 @@ const UploadModal = (props) => {
         <Button
           labelText="Upload"
           className="primary-button pr-1 pl-1"
-          onClick={handleUpload}
+          onClick={() => handleUpload(radioValue)}
         />
       </Modal.Footer>
     </Modal>

src/Components/SignupPage/SignupPage.js

@@ -50,7 +50,8 @@ const SignupPage = () => {
     isUpgrade ? true : false
   );
 
-  //const [showSelectPlan, setShowSelectPlan] = useState(true);
+  // const [showSelectPlan, setShowSelectPlan] = useState(true);
+
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const stripe = new Stripe(stripeApiKey);

src/Constants/Copy/howToSteps.js

@@ -24,8 +24,8 @@ export const Steps = () => (
             Click <span className="bold-span"> “Upload”.</span>
           </div>
           <div className="mini-break">
-            Parsing the document usually takes under 2 minutes, but be patient -
-            it may take up to 5.
+            Parsing the document for language processing usually takes fewer
+            than 2 minutes, but be patient - it may take up to 5.
           </div>
         </div>
       </div>
@@ -46,8 +46,16 @@ export const Steps = () => (
         <span className="bold-span">GENERATE THE RESPONSE: </span>From the
         Document List View, click the “Generate Responses'' button. Novdraft’s
         Intellidraft AI will generate the response and automatically navigate to
-        the interactive Document Editor. You can edit the responses and save
-        progress any time by clicking the “Save Changes” button.
+        the interactive Document Editor. Note the Response Novos toggle button -
+        this controls the amount of logical branching used in forumilting hte
+        response language. You can edit the responses and save progress any time
+        by clicking the “Save Changes” button.
+      </div>
+      <div className="steps-text-wrapper">
+        Novos level: this controls the amount of branching applied in deductive
+        persuasion. At the higher setting, the LLM will generate persuasive
+        rhetoric beyond the statement of an authoritative rule – additional
+        attention will be given to application of the rule to factual scenarios.{" "}
       </div>
       <div className="steps-text-wrapper">
         <span className="bold-span">DOWNLOAD YOUR RESPONSE DOCUMENT: </span>

src/pageElements/Radiogroup.js

@@ -12,6 +12,7 @@ const Radiogroup = (props) => {
     value,
     options,
     disabled,
+    radioError,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
@@ -81,6 +82,13 @@ const Radiogroup = (props) => {
             </div>
           ))}
       </div>
+      <div className="radio-error-box">
+        {radioError ? (
+          <div className="modal-document-error">{radioError}</div>
+        ) : (
+          <></>
+        )}
+      </div>
     </div>
   );
 };

src/styles/doclist-page.scss

@@ -68,6 +68,10 @@
 .toggle-outer {
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--accent-orange-light);
+  margin-right: 12px;
+  border-radius: 10px;
+  background-color: var(--background-blue);
 }
 
 .toggle-box {
@@ -81,13 +85,18 @@
 .toggle-header {
   display: flex;
   justify-content: center;
-  padding-right: 12px;
-  margin-top: -8px;
+  padding-right: 7px;
   height: 28px;
 }
 
-.list-upper-right {
-  //
+.doclist-toggle-link {
+  color: blue;
+}
+
+.doclist-toggle-link:hover {
+  cursor: pointer;
+  color: orange;
+  text-decoration: underline;
 }
 
 .document-list-lower-wrapper {

src/styles/modals.scss

@@ -12,21 +12,38 @@
 }
 
 .modal-header-text-wrapper {
-  margin-bottom: 12px;
+  margin-bottom: 18px;
   padding: 0px 8px;
 }
 
 .upload-modal-header-text {
   font-family: Roboto;
+  font-size: 0.89rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1.1rem;
   margin: 0px 0px 10px 0px;
+
+  &.right {
+    margin-top: -7px;
+    margin-left: 23px;
+  }
+  &.indent {
+    margin-left: 23px;
+  }
+}
+
+.upload-header-bold {
+  font-weight: 500;
+}
+
+.file-upload-row {
+  margin-top: 6px;
 }
 
 .modal-document-error {
   margin: -10px 2px 0px 5px;
   color: red;
-  font-size: 0.85rem;
+  font-size: 0.89rem;
 }
 
 .create-modal-header {
@@ -66,6 +83,7 @@
     }
   }
 }
+
 .caption-one-container > .mb-3 {
   margin-bottom: 0px !important;
 }
@@ -130,6 +148,27 @@
   padding-left: 7px;
 }
 
+.zora {
+  width: 160px !important;
+}
+
+.radio-wrapper {
+  height: 110px;
+}
+
+.radio-option-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkbox-option-div {
+  height: 20px;
+}
+.radio-error-box {
+  margin-top: 16px;
+  margin-left: -3px;
+}
+
 @media only screen and (max-width: 820px) {
   .modal-body {
     width: 580px !important;