update intake form fields and removed substances field required (#136)

* update intake form fields and removed substances field required

Problem
- Feedback from the client to:
    - Remove substances field as required to submit the form
    - Add comments field to the intake form
    - Add document number field to the intake form

Solution
- Remove substances field as required to submit the form
- Add comments field to the intake form
- Add document number field to the intake form
- Updated API calls to include the new fields

Ticket:
https://mediform.atlassian.net/browse/MEDI-91

Documentation:
N/A

Tests
- manual testing
    - new fields are displayed on the intake form
    - substances field is not required to submit the form
    - NOTE: API has not implemented the new fields yet, so the form will submit but retrieval will not have the new fields
- `yarn build` passes

* Update helper text for DocumentNumberField component for consistency

app/web/components/intake_form/CommentsField.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Box, FormControl, TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { IntakeFormDataInterface } from "../../interfaces/IntakeFormDataInterface";
+
+
+/**
+ * Renders a comments input field controlled by React Hook Form.
+ *
+ * @param props FormField component props.
+ *
+ * @returns CommentsField component.
+ */
+export function CommentsField({ control }: FormFieldProps<IntakeFormDataInterface>) {
+  return (
+    <Box>
+      <FormControl fullWidth>
+        <Controller
+          name="comment"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              placeholder="Enter additional comments here"
+              variant="outlined"
+              label="Comments"
+              multiline={true}
+              rows={3}
+              {...field}
+            />
+          )}
+        />
+      </FormControl>
+    </Box>
+  );
+}

app/web/components/intake_form/DocumentNumberField.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { FormControl, TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { IntakeFormDataInterface } from "../../interfaces/IntakeFormDataInterface";
+
+
+
+/**
+ * Renders a document number input field controlled by React Hook Form.
+ *
+ * @param props FormField component props.
+ *
+ * @returns DocumentNumberField component.
+ */
+export function DocumentNumberField({ control, errors }: FormFieldProps<IntakeFormDataInterface>) {
+  return (
+    <FormControl>
+      <Controller
+        name="document_num"
+        control={control}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            label="Document Number"
+            variant="outlined"
+            placeholder="1234"
+            helperText="Enter the document number, e.g., 1234."
+            error={Boolean(errors?.document_num)}
+          />
+        )}
+      />
+    </FormControl>
+  );
+}

app/web/components/intake_form/IntakeFormFields.tsx

@@ -17,6 +17,8 @@ import { ArrivalMethodField } from "./ArrivalMethodField";
 import { ArrivalTimeField } from "./ArrivalTimeField";
 import { ArrivalDateField } from "./ArrivalDateField";
 import { GuestRFIDField } from "./GuestRFIDField";
+import { DocumentNumberField } from "./DocumentNumberField";
+import { CommentsField } from "./CommentsField";
 
 
 /**
@@ -34,9 +36,12 @@ export const IntakeFormFields: React.FC<IntakeFormFieldsProps> = ({
     enableDepartureNotes
 }) => (
     <>
-        <Grid item xs={12}>
+        <Grid item xs={6}>
             {GuestRFIDField({ control, errors })}
         </Grid>
+        <Grid item xs={6}>
+            {DocumentNumberField({ control, errors })}
+        </Grid>
         <Grid item xs={6}>
             {ArrivalDateField({ control, errors })}
         </Grid>
@@ -82,5 +87,8 @@ export const IntakeFormFields: React.FC<IntakeFormFieldsProps> = ({
         <Grid item xs={12}>
             {DepartureNotesField({ control, errors, enableField: enableDepartureNotes })}
         </Grid>
+        <Grid item xs={12}>
+            {CommentsField({ control, errors })}
+        </Grid>
     </>
 );

app/web/components/intake_form/SubstanceCategoryField.tsx

@@ -26,9 +26,6 @@ export function SubstanceCategoryField({ control, errors }: FormFieldProps<Intak
         <Controller
             name="substance_categories"
             control={control}
-            rules={{
-                required: "Substance category is required",
-            }}
             render={({ field }) => (
                 <Select
                     {...field}

app/web/constants/sanctuaryForm.ts

@@ -3,6 +3,7 @@ import { IntakeFormDataInterface } from "../interfaces/IntakeFormDataInterface";
 export const IntakeFormDataDefaults: IntakeFormDataInterface = {
   intake_uuid: "",
   guest_rfid: "",
+  document_num: "",
   arrival_date: new Date(),
   arrival_time: new Date(),
   arrival_method: "",
@@ -19,6 +20,7 @@ export const IntakeFormDataDefaults: IntakeFormDataInterface = {
   departure_date: new Date(),
   departure_dest: "",
   departure_dest_other: "",
+  comment: "",
 };
 
 export const GuestConsciousnessLevelsOptions = [

app/web/interfaces/IntakeFormDataInterface.ts

@@ -1,6 +1,7 @@
 export interface IntakeFormDataInterface {
   intake_uuid: string;
   guest_rfid: string;
+  document_num: string;
   arrival_date: Date;
   arrival_time: Date;
   arrival_method: string;
@@ -17,10 +18,12 @@ export interface IntakeFormDataInterface {
   departure_date: Date;
   departure_dest: string;
   departure_dest_other?: string;
+  comment: string;
 }
 
 export interface APIIntakeFormData {
   guest_rfid: string;
+  document_num: string;
   arrival_date: string;
   arrival_time: string;
   arrival_method: string;
@@ -35,4 +38,5 @@ export interface APIIntakeFormData {
   discharge_time: string;
   discharge_method: string;
   intake_uuid: string;
+  comment: string;
 }

app/web/pages/sanctuary/search.tsx

@@ -47,6 +47,7 @@ function SanctuaryIntakeSearch(): React.JSX.Element {
     const columns = [
         { field: "intake_uuid", headerName: "UUID", width: 200 },
         { field: "guest_rfid", headerName: "Guest RFID", width: 150 },
+        { field: "document_num", headerName: "Document Number", width: 200 },
         { field: "arrival_date", headerName: "Arrival Date", width: 100 },
         { field: "arrival_time", headerName: "Arrival Time", width: 150 },
         { field: "arrival_method", headerName: "Arrival Method", width: 150 },
@@ -60,6 +61,7 @@ function SanctuaryIntakeSearch(): React.JSX.Element {
         { field: "departure_date", headerName: "Discharge Date", width: 250 },
         { field: "departure_time", headerName: "Discharge Time", width: 250 },
         { field: "departure_dest", headerName: "Discharge Destination", width: 250 },
+        { field: "comment", headerName: "Comment", width: 250 },
     ];
 
     if (isError) {

app/web/utils/api_sanctuary.ts

@@ -132,6 +132,7 @@ export async function updateSanctuaryIntakeForm(
         body: JSON.stringify({
           intake_uuid: formData.intake_uuid,
           guest_rfid: formData.guest_rfid,
+          document_num: formData.document_num,
           arrival_date: formData.arrival_date,
           arrival_time: formData.arrival_time,
           arrival_method: formData.arrival_method,
@@ -145,6 +146,7 @@ export async function updateSanctuaryIntakeForm(
           discharge_time: formData.departure_time,
           discharge_date: formData.departure_date,
           discharge_method: formData.departure_dest,
+          comment: formData.comment,
         }),
       }
     );
@@ -188,6 +190,7 @@ export async function submitIntakeForm(
         body: JSON.stringify({
           intake_uuid: formData.intake_uuid,
           guest_rfid: formData.guest_rfid,
+          document_num: formData.document_num,
           arrival_date: formData.arrival_date,
           arrival_time: formData.arrival_time,
           arrival_method: formData.arrival_method,
@@ -201,6 +204,7 @@ export async function submitIntakeForm(
           discharge_time: formData.departure_time,
           discharge_date: formData.departure_date,
           discharge_method: formData.departure_dest,
+          comment: formData.comment,
         }),
       }
     );