Go to new expense flow from collective page when feature flag is enabled

opencollective · Nov 4, 2024 · 8ead8b6 · 8ead8b6
1 parent 17db8b4
commit 8ead8b6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git 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
                         <StyledLink
                           data-cy="submit-expense-dropdown"
                           as={Link}
-                          href={`${getCollectivePageRoute(collective)}/expenses/new`}
+                          href={
+                            isNewExpenseFlowEnabled
+                              ? `/dashboard/${LoggedInUser?.collective?.slug}/submitted-expenses?submitExpenseTo=${collective.slug}`
+                              : `${getCollectivePageRoute(collective)}/expenses/new`
+                          }
                         >
                           <Container p={ITEM_PADDING}>
                             <Receipt size="20px" />

diff --git 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: (
-        <Link href={`${getCollectivePageRoute(collective)}/expenses/new`}>
+        <Link
+          href={
+            isNewExpenseFlowEnabled
+              ? `/dashboard/${LoggedInUser?.collective?.slug}/submitted-expenses?submitExpenseTo=${collective.slug}`
+              : `${getCollectivePageRoute(collective)}/expenses/new`
+          }
+        >
           <ActionButton tabIndex="-1">
             <Receipt size="1em" />
             <Span ml={2}>
@@ -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
@@ -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 && (
         <SubmitExpenseFlow
           onClose={submittedExpense => {
+            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}
         />
       )}
     </React.Fragment>

diff --git 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) {
             <div className="flex w-full flex-grow justify-center">
               <div className="flex w-full flex-col overflow-scroll sm:flex sm:flex-row sm:gap-11 sm:px-8 sm:pt-10">
                 <ExpenseFormikContainer
+                  submitExpenseTo={props.submitExpenseTo}
                   draftKey={props.draftKey}
                   duplicateExpense={props.duplicateExpense}
                   expenseId={props.expenseId}
@@ -397,6 +399,7 @@ export function SubmitExpenseFlow(props: SubmitExpenseFlowProps) {
 }
 
 function ExpenseFormikContainer(props: {
+  submitExpenseTo?: string;
   draftKey?: string;
   duplicateExpense?: boolean;
   expenseId?: number;
@@ -416,6 +419,7 @@ function ExpenseFormikContainer(props: {
   const expenseForm = useExpenseForm({
     formRef,
     initialValues: {
+      accountSlug: props.submitExpenseTo,
       title: '',
       inviteeAccountType: InviteeAccountType.INDIVIDUAL,
       expenseItems: [