Merge pull request #164 from djnunez-aot/staff-form-preview

Refactor Consultation Record form

submit-web/src/components/Shared/YesNoRadioOptions.tsx

@@ -6,19 +6,35 @@ export const NO = false;
 
 type IYesNoRadioOptionsProps = {
   error: boolean;
+  disabled?: boolean;
 };
 export const YesNoRadioOptions = ({
   error = true,
+  disabled = false,
 }: IYesNoRadioOptionsProps) => {
   const sx = [
+    disabled && {
+      color: BCDesignTokens.iconsColorDisabled,
+    },
     error && {
       color: BCDesignTokens.surfaceColorPrimaryDangerButtonDefault,
     },
   ];
+
   return (
     <>
-      <FormControlLabel value={YES} control={<Radio sx={sx} />} label="Yes" />
-      <FormControlLabel value={NO} control={<Radio sx={sx} />} label="No" />
+      <FormControlLabel
+        value={YES}
+        disabled={disabled}
+        control={<Radio sx={sx} disabled={disabled} />}
+        label="Yes"
+      />
+      <FormControlLabel
+        value={NO}
+        disabled={disabled}
+        control={<Radio sx={sx} disabled={disabled} />}
+        label="No"
+      />
     </>
   );
 };

submit-web/src/components/Submission/SubmissionItemTableRow/StaffSubmissionItemTableRow.tsx

@@ -10,16 +10,23 @@ import DocumentRow from "../DocumentRow";
 import { Unless, When } from "react-if";
 import { SubmissionItemTableCell, SubmissionItemTableRowProps } from ".";
 import { PackageTableRow } from ".";
+import { useNavigate, useParams } from "@tanstack/react-router";
 
 export default function StaffSubmissionItemTableRow({
   item,
   error = false,
 }: SubmissionItemTableRowProps) {
-  const { name, submissions, has_document, status } = item;
+  const { projectId, submissionPackageId } = useParams({ strict: false });
+  const navigate = useNavigate();
+  const { name, submissions, has_document, status, id } = item;
 
   const actionLabel = has_document ? "Review" : "View";
 
-  const onActionClick = () => {};
+  const onActionClick = () => {
+    navigate({
+      to: `/staff/projects/${projectId}/submission-packages/${submissionPackageId}/submissions/${id}`,
+    });
+  };
 
   return (
     <>

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordProponentView/ActionButtons.tsx

@@ -0,0 +1,20 @@
+import { Button, Grid } from "@mui/material";
+
+export default function ActionButtons({
+  saveAndClose,
+}: {
+  saveAndClose: () => void;
+}) {
+  return (
+    <Grid item xs={12} container spacing={2}>
+      <Grid item xs={12} sm="auto">
+        <Button color="secondary" onClick={saveAndClose}>
+          Save & Continue Later
+        </Button>
+      </Grid>
+      <Grid item xs={12} sm="auto">
+        <Button type="submit">Save Completed Form</Button>
+      </Grid>
+    </Grid>
+  );
+}

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordProponentView/FormFieldSection.tsx

@@ -0,0 +1,157 @@
+import ControlledTextField from "@/components/Shared/controlled/ControlledTextField";
+import { Divider, Grid, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { BCDesignTokens } from "epic.theme";
+import { When } from "react-if";
+import ControlledRadioGroup from "@/components/Shared/controlled/ControlledRadioGroup";
+import { YesNoRadioOptions } from "@/components/Shared/YesNoRadioOptions";
+import { FieldErrors, useFieldArray, UseFormReturn } from "react-hook-form";
+import { ConsultationRecordForm } from ".";
+
+interface FormFieldSectionProps {
+  methods: UseFormReturn<ConsultationRecordForm>; // Replace FormValues with your actual form schema interface
+  errors: FieldErrors<ConsultationRecordForm>; // Replace FormValues with your actual form schema interface
+}
+
+export default function FormFieldSection({
+  methods,
+  errors,
+}: FormFieldSectionProps) {
+  const { fields, append, remove } = useFieldArray({
+    control: methods.control,
+    name: "consultedParties", // this should match the field name in the schema
+  });
+
+  const handleAddParty = () => {
+    append({ consultedParty: "" }); // append a new field for consultedParty
+  };
+
+  return (
+    <>
+      <Grid item xs={12}>
+        <Typography
+          variant="h5"
+          fontWeight={400}
+          sx={{ color: BCDesignTokens.typographyColorDisabled }}
+        >
+          Consultation Records Information
+        </Typography>
+        <Divider sx={{ mt: BCDesignTokens.layoutMarginXsmall }} />
+      </Grid>
+      <Grid item xs={12} container>
+        <Grid item container xs={12} spacing={BCDesignTokens.layoutMarginSmall}>
+          <Grid item xs={12}>
+            <Typography
+              variant="body1"
+              fontWeight={BCDesignTokens.typographyFontWeightsBold}
+            >
+              Names of consulted/engaged parties
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Typography variant="body1">
+              These parties have been identified as requiring consultation.
+              Please include any additional parties that have been consulted
+              while developing this Management Plan.
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            <ul
+              style={{
+                marginLeft: BCDesignTokens.layoutMarginSmall,
+                paddingLeft: BCDesignTokens.layoutPaddingSmall,
+              }}
+            >
+              <li>Ho’rem</li>
+              <li>Nustuk</li>
+              <li>Langkuem</li>
+              <li>Miskuuck</li>
+            </ul>
+          </Typography>
+          <Grid item container xs={12} spacing={2}>
+            {fields.map((field, index) => (
+              <Grid item container xs={12} key={field.id}>
+                <Grid item xs={6}>
+                  <ControlledTextField
+                    fullWidth
+                    name={`consultedParties.${index}.consultedParty`}
+                    placeholder="Enter the name of other consulted party here"
+                    sx={{
+                      mb: 0,
+                    }}
+                  />
+                </Grid>
+                <When condition={fields.length > 1}>
+                  <IconButton onClick={() => remove(index)}>
+                    <CloseIcon />
+                  </IconButton>
+                </When>
+              </Grid>
+            ))}
+          </Grid>
+          <Typography
+            variant="body1"
+            sx={{
+              color: BCDesignTokens.typographyColorLink,
+              cursor: "pointer",
+            }}
+            onClick={handleAddParty}
+          >
+            + Add a Consulted Party
+          </Typography>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            Ensure that comment trackers clearly demonstrate that consulted
+            parties have had the opportunity to respond to holder responses to
+            the consulted parties comments.
+          </Typography>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            Were all parties listed above consulted/engaged on the development
+            of this plan?
+          </Typography>
+          <ControlledRadioGroup name="allPartiesConsulted">
+            <YesNoRadioOptions error={Boolean(errors["allPartiesConsulted"])} />
+          </ControlledRadioGroup>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            Was the plan provided to all parties listed above for review and
+            comment during plan development?
+          </Typography>
+          <ControlledRadioGroup name="planWasReviewed">
+            <YesNoRadioOptions error={Boolean(errors["planWasReviewed"])} />
+          </ControlledRadioGroup>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            Have written explanations been provided to each party listed above
+            on how comments were fully and impartially considered and addressed
+            in the plan?
+          </Typography>
+          <ControlledRadioGroup name="writtenExplanationsProvidedToParties">
+            <YesNoRadioOptions
+              error={Boolean(errors["writtenExplanationsProvidedToParties"])}
+            />
+          </ControlledRadioGroup>
+        </Grid>
+        <Grid item xs={12} sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+          <Typography variant="body1">
+            For comments not addressed in this plan, have written explanations
+            been provided to the commenters as to why the comments were not
+            addressed?
+          </Typography>
+          <ControlledRadioGroup name="writtenExplanationsProvidedToCommenters">
+            <YesNoRadioOptions
+              error={Boolean(errors["writtenExplanationsProvidedToCommenters"])}
+            />
+          </ControlledRadioGroup>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordProponentView/constants.ts

@@ -0,0 +1,3 @@
+export const CONSULTATION_RECORD_DOCUMENT_FOLDERS = Object.freeze({
+  CONSULTATION_RECORDS: "consultation_records",
+});