diff --git a/components/expenses/ExpenseFormPayeeStep.js b/components/expenses/ExpenseFormPayeeStep.js index badcfb53e86..442d8ca1914 100644 --- a/components/expenses/ExpenseFormPayeeStep.js +++ b/components/expenses/ExpenseFormPayeeStep.js @@ -4,7 +4,7 @@ import { useQuery } from '@apollo/client'; import { InfoCircle } from '@styled-icons/boxicons-regular/InfoCircle'; import { Undo } from '@styled-icons/fa-solid/Undo'; import { FastField, Field } from 'formik'; -import { first, get, groupBy, isEmpty, omit, pick } from 'lodash'; +import { compact, first, get, groupBy, isEmpty, omit, pick } from 'lodash'; import { createPortal } from 'react-dom'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; @@ -21,7 +21,7 @@ import { require2FAForAdmins } from '../../lib/policies'; import { flattenObjectDeep } from '../../lib/utils'; import { checkRequiresAddress } from './lib/utils'; -import CollectivePicker, { CUSTOM_OPTIONS_POSITION, FLAG_COLLECTIVE_PICKER_COLLECTIVE } from '../CollectivePicker'; +import { CUSTOM_OPTIONS_POSITION, FLAG_COLLECTIVE_PICKER_COLLECTIVE } from '../CollectivePicker'; import CollectivePickerAsync from '../CollectivePickerAsync'; import { Box, Flex } from '../Grid'; import Image from '../Image'; @@ -277,79 +277,6 @@ const ExpenseFormPayeeStep = ({ ); const requiresAddress = checkRequiresAddress(values); const requiresPayoutMethod = !isOnBehalf && values.payee?.type !== VENDOR; - const canInvite = !values.status; - - const collectivePick = canInvite - ? ({ id }) => ( - { - if (value) { - const existingProfile = payoutProfiles.find(p => p.slug === value.slug); - const isVendor = value.type === VENDOR; - const isNewlyCreatedProfile = value.members?.some( - m => m.role === 'ADMIN' && m.member.slug === loggedInAccount.slug, - ); - - const payee = existingProfile || { - ...pick(value, ['id', 'name', 'slug', 'email', 'type', 'payoutMethods']), - isInvite: !isNewlyCreatedProfile && !isVendor, - }; - - if (isNewlyCreatedProfile && !isVendor) { - payee.payoutMethods = []; - } - - formik.setFieldValue('payee', payee); - formik.setFieldValue('payoutMethod', isVendor ? first(payee.payoutMethods) || null : null); - setLocationFromPayee(formik, payee); - onChange(payee); - } - }} - styles={{ - menu: { - borderRadius: '16px', - }, - menuList: { - padding: '8px', - }, - }} - emptyCustomOptions={payeeOptions} - customOptionsPosition={CUSTOM_OPTIONS_POSITION.BOTTOM} - getDefaultOptions={build => values.payee && build(values.payee)} - disabled={disablePayee} - invitable - onInvite={onInvite} - LoggedInUser={loggedInAccount} - includeVendorsForHostId={collective.host?.legacyId || undefined} - addLoggedInUserAsAdmin - excludeAdminFields - searchQuery={expenseFormPayeeStepCollectivePickerSearchQuery} - filterResults={collectives => collectives.filter(c => c.type !== CollectiveType.VENDOR || c.hasPayoutMethod)} - loading={loading} - /> - ) - : ({ id }) => ( - values.payee && build(values.payee)} - data-cy="select-expense-payee" - isSearchable - disabled={disablePayee} - collective={values.payee} - onChange={({ value }) => { - formik.setFieldValue('payee', value); - formik.setFieldValue('payoutMethod', null); - setLocationFromPayee(formik, value); - onChange(value); - }} - loading={loading} - /> - ); const actionButtons = ( @@ -422,7 +349,66 @@ const ExpenseFormPayeeStep = ({ flex="1" mt={3} > - {collectivePick} + {({ id }) => ( + { + if (value) { + const existingProfile = payoutProfiles.find(p => p.slug === value.slug); + const isVendor = value.type === VENDOR; + const isNewlyCreatedProfile = value.members?.some( + m => m.role === 'ADMIN' && m.member.slug === loggedInAccount.slug, + ); + + const payee = existingProfile || { + ...pick(value, ['id', 'name', 'slug', 'email', 'type', 'payoutMethods']), + isInvite: !isNewlyCreatedProfile && !isVendor, + }; + + if (isNewlyCreatedProfile && !isVendor) { + payee.payoutMethods = []; + } + + formik.setFieldValue('payee', payee); + formik.setFieldValue('payoutMethod', isVendor ? first(payee.payoutMethods) || null : null); + setLocationFromPayee(formik, payee); + onChange(payee); + } + }} + styles={{ + menu: { + borderRadius: '16px', + }, + menuList: { + padding: '8px', + }, + }} + emptyCustomOptions={payeeOptions} + customOptionsPosition={CUSTOM_OPTIONS_POSITION.BOTTOM} + getDefaultOptions={build => values.payee && build(values.payee)} + disabled={disablePayee} + invitable={!editingExpense} + onInvite={onInvite} + LoggedInUser={loggedInAccount} + includeVendorsForHostId={collective.host?.legacyId || undefined} + addLoggedInUserAsAdmin + excludeAdminFields + searchQuery={expenseFormPayeeStepCollectivePickerSearchQuery} + filterResults={collectives => { + if (editingExpense) { + return collectives.filter(c => { + const slugs = compact([c.slug, c.host?.slug]); + return loggedInAccount.adminMemberships?.nodes.some(m => slugs.includes(m.account.slug)); + }); + } + return collectives.filter(c => c.type !== CollectiveType.VENDOR || c.hasPayoutMethod); + }} + loading={loading} + /> + )} )} diff --git a/lib/graphql/v1/queries.js b/lib/graphql/v1/queries.js index f00a097b41f..97fb404f8d6 100644 --- a/lib/graphql/v1/queries.js +++ b/lib/graphql/v1/queries.js @@ -395,6 +395,10 @@ export const expenseFormPayeeStepCollectivePickerSearchQuery = gqlV1/* GraphQL * isActive isArchived isHost + host { + id + slug + } payoutMethods { legacyId: id type