PM-4528: preserve draft challenge billing markup

src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.spec.tsx

@@ -57,13 +57,18 @@ jest.mock('../../../../lib/utils', () => ({
     showErrorToast: jest.fn(),
     showSuccessToast: jest.fn(),
     transformChallengeToFormData: (challenge?: {
+        billing?: {
+            billingAccountId?: number | string
+            markup?: number
+        }
         name?: string
         status?: string
         trackId?: string
         typeId?: string
     }) => ({
         assignedMemberId: undefined,
         attachments: [],
+        billing: challenge?.billing,
         copilot: undefined,
         description: '',
         discussionForum: undefined,
@@ -169,7 +174,17 @@ jest.mock('./ChallengeScheduleSection', () => ({
     ChallengeScheduleSection: () => <></>,
 }))
 jest.mock('./ChallengeFeeField', () => ({
-    ChallengeFeeField: () => <></>,
+    ChallengeFeeField: function ChallengeFeeField() {
+        const reactHookForm: typeof import('react-hook-form') = jest.requireActual('react-hook-form')
+        const billing = reactHookForm.useWatch({
+            control: reactHookForm.useFormContext().control,
+            name: 'billing',
+        }) as {
+            markup?: number
+        } | undefined
+
+        return <div data-testid='billing-markup'>{String(billing?.markup ?? '')}</div>
+    },
 }))
 jest.mock('./ChallengeNameField', () => {
     const reactHookForm: typeof import('react-hook-form') = jest.requireActual('react-hook-form')
@@ -485,6 +500,53 @@ describe('ChallengeEditorForm', () => {
             }))
     })
 
+    it('preserves project billing markup when fetched draft data resets the form', async () => {
+        mockedUseFetchProjectBillingAccount.mockReturnValue({
+            billingAccount: {
+                id: '80001063',
+                markup: 0.33,
+            },
+            isLoading: false,
+        })
+
+        const renderResult: ReturnType<typeof render> = render(
+            <MemoryRouter>
+                <ChallengeEditorForm
+                    challenge={{
+                        ...draftChallenge,
+                        id: 'initial-draft-id',
+                        projectId: '100578',
+                    }}
+                    projectId='100578'
+                />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByTestId('billing-markup'))
+            .toHaveTextContent('0.33')
+
+        renderResult.rerender(
+            <MemoryRouter>
+                <ChallengeEditorForm
+                    challenge={{
+                        ...draftChallenge,
+                        billing: {
+                            billingAccountId: '80001063',
+                            markup: 0,
+                        },
+                        projectId: '100578',
+                    }}
+                    projectId='100578'
+                />
+            </MemoryRouter>,
+        )
+
+        await waitFor(() => {
+            expect(screen.getByTestId('billing-markup'))
+                .toHaveTextContent('0.33')
+        })
+    })
+
     it('requires an assigned member before launching a task challenge', () => {
         expect(getTaskLaunchValidationError({
             currentStatus: 'DRAFT',

src/apps/work/src/pages/challenges/ChallengeEditorPage/components/ChallengeEditorForm.tsx

@@ -825,6 +825,7 @@ export const ChallengeEditorForm: FC<ChallengeEditorFormProps> = (
     )
     const projectBillingAccountResult = useFetchProjectBillingAccount(fallbackProjectId)
     const projectBillingAccount = projectBillingAccountResult.billingAccount
+    const projectBillingAccountRef = useRef(projectBillingAccount)
     const challengesListPath = useMemo(
         () => getChallengesListPath(fallbackProjectId),
         [fallbackProjectId],
@@ -1281,6 +1282,10 @@ export const ChallengeEditorForm: FC<ChallengeEditorFormProps> = (
         challengeRef.current = props.challenge
     }, [props.challenge])
 
+    useEffect(() => {
+        projectBillingAccountRef.current = projectBillingAccount
+    }, [projectBillingAccount])
+
     useEffect(() => {
         resourceRolesRef.current = resourceRoles
     }, [resourceRoles])
@@ -1297,7 +1302,10 @@ export const ChallengeEditorForm: FC<ChallengeEditorFormProps> = (
         let isActive = true
         const challenge = challengeRef.current
         const challengeId = challenge?.id
-        const baseFormData = transformChallengeToFormData(challenge)
+        const baseFormData = applyProjectBillingToChallengeFormData(
+            transformChallengeToFormData(challenge),
+            projectBillingAccountRef.current,
+        )
 
         setCurrentChallengeId(challengeId)
         defaultedDiscussionForumTypeIdRef.current = undefined