PSP-6522 : Display user friendly error when compensation req does not… (

#3323) Co-authored-by: Eduardo Herrera <Eduardo.Herrera@quartech.com>
bcgov · Jul 14, 2023 · 432f0b9 · 432f0b9
1 parent e8b0d84
commit 432f0b9
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 35 deletions.
diff --git a/...nd/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateH120.test.tsx b/...nd/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateH120.test.tsx
@@ -8,6 +8,7 @@ import { useDocumentGenerationRepository } from '@/features/documents/hooks/useD
 import { useAcquisitionProvider } from '@/hooks/repositories/useAcquisitionProvider';
 import { useH120CategoryRepository } from '@/hooks/repositories/useH120CategoryRepository';
 import { useInterestHolderRepository } from '@/hooks/repositories/useInterestHolderRepository';
+import { useCompensationRequisitionRepository } from '@/hooks/repositories/useRequisitionCompensationRepository';
 import { mockAcquisitionFileResponse } from '@/mocks/acquisitionFiles.mock';
 import { getMockApiCompensationList } from '@/mocks/compensations.mock';
 import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
@@ -23,6 +24,7 @@ const getAcquisitionPropertiesFn = jest.fn();
 const getAcquisitionCompReqH120s = jest.fn();
 const getH120sCategoryFn = jest.fn();
 const getInterestHolderFn = jest.fn();
+const getCompensationRequisitionPayeeFn = jest.fn();
 
 jest.mock('@/features/documents/hooks/useDocumentGenerationRepository');
 (useDocumentGenerationRepository as jest.Mock).mockImplementation(() => ({
@@ -44,6 +46,10 @@ jest.mock('@/hooks/repositories/useInterestHolderRepository');
 (useInterestHolderRepository as jest.Mock).mockImplementation(() => ({
   getAcquisitionInterestHolders: { execute: getInterestHolderFn },
 }));
+jest.mock('@/hooks/repositories/useRequisitionCompensationRepository');
+(useCompensationRequisitionRepository as jest.Mock).mockImplementation(() => ({
+  getCompensationRequisitionPayee: { execute: getCompensationRequisitionPayeeFn },
+}));
 
 let currentStore: MockStoreEnhanced<any, {}>;
 const mockStore = configureMockStore([thunk]);

diff --git a/...apSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailContainer.tsx b/...apSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailContainer.tsx
@@ -1,7 +1,10 @@
+import axios, { AxiosError } from 'axios';
 import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { useGenerateH120 } from '@/features/properties/map/acquisition/common/GenerateForm/hooks/useGenerateH120';
 import { useCompensationRequisitionRepository } from '@/hooks/repositories/useRequisitionCompensationRepository';
+import { IApiError } from '@/interfaces/IApiError';
 import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
 import { Api_CompensationPayee } from '@/models/api/CompensationPayee';
 import { Api_CompensationRequisition } from '@/models/api/CompensationRequisition';
@@ -31,9 +34,18 @@ export const CompensationRequisitionDetailContainer: React.FunctionComponent<
 
   const fetchCompensationPayee = useCallback(async () => {
     if (!!compensation.id) {
-      const payee = await getCompensationRequisitionPayee(compensation.id);
-      if (payee) {
+      try {
+        const payee = await getCompensationRequisitionPayee(compensation.id);
         setCompensationPayee(payee);
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          const axiosError = e as AxiosError<IApiError>;
+          if (axiosError.response?.status === 404) {
+            setCompensationPayee(undefined);
+          } else {
+            toast.error(axiosError.response?.data.error);
+          }
+        }
       }
     }
   }, [compensation, getCompensationRequisitionPayee]);

diff --git a/...res/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx b/...res/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -35,9 +35,6 @@ interface PayeeViewDetails {
   displayName: string;
   isGstApplicable: boolean;
   gstNumber: string;
-  preTaxAmount: number;
-  taxAmount: number;
-  totalAmount: number;
   goodTrust: boolean;
   contactEnabled: boolean;
   personId: number | null;
@@ -91,22 +88,6 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
       payeeDetail.personId = compensationPayee.motiSolicitor?.id!;
     }
 
-    const payeePretaxAmount = compensation?.financials
-      .map(f => f.pretaxAmount ?? 0)
-      .reduce((prev, next) => prev + next, 0);
-
-    const payeeTaxAmount = compensation?.financials
-      .map(f => f.taxAmount ?? 0)
-      .reduce((prev, next) => prev + next, 0);
-
-    const payeeTotalAmount = compensation?.financials
-      .map(f => f.totalAmount ?? 0)
-      .reduce((prev, next) => prev + next, 0);
-
-    payeeDetail.preTaxAmount = payeePretaxAmount;
-    payeeDetail.taxAmount = payeeTaxAmount;
-    payeeDetail.totalAmount = payeeTotalAmount;
-
     var results =
       compensation.financials?.filter(el => {
         return el.isGstRequired === true;
@@ -119,6 +100,18 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
 
   const payeeDetails = getPayeeDetails(compensationPayee);
 
+  const compPretaxAmount = compensation?.financials
+    .map(f => f.pretaxAmount ?? 0)
+    .reduce((prev, next) => prev + next, 0);
+
+  const compTaxAmount = compensation?.financials
+    .map(f => f.taxAmount ?? 0)
+    .reduce((prev, next) => prev + next, 0);
+
+  const compTotalAmount = compensation?.financials
+    .map(f => f.totalAmount ?? 0)
+    .reduce((prev, next) => prev + next, 0);
+
   const userCanEditCompensationReq = (): boolean => {
     if (compensation.isDraft && hasClaim(Claims.COMPENSATION_REQUISITION_EDIT)) {
       return true;
@@ -139,6 +132,7 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
       }}
     />
   );
+
   return (
     <StyledSummarySection>
       <LoadingBackdrop show={loading} parentScreen={true} />
@@ -163,23 +157,23 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
               contentWidth="4"
               valueTestId="header-pretax-amount"
             >
-              <p className="mb-0 text-right">{formatMoney(payeeDetails?.preTaxAmount ?? 0)}</p>
+              <p className="mb-0 text-right">{formatMoney(compPretaxAmount ?? 0)}</p>
             </HeaderField>
             <HeaderField
               label="Applicable GST:"
               labelWidth="8"
               contentWidth="4"
               valueTestId="header-tax-amount"
             >
-              <p className="mb-0 text-right">{formatMoney(payeeDetails?.taxAmount ?? 0)}</p>
+              <p className="mb-0 text-right">{formatMoney(compTaxAmount ?? 0)}</p>
             </HeaderField>
             <HeaderField
               label="Total cheque amount:"
               labelWidth="8"
               contentWidth="4"
               valueTestId="header-total-amount"
             >
-              <p className="mb-0 text-right">{formatMoney(payeeDetails?.totalAmount ?? 0)}</p>
+              <p className="mb-0 text-right">{formatMoney(compTotalAmount ?? 0)}</p>
             </HeaderField>
           </Col>
         </StyledRow>
@@ -274,19 +268,15 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
           </StyledPayeeDisplayName>
         </SectionField>
         <SectionField label="Amount (before tax)">
-          {formatMoney(payeeDetails?.preTaxAmount ?? 0)}
+          {formatMoney(compPretaxAmount ?? 0)}
         </SectionField>
         <SectionField label="GST applicable?">
           {payeeDetails?.isGstApplicable ? 'Yes' : 'No'}
         </SectionField>
         {payeeDetails?.isGstApplicable && (
-          <SectionField label="GST amount">
-            {formatMoney(payeeDetails?.taxAmount ?? 0)}
-          </SectionField>
+          <SectionField label="GST amount">{formatMoney(compTaxAmount ?? 0)}</SectionField>
         )}
-        <SectionField label="Total amount">
-          {formatMoney(payeeDetails?.totalAmount ?? 0)}
-        </SectionField>
+        <SectionField label="Total amount">{formatMoney(compTotalAmount ?? 0)}</SectionField>
       </Section>
 
       <Section header="Financial Activities" isCollapsable initiallyExpanded>
@@ -327,23 +317,23 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
               <label>Compensation amount:</label>
             </Col>
             <Col xs="3" className="pl-1 text-right">
-              <span>{formatMoney(payeeDetails?.preTaxAmount ?? 0)}</span>
+              <span>{formatMoney(compPretaxAmount ?? 0)}</span>
             </Col>
           </Row>
           <Row>
             <Col className="pr-0 text-right">
               <label>Applicable GST:</label>
             </Col>
             <Col xs="3" className="pl-1 text-right">
-              <span>{formatMoney(payeeDetails?.taxAmount ?? 0)}</span>
+              <span>{formatMoney(compTaxAmount ?? 0)}</span>
             </Col>
           </Row>
           <Row>
             <Col className="pr-0 text-right">
               <label>Total cheque amount:</label>
             </Col>
             <Col xs="3" className="pl-1 text-right">
-              <span>{formatMoney(payeeDetails?.totalAmount ?? 0)}</span>
+              <span>{formatMoney(compTotalAmount ?? 0)}</span>
             </Col>
           </Row>
         </StyledCompensationFooter>

diff --git a/source/frontend/src/hooks/repositories/useRequisitionCompensationRepository.ts b/source/frontend/src/hooks/repositories/useRequisitionCompensationRepository.ts
@@ -66,7 +66,7 @@ export const useCompensationRequisitionRepository = () => {
     ),
     requestName: 'getCompensationPayee',
     onSuccess: useAxiosSuccessHandler(),
-    onError: useAxiosErrorHandler('Failed to load Compensation requisition payee.'),
+    throwError: true,
   });
 
   return useMemo(