[No QA][HR Import] Final approver page

src/languages/de.ts

@@ -7154,6 +7154,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
             connectionDescription: (providerName: string) => `Verbinden Sie ${providerName}, um Mitarbeitergenehmigungen mit Ihrem Workspace zu synchronisieren.`,
             approvalMode: 'Genehmigungsmodus',
             finalApprover: 'Endgültige:r Genehmiger:in',
+            providerFinalApprover: (providerName: string) => `${providerName} Endgenehmigende*r`,
             notSet: 'Nicht festgelegt',
             approvalModeDescription: (providerName: string) => `Mitglieder und Manager sind für die Synchronisation mit ${providerName} eingerichtet.`,
             approvalModeWarningTitle: 'Genehmigungsmodus ändern?',

src/languages/en.ts

@@ -6456,6 +6456,7 @@ const translations = {
             connectionDescription: (providerName: string) => `Connect ${providerName} to keep employee approvals in sync with your workspace.`,
             approvalMode: 'Approval mode',
             finalApprover: 'Final approver',
+            providerFinalApprover: (providerName: string) => `${providerName} final approver`,
             notSet: 'Not set',
             approvalModeDescription: (providerName: string) => `Members and managers are set up to sync with ${providerName}.`,
             approvalModeWarningTitle: 'Change approval mode?',

src/languages/es.ts

@@ -6269,6 +6269,7 @@ ${amount} para ${merchant} - ${date}`,
             connectionDescription: (providerName: string) => `Conecta ${providerName} para mantener sincronizadas las aprobaciones de empleados con tu espacio de trabajo.`,
             approvalMode: 'Modo de aprobación',
             finalApprover: 'Aprobador final',
+            providerFinalApprover: (providerName: string) => `Aprobador final de ${providerName}`,
             notSet: 'No configurado',
             approvalModeDescription: (providerName: string) => `Los miembros y gerentes están configurados para sincronizarse con ${providerName}.`,
             approvalModeWarningTitle: '¿Cambiar modo de aprobación?',

src/languages/fr.ts

@@ -7177,6 +7177,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
             connectionDescription: (providerName: string) => `Connectez ${providerName} pour synchroniser les approbations des employés avec votre espace de travail.`,
             approvalMode: "Mode d'approbation",
             finalApprover: 'Approbateur final',
+            providerFinalApprover: (providerName: string) => `Approbateur final ${providerName}`,
             notSet: 'Non défini',
             approvalModeDescription: (providerName: string) => `Les membres et les responsables sont configurés pour se synchroniser avec ${providerName}.`,
             approvalModeWarningTitle: 'Changer le mode d’approbation ?',

src/languages/it.ts

@@ -7141,6 +7141,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
             connectionDescription: (providerName: string) => `Collega ${providerName} per mantenere sincronizzate le approvazioni dei dipendenti con il tuo spazio di lavoro.`,
             approvalMode: 'Modalità di approvazione',
             finalApprover: 'Approvatore finale',
+            providerFinalApprover: (providerName: string) => `Approvatore finale ${providerName}`,
             notSet: 'Non impostato',
             approvalModeDescription: (providerName: string) => `I membri e i responsabili sono configurati per la sincronizzazione con ${providerName}.`,
             approvalModeWarningTitle: 'Cambiare modalità di approvazione?',

src/languages/ja.ts

@@ -7060,6 +7060,7 @@ ${reportName}
             connectionDescription: (providerName: string) => `${providerName}を接続して、従業員の承認をワークスペースと同期させましょう。`,
             approvalMode: '承認モード',
             finalApprover: '最終承認者',
+            providerFinalApprover: (providerName: string) => `${providerName} 最終承認者`,
             notSet: '未設定',
             approvalModeDescription: (providerName: string) => `メンバーとマネージャーは ${providerName} と同期するように設定されています。`,
             approvalModeWarningTitle: '承認モードを変更しますか？',

src/languages/nl.ts

@@ -7116,6 +7116,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
             connectionDescription: (providerName: string) => `Verbind ${providerName} om goedkeuringen van werknemers gesynchroniseerd te houden met je werkruimte.`,
             approvalMode: 'Goedkeuringsmodus',
             finalApprover: 'Eindgoedkeurder',
+            providerFinalApprover: (providerName: string) => `Laatste ${providerName}-fiatteur`,
             notSet: 'Niet ingesteld',
             approvalModeDescription: (providerName: string) => `Leden en managers zijn ingesteld om te synchroniseren met ${providerName}.`,
             approvalModeWarningTitle: 'Goedkeuringsmodus wijzigen?',

src/languages/pl.ts

@@ -7111,6 +7111,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
             connectionDescription: (providerName: string) => `Połącz ${providerName}, aby synchronizować akceptacje pracowników z Twoim miejscem pracy.`,
             approvalMode: 'Tryb zatwierdzania',
             finalApprover: 'Ostateczny zatwierdzający',
+            providerFinalApprover: (providerName: string) => `Ostateczny zatwierdzający ${providerName}`,
             notSet: 'Nie ustawiono',
             approvalModeDescription: (providerName: string) => `Członkowie i menedżerowie są skonfigurowani do synchronizacji z ${providerName}.`,
             approvalModeWarningTitle: 'Zmienić tryb zatwierdzania?',

src/languages/pt-BR.ts

@@ -7116,6 +7116,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
             connectionDescription: (providerName: string) => `Conecte ${providerName} para manter as aprovações de funcionários sincronizadas com seu workspace.`,
             approvalMode: 'Modo de aprovação',
             finalApprover: 'Aprovador final',
+            providerFinalApprover: (providerName: string) => `Aprovador final de ${providerName}`,
             notSet: 'Não definido',
             approvalModeDescription: (providerName: string) => `Membros e gerentes estão configurados para sincronizar com ${providerName}.`,
             approvalModeWarningTitle: 'Alterar modo de aprovação?',

src/languages/zh-hans.ts

@@ -6933,6 +6933,7 @@ ${reportName}
             connectionDescription: (providerName: string) => `连接 ${providerName}，以在您的工作区中同步员工审批。`,
             approvalMode: '审批模式',
             finalApprover: '最终审批人',
+            providerFinalApprover: (providerName: string) => `${providerName} 最终审批人`,
             notSet: '未设置',
             approvalModeDescription: (providerName: string) => `成员和管理员已设置为与 ${providerName} 同步。`,
             approvalModeWarningTitle: '更改审批模式？',

src/libs/actions/connections/MergeHR.ts

@@ -1,6 +1,6 @@
 import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
+import type {TupleToUnion, ValueOf} from 'type-fest';
 import {write} from '@libs/API';
 import type {ConnectPolicyToMergeParams} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
@@ -184,6 +184,25 @@ function updateMergeHRFinalApprover(policyID: string, finalApprover: string | nu
     );
 }
 
-export {syncMergeHR, updateMergeHRApprovalMode, updateMergeHRFinalApprover};
+type HRProviderName = TupleToUnion<typeof CONST.POLICY.CONNECTIONS.HR_CONNECTION_NAMES>;
+
+type HRConnectionErrorFieldName = 'approvalMode' | 'finalApprover';
+
+function clearHRConnectionErrorField(policyID: string | undefined, provider: HRProviderName | undefined, fieldName: HRConnectionErrorFieldName) {
+    if (!policyID || !provider) {
+        return;
+    }
+    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
+        connections: {
+            [provider]: {
+                config: {
+                    errorFields: {[fieldName]: null},
+                },
+            },
+        },
+    });
+}
+
+export {syncMergeHR, updateMergeHRApprovalMode, updateMergeHRFinalApprover, clearHRConnectionErrorField};
 
 export default getMergeHRSetupLink;

src/pages/workspace/hr/HRFinalApproverPageBase.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import WorkspaceMembersSelectionList from '@components/WorkspaceMembersSelectionList';
+import useOnyx from '@hooks/useOnyx';
+import usePermissions from '@hooks/usePermissions';
+import usePolicy from '@hooks/usePolicy';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type Beta from '@src/types/onyx/Beta';
+import type {PolicyConnectionSyncProgress} from '@src/types/onyx/Policy';
+import type Policy from '@src/types/onyx/Policy';
+
+type HRFinalApproverProviderConfig = {
+    testID: string;
+    beta: Beta;
+    isConnected: (policy: OnyxEntry<Policy>) => boolean;
+    getCurrentFinalApprover: (policy: OnyxEntry<Policy>) => string | null;
+    getHeaderTitle: (providerName: string) => string;
+    getProviderName: (policy: OnyxEntry<Policy>) => string;
+    handleSave: (params: {policyID: string; email: string; currentFinalApprover: string | null; connectionSyncProgress?: OnyxEntry<PolicyConnectionSyncProgress>}) => void;
+};
+
+type HRFinalApproverPageBaseProps = {
+    policyID: string;
+    config: HRFinalApproverProviderConfig;
+};
+
+function HRFinalApproverPageBase({policyID, config}: HRFinalApproverPageBaseProps) {
+    const styles = useThemeStyles();
+    const {isBetaEnabled} = usePermissions();
+    const policy = usePolicy(policyID);
+    const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
+    const finalApprover = config.getCurrentFinalApprover(policy);
+    const providerName = config.getProviderName(policy);
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.IS_HR_ENABLED}
+            shouldBeBlocked={!isBetaEnabled(config.beta) || (!!policy && !config.isConnected(policy))}
+        >
+            <ScreenWrapper
+                enableEdgeToEdgeBottomSafeAreaPadding
+                style={[styles.defaultModalContainer]}
+                testID={config.testID}
+                shouldEnableMaxHeight
+            >
+                <HeaderWithBackButton
+                    title={config.getHeaderTitle(providerName)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_HR.getRoute(policyID))}
+                />
+                <WorkspaceMembersSelectionList
+                    policyID={policyID}
+                    selectedApprover={finalApprover ?? ''}
+                    setApprover={(email) => {
+                        config.handleSave({policyID, email, currentFinalApprover: finalApprover, connectionSyncProgress});
+                        Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.WORKSPACE_HR.getRoute(policyID)));
+                    }}
+                />
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
+    );
+}
+
+export type {HRFinalApproverProviderConfig};
+export default HRFinalApproverPageBase;

src/pages/workspace/hr/HRProviderCard.tsx

@@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {removePolicyConnection, syncConnection} from '@libs/actions/connections';
+import {clearHRConnectionErrorField} from '@libs/actions/connections/MergeHR';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import type Policy from '@src/types/onyx/Policy';
@@ -145,7 +146,11 @@ function HRProviderCard({card, policy, handleConnect}: HRProviderCardProps) {
                 </OfflineWithFeedback>
             )}
             {card.isConnected && !!finalApproverRoute && (
-                <OfflineWithFeedback pendingAction={card.config?.pendingFields?.finalApprover}>
+                <OfflineWithFeedback
+                    pendingAction={card.config?.pendingFields?.finalApprover}
+                    errors={card.config?.errorFields?.approvalMode}
+                    onClose={() => clearHRConnectionErrorField(policy?.id, card.connectionName, 'finalApprover')}
+                >
                     <MenuItemWithTopDescription
                         description={translate('workspace.hr.finalApprover')}
                         title={card.finalApproverDisplayName}

src/pages/workspace/hr/gusto/GustoFinalApproverPage.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
-import WorkspaceMembersSelectionList from '@components/WorkspaceMembersSelectionList';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
-import usePermissions from '@hooks/usePermissions';
-import usePolicy from '@hooks/usePolicy';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {updateGustoFinalApprover} from '@libs/actions/connections/Gusto';
-import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {isGustoConnected} from '@libs/PolicyUtils';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import HRFinalApproverPageBase from '@pages/workspace/hr/HRFinalApproverPageBase';
+import type {HRFinalApproverProviderConfig} from '@pages/workspace/hr/HRFinalApproverPageBase';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
 type GustoFinalApproverPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.HR_GUSTO_FINAL_APPROVER>;
@@ -25,40 +16,23 @@ function GustoFinalApproverPage({
         params: {policyID},
     },
 }: GustoFinalApproverPageProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isBetaEnabled} = usePermissions();
-    const policy = usePolicy(policyID);
-    const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policyID}`);
-    const finalApprover = policy?.connections?.gusto?.config?.finalApprover ?? null;
+
+    const config: HRFinalApproverProviderConfig = {
+        testID: 'GustoFinalApproverPage',
+        beta: CONST.BETAS.GUSTO,
+        isConnected: isGustoConnected,
+        getCurrentFinalApprover: (policy) => policy?.connections?.gusto?.config?.finalApprover ?? null,
+        getProviderName: () => translate('workspace.hr.gusto.title'),
+        getHeaderTitle: () => translate('workspace.hr.finalApprover'),
+        handleSave: ({policyID: id, email, currentFinalApprover, connectionSyncProgress}) => updateGustoFinalApprover(id, email, currentFinalApprover, connectionSyncProgress),
+    };
 
     return (
-        <AccessOrNotFoundWrapper
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
+        <HRFinalApproverPageBase
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.IS_HR_ENABLED}
-            shouldBeBlocked={!isBetaEnabled(CONST.BETAS.GUSTO) || (!!policy && !isGustoConnected(policy))}
-        >
-            <ScreenWrapper
-                enableEdgeToEdgeBottomSafeAreaPadding
-                style={[styles.defaultModalContainer]}
-                testID="GustoFinalApproverPage"
-                shouldEnableMaxHeight
-            >
-                <HeaderWithBackButton
-                    title={translate('workspace.hr.finalApprover')}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_HR.getRoute(policyID))}
-                />
-                <WorkspaceMembersSelectionList
-                    policyID={policyID}
-                    selectedApprover={finalApprover ?? ''}
-                    setApprover={(email) => {
-                        updateGustoFinalApprover(policyID, email, finalApprover, connectionSyncProgress);
-                        Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.goBack(ROUTES.WORKSPACE_HR.getRoute(policyID)));
-                    }}
-                />
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+            config={config}
+        />
     );
 }
 

src/pages/workspace/hr/merge/MergeHRFinalApproverPage.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
-import usePermissions from '@hooks/usePermissions';
-import Navigation from '@libs/Navigation/Navigation';
+import {updateMergeHRFinalApprover} from '@libs/actions/connections/MergeHR';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import {getConnectedHRProvider, isMergeHRConnected} from '@libs/PolicyUtils';
+import HRFinalApproverPageBase from '@pages/workspace/hr/HRFinalApproverPageBase';
+import type {HRFinalApproverProviderConfig} from '@pages/workspace/hr/HRFinalApproverPageBase';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
 
@@ -18,22 +17,22 @@ function MergeHRFinalApproverPage({
     },
 }: MergeHRFinalApproverPageProps) {
     const {translate} = useLocalize();
-    const {isBetaEnabled} = usePermissions();
+
+    const config: HRFinalApproverProviderConfig = {
+        testID: 'MergeHRFinalApproverPage',
+        beta: CONST.BETAS.MERGE_HR,
+        isConnected: isMergeHRConnected,
+        getCurrentFinalApprover: (policy) => policy?.connections?.merge_hris?.config?.finalApprover ?? null,
+        getProviderName: (policy) => getConnectedHRProvider(policy)?.displayName ?? CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY.merge_hris,
+        getHeaderTitle: (providerName) => translate('workspace.hr.providerFinalApprover', providerName),
+        handleSave: ({policyID: id, email, currentFinalApprover}) => updateMergeHRFinalApprover(id, email, currentFinalApprover),
+    };
 
     return (
-        <AccessOrNotFoundWrapper
-            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
+        <HRFinalApproverPageBase
             policyID={policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.IS_HR_ENABLED}
-            shouldBeBlocked={!isBetaEnabled(CONST.BETAS.MERGE_HR)}
-        >
-            <ScreenWrapper testID="MergeHRFinalApproverPage">
-                <HeaderWithBackButton
-                    title={translate('workspace.hr.finalApprover')}
-                    onBackButtonPress={() => Navigation.goBack()}
-                />
-            </ScreenWrapper>
-        </AccessOrNotFoundWrapper>
+            config={config}
+        />
     );
 }