feat(HostedCollectives): add 'Add expense' action (#10795)

opencollective · Nov 14, 2024 · e3d5021 · e3d5021
1 parent d470426
commit e3d5021
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/components/dashboard/sections/collectives/common.tsx b/components/dashboard/sections/collectives/common.tsx
@@ -9,6 +9,7 @@ import {
   MoreHorizontal,
   Pause,
   Play,
+  Receipt,
   ReceiptText,
   SquareSigma,
   Unlink,
@@ -39,6 +40,7 @@ import {
 import { TableActionsButton } from '../../../ui/Table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/Tooltip';
 import { DashboardContext } from '../../DashboardContext';
+import { HostCreateExpenseModal } from '../expenses/HostCreateExpenseModal';
 
 import AddFundsModal from './AddFundsModal';
 import FreezeAccountModal from './FreezeAccountModal';
@@ -287,7 +289,7 @@ export const MoreActionsMenu = ({
   const router = useRouter();
   const { account } = React.useContext(DashboardContext);
   const [openModal, setOpenModal] = React.useState<
-    null | 'ADD_FUNDS' | 'FREEZE' | 'UNHOST' | 'ADD_AGREEMENT' | 'CONTACT'
+    null | 'ADD_FUNDS' | 'ADD_EXPENSE' | 'FREEZE' | 'UNHOST' | 'ADD_AGREEMENT' | 'CONTACT'
   >(null);
 
   return (
@@ -322,6 +324,15 @@ export const MoreActionsMenu = ({
             <FormattedMessage id="menu.addFunds" defaultMessage="Add Funds" />
           </DropdownMenuItem>
           <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="cursor-pointer"
+            data-cy="actions-add-expense"
+            onClick={() => setOpenModal('ADD_EXPENSE')}
+          >
+            <Receipt className="mr-2" size="16" />
+            <FormattedMessage defaultMessage="Add expense" id="6/UjBO" />
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <DropdownMenuItem
             className="cursor-pointer"
             data-cy="actions-add-agreement"
@@ -365,6 +376,9 @@ export const MoreActionsMenu = ({
           {openModal === 'ADD_FUNDS' && (
             <AddFundsModal collective={collective} onClose={() => setOpenModal(null)} onSuccess={onEdit} />
           )}
+          {openModal === 'ADD_EXPENSE' && (
+            <HostCreateExpenseModal open setOpen={() => setOpenModal(null)} host={collective.host} />
+          )}
           {openModal === 'FREEZE' && (
             <FreezeAccountModal collective={collective} onClose={() => setOpenModal(null)} onSuccess={onEdit} />
           )}

diff --git a/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx b/components/dashboard/sections/expenses/HostCreateExpenseModal.tsx
@@ -172,9 +172,9 @@ export const HostCreateExpenseModal = ({
   host,
   ...props
 }: {
-  transactionsImport: TransactionsImport;
-  transactionsImportRow: TransactionsImportRow;
   host: Account;
+  transactionsImport?: TransactionsImport;
+  transactionsImportRow?: TransactionsImportRow;
 } & BaseModalProps) => {
   const intl = useIntl();
   const [createExpense, { client }] = useMutation(hostCreateExpenseMutation, { context: API_V2_CONTEXT });