From 8ead8b60bcccc483ab1c85db355bad45cd25eb23 Mon Sep 17 00:00:00 2001 From: Henrique Date: Mon, 4 Nov 2024 07:38:58 -0300 Subject: [PATCH] Go to new expense flow from collective page when feature flag is enabled --- components/collective-navbar/ActionsMenu.js | 13 +++++++++++- components/collective-navbar/index.js | 21 +++++++++++++++---- .../sections/expenses/SubmittedExpenses.tsx | 13 ++++++++++-- .../submit-expense/SubmitExpenseFlow.tsx | 4 ++++ 4 files changed, 44 insertions(+), 7 deletions(-) diff --git a/components/collective-navbar/ActionsMenu.js b/components/collective-navbar/ActionsMenu.js index 9e9cffdd0dd..218f06ff5cc 100644 --- a/components/collective-navbar/ActionsMenu.js +++ b/components/collective-navbar/ActionsMenu.js @@ -14,6 +14,9 @@ import { FormattedMessage } from 'react-intl'; import styled, { css } from 'styled-components'; import { getContributeRoute } from '../../lib/collective'; +import { isSupportedExpenseType } from '../../lib/expenses'; +import { ExpenseType } from '../../lib/graphql/types/v2/graphql'; +import { PREVIEW_FEATURE_KEYS } from '../../lib/preview-features'; import { getCollectivePageRoute, getDashboardRoute } from '../../lib/url-helpers'; import ActionButton from '../ActionButton'; @@ -179,6 +182,10 @@ const CollectiveNavbarActionsMenu = ({ collective, callsToAction = {}, hiddenAct const isEmpty = enabledCTAs.length < 1; const hasOnlyOneHiddenCTA = enabledCTAs.length === 1 && hiddenActionForNonMobile === enabledCTAs[0]; + const isNewExpenseFlowEnabled = + LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.NEW_EXPENSE_FLOW) && + !isSupportedExpenseType(collective, ExpenseType.GRANT); + // Do not render the menu if there are no available CTAs if (isEmpty) { return null; @@ -229,7 +236,11 @@ const CollectiveNavbarActionsMenu = ({ collective, callsToAction = {}, hiddenAct diff --git a/components/collective-navbar/index.js b/components/collective-navbar/index.js index 76deb7e2262..bf030948654 100644 --- a/components/collective-navbar/index.js +++ b/components/collective-navbar/index.js @@ -23,8 +23,10 @@ import EXPENSE_TYPE from '../../lib/constants/expenseTypes'; import roles from '../../lib/constants/roles'; import { isSupportedExpenseType } from '../../lib/expenses'; import { API_V2_CONTEXT, gql } from '../../lib/graphql/helpers'; +import { ExpenseType } from '../../lib/graphql/types/v2/graphql'; import useGlobalBlur from '../../lib/hooks/useGlobalBlur'; import useLoggedInUser from '../../lib/hooks/useLoggedInUser'; +import { PREVIEW_FEATURE_KEYS } from '../../lib/preview-features'; import { getCollectivePageRoute, getDashboardRoute } from '../../lib/url-helpers'; import ActionButton from '../ActionButton'; @@ -310,7 +312,7 @@ const getDefaultCallsToActions = ( /** * Returns the main CTA that should be displayed as a button outside of the action menu in this component. */ -const getMainAction = (collective, callsToAction, LoggedInUser) => { +const getMainAction = (collective, callsToAction, LoggedInUser, isNewExpenseFlowEnabled = false) => { if (!collective || !callsToAction) { return null; } @@ -367,7 +369,13 @@ const getMainAction = (collective, callsToAction, LoggedInUser) => { return { type: NAVBAR_ACTION_TYPE.SUBMIT_EXPENSE, component: ( - + @@ -461,6 +469,10 @@ const CollectiveNavbar = ({ const loading = isLoading || dataLoading; + const isNewExpenseFlowEnabled = + LoggedInUser?.hasPreviewFeatureEnabled(PREVIEW_FEATURE_KEYS.NEW_EXPENSE_FLOW) && + !isSupportedExpenseType(collective, ExpenseType.GRANT); + const isAllowedAddFunds = Boolean(data?.account?.permissions?.addFunds?.allowed); const sections = React.useMemo(() => { return sectionsFromParent || getFilteredSectionsForCollective(collective, isAdmin, isHostAdmin); @@ -478,9 +490,10 @@ const CollectiveNavbar = ({ ...callsToAction, }; const actionsArray = Object.keys(pickBy(callsToAction, Boolean)); - const mainAction = getMainAction(collective, actionsArray, LoggedInUser); + const mainAction = getMainAction(collective, actionsArray, LoggedInUser, isNewExpenseFlowEnabled); const secondAction = - actionsArray.length === 2 && getMainAction(collective, without(actionsArray, mainAction?.type), LoggedInUser); + actionsArray.length === 2 && + getMainAction(collective, without(actionsArray, mainAction?.type), LoggedInUser, isNewExpenseFlowEnabled); const navbarRef = useRef(); const mainContainerRef = useRef(); diff --git a/components/dashboard/sections/expenses/SubmittedExpenses.tsx b/components/dashboard/sections/expenses/SubmittedExpenses.tsx index 15383dfb96e..f1c10e7f5c6 100644 --- a/components/dashboard/sections/expenses/SubmittedExpenses.tsx +++ b/components/dashboard/sections/expenses/SubmittedExpenses.tsx @@ -26,9 +26,9 @@ import { accountExpensesQuery } from './queries'; const ROUTE_PARAMS = ['slug', 'section', 'subpath']; const SubmittedExpenses = ({ accountSlug }: DashboardSectionProps) => { - const [isExpenseFlowOpen, setIsExpenseFlowOpen] = React.useState(false); - const [duplicateExpenseId, setDuplicateExpenseId] = React.useState(null); const router = useRouter(); + const [isExpenseFlowOpen, setIsExpenseFlowOpen] = React.useState(!!router.query.submitExpenseTo); + const [duplicateExpenseId, setDuplicateExpenseId] = React.useState(null); const { LoggedInUser } = useLoggedInUser(); const queryFilter = useQueryFilter({ @@ -136,6 +136,14 @@ const SubmittedExpenses = ({ accountSlug }: DashboardSectionProps) => { {isExpenseFlowOpen && ( { + const [url, rawQuery] = router.asPath.split('?'); + const queryParams = new URLSearchParams(rawQuery); + queryParams.delete('submitExpenseTo'); + + const newUrl = new URL(url, window.location.origin); + newUrl.search = queryParams.toString(); + router.replace(newUrl, undefined, { shallow: true }); + setDuplicateExpenseId(null); setIsExpenseFlowOpen(false); if (submittedExpense) { @@ -144,6 +152,7 @@ const SubmittedExpenses = ({ accountSlug }: DashboardSectionProps) => { }} expenseId={duplicateExpenseId} duplicateExpense={!!duplicateExpenseId} + submitExpenseTo={router.query.submitExpenseTo as string} /> )} diff --git a/components/submit-expense/SubmitExpenseFlow.tsx b/components/submit-expense/SubmitExpenseFlow.tsx index 1b13bebc821..d3c61b21c46 100644 --- a/components/submit-expense/SubmitExpenseFlow.tsx +++ b/components/submit-expense/SubmitExpenseFlow.tsx @@ -41,6 +41,7 @@ type SubmitExpenseFlowProps = { expenseId?: number; draftKey?: string; duplicateExpense?: boolean; + submitExpenseTo?: string; }; const I18nMessages = defineMessages({ @@ -382,6 +383,7 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {