- All ({totalUncategorized})
-
- ),
- },
- {
- value: 'recognized',
- label: (
- <>
- Recognized ({totalRecognized})
-
- ),
- },
- ]}
+ options={options}
value={locationQuery?.uncategorizedFilter || 'all'}
onValueChange={handleTabsChange}
/>
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
index ad903b06d..5e77c38f9 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx
@@ -54,6 +54,12 @@ const AccountUncategorizedTransactions = lazy(() =>
).then((module) => ({ default: module.AccountUncategorizedTransactionsAll })),
);
+const PendingTransactions = lazy(() =>
+ import('./PendingTransactions/PendingTransactions').then((module) => ({
+ default: module.PendingTransactions,
+ })),
+);
+
/**
* Switches between the account transactions tables.
* @returns {React.ReactNode}
@@ -70,6 +76,8 @@ function AccountTransactionsSwitcher() {
case 'all':
default:
return ;
+ case 'pending':
+ return ;
}
}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
index c84ec27aa..34c037c14 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx
@@ -34,7 +34,11 @@ function ExcludedTransactionsTableRoot({
// #withBankingActions
setExcludedTransactionsSelected,
}: ExcludeTransactionsTableProps) {
- const { excludedBankTransactions } = useExcludedTransactionsBoot();
+ const {
+ excludedBankTransactions,
+ isExcludedTransactionsLoading,
+ isExcludedTransactionsFetching,
+ } = useExcludedTransactionsBoot();
const { mutateAsync: unexcludeBankTransaction } =
useUnexcludeUncategorizedTransaction();
@@ -79,8 +83,9 @@ function ExcludedTransactionsTableRoot({
columns={columns}
data={excludedBankTransactions}
sticky={true}
- loading={false}
- headerLoading={false}
+ loading={isExcludedTransactionsLoading}
+ headerLoading={isExcludedTransactionsLoading}
+ progressBarLoading={isExcludedTransactionsFetching}
expandColumnSpace={1}
expandToggleColumn={2}
selectionColumnWidth={45}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx
index d82f902bb..23a08b7e9 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/_utils.tsx
@@ -37,12 +37,13 @@ export function useExcludedTransactionsColumns() {
() => [
{
Header: 'Date',
- accessor: 'formatted_date',
+ accessor: 'formatted_date',
width: 110,
},
{
Header: 'Description',
accessor: descriptionAccessor,
+ textOverview: true,
},
{
Header: 'Payee',
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactions.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactions.tsx
new file mode 100644
index 000000000..34e813cc2
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactions.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { AccountTransactionsCard } from '../UncategorizedTransactions/AccountTransactionsCard';
+import { PendingTransactionsBoot } from './PendingTransactionsTableBoot';
+import { PendingTransactionsDataTable } from './PendingTransactionsTable';
+
+export function PendingTransactions() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx
new file mode 100644
index 000000000..e469b8f06
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx
@@ -0,0 +1,111 @@
+// @ts-nocheck
+import React from 'react';
+import clsx from 'classnames';
+import styled from 'styled-components';
+import {
+ DataTable,
+ TableFastCell,
+ TableSkeletonRows,
+ TableSkeletonHeader,
+ TableVirtualizedListRows,
+} from '@/components';
+import withSettings from '@/containers/Settings/withSettings';
+import { withBankingActions } from '../../withBankingActions';
+
+import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
+import { usePendingTransactionsContext } from './PendingTransactionsTableBoot';
+import { usePendingTransactionsTableColumns } from './_hooks';
+
+import { compose } from '@/utils';
+
+/**
+ * Account transactions data table.
+ */
+function PendingTransactionsDataTableRoot({
+ // #withSettings
+ cashflowTansactionsTableSize,
+}) {
+ // Retrieve table columns.
+ const columns = usePendingTransactionsTableColumns();
+ const { scrollableRef } = useAccountTransactionsContext();
+
+ // Retrieve list context.
+ const {
+ pendingTransactions,
+ isPendingTransactionsLoading,
+ isPendingTransactionFetching,
+ } = usePendingTransactionsContext();
+
+ return (
+
+ );
+}
+
+export const PendingTransactionsDataTable = compose(
+ withSettings(({ cashflowTransactionsSettings }) => ({
+ cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+ })),
+ withBankingActions,
+)(PendingTransactionsDataTableRoot);
+
+const DashboardConstrantTable = styled(DataTable)`
+ .table {
+ .thead {
+ .th {
+ background: #fff;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 13px;i
+ font-weight: 500;
+ }
+ }
+
+ .tbody {
+ .tr:last-child .td {
+ border-bottom: 0;
+ }
+ }
+ }
+`;
+
+const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+ .table .tbody {
+ .tbody-inner .tr.no-results {
+ .td {
+ padding: 2rem 0;
+ font-size: 14px;
+ color: #888;
+ font-weight: 400;
+ border-bottom: 0;
+ }
+ }
+
+ .tbody-inner {
+ .tr .td:not(:first-child) {
+ border-left: 1px solid #e6e6e6;
+ }
+
+ .td-description {
+ color: #5f6b7c;
+ }
+ }
+ }
+`;
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTableBoot.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTableBoot.tsx
new file mode 100644
index 000000000..9cd5eba44
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTableBoot.tsx
@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import { flatten, map } from 'lodash';
+import { IntersectionObserver } from '@/components';
+import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
+import { usePendingBankTransactionsInfinity } from '@/hooks/query/bank-rules';
+
+const PendingTransactionsContext = React.createContext();
+
+function flattenInfinityPagesData(data) {
+ return flatten(map(data.pages, (page) => page.data));
+}
+
+/**
+ * Account pending transctions provider.
+ */
+function PendingTransactionsBoot({ children }) {
+ const { accountId } = useAccountTransactionsContext();
+
+ // Fetches the pending transactions.
+ const {
+ data: pendingTransactionsPage,
+ isFetching: isPendingTransactionFetching,
+ isLoading: isPendingTransactionsLoading,
+ isSuccess: isPendingTransactionsSuccess,
+ isFetchingNextPage: isPendingTransactionFetchNextPage,
+ fetchNextPage: fetchNextPendingTransactionsPage,
+ hasNextPage: hasPendingTransactionsNextPage,
+ } = usePendingBankTransactionsInfinity({
+ account_id: accountId,
+ page_size: 50,
+ });
+ // Memorized the cashflow account transactions.
+ const pendingTransactions = React.useMemo(
+ () =>
+ isPendingTransactionsSuccess
+ ? flattenInfinityPagesData(pendingTransactionsPage)
+ : [],
+ [pendingTransactionsPage, isPendingTransactionsSuccess],
+ );
+ // Handle the observer ineraction.
+ const handleObserverInteract = React.useCallback(() => {
+ if (!isPendingTransactionFetching && hasPendingTransactionsNextPage) {
+ fetchNextPendingTransactionsPage();
+ }
+ }, [
+ isPendingTransactionFetching,
+ hasPendingTransactionsNextPage,
+ fetchNextPendingTransactionsPage,
+ ]);
+ // Provider payload.
+ const provider = {
+ pendingTransactions,
+ isPendingTransactionFetching,
+ isPendingTransactionsLoading,
+ };
+
+ return (
+
+ {children}
+
+
+ );
+}
+
+const usePendingTransactionsContext = () =>
+ React.useContext(PendingTransactionsContext);
+
+export { PendingTransactionsBoot, usePendingTransactionsContext };
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx
new file mode 100644
index 000000000..2ea2e20f3
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/_hooks.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import intl from 'react-intl-universal';
+
+/**
+ * Retrieve account pending transctions table columns.
+ */
+export function usePendingTransactionsTableColumns() {
+ return useMemo(
+ () => [
+ {
+ id: 'date',
+ Header: intl.get('date'),
+ accessor: 'formatted_date',
+ width: 40,
+ clickable: true,
+ textOverview: true,
+ },
+ {
+ id: 'description',
+ Header: 'Description',
+ accessor: 'description',
+ width: 160,
+ textOverview: true,
+ clickable: true,
+ },
+ {
+ id: 'payee',
+ Header: 'Payee',
+ accessor: 'payee',
+ width: 60,
+ clickable: true,
+ textOverview: true,
+ },
+ {
+ id: 'reference_number',
+ Header: 'Ref.#',
+ accessor: 'reference_no',
+ width: 50,
+ clickable: true,
+ textOverview: true,
+ },
+ {
+ id: 'deposit',
+ Header: intl.get('cash_flow.label.deposit'),
+ accessor: 'formatted_deposit_amount',
+ width: 40,
+ className: 'deposit',
+ textOverview: true,
+ align: 'right',
+ clickable: true,
+ },
+ {
+ id: 'withdrawal',
+ Header: intl.get('cash_flow.label.withdrawal'),
+ accessor: 'formatted_withdrawal_amount',
+ className: 'withdrawal',
+ width: 40,
+ textOverview: true,
+ align: 'right',
+ clickable: true,
+ },
+ ],
+ [],
+ );
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx
index bd586adb4..34d7be997 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx
@@ -52,8 +52,11 @@ function AccountTransactionsDataTable({
const { scrollableRef } = useAccountTransactionsContext();
// Retrieve list context.
- const { uncategorizedTransactions, isUncategorizedTransactionsLoading } =
- useAccountUncategorizedTransactionsContext();
+ const {
+ uncategorizedTransactions,
+ isUncategorizedTransactionsLoading,
+ isUncategorizedTransactionFetching,
+ } = useAccountUncategorizedTransactionsContext();
const { mutateAsync: excludeTransaction } =
useExcludeUncategorizedTransaction();
@@ -105,6 +108,7 @@ function AccountTransactionsDataTable({
selectionColumn={true}
loading={isUncategorizedTransactionsLoading}
headerLoading={isUncategorizedTransactionsLoading}
+ progressBarLoading={isUncategorizedTransactionFetching}
expandColumnSpace={1}
expandToggleColumn={2}
selectionColumnWidth={45}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/UncategorizeBankTransactionsBulkAlert.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/UncategorizeBankTransactionsBulkAlert.tsx
new file mode 100644
index 000000000..4b211f21a
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/UncategorizeBankTransactionsBulkAlert.tsx
@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster, FormattedMessage as T } from '@/components';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { useUncategorizeTransactionsBulkAction } from '@/hooks/query/bank-transactions';
+import { compose } from '@/utils';
+
+/**
+ * Uncategorize bank account transactions in build alert.
+ */
+function UncategorizeBankTransactionsBulkAlert({
+ name,
+
+ // #withAlertStoreConnect
+ isOpen,
+ payload: { uncategorizeTransactionsIds },
+
+ // #withAlertActions
+ closeAlert,
+}) {
+ const { mutateAsync: uncategorizeTransactions, isLoading } =
+ useUncategorizeTransactionsBulkAction();
+
+ // Handle activate item alert cancel.
+ const handleCancelActivateItem = () => {
+ closeAlert(name);
+ };
+
+ // Handle confirm item activated.
+ const handleConfirmItemActivate = () => {
+ uncategorizeTransactions({ ids: uncategorizeTransactionsIds })
+ .then(() => {
+ AppToaster.show({
+ message: 'The bank feeds of the bank account has been resumed.',
+ intent: Intent.SUCCESS,
+ });
+ })
+ .catch((error) => {})
+ .finally(() => {
+ closeAlert(name);
+ });
+ };
+
+ return (
+ }
+ confirmButtonText={'Uncategorize Transactions'}
+ intent={Intent.DANGER}
+ isOpen={isOpen}
+ onCancel={handleCancelActivateItem}
+ loading={isLoading}
+ onConfirm={handleConfirmItemActivate}
+ >
+
+ Are you sure want to uncategorize the selected bank transactions, this
+ action is not reversible but you can always categorize them again?
+
+
+ );
+}
+
+export default compose(
+ withAlertStoreConnect(),
+ withAlertActions,
+)(UncategorizeBankTransactionsBulkAlert);
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/index.ts b/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/index.ts
index c8b6e0fcb..007f21706 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/index.ts
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/alerts/index.ts
@@ -9,6 +9,10 @@ const PauseFeedsBankAccountAlert = React.lazy(
() => import('./PauseFeedsBankAccount'),
);
+const UncategorizeTransactionsBulkAlert = React.lazy(
+ () => import('./UncategorizeBankTransactionsBulkAlert'),
+);
+
/**
* Bank account alerts.
*/
@@ -21,4 +25,8 @@ export const BankAccountAlerts = [
name: 'pause-feeds-syncing-bank-accounnt',
component: PauseFeedsBankAccountAlert,
},
+ {
+ name: 'uncategorize-transactions-bulk',
+ component: UncategorizeTransactionsBulkAlert,
+ },
];
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx
index 715ee0b33..51ae30c5e 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx
@@ -1,18 +1,29 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
-import {
- Intent,
- Menu,
- MenuItem,
- Tag,
- PopoverInteractionKind,
- Position,
- Tooltip,
-} from '@blueprintjs/core';
-import { Box, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
-import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { Intent, Menu, MenuItem, Tag } from '@blueprintjs/core';
+import { FormatDateCell, Icon } from '@/components';
import { safeCallback } from '@/utils';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import FinancialLoadingBar from '@/containers/FinancialStatements/FinancialLoadingBar';
+
+export function AccountTransactionsLoadingBar() {
+ const {
+ isBankAccountMetaSummaryFetching,
+ isCurrentAccountFetching,
+ isCashFlowAccountsFetching,
+ } = useAccountTransactionsContext();
+
+ const isLoading =
+ isCashFlowAccountsFetching ||
+ isCurrentAccountFetching ||
+ isBankAccountMetaSummaryFetching;
+
+ if (isLoading) {
+ return ;
+ }
+ return null;
+}
export function ActionsMenu({
payload: { onUncategorize, onUnmatch },
@@ -137,16 +148,3 @@ export function useAccountTransactionsColumns() {
[],
);
}
-
-/**
- * Account transactions progress bar.
- */
-export function AccountTransactionsProgressBar() {
- const { isCashFlowTransactionsFetching, isUncategorizedTransactionFetching } =
- useAccountTransactionsContext();
-
- return isCashFlowTransactionsFetching ||
- isUncategorizedTransactionFetching ? (
-
- ) : null;
-}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx
index c76ebb813..58535e389 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx
@@ -66,7 +66,7 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
expenseId: reference.reference_id,
});
case 'PaymentReceive':
- return openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
+ return openDrawer(DRAWERS.PAYMENT_RECEIVED_DETAILS, {
paymentReceiveId: reference.reference_id,
});
case 'BillPayment':
diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx
index 7cad57e10..c3c88f431 100644
--- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx
+++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx
@@ -10,6 +10,7 @@ import { CashFlowAccountsProvider } from './CashFlowAccountsProvider';
import CashflowAccountsGrid from './CashflowAccountsGrid';
import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar';
import { CashflowAccountsPlaidLink } from './CashflowAccountsPlaidLink';
+import { CashflowAccountsLoadingBar } from './CashFlowAccountsLoadingBar';
import withCashflowAccounts from '@/containers/CashFlow/AccountTransactions/withCashflowAccounts';
import withCashflowAccountsTableActions from '@/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions';
@@ -35,6 +36,7 @@ function CashFlowAccountsList({
return (
+
diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx
new file mode 100644
index 000000000..0a85cfe74
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx
@@ -0,0 +1,12 @@
+// @ts-nocheck
+import FinancialLoadingBar from '@/containers/FinancialStatements/FinancialLoadingBar';
+import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
+
+export function CashflowAccountsLoadingBar() {
+ const { isCashFlowAccountsFetching } = useCashFlowAccountsContext();
+
+ if (isCashFlowAccountsFetching) {
+ return ;
+ }
+ return null;
+}
diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx
index 297c26eb0..8c8315e84 100644
--- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx
+++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx
@@ -123,7 +123,12 @@ function CashflowBankAccount({
code={account.code}
balance={!isNull(account.amount) ? account.formatted_amount : '-'}
type={account.account_type}
- updatedBeforeText={getUpdatedBeforeText(account.createdAt)}
+ updatedBeforeText={
+ account.last_feeds_updated_from_now
+ ? `Updated ${account.last_feeds_updated_from_now} ago`
+ : ''
+ }
+ uncategorizedTransactionsCount={account.uncategorized_transactions}
/>
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx
index e2f74a3d6..4ea724528 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionBoot.tsx
@@ -1,6 +1,8 @@
-import { useAccounts, useBranches } from '@/hooks/query';
-import { Spinner } from '@blueprintjs/core';
import React from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { Features } from '@/constants';
+import { useAccounts, useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
interface MatchingReconcileTransactionBootProps {
children: React.ReactNode;
@@ -15,8 +17,17 @@ const MatchingReconcileTransactionBootContext =
export function MatchingReconcileTransactionBoot({
children,
}: MatchingReconcileTransactionBootProps) {
+ // Detarmines whether the feature is enabled.
+ const { featureCan } = useFeatureCan();
+ const isBranchFeatureCan = featureCan(Features.Branches);
+
const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
- const { data: branches, isLoading: isBranchesLoading } = useBranches({}, {});
+ const { data: branches, isLoading: isBranchesLoading } = useBranches(
+ {},
+ {
+ enabled: isBranchFeatureCan,
+ },
+ );
const provider = {
accounts,
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.tsx
index 7e93aacd6..f028ae3e9 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingReconcileTransactionAside/MatchingReconcileTransactionForm.tsx
@@ -10,6 +10,7 @@ import {
Box,
BranchSelect,
FDateInput,
+ FeatureCan,
FFormGroup,
FInputGroup,
FMoneyInputGroup,
@@ -30,6 +31,7 @@ import { useAccountTransactionsContext } from '../../AccountTransactions/Account
import { MatchingReconcileFormSchema } from './MatchingReconcileTransactionForm.schema';
import { initialValues, transformToReq } from './_utils';
import { withBanking } from '../../withBanking';
+import { Features } from '@/constants';
interface MatchingReconcileTransactionFormProps {
onSubmitSuccess?: (values: any) => void;
@@ -205,26 +207,28 @@ function CreateReconcileTransactionContent() {
- Required}
- fastField
- >
-
+ Required}
fastField
- />
-
+ >
+
+
+
