[MPDX-9186] Add request summary card to step 4

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SalaryCalculatorTestWrapper } from '../SalaryCalculatorTestWrapper';
+import { SummaryStep } from './Summary';
+
+const TestComponent: React.FC = () => (
+  <SalaryCalculatorTestWrapper>
+    <SummaryStep />
+  </SalaryCalculatorTestWrapper>
+);
+
+describe('SummaryStep', () => {
+  describe('View Complete Calculations button', () => {
+    it('should toggle calculation cards', () => {
+      const { getByRole, getByText, queryByText } = render(<TestComponent />);
+
+      const button = getByRole('button', {
+        name: 'View Complete Calculations',
+      });
+
+      userEvent.click(button);
+      expect(getByText('Salary Cap Calculation')).toBeInTheDocument();
+
+      userEvent.click(button);
+      expect(queryByText('Salary Cap Calculation')).not.toBeInTheDocument();
+    });
+  });
+});

src/components/Reports/SalaryCalculator/Summary/Summary.tsx

@@ -1,7 +1,10 @@
 import NextLink from 'next/link';
-import { Link, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Button, Link, Stack, Typography } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { useAccountListId } from 'src/hooks/useAccountListId';
+import { RequestSummaryCard } from '../SalaryCalculation/RequestSummaryCard/RequestSummaryCard';
 import { ContactInfoForm } from './ContactInfoForm';
 import { MhaCard } from './MhaCard';
 import { SalaryCalculationCard } from './SalaryCalculationCard';
@@ -12,6 +15,8 @@ import { StaffInfoSummaryCard } from './StaffInfoSummaryCard';
 export const SummaryStep: React.FC = () => {
   const accountListId = useAccountListId();
   const { t } = useTranslation();
+  const [showCompleteCalculations, setShowCompleteCalculations] =
+    useState(false);
 
   return (
     <Stack gap={4} padding={4}>
@@ -58,9 +63,24 @@ export const SummaryStep: React.FC = () => {
       </Trans>
       <SalarySummaryCard />
       <StaffInfoSummaryCard />
-      <SalaryCapCard />
-      <SalaryCalculationCard />
-      <MhaCard />
+      <RequestSummaryCard />
+
+      <Button
+        endIcon={showCompleteCalculations ? <ExpandLess /> : <ExpandMore />}
+        onClick={() => setShowCompleteCalculations(!showCompleteCalculations)}
+        sx={{ alignSelf: 'flex-start' }}
+      >
+        {t('View Complete Calculations')}
+      </Button>
+
+      {showCompleteCalculations && (
+        <>
+          <SalaryCapCard />
+          <SalaryCalculationCard />
+          <MhaCard />
+        </>
+      )}
+
       <ContactInfoForm />
     </Stack>
   );