ORV2-4305 - FE: Update: Amend, Void Fee Summary Table

frontend/src/features/permits/components/amendOrVoidFeeSummary/AmendOrVoidFeeSummary.scss

@@ -0,0 +1,44 @@
+@import "../../../../themes/orbcStyles";
+
+.amend-or-void-fee-summary {
+  display: flex;
+  flex-direction: column;
+  background-color: $banner-grey;
+  color: $bc-primary-blue;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+  border-radius: 0.25rem;
+
+  &__title {
+    font-weight: bold;
+    font-size: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  &__table {
+    display: flex;
+    flex-direction: column;
+
+    .table-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      font-size: 1rem;
+      padding: 1rem 0;
+
+      &--header {
+        font-weight: bold;
+        padding: 0 0 1rem 0;
+        border-bottom: 1px solid $bc-fee-summary-line-separator;
+      }
+
+      &--total {
+        border-top: 1px solid $bc-fee-summary-line-separator;
+        border-bottom: none;
+        font-weight: bold;
+        font-size: 1.5rem;
+        padding: 1.5rem 0 0 0;
+      }
+    }
+  }
+}

frontend/src/features/permits/components/amendOrVoidFeeSummary/AmendOrVoidFeeSummary.tsx

@@ -0,0 +1,45 @@
+import "./AmendOrVoidFeeSummary.scss";
+import { feeSummaryDisplayText } from "../../helpers/feeSummary";
+
+export const AmendOrVoidFeeSummary = ({
+  currentPermitValue,
+  newPermitValue,
+  amountToRefund,
+}: {
+  currentPermitValue: string;
+  newPermitValue: string;
+  amountToRefund: string;
+}) => {
+  currentPermitValue = feeSummaryDisplayText(currentPermitValue);
+  amountToRefund = feeSummaryDisplayText(amountToRefund);
+  newPermitValue = feeSummaryDisplayText(newPermitValue);
+
+  return (
+    <div className="amend-or-void-fee-summary">
+      <div className="amend-or-void-fee-summary__title">Fee Summary</div>
+      <div className="amend-or-void-fee-summary__table">
+        <div className="table-row table-row--header">
+          <div className="table-row__th">Description</div>
+          <div className="table-row__th">Amount</div>
+        </div>
+
+        <div className="table-row">
+          <div className="table-row__td">Current Permit Value</div>
+
+          <div className="table-row__td">{currentPermitValue}</div>
+        </div>
+
+        <div className="table-row">
+          <div className="table-row__td">New Permit Value</div>
+
+          <div className="table-row__td">{newPermitValue}</div>
+        </div>
+
+        <div className="table-row table-row--total">
+          <div className="table-row__tf">Total (CAD)</div>
+          <div className="table-row__tf">{amountToRefund}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -11,7 +11,10 @@ import { useIssuePermits, useStartTransaction } from "../../../hooks/hooks";
 import { isValidTransaction } from "../../../helpers/payment";
 import { hasPermitsActionFailed } from "../../../helpers/permitState";
 import { ERROR_ROUTES } from "../../../../../routes/constants";
-import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../../../common/helpers/util";
+import {
+  applyWhenNotNullable,
+  getDefaultRequiredVal,
+} from "../../../../../common/helpers/util";
 import { DEFAULT_PERMIT_TYPE } from "../../../types/PermitType";
 import { useFetchSpecialAuthorizations } from "../../../../settings/hooks/specialAuthorizations";
 import { usePolicyEngine } from "../../../../policy/hooks/usePolicyEngine";
@@ -21,7 +24,11 @@ import { serializePermitData } from "../../../helpers/serialize/serializePermitD
 export const AmendPermitFinish = () => {
   const navigate = useNavigate();
   const { companyId: companyIdParam } = useParams();
-  const companyId: number = applyWhenNotNullable(id => Number(id), companyIdParam, 0);
+  const companyId: number = applyWhenNotNullable(
+    (id) => Number(id),
+    companyIdParam,
+    0,
+  );
 
   const {
     permit,
@@ -42,7 +49,8 @@ export const AmendPermitFinish = () => {
     permit?.permitType,
   );
 
-  const { data: specialAuthorizations } = useFetchSpecialAuthorizations(companyId);
+  const { data: specialAuthorizations } =
+    useFetchSpecialAuthorizations(companyId);
   const policyEngine = usePolicyEngine(specialAuthorizations);
   const calculatedRefundAmount = useCalculateRefundAmount(
     validTransactionHistory,
@@ -60,8 +68,7 @@ export const AmendPermitFinish = () => {
   const { mutation: startTransactionMutation, transaction } =
     useStartTransaction();
 
-  const { mutation: issuePermitMutation, issueResults } =
-    useIssuePermits();
+  const { mutation: issuePermitMutation, issueResults } = useIssuePermits();
 
   useEffect(() => {
     if (typeof transaction !== "undefined") {

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

@@ -23,9 +23,8 @@ import {
 import { getErrorMessage } from "../../../../common/components/form/CustomFormComponents";
 import { PermitHistory } from "../../types/PermitHistory";
 import { TransactionHistoryTable } from "./components/TransactionHistoryTable";
-import { FeeSummary } from "../../components/feeSummary/FeeSummary";
 import { getDefaultRequiredVal } from "../../../../common/helpers/util";
-import { isZeroAmount } from "../../helpers/feeSummary";
+import { calculateNetAmount, isZeroAmount } from "../../helpers/feeSummary";
 import { isValidTransaction } from "../../helpers/payment";
 import { Nullable, Optional } from "../../../../common/types/common";
 import {
@@ -35,6 +34,7 @@ import {
   PAYMENT_METHOD_TYPE_DISPLAY,
   getPaymentMethod,
 } from "../../../../common/types/paymentMethods";
+import { AmendOrVoidFeeSummary } from "../../components/amendOrVoidFeeSummary/AmendOrVoidFeeSummary";
 
 export const PERMIT_REFUND_ACTIONS = {
   VOID: "void",
@@ -242,6 +242,11 @@ export const RefundPage = ({
     onFinish(formValues);
   };
 
+  const currentPermitValue = calculateNetAmount(validTransactionHistory);
+
+  // amountToRefund is a negative number so we add here rather than subtract
+  const newPermitValue = currentPermitValue + amountToRefund;
+
   const showSendSection = permitAction === "void" || permitAction === "revoke";
   const showReasonSection =
     (permitAction === "void" || permitAction === "revoke") && reason;
@@ -431,11 +436,17 @@ export const RefundPage = ({
               </div>
             </div>
 
-            <FeeSummary
+            <AmendOrVoidFeeSummary
+              currentPermitValue={`${currentPermitValue}`}
+              newPermitValue={`${newPermitValue}`}
+              amountToRefund={`${amountToRefund}`}
+            />
+
+            {/* <FeeSummary
               permitType={permitType}
               feeSummary={`${amountToRefund}`}
-            />
-            
+            /> */}
+
             <div className="refund-fee-summary__footer">
               <Button
                 className="finish-btn"

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

@@ -9,8 +9,10 @@ import { useVoidPermitForm } from "../hooks/useVoidPermitForm";
 import { VoidPermitHeader } from "./VoidPermitHeader";
 import { Permit } from "../../../types/permit";
 import { RevokeDialog } from "./RevokeDialog";
-import { calculateAmountForVoid } from "../../../helpers/feeSummary";
-import { FeeSummary } from "../../../components/feeSummary/FeeSummary";
+import {
+  calculateAmountForVoid,
+  calculateNetAmount,
+} from "../../../helpers/feeSummary";
 import { VoidPermitFormData } from "../types/VoidPermit";
 import { useVoidPermit } from "../hooks/useVoidPermit";
 import { mapToRevokeRequestData } from "../helpers/mapper";
@@ -32,6 +34,7 @@ import {
 
 import { CustomFormComponent } from "../../../../../common/components/form/CustomFormComponents";
 import { usePermissionMatrix } from "../../../../../common/authentication/PermissionMatrix";
+import { AmendOrVoidFeeSummary } from "../../../components/amendOrVoidFeeSummary/AmendOrVoidFeeSummary";
 
 const FEATURE = ORBC_FORM_FEATURES.VOID_PERMIT;
 
@@ -76,6 +79,8 @@ export const VoidPermitForm = ({
       ? 0
       : -1 * calculateAmountForVoid(permit, transactionHistory);
 
+  const currentPermitValue = calculateNetAmount(transactionHistory);
+
   useEffect(() => {
     const revokeFailed = hasPermitsActionFailed(voidResults);
     if (revokeFailed) {
@@ -198,9 +203,10 @@ export const VoidPermitForm = ({
                   )}
                 />
 
-                <FeeSummary
-                  permitType={permit?.permitType}
-                  feeSummary={`${amountToRefund}`}
+                <AmendOrVoidFeeSummary
+                  currentPermitValue={`${currentPermitValue}`}
+                  newPermitValue={"0"}
+                  amountToRefund={`${amountToRefund}`}
                 />
               </div>