Merge pull request #1783 from CruGlobal/MPDX-9596

MPDX-9596 - PDS Goal Calc: Disable sidepanel icons until Settings section complete

Author: zweatshirt

src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.test.tsx

@@ -204,7 +204,11 @@ describe('PdsGoalCalculator', () => {
       </PdsGoalCalculatorTestWrapper>,
     );
 
-    userEvent.click(await findByRole('button', { name: 'Summary Report' }));
+    const summaryButton = await findByRole('button', {
+      name: 'Summary Report',
+    });
+    await waitFor(() => expect(summaryButton).toBeEnabled());
+    userEvent.click(summaryButton);
 
     const finishButton = await findByRole('button', {
       name: /Finish & Apply Goal/i,

src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.tsx

@@ -128,13 +128,11 @@ const MainContent: React.FC = () => {
 
 export const PdsGoalCalculator: React.FC = () => {
   return (
-    <PdsGoalCalculatorLayout
-      sectionListPanel={<CurrentSectionList />}
-      mainContent={
-        <AutosaveForm>
-          <MainContent />
-        </AutosaveForm>
-      }
-    />
+    <AutosaveForm>
+      <PdsGoalCalculatorLayout
+        sectionListPanel={<CurrentSectionList />}
+        mainContent={<MainContent />}
+      />
+    </AutosaveForm>
   );
 };

src/components/HrTools/PdsGoalCalculator/PdsGoalCalculatorTestWrapper.tsx

@@ -6,6 +6,7 @@ import { SnackbarProvider } from 'notistack';
 import { DeepPartial } from 'ts-essentials';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking';
+import { AutosaveForm } from 'src/components/Shared/Autosave/AutosaveForm';
 import { GetUserQuery } from 'src/components/User/GetUser.generated';
 import {
   DesignationSupportFormType,
@@ -285,12 +286,16 @@ export const PdsGoalCalculatorTestWrapper = <
             )}
             onCall={onCall}
           >
-            {withProvider ? (
-              <PdsGoalCalculatorProvider>{children}</PdsGoalCalculatorProvider>
-            ) : (
-              // eslint-disable-next-line react/jsx-no-useless-fragment
-              <>{children}</>
-            )}
+            <AutosaveForm>
+              {withProvider ? (
+                <PdsGoalCalculatorProvider>
+                  {children}
+                </PdsGoalCalculatorProvider>
+              ) : (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                <>{children}</>
+              )}
+            </AutosaveForm>
           </GqlMockedProvider>
         </SnackbarProvider>
       </TestRouter>

src/components/HrTools/PdsGoalCalculator/Shared/PdsGoalCalculatorLayout.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import { PdsGoalCalculator } from '../PdsGoalCalculator';
 import { PdsGoalCalculatorTestWrapper } from '../PdsGoalCalculatorTestWrapper';
 import { PdsGoalCalculatorLayout } from './PdsGoalCalculatorLayout';
 
@@ -35,6 +36,44 @@ describe('PdsGoalCalculatorLayout', () => {
     expect(progressIndicator).toHaveAttribute('aria-valuenow', '25');
   });
 
+  it('disables non-Setup icons when setup is incomplete', async () => {
+    const { findByRole } = render(
+      <PdsGoalCalculatorTestWrapper calculationMock={{ payRate: 0 }}>
+        <PdsGoalCalculatorLayout
+          sectionListPanel={<div>Section List</div>}
+          mainContent={<div>Main Content</div>}
+        />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    expect(
+      await findByRole('button', { name: 'Reimbursable Expenses' }),
+    ).toBeDisabled();
+    expect(await findByRole('button', { name: 'Support Item' })).toBeDisabled();
+    expect(
+      await findByRole('button', { name: 'Summary Report' }),
+    ).toBeDisabled();
+    // Setup icon is always enabled
+    expect(await findByRole('button', { name: 'Settings' })).toBeEnabled();
+  });
+
+  it('enables all icons when setup is complete', async () => {
+    const { getByRole } = render(
+      <PdsGoalCalculatorTestWrapper>
+        <PdsGoalCalculator />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'Settings' })).toBeEnabled();
+      expect(
+        getByRole('button', { name: 'Reimbursable Expenses' }),
+      ).toBeEnabled();
+      expect(getByRole('button', { name: 'Support Item' })).toBeEnabled();
+      expect(getByRole('button', { name: 'Summary Report' })).toBeEnabled();
+    });
+  });
+
   it('shows an indeterminate progress indicator while calculation is loading', async () => {
     const { findByRole } = render(
       <PdsGoalCalculatorTestWrapper>

src/components/HrTools/PdsGoalCalculator/Shared/PdsGoalCalculatorLayout.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAutosaveForm } from 'src/components/Shared/Autosave/AutosaveForm';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { PanelLayout } from '../../Shared/CalculationReports/PanelLayout/PanelLayout';
 import { PanelTypeEnum } from '../../Shared/CalculationReports/Shared/sharedTypes';
 import { PdsGoalCalculatorStepEnum } from '../PdsGoalCalculatorHelper';
 import { usePdsGoalCalculator } from './PdsGoalCalculatorContext';
+import { isSetupComplete } from './pdsCompletion';
 
 interface PdsGoalCalculatorLayoutProps {
   sectionListPanel: React.ReactNode;
@@ -19,6 +21,7 @@ export const PdsGoalCalculatorLayout: React.FC<
   const {
     steps,
     currentStep,
+    calculation,
     handleStepChange,
     isDrawerOpen,
     setDrawerOpen,
@@ -27,6 +30,10 @@ export const PdsGoalCalculatorLayout: React.FC<
     calculationLoading,
   } = usePdsGoalCalculator();
 
+  const setupComplete = isSetupComplete(calculation);
+  const { allValid } = useAutosaveForm();
+  const isSetupValid = setupComplete && allValid;
+
   const handleStepIconClick = (step: PdsGoalCalculatorStepEnum) => {
     if (currentStep.step === step) {
       toggleDrawer();
@@ -41,6 +48,7 @@ export const PdsGoalCalculatorLayout: React.FC<
     icon: step.icon,
     label: step.title,
     isActive: currentStep.step === step.step,
+    disabled: !isSetupValid && step.step !== PdsGoalCalculatorStepEnum.Setup,
     onClick: () => handleStepIconClick(step.step),
   }));
 

src/components/HrTools/Shared/CalculationReports/PanelLayout/PanelLayout.test.tsx

@@ -212,6 +212,24 @@ describe('PanelLayout', () => {
     expect(queryByRole('progressbar')).not.toBeInTheDocument();
   });
 
+  it('disables an icon button when disabled is true', () => {
+    const disabledIcons: IconPanelItem[] = [
+      {
+        key: 'disabled-icon',
+        icon: <HomeIcon />,
+        label: 'Disabled Icon',
+        disabled: true,
+        onClick: jest.fn(),
+      },
+    ];
+
+    const { getByRole } = render(
+      <TestComponent panelType={PanelTypeEnum.Other} icons={disabledIcons} />,
+    );
+
+    expect(getByRole('button', { name: 'Disabled Icon' })).toBeDisabled();
+  });
+
   it('handles empty icon panel items gracefully', () => {
     const { getByTestId, queryAllByRole } = render(
       <TestComponent

src/components/HrTools/Shared/CalculationReports/PanelLayout/PanelLayout.tsx

@@ -20,6 +20,7 @@ export interface IconPanelItem {
   icon: React.ReactNode;
   label: string;
   isActive?: boolean;
+  disabled?: boolean;
   onClick: () => void;
 }
 
@@ -144,6 +145,7 @@ export const PanelLayout: React.FC<PanelLayoutProps> = ({
                     key={item.key}
                     aria-label={item.label}
                     aria-current={item.isActive ? 'step' : undefined}
+                    disabled={item.disabled}
                     sx={{
                       color: item.isActive
                         ? theme.palette.mpdxBlue.main