ORV2-4887 - Refund to multiple payments screen missing Cancel button

frontend/src/features/permits/pages/Refund/RefundPage.scss

@@ -19,6 +19,12 @@
   &__section {
     padding: 2.5rem 0;
     border-bottom: 1px solid $bc-border-grey;
+
+    &--actions {
+      border-bottom: none;
+      display: flex;
+      gap: 2.5rem;
+    }
   }
 
   &__info {
@@ -32,11 +38,18 @@
     padding: .5rem 2rem;
     box-shadow: none;
     min-width: fit-content;
-    margin-top: 2.5rem;
 
     &:hover, &:focus {
       box-shadow: none; 
     }
+
+    &--cancel {
+      border: 2px solid $bc-background-light-grey;
+      &:hover, &:focus {
+        background-color: $bc-background-light-grey;
+        border-color: $bc-text-box-border-grey;
+      }
+    }
   }
 }
 

frontend/src/features/permits/pages/Refund/RefundPage.tsx

@@ -8,9 +8,11 @@ import { calculateNetAmount } from "../../helpers/feeSummary";
 import { isValidTransaction } from "../../helpers/payment";
 import { Nullable } from "../../../../common/types/common";
 import { RefundDetails } from "./components/RefundDetails";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { RefundErrorModal } from "./components/RefundErrorModal";
 import { MRT_RowSelectionState } from "material-react-table";
+import { VoidPermitContext } from "../Void/context/VoidPermitContext";
+import { AmendPermitContext } from "../Amend/context/AmendPermitContext";
 
 export const PERMIT_REFUND_ACTIONS = {
   VOID: "void",
@@ -113,6 +115,12 @@ export const RefundPage = ({
     }
   };
 
+  const { goHome: onCancelAmend } = useContext(AmendPermitContext);
+  const { goHome: onCancelVoid } = useContext(VoidPermitContext);
+
+  const onCancel =
+    permitAction === PERMIT_REFUND_ACTIONS.AMEND ? onCancelAmend : onCancelVoid;
+
   return (
     <div className="refund-page">
       <h2 className="refund-page__header refund-page__header--main">
@@ -172,15 +180,25 @@ export const RefundPage = ({
           </div>
         )}
 
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={handleSubmit(onSubmit)}
-          disabled={disableSubmitButton}
-          className="refund-page__button"
-        >
-          Finish
-        </Button>
+        <div className="refund-page__section refund-page__section--actions">
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={onCancel}
+            className="refund-page__button refund-page__button--cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit(onSubmit)}
+            disabled={disableSubmitButton}
+            className="refund-page__button"
+          >
+            Finish
+          </Button>
+        </div>
       </FormProvider>
 
       {showRefundErrorModal && (

frontend/src/features/permits/pages/Void/FinishVoid.tsx

@@ -2,14 +2,12 @@ import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { VoidPermitContext } from "./context/VoidPermitContext";
-import { Permit } from "../../types/permit";
 import { usePermitHistoryQuery } from "../../hooks/hooks";
 import { calculateAmountForVoid } from "../../helpers/feeSummary";
 import { PERMIT_REFUND_ACTIONS, RefundPage } from "../Refund/RefundPage";
 import { mapToVoidRequestData } from "./helpers/mapper";
 import { useVoidOrRevokePermit } from "./hooks/useVoidOrRevokePermit";
 import { isValidTransaction } from "../../helpers/payment";
-import { Nullable } from "../../../../common/types/common";
 import { hasPermitsActionFailed } from "../../helpers/permitState";
 import {
   applyWhenNotNullable,
@@ -18,16 +16,9 @@ import {
 import { RefundErrorModal } from "../Refund/components/RefundErrorModal";
 import { RefundFormData } from "../Refund/types/RefundFormData";
 
-export const FinishVoid = ({
-  permit,
-  onSuccess,
-  onFail,
-}: {
-  permit: Nullable<Permit>;
-  onSuccess: () => void;
-  onFail: () => void;
-}) => {
-  const { voidPermitData } = useContext(VoidPermitContext);
+export const FinishVoid = () => {
+  const { voidPermitData, permit, handleFail, goHomeSuccess } =
+    useContext(VoidPermitContext);
   const { companyId: companyIdParam } = useParams();
 
   const { email, additionalEmail, reason } = voidPermitData;
@@ -59,10 +50,10 @@ export const FinishVoid = ({
   useEffect(() => {
     const voidFailed = hasPermitsActionFailed(voidResults);
     if (voidFailed) {
-      onFail();
+      handleFail();
     } else if (getDefaultRequiredVal(0, voidResults?.success?.length) > 0) {
       // Void action was triggered, and has results (was successful)
-      onSuccess();
+      goHomeSuccess();
     }
   }, [voidResults]);
 

frontend/src/features/permits/pages/Void/VoidPermit.tsx

@@ -110,6 +110,7 @@ export const VoidPermit = () => {
         })
       : // return to global permit search results
         navigate(fullSearchRoute);
+
   const handleFail = () => navigate(ERROR_ROUTES.UNEXPECTED);
 
   const getLinks = () =>
@@ -139,10 +140,14 @@ export const VoidPermit = () => {
 
   const contextData = useMemo(
     () => ({
+      permit,
       voidPermitData,
       setVoidPermitData,
       back: () => setCurrentLink(0),
       next: () => setCurrentLink(1),
+      goHome,
+      goHomeSuccess,
+      handleFail,
     }),
     [voidPermitData],
   );
@@ -174,19 +179,8 @@ export const VoidPermit = () => {
   if (!isVoidable(permit)) return <Navigate to={ERROR_ROUTES.UNEXPECTED} />;
 
   const pages = [
-    <VoidPermitForm
-      key="void-permit"
-      permit={permit}
-      onRevokeSuccess={goHomeSuccess}
-      onCancel={goHome}
-      onFail={handleFail}
-    />,
-    <FinishVoid
-      key="finish-void"
-      permit={permit}
-      onSuccess={goHomeSuccess}
-      onFail={handleFail}
-    />,
+    <VoidPermitForm key="void-permit" />,
+    <FinishVoid key="finish-void" />,
   ];
 
   return (

frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx

@@ -1,13 +1,12 @@
 import { Controller, FormProvider } from "react-hook-form";
 import isEmail from "validator/lib/isEmail";
 import { Button, FormControl } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import "./VoidPermitForm.scss";
 import { useVoidPermitForm } from "../hooks/useVoidPermitForm";
 import { VoidPermitHeader } from "./VoidPermitHeader";
-import { Permit } from "../../../types/permit";
 import { RevokeDialog } from "./RevokeDialog";
 import {
   calculateAmountForVoid,
@@ -16,10 +15,7 @@ import {
 import { VoidPermitFormData } from "../types/VoidPermit";
 import { useVoidOrRevokePermit } from "../hooks/useVoidOrRevokePermit";
 import { mapToRevokeRequestData } from "../helpers/mapper";
-import {
-  Nullable,
-  ORBC_FORM_FEATURES,
-} from "../../../../../common/types/common";
+import { ORBC_FORM_FEATURES } from "../../../../../common/types/common";
 import { hasPermitsActionFailed } from "../../../helpers/permitState";
 import { usePermitHistoryQuery } from "../../../hooks/hooks";
 import { isValidTransaction } from "../../../helpers/payment";
@@ -35,20 +31,13 @@ import {
 import { CustomFormComponent } from "../../../../../common/components/form/CustomFormComponents";
 import { usePermissionMatrix } from "../../../../../common/authentication/PermissionMatrix";
 import { AmendOrVoidFeeSummary } from "../../../components/amendOrVoidFeeSummary/AmendOrVoidFeeSummary";
+import { VoidPermitContext } from "../context/VoidPermitContext";
 
 const FEATURE = ORBC_FORM_FEATURES.VOID_PERMIT;
 
-export const VoidPermitForm = ({
-  permit,
-  onRevokeSuccess,
-  onCancel,
-  onFail,
-}: {
-  permit: Nullable<Permit>;
-  onRevokeSuccess: () => void;
-  onCancel: () => void;
-  onFail: () => void;
-}) => {
+export const VoidPermitForm = () => {
+  const { permit, handleFail, goHomeSuccess, goHome } =
+    useContext(VoidPermitContext);
   const [openRevokeDialog, setOpenRevokeDialog] = useState<boolean>(false);
   const { formMethods, permitId, setVoidPermitData, next } =
     useVoidPermitForm();
@@ -88,11 +77,11 @@ export const VoidPermitForm = ({
   useEffect(() => {
     const revokeFailed = hasPermitsActionFailed(voidResults);
     if (revokeFailed) {
-      onFail();
+      handleFail();
     } else if (getDefaultRequiredVal(0, voidResults?.success?.length) > 0) {
       // Revoke action was successful and has results
       setOpenRevokeDialog(false);
-      onRevokeSuccess();
+      goHomeSuccess();
     }
   }, [voidResults]);
 
@@ -253,7 +242,7 @@ export const VoidPermitForm = ({
               variant="contained"
               color="tertiary"
               className="void-permit-button void-permit-button--cancel"
-              onClick={onCancel}
+              onClick={goHome}
               data-testid="cancel-void-permit-button"
             >
               Cancel

frontend/src/features/permits/pages/Void/context/VoidPermitContext.ts

@@ -1,11 +1,17 @@
 import { createContext } from "react";
 import { VoidPermitFormData } from "../types/VoidPermit";
+import { Nullable } from "../../../../../common/types/common";
+import { Permit } from "../../../types/permit";
 
 interface VoidPermitContextType {
+  permit?: Nullable<Permit>;
   voidPermitData: VoidPermitFormData;
   setVoidPermitData: (data: VoidPermitFormData) => void;
   next: () => void;
   back: () => void;
+  goHome: () => void;
+  goHomeSuccess: () => void;
+  handleFail: () => void;
 }
 
 export const VoidPermitContext = createContext<VoidPermitContextType>({
@@ -17,4 +23,7 @@ export const VoidPermitContext = createContext<VoidPermitContextType>({
   setVoidPermitData: () => undefined,
   next: () => undefined,
   back: () => undefined,
+  goHome: () => undefined,
+  goHomeSuccess: () => undefined,
+  handleFail: () => undefined,
 });