feat: Workflow payer page

src/ROUTES.ts

@@ -486,6 +486,10 @@ const ROUTES = {
  route: 'workspace/:policyID/workflows',
  getRoute: (policyID: string) => `workspace/${policyID}/workflows` as const,
  },
+ WORKSPACE_WORKFLOWS_PAYER: {
+ route: 'workspace/:policyID/settings/workflows/payer',
+ getRoute: (policyId: string) => `workspace/${policyId}/settings/workflows/payer` as const,
+ },
  WORKSPACE_WORKFLOWS_APPROVER: {
  route: 'workspace/:policyID/settings/workflows/approver',
  getRoute: (policyId: string) => `workspace/${policyId}/settings/workflows/approver` as const,

src/SCREENS.ts

@@ -216,6 +216,7 @@ const SCREENS = {
  CATEGORIES: 'Workspace_Categories',
  CURRENCY: 'Workspace_Profile_Currency',
  WORKFLOWS: 'Workspace_Workflows',
+ WORKFLOWS_PAYER: 'Workspace_Workflows_Payer',
  WORKFLOWS_APPROVER: 'Workspace_Workflows_Approver',
  WORKFLOWS_AUTO_REPORTING_FREQUENCY: 'Workspace_Workflows_Auto_Reporting_Frequency',
  WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET: 'Workspace_Workflows_Auto_Reporting_Monthly_Offset',

src/languages/en.ts

@@ -1046,9 +1046,15 @@ export default {
  addApprovalsDescription: 'Require additional approval before authorizing a payment.',
  makeOrTrackPaymentsTitle: 'Make or track payments',
  makeOrTrackPaymentsDescription: 'Add an authorized payer for payments made in Expensify, or simply track payments made elsewhere.',
+ authorizedPayer: 'Authorized payer',
+ admins: 'Admins',
  editor: {
  submissionFrequency: 'Choose how long Expensify should wait before sharing error-free spend.',
  },
+ // TODO: confirm copy
+ genericErrorMessage: {
+ authorizedPayer: 'The authorized payer could not be updated. Please try again.',
+ },
  frequencies: {
  weekly: 'Weekly',
  monthly: 'Monthly',

src/languages/es.ts

@@ -1042,9 +1042,17 @@ export default {
  addApprovalsDescription: 'Requiere una aprobación adicional antes de autorizar un pago.',
  makeOrTrackPaymentsTitle: 'Realizar o seguir pagos',
  makeOrTrackPaymentsDescription: 'Añade un pagador autorizado para los pagos realizados en Expensify, o simplemente realiza un seguimiento de los pagos realizados en otro lugar.',
+ // todo: add translations and cofirm copy
+ authorizedPayer: 'Authorized payer',
+ // todo: add translations and cofirm copy
+ admins: 'Administradores',
  editor: {
  submissionFrequency: 'Elige cuánto tiempo Expensify debe esperar antes de compartir los gastos sin errores.',
  },
+ // todo: add translations and cofirm copy
+ genericErrorMessage: {
+ authorizedPayer: 'The authorized payer could not be updated. Please try again.',
+ },
  frequencies: {
  weekly: 'Semanal',
  monthly: 'Mensual',

src/libs/API/parameters/SetReimbursementFromChoiceParams.ts

@@ -0,0 +1,9 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type SetReimbursementFromChoiceParams = {
+ policyID: string;
+ reimbursementChoice: ValueOf<typeof CONST.POLICY.REIMBURSEMENT_CHOICES>;
+};
+
+export default SetReimbursementFromChoiceParams;

src/libs/API/parameters/SetWorkspaceReimbursementParams.ts

@@ -0,0 +1,6 @@
+type SetWorkspaceReimbursementParams = {
+ policyID: string;
+ reimburserEmail: string;
+};
+
+export default SetWorkspaceReimbursementParams;

src/libs/API/parameters/index.ts

@@ -152,4 +152,6 @@ export type {default as SetWorkspaceAutoReportingParams} from './SetWorkspaceAut
 export type {default as SetWorkspaceAutoReportingFrequencyParams} from './SetWorkspaceAutoReportingFrequencyParams';
 export type {default as SetWorkspaceAutoReportingMonthlyOffsetParams} from './SetWorkspaceAutoReportingMonthlyOffsetParams';
 export type {default as SetWorkspaceApprovalModeParams} from './SetWorkspaceApprovalModeParams';
+export type {default as SetWorkspaceReimbursementParams} from './SetWorkspaceReimbursementParams';
+export type {default as SetReimbursementFromChoiceParams} from './SetReimbursementFromChoiceParams';
 export type {default as SwitchToOldDotParams} from './SwitchToOldDotParams';

src/libs/API/types.ts

@@ -12,6 +12,8 @@ const WRITE_COMMANDS = {
  SET_WORKSPACE_AUTO_REPORTING_FREQUENCY: 'SetWorkspaceAutoReportingFrequency',
  SET_WORKSPACE_AUTO_REPORTING_MONTHLY_OFFSET: 'UpdatePolicy',
  SET_WORKSPACE_APPROVAL_MODE: 'SetWorkspaceApprovalMode',
+ SET_WORKSPACE_REIMBURSEMENT: 'SetWorkspaceReimbursement',
+ SET_REIMBURSEMENT_FROM_CHOICE: 'Policy_setReimbursementFromChoice',
  DISMISS_REFERRAL_BANNER: 'DismissReferralBanner',
  UPDATE_PREFERRED_LOCALE: 'UpdatePreferredLocale',
  OPEN_APP: 'OpenApp',
@@ -309,6 +311,8 @@ type WriteCommandParameters = {
  [WRITE_COMMANDS.SET_WORKSPACE_AUTO_REPORTING_FREQUENCY]: Parameters.SetWorkspaceAutoReportingFrequencyParams;
  [WRITE_COMMANDS.SET_WORKSPACE_AUTO_REPORTING_MONTHLY_OFFSET]: Parameters.SetWorkspaceAutoReportingMonthlyOffsetParams;
  [WRITE_COMMANDS.SET_WORKSPACE_APPROVAL_MODE]: Parameters.SetWorkspaceApprovalModeParams;
+ [WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT]: Parameters.SetWorkspaceReimbursementParams;
+ [WRITE_COMMANDS.SET_REIMBURSEMENT_FROM_CHOICE]: Parameters.SetReimbursementFromChoiceParams;
  [WRITE_COMMANDS.SWITCH_TO_OLD_DOT]: Parameters.SwitchToOldDotParams;
 };
 

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -245,6 +245,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
  [SCREENS.WORKSPACE.INVITE]: () => require('../../../pages/workspace/WorkspaceInvitePage').default as React.ComponentType,
  [SCREENS.WORKSPACE.WORKFLOWS_APPROVER]: () => require('../../../pages/workspace/workflows/WorkspaceWorkflowsApproverPage').default as React.ComponentType,
  [SCREENS.WORKSPACE.INVITE_MESSAGE]: () => require('../../../pages/workspace/WorkspaceInviteMessagePage').default as React.ComponentType,
+ [SCREENS.WORKSPACE.WORKFLOWS_PAYER]: () => require('../../../pages/workspace/workflows/WorkspaceWorkflowsPayerPage').default as React.ComponentType,
  [SCREENS.WORKSPACE.NAME]: () => require('../../../pages/workspace/WorkspaceNamePage').default as React.ComponentType,
  [SCREENS.WORKSPACE.DESCRIPTION]: () => require('../../../pages/workspace/WorkspaceProfileDescriptionPage').default as React.ComponentType,
  [SCREENS.WORKSPACE.SHARE]: () => require('../../../pages/workspace/WorkspaceProfileSharePage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -5,7 +5,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
  [SCREENS.WORKSPACE.PROFILE]: [SCREENS.WORKSPACE.NAME, SCREENS.WORKSPACE.CURRENCY, SCREENS.WORKSPACE.DESCRIPTION, SCREENS.WORKSPACE.SHARE],
  [SCREENS.WORKSPACE.REIMBURSE]: [SCREENS.WORKSPACE.RATE_AND_UNIT, SCREENS.WORKSPACE.RATE_AND_UNIT_RATE, SCREENS.WORKSPACE.RATE_AND_UNIT_UNIT],
  [SCREENS.WORKSPACE.MEMBERS]: [SCREENS.WORKSPACE.INVITE, SCREENS.WORKSPACE.INVITE_MESSAGE],
- [SCREENS.WORKSPACE.WORKFLOWS]: [SCREENS.WORKSPACE.WORKFLOWS_APPROVER],
+ [SCREENS.WORKSPACE.WORKFLOWS]: [SCREENS.WORKSPACE.WORKFLOWS_PAYER, SCREENS.WORKSPACE.WORKFLOWS_APPROVER],
 };
 
 export default CENTRAL_PANE_TO_RHP_MAPPING;

src/libs/Navigation/linkingConfig/config.ts

@@ -277,6 +277,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
  [SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: {
  path: ROUTES.WORKSPACE_CATEGORIES_SETTINGS.route,
  },
+ [SCREENS.WORKSPACE.WORKFLOWS_PAYER]: {
+ path: ROUTES.WORKSPACE_WORKFLOWS_PAYER.route,
+ },
  [SCREENS.REIMBURSEMENT_ACCOUNT]: {
  path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.route,
  exact: true,

src/libs/Navigation/types.ts

@@ -63,9 +63,6 @@ type CentralPaneNavigatorParamList = {
  [SCREENS.WORKSPACE.WORKFLOWS]: {
  policyID: string;
  };
- [SCREENS.WORKSPACE.WORKFLOWS_APPROVER]: {
- policyID: string;
- };
  [SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: {
  policyID: string;
  };
@@ -161,6 +158,12 @@ type SettingsNavigatorParamList = {
  /** domain passed via route /settings/wallet/card/:domain */
  domain: string;
  };
+ [SCREENS.WORKSPACE.WORKFLOWS_APPROVER]: {
+ policyID: string;
+ };
+ [SCREENS.WORKSPACE.WORKFLOWS_PAYER]: {
+ policyID: string;
+ };
  [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: undefined;
  [SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT]: undefined;
  [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: undefined;

src/libs/actions/Policy.ts

@@ -20,10 +20,12 @@ import type {
  OpenWorkspaceMembersPageParams,
  OpenWorkspaceParams,
  OpenWorkspaceReimburseViewParams,
+ SetReimbursementFromChoiceParams,
  SetWorkspaceApprovalModeParams,
  SetWorkspaceAutoReportingFrequencyParams,
  SetWorkspaceAutoReportingMonthlyOffsetParams,
  SetWorkspaceAutoReportingParams,
+ SetWorkspaceReimbursementParams,
  UpdateWorkspaceAvatarParams,
  UpdateWorkspaceCustomUnitAndRateParams,
  UpdateWorkspaceDescriptionParams,
@@ -560,6 +562,114 @@ function setWorkspaceApprovalMode(policyID: string, approver: string, approvalMo
  API.write(WRITE_COMMANDS.SET_WORKSPACE_APPROVAL_MODE, params, {optimisticData, failureData, successData});
 }
 
+/**
+ *
+ * @param policyID
+ * @param reimburserEmail
+ */
+function setWorkspaceReimbursement(policyID: string, reimburserEmail: string) {
+ const policy = ReportUtils.getPolicy(policyID);
+
+ const currentPolicyReimburserEmail = policy.reimburserEmail;
+
+ const optimisticData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ reimburserEmail,
+ errorFields: {reimburserEmail: null},
+ pendingFields: {reimburserEmail: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
+ },
+ },
+ ];
+
+ const failureData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ reimburserEmail: currentPolicyReimburserEmail,
+ errorFields: {reimburserEmail: ErrorUtils.getMicroSecondOnyxError('workflowsPage.genericErrorMessage.authorizedPayer')},
+ pendingFields: {reimburserEmail: null},
+ },
+ },
+ ];
+
+ const successData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ errorFields: {reimburserEmail: null},
+ pendingFields: {reimburserEmail: null},
+ },
+ },
+ ];
+
+ const params: SetWorkspaceReimbursementParams = {policyID, reimburserEmail};
+
+ API.write(WRITE_COMMANDS.SET_WORKSPACE_REIMBURSEMENT, params, {optimisticData, failureData, successData});
+}
+
+/**
+ * clear the workspace reimbursement error while setting the authorized payer
+ * @param policyID
+ */
+function clearWorkspaceReimbursementError(policyID: string) {
+ Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {errorFields: {reimburserEmail: null}});
+}
+
+/**
+ * set the workspace reimbursement choice
+ * @param policyID
+ * @param reimbursementChoice
+ */
+function setReimbursementFromChoice(policyID: string, reimbursementChoice: ValueOf<typeof CONST.POLICY.REIMBURSEMENT_CHOICES>) {
+ const policy = ReportUtils.getPolicy(policyID);
+
+ const currentPolicyReimbursementChoice = policy.reimbursementChoice;
+
+ const optimisticData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ reimbursementChoice,
+ errorFields: {reimbursementChoice: null},
+ pendingFields: {reimbursementChoice: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
+ },
+ },
+ ];
+
+ const failureData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ reimbursementChoice: currentPolicyReimbursementChoice,
+ errorFields: {reimbursementChoice: ErrorUtils.getMicroSecondOnyxError('workflowsPage.genericErrorMessage.reimbursementChoice')},
+ pendingFields: {reimbursementChoice: null},
+ },
+ },
+ ];
+
+ const successData: OnyxUpdate[] = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+ value: {
+ errorFields: {reimbursementChoice: null},
+ pendingFields: {reimbursementChoice: null},
+ },
+ },
+ ];
+
+ const params: SetReimbursementFromChoiceParams = {policyID, reimbursementChoice};
+
+ API.write(WRITE_COMMANDS.SET_REIMBURSEMENT_FROM_CHOICE, params, {optimisticData, failureData, successData});
+}
+
 /**
  * Build optimistic data for removing users from the announcement room
  */
@@ -2536,4 +2646,7 @@ export {
  setWorkspaceCategoryEnabled,
  setWorkspaceRequiresCategory,
  clearCategoryErrors,
+ setWorkspaceReimbursement,
+ clearWorkspaceReimbursementError,
+ setReimbursementFromChoice,
 };

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -79,6 +79,7 @@ const propTypes = {
  /** A step to navigate to if we need to drop the user into a specific point in the flow */
  stepToOpen: PropTypes.string,
  policyID: PropTypes.string,
+ backTo: PropTypes.string,
  }),
  }),
 };
@@ -252,6 +253,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
  const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
  const policyName = lodashGet(policy, 'name', '');
  const policyID = lodashGet(route.params, 'policyID', '');
+ const backTo = lodashGet(route.params, 'backTo');
  const styles = useThemeStyles();
  const {translate} = useLocalize();
  const {isOffline} = useNetwork();
@@ -275,10 +277,17 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
  BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyID);
  }
 
+ function shouldClearReimbursementAccount() {
+ return backTo !== ROUTES.WORKSPACE_WORKFLOWS.getRoute(policyID)
+ }
+
  useEffect(
  () => {
  fetchData();
  return () => {
+ if (!shouldClearReimbursementAccount()) {
+ return;
+ }
  BankAccounts.clearReimbursementAccount();
  };
  },
@@ -337,9 +346,10 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
  BankAccounts.hideBankAccountErrors();
  }
 
- const backTo = lodashGet(route.params, 'backTo');
  // eslint-disable-next-line no-shadow
  const policyID = lodashGet(route.params, 'policyID');
+ // eslint-disable-next-line no-shadow
+ const backTo = lodashGet(route.params, 'backTo');
 
  Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
  },