fix: block switching between unlimited and accrual-based time off policy types

When editing a complete time off policy, prevent changing between
unlimited and accrual-based accrual types in the UI:

- Complete unlimited policies: all accrual method radios are disabled
- Complete accrual-based policies: the "Unlimited" radio is disabled,
  but switching between "Based on hours worked" and "Fixed amount per
  year" is still allowed
- Incomplete policies (still in creation wizard): no restrictions

This matches the behavior in gws-flows, where the assumption is that
migrating settings between these fundamentally different policy types
is too complex. Users should create a new policy instead.

Author: krisxcrash

src/components/TimeOff/TimeOffManagement/PolicyConfigurationForm/PolicyConfigurationForm.test.tsx

@@ -972,10 +972,11 @@ describe('PolicyConfigurationForm - edit mode (deriveFormDefaults)', () => {
     expect(screen.getByLabelText('Custom date')).toBeChecked()
   })
 
-  it('sends policyResetDate: null when switching from hourly to unlimited', async () => {
+  it('allows switching from hourly to unlimited for incomplete policies', async () => {
     const user = userEvent.setup()
     renderEditComponent({
       name: 'Hourly Vacation',
+      complete: false,
       accrualMethod: 'per_hour_paid',
       accrualRate: '1.5',
       accrualRateUnit: '40',
@@ -1003,10 +1004,94 @@ describe('PolicyConfigurationForm - edit mode (deriveFormDefaults)', () => {
             policyResetDate: null,
             accrualRate: null,
             accrualRateUnit: null,
-            complete: true,
           }),
         },
       })
     })
   })
+
+  describe('accrual method locking for complete policies', () => {
+    it('disables all accrual method radios for a complete unlimited policy', async () => {
+      renderEditComponent({
+        name: 'Unlimited PTO',
+        complete: true,
+        accrualMethod: 'unlimited',
+      })
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('Unlimited PTO')).toBeInTheDocument()
+      })
+
+      expect(screen.getByLabelText('Unlimited')).toBeDisabled()
+      expect(screen.getByLabelText('Based on hours worked')).toBeDisabled()
+      expect(screen.getByLabelText('Fixed amount per year')).toBeDisabled()
+      expect(
+        screen.getByText(
+          'The accrual type cannot be changed for an existing policy. Create a new policy to use a different accrual type.',
+        ),
+      ).toBeInTheDocument()
+    })
+
+    it('disables only the unlimited radio for a complete accrual-based policy', async () => {
+      renderEditComponent({
+        name: 'Hourly Vacation',
+        complete: true,
+        accrualMethod: 'per_hour_paid',
+        accrualRate: '1.5',
+        accrualRateUnit: '40',
+      })
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('Hourly Vacation')).toBeInTheDocument()
+      })
+
+      expect(screen.getByLabelText('Unlimited')).toBeDisabled()
+      expect(screen.getByLabelText('Based on hours worked')).toBeEnabled()
+      expect(screen.getByLabelText('Fixed amount per year')).toBeEnabled()
+      expect(
+        screen.getByText(
+          'The accrual type cannot be changed for an existing policy. Create a new policy to use a different accrual type.',
+        ),
+      ).toBeInTheDocument()
+    })
+
+    it('allows switching between accrual subtypes for a complete accrual-based policy', async () => {
+      const user = userEvent.setup()
+      renderEditComponent({
+        name: 'Hourly Vacation',
+        complete: true,
+        accrualMethod: 'per_hour_paid',
+        accrualRate: '1.5',
+        accrualRateUnit: '40',
+      })
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('Hourly Vacation')).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByLabelText('Fixed amount per year'))
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Fixed amount per year')).toBeChecked()
+      })
+    })
+
+    it('does not lock accrual method radios for an incomplete policy', async () => {
+      renderEditComponent({
+        name: 'Incomplete Policy',
+        complete: false,
+        accrualMethod: 'per_hour_paid',
+        accrualRate: '1',
+        accrualRateUnit: '40',
+      })
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('Incomplete Policy')).toBeInTheDocument()
+      })
+
+      expect(screen.getByLabelText('Unlimited')).toBeEnabled()
+      expect(screen.getByLabelText('Based on hours worked')).toBeEnabled()
+      expect(screen.getByLabelText('Fixed amount per year')).toBeEnabled()
+    })
+  })
 })

src/components/TimeOff/TimeOffManagement/PolicyConfigurationForm/PolicyConfigurationForm.tsx

@@ -166,7 +166,6 @@ function buildUpdateRequestBody(
       accrualRate: null,
       accrualRateUnit: null,
       policyResetDate: null,
-      complete: true,
     }
   }
 
@@ -282,6 +281,12 @@ function EditRoot({ companyId, policyType, policyId, defaultValues }: EditRootPr
   const fetchedDefaults = deriveFormDefaults(policy)
   const mergedDefaults = { ...fetchedDefaults, ...defaultValues }
 
+  const lockedAccrualCategory = policy.complete
+    ? fetchedDefaults.accrualMethod === 'unlimited'
+      ? ('unlimited' as const)
+      : ('accrual_based' as const)
+    : undefined
+
   const handleContinue = useCallback(
     async (data: PolicyConfigurationFormData) => {
       await baseSubmitHandler(data, async () => {
@@ -318,6 +323,7 @@ function EditRoot({ companyId, policyType, policyId, defaultValues }: EditRootPr
       defaultValues={mergedDefaults}
       editingPolicyName={policy.name}
       isPending={isPending}
+      lockedAccrualCategory={lockedAccrualCategory}
     />
   )
 }

src/components/TimeOff/TimeOffManagement/PolicyConfigurationForm/PolicyConfigurationFormPresentation.tsx

@@ -30,6 +30,7 @@ export function PolicyConfigurationFormPresentation({
   defaultValues,
   editingPolicyName,
   isPending = false,
+  lockedAccrualCategory,
 }: PolicyConfigurationFormPresentationProps) {
   useI18n('Company.TimeOff.CreateTimeOffPolicy')
   const { t } = useTranslation('Company.TimeOff.CreateTimeOffPolicy')
@@ -117,9 +118,10 @@ export function PolicyConfigurationFormPresentation({
         value: 'unlimited' as AccrualMethod,
         label: t('policyDetails.unlimitedLabel'),
         description: t('policyDetails.unlimitedHint'),
+        isDisabled: lockedAccrualCategory === 'accrual_based',
       },
     ],
-    [t],
+    [t, lockedAccrualCategory],
   )
 
   const accrualMethodFixedOptions = useMemo(
@@ -182,9 +184,14 @@ export function PolicyConfigurationFormPresentation({
             <RadioGroupField<AccrualMethod>
               name="accrualMethod"
               label={t('policyDetails.accrualMethodLabel')}
-              description={t('policyDetails.accrualMethodHint')}
+              description={
+                lockedAccrualCategory
+                  ? t('policyDetails.accrualMethodLockedHint')
+                  : t('policyDetails.accrualMethodHint')
+              }
               options={accrualMethodOptions}
               isRequired
+              isDisabled={lockedAccrualCategory === 'unlimited'}
               errorMessage={t('policyDetails.validations.accrualMethod')}
             />
 

src/components/TimeOff/TimeOffManagement/PolicyConfigurationForm/PolicyConfigurationFormTypes.ts

@@ -15,10 +15,13 @@ export interface PolicyConfigurationFormData {
   resetDay?: number
 }
 
+export type LockedAccrualCategory = 'unlimited' | 'accrual_based'
+
 export interface PolicyConfigurationFormPresentationProps {
   onContinue: (data: PolicyConfigurationFormData) => void
   onCancel: () => void
   defaultValues?: Partial<PolicyConfigurationFormData>
   editingPolicyName?: string
   isPending?: boolean
+  lockedAccrualCategory?: LockedAccrualCategory
 }

src/i18n/en/Company.TimeOff.CreateTimeOffPolicy.json

@@ -5,6 +5,7 @@
     "policyNameLabel": "Policy name",
     "accrualMethodLabel": "Accrual method",
     "accrualMethodHint": "The rate at which employees will accrue time paid time off.",
+    "accrualMethodLockedHint": "The accrual type cannot be changed for an existing policy. Create a new policy to use a different accrual type.",
     "perHourPaidLabel": "Based on hours worked",
     "perHourPaidHint": "Employees earn time off based on hours worked (e.g., 1 hour for every 40 hours worked).",
     "perYearLabel": "Fixed amount per year",

src/types/i18next.d.ts

@@ -371,6 +371,7 @@ export interface CompanyTimeOffCreateTimeOffPolicy{
 "policyNameLabel":string;
 "accrualMethodLabel":string;
 "accrualMethodHint":string;
+"accrualMethodLockedHint":string;
 "perHourPaidLabel":string;
 "perHourPaidHint":string;
 "perYearLabel":string;