[HR Import] MergeHRApprovalModePage (Basic / Manager / Custom) [F09]

[francoisl]

• Part of project Integrate with merge.dev to adopt widespread HR import
• Parent issue (internal)
• Design doc

---

Task

Build the shared approval-mode page used by every Merge HR provider. It lets an admin choose how approval chains are constructed when the policy syncs from the connected HR system (Workday, HiBob, BambooHR, etc.).

This page is reached from the HR card on the workspace HR page: tap the "Approval mode" push row on a connected provider's card. It lives in the right-hand pane (RHP), routed via ROUTES.WORKSPACE_HR_MERGE_APPROVAL_MODE from F2. Because the page is parameterized on connectionName, one implementation services every Merge provider — adding a new provider in Release 2 won't require any new pages.

Files to create:

• src/pages/workspace/hr/merge/MergeHRApprovalModePage.tsx — the page itself.
• src/pages/workspace/hr/merge/utils.ts — add helper getMergeHRApprovalModeLabel(policy, connectionName): string that returns the human-readable label for the policy's current approval mode (e.g. "Manager"). Used by the parent HR card's "Approval mode" push row to render the current setting.

Page layout:

• Header with a back arrow and title <Provider> approval mode (e.g. "Workday approval mode"). <Provider> is resolved from MERGE_HR_PROVIDERS[providerSlug].displayName using the connectionName route param.
• A radio-style selector with three options, each with a short subtitle:
  • Basic — Submitters and approvers are the same person; no approval routing.
  • Manager — Routes each report to the submitter's manager, following the HR provider's hierarchy.
  • Custom — Approval chains are configured manually in Workflows.
• A Save button (footer / screen button), enabled only when the selected mode differs from the saved mode.
• On mount, pre-select the current mode from policy.connections[connectionName].config.approvalMode.

Save flow:

• The page does NOT save on selection (unlike most push-row settings). The user picks a mode → taps Save → sees a confirmation modal → confirms. This matches the Gusto approval-mode page.
• Modal copy: roughly "Changing the approval mode will rebuild approval chains and trigger a re-sync from {{provider}}. Continue?" — exact wording lives in the translation strings added in F13.
• On confirm, call updateMergeHRApprovalMode(policyID, connectionName, newMode) from F5. That action writes optimistically to Onyx (Pattern B) and calls the backend. Then navigate back to the HR page.
• If the user taps Save with the current mode still selected (no change), skip the modal and navigate back.

Mirror Gusto's approval-mode page. Everything above matches what the Gusto project built for its equivalent page. The only structural difference is that this page reads connectionName from the route, looks up providerInfo from MERGE_HR_PROVIDERS, and parameterizes the title plus every translated string on providerName so a single page services every Merge provider.

Dependencies: F1 (provider map + types), F2 (route + screen), F5 (the updateMergeHRApprovalMode action).

Issue Owner

Current Issue Owner: @bernhardoj

[jmusial]

Draft PR here waiting for an upstream PR to merge