[MPDX-9214] Show progressive approval tier

src/components/Reports/SalaryCalculator/Autosave/SalaryCalculation.graphql

@@ -9,6 +9,12 @@ mutation UpdateSalaryCalculation($input: SalaryRequestUpdateMutationInput!) {
       spouseCalculations {
         ...CalculationFields
       }
+      progressiveApprovalTier {
+        id
+        tier
+        approver
+        approvalTimeframe
+      }
     }
   }
 }

src/components/Reports/SalaryCalculator/Receipt/Receipt.test.tsx

@@ -16,6 +16,10 @@ const TestComponent: React.FC<TestComponentProps> = ({
         ? {
             calculations: { requestedGross: 100000 },
             spouseCalculations: { requestedGross: 40000 },
+            progressiveApprovalTier: {
+              approver: 'Division Head',
+              approvalTimeframe: '1-2 weeks',
+            },
           }
         : null
     }
@@ -31,7 +35,7 @@ describe('Receipt step', () => {
     await waitFor(() =>
       expect(getByTestId('Receipt-message')).toHaveTextContent(
         'Because your request exceeds your maximum allowable salary it will require additional approvals. \
-For the $140,000.00 you are requesting, this will take [time frame] as it needs to be signed off by Approver Name and Other Approver. \
+For the $140,000.00 you are requesting, this will take 1-2 weeks as it needs to be signed off by the Division Head. \
 This may affect your selected effective date. We will review your request through our Progressive Approvals process and notify you of any changes to the status of this request.',
       ),
     );

src/components/Reports/SalaryCalculator/Receipt/Receipt.tsx

@@ -12,7 +12,7 @@ import {
 import { Trans, useTranslation } from 'react-i18next';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useCaps } from '../SalaryCalculation/useCaps';
-import { useApprovers } from '../Shared/useApprovers';
+import { useSalaryCalculator } from '../SalaryCalculatorContext/SalaryCalculatorContext';
 import { useFormatters } from '../Shared/useFormatters';
 import { MhaCard } from '../Summary/MhaCard';
 import { SalaryCalculationCard } from '../Summary/SalaryCalculationCard';
@@ -24,8 +24,9 @@ export const ReceiptStep: React.FC = () => {
   const accountListId = useAccountListId();
   const { t } = useTranslation();
   const { formatCurrency } = useFormatters();
-  const { combinedGross, overCombinedCap } = useCaps();
-  const { approvers } = useApprovers();
+  const { calculation } = useSalaryCalculator();
+  const progressiveApprovalTier = calculation?.progressiveApprovalTier;
+  const { combinedGross } = useCaps();
 
   const [showReceipt, setShowReceipt] = useState(false);
 
@@ -42,16 +43,17 @@ export const ReceiptStep: React.FC = () => {
           {t("You've successfully submitted your Salary Calculation Form!")}
         </Typography>
         <Typography data-testid="Receipt-message" variant="body2">
-          {overCombinedCap ? (
-            // TODO: Determine the time frame
+          {progressiveApprovalTier ? (
             <Trans t={t}>
               Because your request exceeds your maximum allowable salary it will
               require additional approvals. For the {{ requestedAmount }} you
-              are requesting, this will take [time frame] as it needs to be
-              signed off by {{ approvers }}. This may affect your selected
-              effective date. We will review your request through our
-              Progressive Approvals process and notify you of any changes to the
-              status of this request.
+              are requesting, this will take{' '}
+              {{ timeframe: progressiveApprovalTier.approvalTimeframe }} as it
+              needs to be signed off by the{' '}
+              {{ approver: progressiveApprovalTier.approver }}. This may affect
+              your selected effective date. We will review your request through
+              our Progressive Approvals process and notify you of any changes to
+              the status of this request.
             </Trans>
           ) : (
             <Trans t={t}>

src/components/Reports/SalaryCalculator/SalaryCalculation/RequestSummaryCard/RequestSummaryCard.test.tsx

@@ -1,6 +1,7 @@
 import { render, waitFor } from '@testing-library/react';
 import { merge } from 'lodash';
 import { DeepPartial } from 'ts-essentials';
+import { ProgressiveApprovalTierEnum } from 'src/graphql/types.generated';
 import { SalaryCalculationQuery } from '../../SalaryCalculatorContext/SalaryCalculation.generated';
 import {
   SalaryCalculatorTestWrapper,
@@ -51,6 +52,9 @@ describe('RequestSummaryCard', () => {
           salaryRequestMock={{
             calculations: { requestedGross: 40000 },
             spouseCalculations: { effectiveCap: 50000 },
+            progressiveApprovalTier: {
+              tier: ProgressiveApprovalTierEnum.DivisionHead,
+            },
           }}
         />,
       );
@@ -73,6 +77,9 @@ or make changes to how your Requested Salary is distributed above.",
           salaryRequestMock={{
             calculations: { effectiveCap: 50000 },
             spouseCalculations: { requestedGross: 40000 },
+            progressiveApprovalTier: {
+              tier: ProgressiveApprovalTierEnum.DivisionHead,
+            },
           }}
         />,
       );
@@ -88,19 +95,26 @@ or make changes to how your Requested Salary is distributed above.",
     });
   });
 
-  describe('combined over cap', () => {
+  describe('requires above division head approval', () => {
     it('renders status message', async () => {
       const { getByTestId } = render(
         <TestComponent
-          salaryRequestMock={{ calculations: { requestedGross: 100_000 } }}
+          salaryRequestMock={{
+            calculations: { requestedGross: 100_000 },
+            progressiveApprovalTier: {
+              tier: ProgressiveApprovalTierEnum.VicePresident,
+              approver: 'Vice President',
+              approvalTimeframe: '1-2 weeks',
+            },
+          }}
         />,
       );
 
       await waitFor(() =>
         expect(getByTestId('RequestSummaryCard-status')).toHaveTextContent(
           'Your Combined Gross Requested Salary exceeds your Combined Maximum Allowable Salary. \
 Please make adjustments to your Salary Request above or fill out the Approval Process Section below to request a higher amount through our Progressive Approvals process. \
-This may take [time frame] as it needs to be signed off by Approver Name and Other Approver. \
+This may take 1-2 weeks as it needs to be signed off by the Vice President. \
 This may affect your selected effective date.',
         ),
       );
@@ -232,20 +246,27 @@ This may affect your selected effective date.',
       ]);
     });
 
-    describe('when over cap', () => {
+    describe('requires above division head approval', () => {
       it('renders status message', async () => {
         const { getByTestId } = render(
           <TestComponent
             hasSpouse={false}
-            salaryRequestMock={{ calculations: { requestedGross: 100_000 } }}
+            salaryRequestMock={{
+              calculations: { requestedGross: 100_000 },
+              progressiveApprovalTier: {
+                tier: ProgressiveApprovalTierEnum.VicePresident,
+                approver: 'Vice President',
+                approvalTimeframe: '1-2 weeks',
+              },
+            }}
           />,
         );
 
         await waitFor(() =>
           expect(getByTestId('RequestSummaryCard-status')).toHaveTextContent(
             'Your Gross Requested Salary exceeds your Maximum Allowable Salary. \
 Please make adjustments to your Salary Request above or fill out the Approval Process Section below to request a higher amount through our Progressive Approvals process. \
-This may take [time frame] as it needs to be signed off by Approver Name. \
+This may take 1-2 weeks as it needs to be signed off by the Vice President. \
 This may affect your selected effective date.',
           ),
         );

src/components/Reports/SalaryCalculator/SalaryCalculation/RequestSummaryCard/RequestSummaryCard.tsx

@@ -14,9 +14,9 @@
   useTheme,
 } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
+import { ProgressiveApprovalTierEnum } from 'src/graphql/types.generated';
 import { useSalaryCalculator } from '../../SalaryCalculatorContext/SalaryCalculatorContext';
 import { StepCard } from '../../Shared/StepCard';
-import { useApprovers } from '../../Shared/useApprovers';
 import { useFormatters } from '../../Shared/useFormatters';
 import { StyledCardHeader } from '../StyledCardHeader';
 import { useCaps } from '../useCaps';
@@ -54,58 +54,62 @@
   const { t } = useTranslation();
   const theme = useTheme();
   const { calculation, hcmUser, hcmSpouse } = useSalaryCalculator();
-  const { approvers } = useApprovers();
+  const progressiveApprovalTier = calculation?.progressiveApprovalTier;
   const {
     combinedCap,
     combinedGross,
     overCombinedCap,
     overUserCap,
     overSpouseCap,
     overCapName,
     overCapSalary,
   } = useCaps();
   const { formatCurrency } = useFormatters();
 
   const calcs = calculation?.calculations;
   const spouseCalcs = calculation?.spouseCalculations;
   const hasSpouse = !!hcmSpouse && !!spouseCalcs;
 
   const combinedSeca =
     (calcs?.requestedSeca ?? 0) + (spouseCalcs?.requestedSeca ?? 0);
   const combined403b =
     (calcs?.contributing403bAmount ?? 0) +
     (spouseCalcs?.contributing403bAmount ?? 0);
 
   const categories: Category[] = [
     {
       label: t('Requested Salary (includes MHA)'),
       amount: combinedGross,
       color: theme.palette.yellow.main,
     },
     {
       label: t('SECA and Related Federal Taxes'),
       amount: combinedSeca,
       color: theme.palette.turquoise.main,
     },
     {
       label: t('403b Contribution'),
       amount: combined403b,
       color: theme.palette.green.main,
     },
   ];
 
   const combinedModifier = hasSpouse ? t('Combined') : '';
   const statusMessage =
     !overCombinedCap && !overUserCap && !overSpouseCap ? (
       t('Your gross request is within your Maximum Allowable Salary.')
-    ) : overCombinedCap ? (
+    ) : progressiveApprovalTier &&
+      progressiveApprovalTier.tier !==
+        ProgressiveApprovalTierEnum.DivisionHead ? (
       <Trans t={t}>
         Your {{ combined: combinedModifier }} Gross Requested Salary exceeds
         your {{ combined: combinedModifier }} Maximum Allowable Salary. Please
         make adjustments to your Salary Request above or fill out the Approval
         Process Section below to request a higher amount through our Progressive
-        Approvals process. This may take [time frame] as it needs to be signed
-        off by {{ approvers }}. This may affect your selected effective date.
+        Approvals process. This may take{' '}
+        {{ timeframe: progressiveApprovalTier.approvalTimeframe }} as it needs
+        to be signed off by the {{ approver: progressiveApprovalTier.approver }}
+        . This may affect your selected effective date.
       </Trans>
     ) : (
       <Trans t={t}>

src/components/Reports/SalaryCalculator/SalaryCalculatorContext/Hcm.graphql

@@ -32,7 +32,6 @@ query Hcm {
     }
     exceptionSalaryCap {
       amount
-      exceptionApprover
     }
   }
 }

src/components/Reports/SalaryCalculator/SalaryCalculatorContext/SalaryCalculation.graphql

@@ -50,14 +50,19 @@ fragment CalculationFields on SalaryRequestCalculations {
 query SalaryCalculation {
   salaryRequest: latestSalaryRequest(status: [IN_PROGRESS]) {
     id
-    createdAt
     ...SalaryRequestFields
     calculations {
       ...CalculationFields
     }
     spouseCalculations {
       ...CalculationFields
     }
+    progressiveApprovalTier {
+      id
+      tier
+      approver
+      approvalTimeframe
+    }
   }
 }
 

src/components/Reports/SalaryCalculator/SalaryCalculatorTestWrapper.tsx

@@ -41,7 +41,6 @@ const hcmMock = gqlMock<HcmQuery, HcmQueryVariables>(HcmDocument, {
         },
         exceptionSalaryCap: {
           amount: null,
-          exceptionApprover: 'Approver Name',
         },
       },
       {
@@ -63,7 +62,6 @@ const hcmMock = gqlMock<HcmQuery, HcmQueryVariables>(HcmDocument, {
         },
         exceptionSalaryCap: {
           amount: null,
-          exceptionApprover: 'Other Approver',
         },
       },
     ],

src/components/Reports/SalaryCalculator/StepNavigation/SubmitSalaryCalculation.graphql

@@ -2,7 +2,8 @@ mutation SubmitSalaryCalculation($input: SalaryRequestSubmitMutationInput!) {
   submitSalaryRequest(input: $input) {
     salaryRequest {
       id
-      ...SalaryRequestFields
+      status
+      submittedAt
     }
   }
 }