Add PayTypeField component and update SetupStep to use it

Author: zweatshirt

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

@@ -50,6 +50,16 @@ describe('PdsGoalCalculator', () => {
     expect(await findByRole('button', { name: /continue/i })).toBeDisabled();
   });
 
+  it('disables the Continue button when Pay Type is not selected', async () => {
+    const { findByRole } = render(
+      <PdsGoalCalculatorTestWrapper calculationMock={{ salaryOrHourly: null }}>
+        <PdsGoalCalculator />
+      </PdsGoalCalculatorTestWrapper>,
+    );
+
+    expect(await findByRole('button', { name: /continue/i })).toBeDisabled();
+  });
+
   it('re-enables the Continue button after the user fills in the missing field', async () => {
     const { findByRole } = render(
       <PdsGoalCalculatorTestWrapper calculationMock={{ name: '' }}>

src/components/HrTools/PdsGoalCalculator/Setup/PayTypeField.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import { MenuItem, TextField } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import * as yup from 'yup';
+import { DesignationSupportSalaryType } from 'src/graphql/types.generated';
+import { usePdsGoalAutoSave } from '../Shared/Autosave/usePdsGoalAutoSave';
+import { useSaveField } from '../Shared/Autosave/useSaveField';
+
+// Uses usePdsGoalAutoSave directly (not AutosaveTextField) so the onChange can
+// atomically clear payRate alongside salaryOrHourly in a single mutation.
+export const PayTypeField: React.FC = () => {
+  const { t } = useTranslation();
+  const saveField = useSaveField();
+  const schema = useMemo(
+    () =>
+      yup.object({
+        salaryOrHourly: yup
+          .string()
+          .required(t('Pay Type is a required field')),
+      }),
+    [t],
+  );
+  const {
+    value,
+    onChange: updateValidation,
+    disabled,
+    error,
+    helperText: errorMessage,
+  } = usePdsGoalAutoSave({ fieldName: 'salaryOrHourly', schema });
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      variant="outlined"
+      select
+      label={t('Pay Type')}
+      error={error}
+      helperText={error ? errorMessage : t('Changing this clears Pay Rate.')}
+      value={value}
+      disabled={disabled}
+      onChange={(event) => {
+        updateValidation(event as React.ChangeEvent<HTMLInputElement>);
+        const newValue = event.target.value as DesignationSupportSalaryType;
+        if (newValue !== value) {
+          saveField({ salaryOrHourly: newValue, payRate: null });
+        }
+      }}
+    >
+      <MenuItem value={DesignationSupportSalaryType.Salaried}>
+        {t('Salaried')}
+      </MenuItem>
+      <MenuItem value={DesignationSupportSalaryType.Hourly}>
+        {t('Hourly')}
+      </MenuItem>
+    </TextField>
+  );
+};

src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx

@@ -34,12 +34,12 @@ import { AutosaveTextField } from '../Shared/Autosave/AutosaveTextField';
 import { useSaveField } from '../Shared/Autosave/useSaveField';
 import { usePdsGoalCalculator } from '../Shared/PdsGoalCalculatorContext';
 import { HoursPerWeekGrid } from './HoursPerWeekGrid/HoursPerWeekGrid';
+import { PayTypeField } from './PayTypeField';
 
 export const SetupStep: React.FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { calculation, hcmUser, isMutating, setRightPanelContent } =
-    usePdsGoalCalculator();
+  const { calculation, hcmUser, setRightPanelContent } = usePdsGoalCalculator();
   const { data: userData } = useGetUserQuery();
   const schema = useMemo(
     () =>
@@ -203,33 +203,7 @@ export const SetupStep: React.FC = () => {
           </Grid>
 
           <Grid item xs={12}>
-            {/* Manual TextField (not AutosaveTextField) because changing Pay
-                Type must atomically clear payRate as well; AutosaveTextField
-                only writes the single bound fieldName. */}
-            <TextField
-              fullWidth
-              size="small"
-              variant="outlined"
-              select
-              label={t('Pay Type')}
-              helperText={t('Changing this clears Pay Rate.')}
-              value={calculation?.salaryOrHourly ?? ''}
-              disabled={!calculation || isMutating}
-              onChange={(event) => {
-                const newValue = event.target
-                  .value as DesignationSupportSalaryType;
-                if (newValue !== calculation?.salaryOrHourly) {
-                  saveField({ salaryOrHourly: newValue, payRate: null });
-                }
-              }}
-            >
-              <MenuItem value={DesignationSupportSalaryType.Salaried}>
-                {t('Salaried')}
-              </MenuItem>
-              <MenuItem value={DesignationSupportSalaryType.Hourly}>
-                {t('Hourly')}
-              </MenuItem>
-            </TextField>
+            <PayTypeField />
           </Grid>
 
           {payType && (