fix: in offline approver selected is not greyed out

src/libs/WorkflowUtils.ts

@@ -125,6 +125,7 @@ function convertPolicyEmployeesToApprovalWorkflows({employees, defaultApprover,
             email,
             avatar: personalDetailsByEmail[email]?.avatar,
             displayName: personalDetailsByEmail[email]?.displayName ?? email,
+            pendingFields: employee.pendingFields,
         };
 
         if (!approvalWorkflows[submitsTo]) {
@@ -234,6 +235,9 @@ function convertApprovalWorkflowToPolicyEmployees({
             email: approver.email,
             forwardsTo,
             pendingAction,
+            pendingFields: {
+                forwardsTo: pendingAction,
+            },
         };
     });
 
@@ -250,6 +254,9 @@ function convertApprovalWorkflowToPolicyEmployees({
             ...(updatedEmployeeList[email] ? updatedEmployeeList[email] : {email}),
             submitsTo,
             pendingAction,
+            pendingFields: {
+                submitsTo: pendingAction,
+            },
         };
     });
 

src/libs/actions/Workflow.ts

@@ -182,7 +182,7 @@ function updateApprovalWorkflow(policyID: string, approvalWorkflow: ApprovalWork
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
             value: {
-                employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null}])),
+                employeeList: Object.fromEntries(Object.keys(updatedEmployees).map((key) => [key, {pendingAction: null, pendingFields: null}])),
             },
         },
     ];

src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

@@ -7,6 +7,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -18,6 +19,7 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {ApprovalWorkflowOnyx, Policy} from '@src/types/onyx';
 import type {Approver} from '@src/types/onyx/ApprovalWorkflow';
+import type {PendingAction} from '@src/types/onyx/OnyxCommon';
 
 type ApprovalWorkflowEditorProps = {
     /** The approval workflow to display */
@@ -43,6 +45,22 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
         [approverCount, toLocaleOrdinal, translate],
     );
 
+    const getApprovalPendingAction = useCallback(
+        (index: number) => {
+            let pendingAction: PendingAction | undefined;
+            if (index === 0) {
+                approvalWorkflow?.members?.forEach((member) => {
+                    pendingAction = pendingAction ?? member.pendingFields?.submitsTo;
+                });
+                return pendingAction;
+            }
+            const previousApprover = approvalWorkflow?.approvers.at(index - 1);
+            const previousMember = approvalWorkflow?.members?.find((member) => member?.email === previousApprover?.email);
+            return previousMember?.pendingFields?.forwardsTo;
+        },
+        [approvalWorkflow],
+    );
+
     const members = useMemo(() => {
         if (approvalWorkflow.isDefault) {
             return translate('workspace.common.everyone');
@@ -134,22 +152,24 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
                             : undefined;
 
                     return (
-                        <MenuItemWithTopDescription
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`approver-${approver?.email}-${approverIndex}`}
-                            title={approver?.displayName}
-                            titleStyle={styles.textNormalThemeText}
-                            wrapperStyle={styles.sectionMenuItemTopDescription}
-                            description={approverDescription(approverIndex)}
-                            descriptionTextStyle={!!approver?.displayName && styles.textLabelSupportingNormal}
-                            onPress={() => editApprover(approverIndex)}
-                            shouldShowRightIcon
-                            hintText={hintText}
-                            shouldRenderHintAsHTML
-                            brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                            errorText={errorText}
-                            shouldRenderErrorAsHTML
-                        />
+                        <OfflineWithFeedback pendingAction={getApprovalPendingAction(approverIndex)}>
+                            <MenuItemWithTopDescription
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`approver-${approver?.email}-${approverIndex}`}
+                                title={approver?.displayName}
+                                titleStyle={styles.textNormalThemeText}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                                description={approverDescription(approverIndex)}
+                                descriptionTextStyle={!!approver?.displayName && styles.textLabelSupportingNormal}
+                                onPress={() => editApprover(approverIndex)}
+                                shouldShowRightIcon
+                                hintText={hintText}
+                                shouldRenderHintAsHTML
+                                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                                errorText={errorText}
+                                shouldRenderErrorAsHTML
+                            />
+                        </OfflineWithFeedback>
                     );
                 })}
 

src/types/onyx/ApprovalWorkflow.ts

@@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest';
 import type {AvatarSource} from '@libs/UserUtils';
 import type CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import type {OnyxValueWithOfflineFeedback} from './OnyxCommon';
+import type {OnyxValueWithOfflineFeedback, PendingFields} from './OnyxCommon';
 
 /**
  * Approver in the approval workflow
@@ -55,6 +55,11 @@ type Member = {
      * Avatar URL of the current user from their personal details
      */
     avatar?: AvatarSource;
+
+    /**
+     * Pending states for offline updates
+     */
+    pendingFields?: PendingFields<'submitsTo' | 'forwardsTo'>;
 };
 
 /**

tests/unit/WorkflowUtilsTest.ts

@@ -397,8 +397,8 @@ describe('WorkflowUtils', () => {
             const convertedEmployees = WorkflowUtils.convertApprovalWorkflowToPolicyEmployees({previousEmployeeList: {}, approvalWorkflow, type: 'create'});
 
             expect(convertedEmployees).toEqual({
-                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '', submitsTo: '[email protected]'}),
-                '[email protected]': buildPolicyEmployee(2, {submitsTo: '[email protected]'}),
+                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '', submitsTo: '[email protected]', pendingFields: {submitsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(2, {submitsTo: '[email protected]', pendingFields: {submitsTo: 'add'}}),
             });
         });
 
@@ -412,12 +412,12 @@ describe('WorkflowUtils', () => {
             const convertedEmployees = WorkflowUtils.convertApprovalWorkflowToPolicyEmployees({previousEmployeeList: {}, approvalWorkflow, type: 'create'});
 
             expect(convertedEmployees).toEqual({
-                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '[email protected]'}),
-                '[email protected]': buildPolicyEmployee(2, {forwardsTo: '[email protected]'}),
-                '[email protected]': buildPolicyEmployee(3, {forwardsTo: ''}),
-                '[email protected]': buildPolicyEmployee(4, {submitsTo: '[email protected]'}),
-                '[email protected]': buildPolicyEmployee(5, {submitsTo: '[email protected]'}),
-                '[email protected]': buildPolicyEmployee(6, {submitsTo: '[email protected]'}),
+                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '[email protected]', pendingFields: {forwardsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(2, {forwardsTo: '[email protected]', pendingFields: {forwardsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(3, {forwardsTo: '', pendingFields: {forwardsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(4, {submitsTo: '[email protected]', pendingFields: {submitsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(5, {submitsTo: '[email protected]', pendingFields: {submitsTo: 'add'}}),
+                '[email protected]': buildPolicyEmployee(6, {submitsTo: '[email protected]', pendingFields: {submitsTo: 'add'}}),
             });
         });
 
@@ -431,12 +431,12 @@ describe('WorkflowUtils', () => {
             const convertedEmployees = WorkflowUtils.convertApprovalWorkflowToPolicyEmployees({previousEmployeeList: {}, approvalWorkflow, type: 'remove'});
 
             expect(convertedEmployees).toEqual({
-                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '', pendingAction: 'update'}),
-                '[email protected]': buildPolicyEmployee(2, {forwardsTo: '', pendingAction: 'update'}),
-                '[email protected]': buildPolicyEmployee(3, {forwardsTo: '', pendingAction: 'update'}),
-                '[email protected]': buildPolicyEmployee(4, {submitsTo: '', pendingAction: 'update'}),
-                '[email protected]': buildPolicyEmployee(5, {submitsTo: '', pendingAction: 'update'}),
-                '[email protected]': buildPolicyEmployee(6, {submitsTo: '', pendingAction: 'update'}),
+                '[email protected]': buildPolicyEmployee(1, {forwardsTo: '', pendingAction: 'update', pendingFields: {forwardsTo: 'update'}}),
+                '[email protected]': buildPolicyEmployee(2, {forwardsTo: '', pendingAction: 'update', pendingFields: {forwardsTo: 'update'}}),
+                '[email protected]': buildPolicyEmployee(3, {forwardsTo: '', pendingAction: 'update', pendingFields: {forwardsTo: 'update'}}),
+                '[email protected]': buildPolicyEmployee(4, {submitsTo: '', pendingAction: 'update', pendingFields: {submitsTo: 'update'}}),
+                '[email protected]': buildPolicyEmployee(5, {submitsTo: '', pendingAction: 'update', pendingFields: {submitsTo: 'update'}}),
+                '[email protected]': buildPolicyEmployee(6, {submitsTo: '', pendingAction: 'update', pendingFields: {submitsTo: 'update'}}),
             });
         });
     });