MPDX-9609 - PDS Calc: Add conditional rendering for Pay Rate field based on pay type

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

@@ -170,6 +170,22 @@ describe('SetupStep', () => {
     );
   });
 
+  it('hides Pay Rate when pay type is not set', async () => {
+    const { findByRole, queryByRole } = renderSetup({
+      calculationMock: {
+        ...fullTimeSalariedMock,
+        salaryOrHourly: null,
+        payRate: null,
+      },
+    });
+
+    await findByRole('textbox', { name: 'Goal Name' });
+
+    expect(
+      queryByRole('spinbutton', { name: 'Pay Rate' }),
+    ).not.toBeInTheDocument();
+  });
+
   it('shows dynamic Pay Rate helper text based on salary type', async () => {
     const { findByRole, findByText, rerender } = renderSetup({
       calculationMock: fullTimeSalariedMock,

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

@@ -92,156 +92,158 @@
     return `${location} (${percentageFormat(multiplier, locale)})`;
   };
 
-  const isSalaried =
-    calculation?.salaryOrHourly === DesignationSupportSalaryType.Salaried;
+  const payType = calculation?.salaryOrHourly;
+  const isSalaried = payType === DesignationSupportSalaryType.Salaried;
   const isPartTime = calculation?.status === DesignationSupportStatus.PartTime;
   const isSimpleForm =
     calculation?.formType === DesignationSupportFormType.Simple;
 
   const fourOThreeB = hcmUser?.fourOThreeB;
   const totalFourOThreeBContributionPercentage = fourOThreeB
     ? (fourOThreeB.currentTaxDeferredContributionPercentage ?? 0) +
       (fourOThreeB.currentRothContributionPercentage ?? 0)
     : '';
 
   const payRateHelperText = isSalaried
     ? t('Enter yearly salary')
     : t('Enter hourly rate');
 
   const handleOpenHoursCalculator = () => {
     setRightPanelContent(
       <HoursPerWeekGrid
         onApply={(average) => {
           saveField({ hoursWorkedPerWeek: average });
         }}
       />,
     );
   };
 
   return (
     <>
       <Box pb={4}>
         <Typography variant="h6">{t('Settings')}</Typography>
         <Typography pt={1}>
           {t('What do you want to call this goal?')}
         </Typography>
       </Box>
       <AutosaveTextField
         fieldName="name"
         schema={schema}
         label={t('Goal Name')}
       />
 
       <Divider sx={{ my: 4, mx: -4 }} />
 
       <Box pb={4}>
         <Typography variant="h6">{t('Calculator Setup')}</Typography>
         <Typography>
           {t('Take a moment to verify your information.')}
         </Typography>
       </Box>
 
       <Card sx={{ padding: theme.spacing(3) }}>
         <Box display="flex" alignItems="center" gap={1} mb={3}>
           <Avatar
             src={userData?.user.avatar}
             alt={userData?.user.firstName ?? undefined}
             variant="rounded"
             sx={{ width: theme.spacing(4.5), height: theme.spacing(4.5) }}
           />
           <Typography data-testid="info-name-typography" variant="subtitle1">
             {userData?.user.firstName}
           </Typography>
         </Box>
         <Grid container spacing={3}>
           <Grid item xs={12}>
             <AutosaveTextField
               fieldName="formType"
               schema={schema}
               select
               label={t('Form Type')}
               helperText={
                 <>
                   <Box component="span" display="block">
                     {t(
                       'Default includes reimbursable expenses and 403b contributions in the goal total.',
                     )}
                   </Box>
                   <Box component="span" display="block">
                     {t(
                       'Simple excludes them; existing entries are preserved and will count again if you switch back.',
                     )}
                   </Box>
                 </>
               }
             >
               <MenuItem value={DesignationSupportFormType.Detailed}>
                 {t('Default')}
               </MenuItem>
               <MenuItem value={DesignationSupportFormType.Simple}>
                 {t('Simple')}
               </MenuItem>
             </AutosaveTextField>
           </Grid>
 
           <Grid item xs={12}>
             <AutosaveTextField
               fieldName="status"
               schema={schema}
               select
               label={t('Employment Status')}
             >
               <MenuItem value={DesignationSupportStatus.FullTime}>
                 {t('Full-time')}
               </MenuItem>
               <MenuItem value={DesignationSupportStatus.PartTime}>
                 {t('Part-time')}
               </MenuItem>
             </AutosaveTextField>
           </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>
           </Grid>
 
-          <Grid item xs={12}>
-            <AutosaveTextField
-              fieldName="payRate"
-              schema={schema}
-              label={t('Pay Rate')}
-              type="number"
-              helperText={payRateHelperText}
-              InputProps={{
-                startAdornment: <CurrencyAdornment />,
-              }}
-            />
-          </Grid>
+          {payType && (
+            <Grid item xs={12}>
+              <AutosaveTextField
+                fieldName="payRate"
+                schema={schema}
+                label={t('Pay Rate')}
+                type="number"
+                helperText={payRateHelperText}
+                InputProps={{
+                  startAdornment: <CurrencyAdornment />,
+                }}
+              />
+            </Grid>
+          )}
 
           {!isSalaried && (
             <Grid item xs={12}>