section ready, subsections not working

Expensify · Jul 31, 2024 · c91b34a · c91b34a
1 parent 9e72afd
commit c91b34a
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 95 deletions.
diff --git a/assets/images/user-check.svg b/assets/images/user-check.svg
diff --git a/src/components/ApprovalWorkflowSection.tsx b/src/components/ApprovalWorkflowSection.tsx
@@ -1,112 +1,50 @@
 import React from 'react';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow';
-// import type {Approver, Member} from '@src/types/onyx/ApprovalWorkflow';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import MenuItem from './MenuItem';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import Text from './Text';
 
-// MEMBER
-// {
-//     email: string;
-//     avatar?: AvatarSource;
-//     displayName?: string;
-// }
-
-// type Approver = {
-//     email: string;
-//     forwardsTo?: string;
-//     avatar?: AvatarSource;
-//     displayName?: string;
-//     isInMultipleWorkflows: boolean;
-//     isCircularReference?: boolean;
-// };
-
-// const mockApprover1 = {
-//     email: 'dx@gmail.com',
-//     forwardsTo: 'dx@gmail.com',
-//     avatar: undefined,
-//     displayName: 'dx',
-//     isInMultipleWorkflows: false,
-//     isCircularReference: true,
-// };
-
-// const mockApprover2 = {
-//     email: 'xd@gmail.com',
-//     forwardsTo: 'xd@gmail.com',
-//     avatar: undefined,
-//     displayName: 'xd',
-//     isInMultipleWorkflows: false,
-//     isCircularReference: true,
-// };
-
-// const mockMember1 = {
-//     email: 'xdd@gmail.com',
-//     avatar: undefined,
-//     displayName: 'xdd',
-// };
-
-// const mockMember2 = {
-//     email: 'ddx@gmail.com',
-//     avatar: undefined,
-//     displayName: 'ddx',
-// };
-
-// const mockWorkflow: ApprovalWorkflow = {
-//     members: [mockMember1, mockMember2],
-//     approvers: [mockApprover1, mockApprover2],
-//     isDefault: false,
-//     isBeingEdited: false,
-//     isLoading: false,
-// };
-
-// type ApprovalWorkflow = {
-//     members: Member[];
-//     approvers: Approver[];
-//     isDefault: boolean;
-//     isBeingEdited: boolean;
-//     isLoading?: boolean;
-// };
-
 function ApprovalWorkflowSection({approvalWorkflow}: {approvalWorkflow: ApprovalWorkflow}) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    // const approvalWorkflow = approvalWorkflow1 ?? mockWorkflow;
+    const {translate} = useLocalize();
 
     return (
         <PressableWithFeedback
             accessibilityRole="button"
             style={[styles.border, styles.p4, styles.flexRow, styles.justifyContentBetween, styles.mt6, styles.mbn3]}
             onPress={() => {}}
-            accessibilityLabel="WORKSHOP THIS"
+            accessibilityLabel={translate('workflowsPage.addApprovalsTitle')}
         >
             <View style={[styles.flex1]}>
                 {approvalWorkflow.isDefault && (
-                    <View style={[styles.flexRow, styles.mb4]}>
+                    <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
                         <Icon
                             src={Expensicons.Lightbulb}
                             fill={theme.icon}
-                            additionalStyles={styles.mr3}
+                            additionalStyles={styles.mr2}
+                            small
                         />
                         <Text
                             style={[styles.textLabelSupportingNormal]}
                             suppressHighlighting
                         >
-                            This default workflow applies to all members, unless a more specific workflow exists.
+                            {translate('workflowsPage.addApprovalTip')}
                         </Text>
                     </View>
                 )}
-
                 <MenuItem
-                    title="Expenses from"
+                    title={translate('workflowsExpensesFromPage.title')}
                     style={styles.p0}
-                    titleStyle={[styles.textMicro, styles.colorMuted]}
+                    titleStyle={styles.textLabelSupportingNormal}
                     descriptionTextStyle={styles.textNormalThemeText}
-                    description={approvalWorkflow.isDefault ? 'Everyone' : approvalWorkflow.members.map((m) => m.displayName).join(', ')}
+                    description={approvalWorkflow.isDefault ? translate('workspace.common.everyone') : approvalWorkflow.members.map((m) => m.displayName).join(', ')}
                     icon={Expensicons.Users}
                     iconHeight={20}
                     iconWidth={20}
@@ -118,12 +56,12 @@ function ApprovalWorkflowSection({approvalWorkflow}: {approvalWorkflow: Approval
                     <View key={approver.email}>
                         <View style={{height: 16, width: 1, backgroundColor: theme.border, marginLeft: 19}} />
                         <MenuItem
-                            title="Approver"
+                            title={translate('workflowsPage.approver')}
                             style={styles.p0}
                             titleStyle={styles.textLabelSupportingNormal}
                             descriptionTextStyle={styles.textNormalThemeText}
                             description={approver.displayName}
-                            icon={Expensicons.User}
+                            icon={Expensicons.UserCheck}
                             iconHeight={20}
                             iconWidth={20}
                             iconFill={theme.icon}

diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -175,6 +175,7 @@ import Trashcan from '@assets/images/trashcan.svg';
 import Unlock from '@assets/images/unlock.svg';
 import UploadAlt from '@assets/images/upload-alt.svg';
 import Upload from '@assets/images/upload.svg';
+import UserCheck from '@assets/images/user-check.svg';
 import User from '@assets/images/user.svg';
 import Users from '@assets/images/users.svg';
 import VolumeHigh from '@assets/images/volume-high.svg';
@@ -346,6 +347,7 @@ export {
     Upload,
     UploadAlt,
     User,
+    UserCheck,
     Users,
     VolumeHigh,
     VolumeLow,

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1244,6 +1244,7 @@ export default {
         submissionFrequencyDateOfMonth: 'Date of month',
         addApprovalsTitle: 'Add approvals',
         addApprovalButton: 'Add approval workflow',
+        addApprovalTip: 'This default workflow applies to all members, unless a more specific workflow exists',
         approver: 'Approver',
         connectBankAccount: 'Connect bank account',
         addApprovalsDescription: 'Require additional approval before authorizing a payment.',
@@ -2033,6 +2034,7 @@ export default {
             edit: 'Edit workspace',
             enabled: 'Enabled',
             disabled: 'Disabled',
+            everyone: 'Everyone',
             delete: 'Delete workspace',
             settings: 'Settings',
             reimburse: 'Reimbursements',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1253,6 +1253,7 @@ export default {
         submissionFrequencyDateOfMonth: 'Fecha del mes',
         addApprovalsTitle: 'Requerir aprobaciones',
         addApprovalButton: 'Añadir flujo de aprobación',
+        addApprovalTip: 'Este flujo de trabajo por defecto se aplica a todos los miembros, a menos que exista un flujo de trabajo más específico',
         approver: 'Aprobador',
         connectBankAccount: 'Conectar cuenta bancaria',
         addApprovalsDescription: 'Requiere una aprobación adicional antes de autorizar un pago.',
@@ -2068,6 +2069,7 @@ export default {
             edit: 'Editar espacio de trabajo',
             enabled: 'Activada',
             disabled: 'Desactivada',
+            everyone: 'Todos',
             delete: 'Eliminar espacio de trabajo',
             settings: 'Configuración',
             reimburse: 'Reembolsos',

diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -3,7 +3,8 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
+import ApprovalWorkflowSection from '@components/ApprovalWorkflowSection';
 import ConfirmModal from '@components/ConfirmModal';
 import getBankIcon from '@components/Icon/BankIcons';
 import type {BankName} from '@components/Icon/BankIconsUtils';
@@ -25,6 +26,7 @@ import {getPaymentMethodDescription} from '@libs/PaymentUtils';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import {convertPolicyEmployeesToApprovalWorkflows} from '@libs/WorkflowUtils';
 import type {FullScreenNavigatorParamList} from '@navigation/types';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
@@ -59,6 +61,9 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
     const canUseAdvancedApproval = Permissions.canUseWorkflowsAdvancedApproval(betas);
     const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false);
 
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const workflows = convertPolicyEmployeesToApprovalWorkflows({employees: policy?.employeeList ?? {}, defaultApprover: policyApproverEmail ?? '', personalDetails: personalDetails ?? {}});
+
     const displayNameForAuthorizedPayer = useMemo(
         () => PersonalDetailsUtils.getPersonalDetailByEmail(policy?.achAccount?.reimburser ?? '')?.displayName ?? policy?.achAccount?.reimburser,
         [policy?.achAccount?.reimburser],
@@ -143,28 +148,22 @@ function WorkspaceWorkflowsPage({policy, betas, route}: WorkspaceWorkflowsPagePr
                 },
                 subMenuItems: (
                     <>
-                        <MenuItemWithTopDescription
-                            title={policyApproverName ?? ''}
-                            titleStyle={styles.textNormalThemeText}
-                            descriptionTextStyle={styles.textLabelSupportingNormal}
-                            description={translate('workflowsPage.approver')}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_APPROVER.getRoute(route.params.policyID))}
-                            shouldShowRightIcon
-                            wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3, styles.mbn3]}
-                            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]}
-                            />
+                            <>
+                                {workflows.map((w) => (
+                                    <ApprovalWorkflowSection approvalWorkflow={w} />
+                                ))}
+                                <MenuItem
+                                    title={translate('workflowsPage.addApprovalButton')}
+                                    titleStyle={styles.textStrong}
+                                    icon={Expensicons.Plus}
+                                    iconHeight={20}
+                                    iconWidth={20}
+                                    iconFill={theme.success}
+                                    style={[styles.sectionMenuItemTopDescription, styles.mt6, styles.mbn3]}
+                                />
+                            </>
                         )}
                     </>
                 ),