Merge pull request #45992 from software-mansion-labs/approval-workflo…

…ws/beta [CRITICAL] [Advanced Approval Workflows] Remove delayed submission beta, add advanced approval beta
Expensify · Jul 24, 2024 · 46184d0 · 46184d0
2 parents b3ddfd5 + 82745c6
commit 46184d0
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 59 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -366,7 +366,7 @@ const CONST = {
         VIOLATIONS: 'violations',
         DUPE_DETECTION: 'dupeDetection',
         P2P_DISTANCE_REQUESTS: 'p2pDistanceRequests',
-        WORKFLOWS_DELAYED_SUBMISSION: 'workflowsDelayedSubmission',
+        WORKFLOWS_ADVANCED_APPROVAL: 'workflowsAdvancedApproval',
         SPOTNANA_TRAVEL: 'spotnanaTravel',
         REPORT_FIELDS_FEATURE: 'reportFieldsFeature',
         WORKSPACE_FEEDS: 'workspaceFeeds',

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1242,6 +1242,7 @@ export default {
         submissionFrequency: 'Submission frequency',
         submissionFrequencyDateOfMonth: 'Date of month',
         addApprovalsTitle: 'Add approvals',
+        addApprovalButton: 'Add approval workflow',
         approver: 'Approver',
         connectBankAccount: 'Connect bank account',
         addApprovalsDescription: 'Require additional approval before authorizing a payment.',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1251,6 +1251,7 @@ export default {
         submissionFrequency: 'Frecuencia de envíos',
         submissionFrequencyDateOfMonth: 'Fecha del mes',
         addApprovalsTitle: 'Requerir aprobaciones',
+        addApprovalButton: 'Añadir flujo de aprobación',
         approver: 'Aprobador',
         connectBankAccount: 'Conectar cuenta bancaria',
         addApprovalsDescription: 'Requiere una aprobación adicional antes de autorizar un pago.',

diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
@@ -28,8 +28,8 @@ function canUseP2PDistanceRequests(betas: OnyxEntry<Beta[]>, iouType: IOUType |
     return !!betas?.includes(CONST.BETAS.P2P_DISTANCE_REQUESTS) || canUseAllBetas(betas) || iouType === CONST.IOU.TYPE.TRACK;
 }
 
-function canUseWorkflowsDelayedSubmission(betas: OnyxEntry<Beta[]>): boolean {
-    return !!betas?.includes(CONST.BETAS.WORKFLOWS_DELAYED_SUBMISSION) || canUseAllBetas(betas);
+function canUseWorkflowsAdvancedApproval(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.WORKFLOWS_ADVANCED_APPROVAL) || canUseAllBetas(betas);
 }
 
 function canUseSpotnanaTravel(betas: OnyxEntry<Beta[]>): boolean {
@@ -66,7 +66,7 @@ export default {
     canUseViolations,
     canUseDupeDetection,
     canUseP2PDistanceRequests,
-    canUseWorkflowsDelayedSubmission,
+    canUseWorkflowsAdvancedApproval,
     canUseSpotnanaTravel,
     canUseSageIntacctIntegration,
     canUseReportFieldsFeature,

diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -5,6 +5,7 @@ import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
+import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -52,7 +53,7 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
     const policyApproverEmail = policy?.approver;
     const policyApproverName = useMemo(() => PersonalDetailsUtils.getPersonalDetailByEmail(policyApproverEmail ?? '')?.displayName ?? policyApproverEmail, [policyApproverEmail]);
     const containerStyle = useMemo(() => [styles.ph8, styles.mhn8, styles.ml11, styles.pv3, styles.pr0, styles.pl4, styles.mr0, styles.widthAuto, styles.mt4], [styles]);
-    const canUseDelayedSubmission = Permissions.canUseWorkflowsDelayedSubmission(betas);
+    const canUseAdvancedApproval = Permissions.canUseWorkflowsAdvancedApproval(betas);
     const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false);
 
     const displayNameForAuthorizedPayer = useMemo(
@@ -97,65 +98,76 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
         const hasDelayedSubmissionError = !!policy?.errorFields?.autoReporting;
 
         return [
-            ...(canUseDelayedSubmission
-                ? [
-                      {
-                          icon: Illustrations.ReceiptEnvelope,
-                          title: translate('workflowsPage.delaySubmissionTitle'),
-                          subtitle: translate('workflowsPage.delaySubmissionDescription'),
-                          switchAccessibilityLabel: translate('workflowsPage.delaySubmissionDescription'),
-                          onToggle: (isEnabled: boolean) => {
-                              Policy.setWorkspaceAutoReportingFrequency(
-                                  route.params.policyID,
-                                  isEnabled ? CONST.POLICY.AUTO_REPORTING_FREQUENCIES.WEEKLY : CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT,
-                              );
-                          },
-                          subMenuItems: (
-                              <MenuItem
-                                  title={translate('workflowsPage.submissionFrequency')}
-                                  titleStyle={styles.textLabelSupportingNormal}
-                                  descriptionTextStyle={styles.textNormalThemeText}
-                                  onPress={onPressAutoReportingFrequency}
-                                  // Instant submit is the equivalent of delayed submissions being turned off, so we show the feature as disabled if the frequency is instant
-                                  description={
-                                      getAutoReportingFrequencyDisplayNames(preferredLocale)[
-                                          (PolicyUtils.getCorrectedAutoReportingFrequency(policy) as AutoReportingFrequencyKey) ?? CONST.POLICY.AUTO_REPORTING_FREQUENCIES.WEEKLY
-                                      ]
-                                  }
-                                  shouldShowRightIcon
-                                  wrapperStyle={containerStyle}
-                                  hoverAndPressStyle={[styles.mr0, styles.br2]}
-                                  brickRoadIndicator={hasDelayedSubmissionError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                              />
-                          ),
-                          isActive: (policy?.autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT && !hasDelayedSubmissionError) ?? false,
-                          pendingAction: policy?.pendingFields?.autoReporting,
-                          errors: ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING),
-                          onCloseError: () => Policy.clearPolicyErrorField(policy?.id ?? '-1', CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING),
-                      },
-                  ]
-                : []),
             {
-                icon: Illustrations.Approval,
-                title: translate('workflowsPage.addApprovalsTitle'),
-                subtitle: translate('workflowsPage.addApprovalsDescription'),
-                switchAccessibilityLabel: translate('workflowsPage.addApprovalsDescription'),
+                icon: Illustrations.ReceiptEnvelope,
+                title: translate('workflowsPage.delaySubmissionTitle'),
+                subtitle: translate('workflowsPage.delaySubmissionDescription'),
+                switchAccessibilityLabel: translate('workflowsPage.delaySubmissionDescription'),
                 onToggle: (isEnabled: boolean) => {
-                    Policy.setWorkspaceApprovalMode(route.params.policyID, policy?.owner ?? '', isEnabled ? CONST.POLICY.APPROVAL_MODE.BASIC : CONST.POLICY.APPROVAL_MODE.OPTIONAL);
+                    Policy.setWorkspaceAutoReportingFrequency(
+                        route.params.policyID,
+                        isEnabled ? CONST.POLICY.AUTO_REPORTING_FREQUENCIES.WEEKLY : CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT,
+                    );
                 },
                 subMenuItems: (
                     <MenuItem
-                        title={translate('workflowsPage.approver')}
+                        title={translate('workflowsPage.submissionFrequency')}
                         titleStyle={styles.textLabelSupportingNormal}
                         descriptionTextStyle={styles.textNormalThemeText}
-                        description={policyApproverName ?? ''}
-                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVER.getRoute(route.params.policyID))}
+                        onPress={onPressAutoReportingFrequency}
+                        // Instant submit is the equivalent of delayed submissions being turned off, so we show the feature as disabled if the frequency is instant
+                        description={
+                            getAutoReportingFrequencyDisplayNames(preferredLocale)[
+                                (PolicyUtils.getCorrectedAutoReportingFrequency(policy) as AutoReportingFrequencyKey) ?? CONST.POLICY.AUTO_REPORTING_FREQUENCIES.WEEKLY
+                            ]
+                        }
                         shouldShowRightIcon
                         wrapperStyle={containerStyle}
                         hoverAndPressStyle={[styles.mr0, styles.br2]}
-                        brickRoadIndicator={hasApprovalError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                        brickRoadIndicator={hasDelayedSubmissionError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                     />
                 ),
+                isActive: (policy?.autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT && !hasDelayedSubmissionError) ?? false,
+                pendingAction: policy?.pendingFields?.autoReporting,
+                errors: ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING),
+                onCloseError: () => Policy.clearPolicyErrorField(policy?.id ?? '-1', CONST.POLICY.COLLECTION_KEYS.AUTOREPORTING),
+            },
+            {
+                icon: Illustrations.Approval,
+                title: translate('workflowsPage.addApprovalsTitle'),
+                subtitle: translate('workflowsPage.addApprovalsDescription'),
+                switchAccessibilityLabel: translate('workflowsPage.addApprovalsDescription'),
+                onToggle: (isEnabled: boolean) => {
+                    Policy.setWorkspaceApprovalMode(route.params.policyID, policy?.owner ?? '', isEnabled ? CONST.POLICY.APPROVAL_MODE.BASIC : CONST.POLICY.APPROVAL_MODE.OPTIONAL);
+                },
+                subMenuItems: (
+                    <>
+                        <MenuItem
+                            title={translate('workflowsPage.approver')}
+                            titleStyle={styles.textLabelSupportingNormal}
+                            descriptionTextStyle={styles.textNormalThemeText}
+                            description={policyApproverName ?? ''}
+                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVER.getRoute(route.params.policyID))}
+                            shouldShowRightIcon
+                            wrapperStyle={containerStyle}
+                            hoverAndPressStyle={[styles.mr0, styles.br2]}
+                            brickRoadIndicator={hasApprovalError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                        />
+                        {/* TODO: Functionality for this button will be added in a future PR (https://github.com/Expensify/App/issues/45954) */}
+                        {canUseAdvancedApproval && (
+                            <MenuItem
+                                title={translate('workflowsPage.addApprovalButton')}
+                                titleStyle={styles.textStrong}
+                                icon={Expensicons.Plus}
+                                iconHeight={20}
+                                iconWidth={20}
+                                iconFill={theme.success}
+                                style={[styles.ph2, styles.ml11, styles.widthAuto]}
+                                hoverAndPressStyle={[styles.mr0, styles.br2]}
+                            />
+                        )}
+                    </>
+                ),
                 isActive: (policy?.approvalMode === CONST.POLICY.APPROVAL_MODE.BASIC && !hasApprovalError) ?? false,
                 pendingAction: policy?.pendingFields?.approvalMode,
                 errors: ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.COLLECTION_KEYS.APPROVAL_MODE),
@@ -238,18 +250,18 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
         ];
     }, [
         policy,
-        route.params.policyID,
-        styles,
         translate,
-        policyApproverName,
-        containerStyle,
+        styles,
         onPressAutoReportingFrequency,
         preferredLocale,
-        canUseDelayedSubmission,
-        displayNameForAuthorizedPayer,
+        containerStyle,
+        policyApproverName,
+        canUseAdvancedApproval,
+        theme,
         isOffline,
         isPolicyAdmin,
-        theme,
+        displayNameForAuthorizedPayer,
+        route.params.policyID,
     ]);
 
     const renderOptionItem = (item: ToggleSettingOptionRowProps, index: number) => (