MPDX-9211 - Add DiscardButton component and delete salary calculation mutation for discard

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

@@ -0,0 +1,5 @@
+mutation DeleteSalaryCalculation($input: SalaryRequestDeleteMutationInput!) {
+  deleteSalaryRequest(input: $input) {
+    id
+  }
+}

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

@@ -1,7 +1,9 @@
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SalaryCalculatorTestWrapper } from '../SalaryCalculatorTestWrapper';
-import { StepNavigation, SubmitButton } from './StepNavigation';
+import { DiscardButton, StepNavigation, SubmitButton } from './StepNavigation';
+
+const mutationSpy = jest.fn();
 
 const TestComponent: React.FC = () => (
   <SalaryCalculatorTestWrapper>
@@ -17,9 +19,26 @@ describe('StepNavigation', () => {
   });
 });
 
+describe('DiscardButton', () => {
+  it('opens discard dialog on click and calls delete mutation', async () => {
+    const { findByText } = render(
+      <SalaryCalculatorTestWrapper onCall={mutationSpy}>
+        <DiscardButton />
+      </SalaryCalculatorTestWrapper>,
+    );
+    userEvent.click(await findByText('Discard'));
+
+    userEvent.click(await findByText('Yes, Discard'));
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('DeleteSalaryCalculation', {
+        input: { id: 'salary-request-1' },
+      }),
+    );
+  });
+});
+
 describe('SubmitButton', () => {
   it('submits calculation', async () => {
-    const mutationSpy = jest.fn();
     const { findByText } = render(
       <SalaryCalculatorTestWrapper onCall={mutationSpy}>
         <SubmitButton />

src/components/Reports/SalaryCalculator/StepNavigation/StepNavigation.tsx

@@ -1,12 +1,63 @@
-import React from 'react';
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { SubmitModal } from 'src/components/Reports/Shared/CalculationReports/SubmitModal/SubmitModal';
+import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useSalaryCalculator } from '../SalaryCalculatorContext/SalaryCalculatorContext';
+import { useDeleteSalaryCalculationMutation } from './DeleteSalaryCalculation.generated';
 import { useSubmitSalaryCalculationMutation } from './SubmitSalaryCalculation.generated';
 
+export const DiscardButton: React.FC = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const accountListId = useAccountListId();
+  const { calculation } = useSalaryCalculator();
+  const [deleteSalaryCalculation] = useDeleteSalaryCalculationMutation();
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+
+  const handleDiscard = async () => {
+    if (calculation) {
+      await deleteSalaryCalculation({
+        variables: {
+          input: {
+            id: calculation.id,
+          },
+        },
+      });
+      setRemoveDialogOpen(false);
+      router.push(`/accountLists/${accountListId}/reports/salaryCalculator`);
+    }
+  };
+
+  if (!calculation) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        variant="text"
+        onClick={() => setRemoveDialogOpen(true)}
+        color="error"
+      >
+        <Typography fontWeight="bold">{t('Discard')}</Typography>
+      </Button>
+      {removeDialogOpen && (
+        <SubmitModal
+          formTitle={t('Salary Calculation')}
+          handleClose={() => setRemoveDialogOpen(false)}
+          handleConfirm={handleDiscard}
+          isDiscard
+        />
+      )}
+    </>
+  );
+};
+
 export const BackButton: React.FC = () => {
   const { t } = useTranslation();
   const { handlePreviousStep, currentIndex } = useSalaryCalculator();
@@ -75,10 +126,11 @@ export const SubmitButton: React.FC = () => {
 
 export const StepNavigation: React.FC = () => {
   const theme = useTheme();
-  const { currentIndex } = useSalaryCalculator();
+  const { currentIndex, steps } = useSalaryCalculator();
 
   return (
-    <Box display="flex" justifyContent="flex-end">
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      {currentIndex < steps.length - 1 && <DiscardButton />}
       <Stack direction="row" spacing={theme.spacing(1)}>
         <BackButton />
         {currentIndex === 3 ? <SubmitButton /> : <ContinueButton />}