Merge pull request #275 from Eastern-Research-Group/develop

Sync staging with develop

app/client/src/components/infoTooltip.tsx

@@ -1,38 +1,50 @@
 import { Tooltip } from "@reach/tooltip";
 import icons from "uswds/img/sprite.svg";
 
-type InfoTooltipProps = {
+export function InfoTooltip(props: {
   label: string;
-};
+  iconName?: string;
+  iconClassNames?: string;
+}) {
+  const { label, iconName, iconClassNames } = props;
+
+  const svgClassNames = iconClassNames
+    ? `usa-icon margin-right-05 text-base ${iconClassNames}`
+    : `usa-icon margin-right-05 text-base`;
 
-export function InfoTooltip({ label }: InfoTooltipProps) {
   return (
     <Tooltip
       label={label}
       className="border-0 radius-md padding-y-05 padding-x-105 text-white"
       style={{ backgroundColor: "rgba(0, 0, 0, 0.875)" }}
     >
       <svg
-        className="usa-icon margin-right-05 text-base"
+        className={svgClassNames}
         aria-hidden="true"
         focusable="false"
         role="img"
       >
-        <use href={`${icons}#info`} />
+        <use href={`${icons}#${iconName ? iconName : "info"}`} />
       </svg>
     </Tooltip>
   );
 }
 
-type TextWithTooltipProps = {
+export function TextWithTooltip(props: {
   text: string;
   tooltip: string;
-};
+  iconName?: string;
+  iconClassNames?: string;
+}) {
+  const { text, tooltip, iconName, iconClassNames } = props;
 
-export function TextWithTooltip({ text, tooltip }: TextWithTooltipProps) {
   return (
     <span className="display-inline-flex flex-align-center text-no-wrap">
-      <InfoTooltip label={tooltip} />
+      <InfoTooltip
+        label={tooltip}
+        iconName={iconName}
+        iconClassNames={iconClassNames}
+      />
       {text}
     </span>
   );

app/client/src/config.tsx

@@ -69,7 +69,7 @@ export const messages = {
     "The CSB Payment Request form enrollment period is closed.",
   closeOutFormClosed: "The CSB Close-Out form enrollment period is closed.",
   paymentRequestFormWillBeDeleted:
-    "The Application form submission associated with this Payment Request form submission requires edits, so this this form has been set to read-only mode. Visit your dashboard to make edits to the associated Application form submission.",
+    "A request to edit the Application form associated with this draft or submitted Payment Request form has been made, so this this form has been set to read-only mode. Visit your dashboard to make edits to the associated Application form submission.",
 };
 
 async function fetchData(url: string, options: RequestInit) {

app/client/src/routes/allRebates.tsx

@@ -337,12 +337,19 @@ export function useSortedRebates(rebates: { [rebateId: string]: Rebate }) {
         bap: r1.application.bap,
       });
 
+      const r1PaymentRequestNeedsEdits = submissionNeedsEdits({
+        formio: r1.paymentRequest.formio,
+        bap: r1.paymentRequest.bap,
+      });
+
       const r1ApplicationSelected = r1.application.bap?.status === "Accepted";
 
       const r1ApplicationSelectedButNoPaymentRequest =
         r1ApplicationSelected && !Boolean(r1.paymentRequest.formio);
 
-      return r1ApplicationNeedsEdits || r1ApplicationSelectedButNoPaymentRequest
+      return r1ApplicationNeedsEdits ||
+        r1PaymentRequestNeedsEdits ||
+        r1ApplicationSelectedButNoPaymentRequest
         ? -1
         : 0;
     });
@@ -405,10 +412,13 @@ function ApplicationSubmission({ rebate }: { rebate: Rebate }) {
     bap: application.bap,
   });
 
+  const applicationNeedsClarification =
+    application.bap?.status === "Needs Clarification";
+
   const applicationHasBeenWithdrawn = application.bap?.status === "Withdrawn";
 
   const applicationNotSelected =
-    paymentRequest.bap?.status === "Coordinator Denied";
+    application.bap?.status === "Coordinator Denied";
 
   const applicationSelected = application.bap?.status === "Accepted";
 
@@ -420,6 +430,10 @@ function ApplicationSubmission({ rebate }: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
+  const statusIconClassNames = applicationSelected
+    ? "usa-icon text-primary" // blue
+    : "usa-icon";
+
   const statusIcon = applicationNeedsEdits
     ? `${icons}#priority_high` // !
     : applicationHasBeenWithdrawn
@@ -499,15 +513,24 @@ function ApplicationSubmission({ rebate }: { rebate: Rebate }) {
         <span>Application</span>
         <br />
         <span className="display-flex flex-align-center font-sans-2xs">
-          <svg
-            className={`usa-icon ${applicationSelected ? "text-primary" : ""}`}
-            aria-hidden="true"
-            focusable="false"
-            role="img"
-          >
-            <use href={statusIcon} />
-          </svg>
-          <span className="margin-left-05">{statusText}</span>
+          {applicationNeedsClarification ? (
+            <TextWithTooltip
+              text="Needs Clarification"
+              tooltip="Check your email for instructions on what needs clarification"
+            />
+          ) : (
+            <>
+              <svg
+                className={statusIconClassNames}
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use href={statusIcon} />
+              </svg>
+              <span className="margin-left-05">{statusText}</span>
+            </>
+          )}
         </span>
       </td>
 
@@ -733,14 +756,14 @@ function PaymentRequestSubmission({ rebate }: { rebate: Rebate }) {
       ? "text-italic"
       : "";
 
+  const statusIconClassNames = "usa-icon";
+
   const statusIcon = paymentRequestNeedsEdits
     ? `${icons}#priority_high` // !
     : paymentRequestHasBeenWithdrawn
     ? `${icons}#close` // ✕
     : paymentRequestFundingNotApproved
     ? `${icons}#cancel` // ✕ inside a circle
-    : paymentRequestFundingApproved
-    ? `${icons}#check_circle` // check inside a circle
     : paymentRequest.formio.state === "draft"
     ? `${icons}#more_horiz` // three horizontal dots
     : paymentRequest.formio.state === "submitted"
@@ -753,8 +776,6 @@ function PaymentRequestSubmission({ rebate }: { rebate: Rebate }) {
     ? "Withdrawn"
     : paymentRequestFundingNotApproved
     ? "Funding Not Approved"
-    : paymentRequestFundingApproved
-    ? "Funding Approved"
     : paymentRequest.formio.state === "draft"
     ? "Draft"
     : paymentRequest.formio.state === "submitted"
@@ -793,12 +814,19 @@ function PaymentRequestSubmission({ rebate }: { rebate: Rebate }) {
           {paymentRequestNeedsClarification ? (
             <TextWithTooltip
               text="Needs Clarification"
-              tooltip="Check email for instructions on what needs clarification"
+              tooltip="Check your email for instructions on what needs clarification"
+            />
+          ) : paymentRequestFundingApproved ? (
+            <TextWithTooltip
+              text="Funding Approved"
+              tooltip="Check your email for more details on funding"
+              iconName="check_circle" // check inside a circle
+              iconClassNames="text-primary" // blue
             />
           ) : (
             <>
               <svg
-                className="usa-icon"
+                className={statusIconClassNames}
                 aria-hidden="true"
                 focusable="false"
                 role="img"

app/client/src/routes/applicationForm.tsx

@@ -230,27 +230,36 @@ function ApplicationFormContent({ email }: { email: string }) {
         description: (
           <>
             <p>
-              This Application form submission requires edits, but before you
-              can make edits, the associated Payment Request form submission
-              needs to be deleted.
+              This Application form submission has been opened at the request of
+              the applicant to make edits, but before you can make edits, the
+              associated Payment Request form submission needs to be deleted. If
+              the request to make edits to your Application form submission was
+              made in error, contact the Clean School Bus Program helpline at{" "}
+              <a href="mailto:[email protected]">[email protected]</a>
+              .
             </p>
             <p>
-              If you’d like to view the Payment Request form submission instead,
-              please close this dialog box, and you will be re-directed to the
-              associated Payment Request form submission page.
+              If you’d like to view the Payment Request form submission before
+              deletion, please close this dialog box, and you will be
+              re-directed to the associated Payment Request form.
             </p>
             <p>
-              If you’d like to proceed with deleting the associated Payment
-              Request Form submission, please select the{" "}
+              To proceed with deleting the associated Payment Request form
+              submission, please select the{" "}
               <strong>Delete Payment Request Form Submission</strong> button
-              below, and the Payment Request Form submission will be deleted.
-            </p>
-            <p>
-              <em>
-                Please note: once deleted, the submission will be removed from
-                your dashboard and cannot be recovered.
-              </em>
+              below, and the Payment Request form submission will be deleted.
+              The Application form will then be open for editing.
             </p>
+
+            <div className="usa-alert usa-alert--error" role="alert">
+              <div className="usa-alert__body">
+                <p className="usa-alert__text">
+                  <strong>Please note:</strong> Once deleted, the Payment
+                  Request form submission will be removed from your dashboard
+                  and cannot be recovered.
+                </p>
+              </div>
+            </div>
           </>
         ),
         confirmText: "Delete Payment Request Form Submission",