Refactor code related to confirmation checkboxes

frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx

@@ -56,12 +56,12 @@ export const AmendPermitReview = () => {
  const trailerSubTypesQuery = useTrailerSubTypesQuery();
 
  // For the confirmation checkboxes
- const [isChecked, setIsChecked] = useState(false);
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const [allConfirmed, setAllConfirmed] = useState(false);
+ const [hasAttemptedSubmission, setHasAttemptedSubmission] = useState(false);
 
  const onSubmit = async () => {
- setIsSubmitted(true);
- if (!isChecked) return;
+ setHasAttemptedSubmission(true);
+ if (!allConfirmed) return;
 
  if (!amendmentApplication) {
  return navigate(ERROR_ROUTES.UNEXPECTED);
@@ -133,9 +133,9 @@ export const AmendPermitReview = () => {
  continueBtnText="Continue"
  onEdit={back}
  onContinue={onSubmit}
- allChecked={isChecked}
- setAllChecked={setIsChecked}
- hasAttemptedCheckboxes={isSubmitted}
+ allConfirmed={allConfirmed}
+ setAllConfirmed={setAllConfirmed}
+ hasAttemptedCheckboxes={hasAttemptedSubmission}
  powerUnitSubTypes={powerUnitSubTypesQuery.data}
  trailerSubTypes={trailerSubTypesQuery.data}
  vehicleDetails={amendmentApplication?.permitData?.vehicleDetails}

frontend/src/features/permits/pages/Application/ApplicationReview.tsx

@@ -67,8 +67,8 @@ export const ApplicationReview = () => {
  const methods = useForm<Application>();
 
  // For the confirmation checkboxes
- const [isChecked, setIsChecked] = useState(false);
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const [allConfirmed, setAllConfirmed] = useState(false);
+ const [hasAttemptedSubmission, setHasAttemptedSubmission] = useState(false);
 
  // Send data to the backend API
  const saveApplicationMutation = useSaveApplicationMutation();
@@ -96,9 +96,9 @@ export const ApplicationReview = () => {
  };
 
  const handleAddToCart = async () => {
- setIsSubmitted(true);
+ setHasAttemptedSubmission(true);
 
- if (!isChecked) return;
+ if (!allConfirmed) return;
 
  const companyId = applicationData?.companyId;
  const permitId = applicationData?.permitId;
@@ -166,9 +166,9 @@ export const ApplicationReview = () => {
  contactDetails={applicationData?.permitData?.contactDetails}
  onEdit={back}
  onAddToCart={handleAddToCart}
- allChecked={isChecked}
- setAllChecked={setIsChecked}
- hasAttemptedCheckboxes={isSubmitted}
+ allConfirmed={allConfirmed}
+ setAllConfirmed={setAllConfirmed}
+ hasAttemptedCheckboxes={hasAttemptedSubmission}
  powerUnitSubTypes={powerUnitSubTypesQuery.data}
  trailerSubTypes={trailerSubTypesQuery.data}
  vehicleDetails={applicationData?.permitData?.vehicleDetails}

frontend/src/features/permits/pages/Application/components/review/ConfirmationCheckboxes.tsx

@@ -1,84 +1,93 @@
 import { Box, Checkbox, Typography } from "@mui/material";
-import { Dispatch, SetStateAction, useState } from "react";
-import { Nullable } from "../../../../../../common/types/common";
-import { CustomInputHTMLAttributes } from "../../../../../../common/types/formElements";
+import { useState } from "react";
+
 import "./ConfirmationCheckboxes.scss";
+import { CustomInputHTMLAttributes } from "../../../../../../common/types/formElements";
 
 export const ConfirmationCheckboxes = ({
- isSubmitted,
- isChecked,
- setIsChecked,
- isDisabled,
+ hasAttemptedSubmission,
+ areAllChecked,
+ setAreAllChecked,
+ shouldDisableCheckboxes,
 }: {
- isSubmitted: boolean;
- isChecked: boolean;
- setIsChecked: Dispatch<SetStateAction<boolean>>;
- isDisabled?: Nullable<boolean>;
+ hasAttemptedSubmission: boolean;
+ areAllChecked: boolean;
+ setAreAllChecked: (allChecked: boolean) => void;
+ shouldDisableCheckboxes: boolean;
 }) => {
  const checkboxes = [
  {
  description:
  "Confirm that this permit is issued to the registered owner (or lessee) of the vehicle being permitted.",
- checked: false,
+ checked: shouldDisableCheckboxes,
  },
  {
  description:
  "Confirm compliance with the appropriate policy for the selected commodity(s).",
- checked: false,
+ checked: shouldDisableCheckboxes,
  },
  {
  description: "Confirm the information in this application is correct.",
- checked: false,
+ checked: shouldDisableCheckboxes,
  },
  ];
- const [checked, setChecked] = useState(checkboxes);
+
+ const [confirmationCheckboxes, setConfirmationCheckboxes] = useState(checkboxes);
 
  const handleCheck = (checkedName: string) => {
- let isValid = true;
- const updated = checked.map((item) => {
+ if (shouldDisableCheckboxes) return;
+
+ const updatedCheckboxes = confirmationCheckboxes.map((item) => {
+ if (shouldDisableCheckboxes) return item;
+
  if (item.description === checkedName) {
- item.checked = !item.checked;
+ return {
+ description: item.description,
+ checked: !item.checked,
+ };
  }
- if (!item.checked) isValid = false;
+
  return item;
  });
- setChecked(updated);
- setIsChecked(isValid);
+ setConfirmationCheckboxes(updatedCheckboxes);
+ setAreAllChecked(!updatedCheckboxes.some(updated => !updated.checked));
  };
 
  return (
  <Box className="confirmation-checkboxes">
  <Typography className="confirmation-checkboxes__header" variant="h3">
  Please read the following carefully and check all to proceed.
  </Typography>
- {checked.map((x) => (
+
+ {confirmationCheckboxes.map(({ description, checked }) => (
  <Box
- key={x.description}
+ key={description}
  className="confirmation-checkboxes__attestation"
  >
  <Checkbox
  className={
  "confirmation-checkboxes__checkbox " +
  `${
- isSubmitted && !x.checked
+ hasAttemptedSubmission && !checked
  ? "confirmation-checkboxes__checkbox--invalid"
  : ""
  }`
  }
- key={x.description}
- checked={isDisabled ? true : x.checked}
- disabled={Boolean(isDisabled)}
- onChange={() => handleCheck(x.description)}
+ key={description}
+ checked={checked}
+ disabled={shouldDisableCheckboxes}
+ onChange={() => handleCheck(description)}
  inputProps={
  {
  "data-testid": "permit-attestation-checkbox",
  } as CustomInputHTMLAttributes
  }
  />
- {x.description}
+ {description}
  </Box>
  ))}
- {isSubmitted && !isChecked ? (
+
+ {hasAttemptedSubmission && !areAllChecked ? (
  <Typography
  className="confirmation-checkboxes__error"
  data-testid="permit-attestation-checkbox-error"

frontend/src/features/permits/pages/Application/components/review/PermitReview.tsx

@@ -1,6 +1,5 @@
 import { Box } from "@mui/material";
 import { Dayjs } from "dayjs";
-import { Dispatch, SetStateAction } from "react";
 
 import "./PermitReview.scss";
 import { WarningBcGovBanner } from "../../../../../../common/components/banners/WarningBcGovBanner";
@@ -24,7 +23,7 @@ import {
 } from "../../../../types/PermitReviewContext";
 
 interface PermitReviewProps {
- reviewContext?: Nullable<PermitReviewContext>;
+ reviewContext: PermitReviewContext;
  permitType?: Nullable<PermitType>;
  permitNumber?: Nullable<string>;
  applicationNumber?: Nullable<string>;
@@ -40,8 +39,8 @@ interface PermitReviewProps {
  isAmendAction: boolean;
  children?: React.ReactNode;
  hasAttemptedCheckboxes: boolean;
- allChecked: boolean;
- setAllChecked: Dispatch<SetStateAction<boolean>>;
+ allConfirmed: boolean;
+ setAllConfirmed: (confirmed: boolean) => void;
  powerUnitSubTypes?: Nullable<VehicleSubType[]>;
  trailerSubTypes?: Nullable<VehicleSubType[]>;
  vehicleDetails?: Nullable<PermitVehicleDetails>;
@@ -104,9 +103,9 @@ export const PermitReview = (props: PermitReviewProps) => {
  />
 
  <ReviewFeeSummary
- isSubmitted={props.hasAttemptedCheckboxes}
- isChecked={props.allChecked}
- setIsChecked={props.setAllChecked}
+ hasAttemptedSubmission={props.hasAttemptedCheckboxes}
+ areAllConfirmed={props.allConfirmed}
+ setAreAllConfirmed={props.setAllConfirmed}
  permitType={props.permitType}
  fee={props.calculatedFee}
  reviewContext={props.reviewContext}

frontend/src/features/permits/pages/Application/components/review/ReviewFeeSummary.tsx

@@ -1,27 +1,26 @@
 import { Box, Typography } from "@mui/material";
-import { Dispatch, SetStateAction } from "react";
 
 import "./ReviewFeeSummary.scss";
 import { ConfirmationCheckboxes } from "./ConfirmationCheckboxes";
 import { FeeSummary } from "../../../../components/feeSummary/FeeSummary";
 import { PermitType } from "../../../../types/PermitType";
 import { Nullable } from "../../../../../../common/types/common";
-import { PermitReviewContext } from "../../../../types/PermitReviewContext";
+import { PERMIT_REVIEW_CONTEXTS, PermitReviewContext } from "../../../../types/PermitReviewContext";
 
 export const ReviewFeeSummary = ({
- isSubmitted,
- isChecked,
- setIsChecked,
+ hasAttemptedSubmission,
+ areAllConfirmed,
+ setAreAllConfirmed,
  permitType,
  fee,
  reviewContext,
 }: {
- isSubmitted: boolean;
- isChecked: boolean;
- setIsChecked: Dispatch<SetStateAction<boolean>>;
+ hasAttemptedSubmission: boolean;
+ areAllConfirmed: boolean;
+ setAreAllConfirmed: (allConfirmed: boolean) => void;
  permitType?: Nullable<PermitType>;
  fee: string;
- reviewContext?: Nullable<PermitReviewContext>;
+ reviewContext: PermitReviewContext;
 }) => {
  return (
  <Box className="review-fee-summary">
@@ -33,10 +32,10 @@ export const ReviewFeeSummary = ({
  <FeeSummary permitType={permitType} feeSummary={fee} />
 
  <ConfirmationCheckboxes
- isSubmitted={isSubmitted}
- isChecked={isChecked}
- setIsChecked={setIsChecked}
- isDisabled={reviewContext === "QUEUE"}
+ hasAttemptedSubmission={hasAttemptedSubmission}
+ areAllChecked={areAllConfirmed}
+ setAreAllChecked={setAreAllConfirmed}
+ shouldDisableCheckboxes={reviewContext === PERMIT_REVIEW_CONTEXTS.QUEUE}
  />
  </Box>
  </Box>

frontend/src/features/queue/components/ApplicationInQueueReview.tsx

@@ -53,8 +53,9 @@ export const ApplicationInQueueReview = ({
  const methods = useForm<Application>();
 
  // For the confirmation checkboxes
- const [isChecked, setIsChecked] = useState(false);
- const [isSubmitted] = useState(false);
+ // For Applications in Queue review, confirmation checkboxes are checked and disabled by default
+ const [allConfirmed, setAllConfirmed] = useState(true);
+ const [hasAttemptedSubmission, setHasAttemptedSubmission] = useState(false);
 
  const handleEdit = () => {
  navigate(APPLICATION_QUEUE_ROUTES.EDIT(companyId, applicationData?.permitId));
@@ -69,6 +70,9 @@ export const ApplicationInQueueReview = ({
  } = useApproveApplicationInQueueMutation();
 
  const handleApprove = async (): Promise<void> => {
+ setHasAttemptedSubmission(true);
+ if (!allConfirmed) return;
+
  await approveApplication({
  applicationId: applicationData?.permitId,
  companyId,
@@ -88,6 +92,9 @@ export const ApplicationInQueueReview = ({
  } = useRejectApplicationInQueueMutation();
 
  const handleReject = async (): Promise<void> => {
+ setHasAttemptedSubmission(true);
+ if (!allConfirmed) return;
+
  await rejectApplication({
  applicationId: applicationData?.permitId,
  companyId,
@@ -131,9 +138,9 @@ export const ApplicationInQueueReview = ({
  approveApplicationMutationPending={approveApplicationMutationPending}
  onReject={handleReject}
  rejectApplicationMutationPending={rejectApplicationMutationPending}
- allChecked={isChecked}
- setAllChecked={setIsChecked}
- hasAttemptedCheckboxes={isSubmitted}
+ allConfirmed={allConfirmed}
+ setAllConfirmed={setAllConfirmed}
+ hasAttemptedCheckboxes={hasAttemptedSubmission}
  powerUnitSubTypes={powerUnitSubTypesQuery.data}
  trailerSubTypes={trailerSubTypesQuery.data}
  vehicleDetails={applicationData?.permitData?.vehicleDetails}