feat: toggle banking matching aside

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { Suspense } from 'react';
+import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
@@ -16,14 +17,18 @@ import { AccountTransactionsProgressBar } from './components';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppShell } from '@/components/AppShell/AppShell';
 import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { withBanking } from '../withBanking';
 
 /**
  * Account transactions list.
  */
-function AccountTransactionsList() {
+function AccountTransactionsListRoot({
+  // #withBanking
+  openMatchingTransactionAside,
+}) {
   return (
     <AccountTransactionsProvider>
-      <AppShell>
+      <AppShell hideAside={!openMatchingTransactionAside}>
         <AppShell.Main>
           <AccountTransactionsActionsBar />
           <AccountTransactionsDetailsBar />
@@ -46,7 +51,14 @@ function AccountTransactionsList() {
   );
 }
 
-export default AccountTransactionsList;
+export default R.compose(
+  withBanking(
+    ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
+      selectedUncategorizedTransactionId,
+      openMatchingTransactionAside,
+    }),
+  ),
+)(AccountTransactionsListRoot);
 
 const AccountsTransactionsAll = React.lazy(
   () => import('./AccountsTransactionsAll'),

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -15,6 +15,7 @@ import { TABLES } from '@/constants/tables';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { withBankingActions } from '../withBankingActions';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
 import {
@@ -24,7 +25,6 @@ import {
 import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUncategorizedBoot';
 
 import { compose } from '@/utils';
-import { DRAWERS } from '@/constants/drawers';
 import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { Intent } from '@blueprintjs/core';
 
@@ -35,6 +35,9 @@ function AccountTransactionsDataTable({
   // #withSettings
   cashflowTansactionsTableSize,
 
+  // #withBankingActions
+  setUncategorizedTransactionIdForMatching,
+
   // #withDrawerActions
   openDrawer,
 }) {
@@ -53,10 +56,8 @@ function AccountTransactionsDataTable({
     useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_CASHFLOW_TRANSACTION);
 
   // Handle cell click.
-  const handleCellClick = (cell, event) => {
-    openDrawer(DRAWERS.CATEGORIZE_TRANSACTION, {
-      uncategorizedTransactionId: cell.row.original.id,
-    });
+  const handleCellClick = (cell) => {
+    setUncategorizedTransactionIdForMatching(cell.row.original.id);
   };
   // Handle exclude transaction.
   const handleExcludeTransaction = (transaction) => {
@@ -111,6 +112,7 @@ export default compose(
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
   withDrawerActions,
+  withBankingActions,
 )(AccountTransactionsDataTable);
 
 const DashboardConstrantTable = styled(DataTable)`

packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx

@@ -1,10 +1,16 @@
 // @ts-nocheck
 import styled from 'styled-components';
+import * as R from 'ramda';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
 import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable';
 import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../withBankingActions';
+import { useEffect } from 'react';
 
 const Box = styled.div`
   margin: 30px 15px;
@@ -18,7 +24,18 @@ const CashflowTransactionsTableCard = styled.div`
   flex: 0 1;
 `;
 
-export default function AllTransactionsUncategorized() {
+interface AllTransactionsUncategorizedProps extends WithBankingActionsProps {}
+
+function AllTransactionsUncategorizedRoot({
+  // #withBankingActions
+  closeMatchingTransactionAside,
+}: AllTransactionsUncategorizedProps) {
+  useEffect(
+    () => () => {
+      closeMatchingTransactionAside();
+    },
+    [closeMatchingTransactionAside],
+  );
   return (
     <AccountUncategorizedTransactionsBoot>
       <Box>
@@ -29,3 +46,5 @@ export default function AllTransactionsUncategorized() {
     </AccountUncategorizedTransactionsBoot>
   );
 }
+
+export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot);

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx

@@ -1,8 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import { first } from 'lodash';
-import { DrawerHeaderContent, DrawerLoading } from '@/components';
-import { DRAWERS } from '@/constants/drawers';
+import { DrawerLoading } from '@/components';
 import {
   useAccounts,
   useBranches,
@@ -56,10 +55,6 @@ function CategorizeTransactionBoot({ uncategorizedTransactionId, ...props }) {
 
   return (
     <DrawerLoading loading={isLoading}>
-      <DrawerHeaderContent
-        name={DRAWERS.CATEGORIZE_TRANSACTION}
-        title={'Categorize Transaction'}
-      />
       <CategorizeTransactionBootContext.Provider value={provider} {...props} />
     </DrawerLoading>
   );

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx

@@ -4,9 +4,9 @@ import { DrawerBody } from '@/components';
 import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import { CategorizeTransactionForm } from './CategorizeTransactionForm';
 
-export default function CategorizeTransactionContent({
-  uncategorizedTransactionId,
-}) {
+export function CategorizeTransactionContent({}) {
+  const uncategorizedTransactionId = 4;
+
   return (
     <CategorizeTransactionBoot
       uncategorizedTransactionId={uncategorizedTransactionId}
@@ -18,7 +18,7 @@ export default function CategorizeTransactionContent({
   );
 }
 
-export const CategorizeTransactionDrawerBody = styled(DrawerBody)`
+const CategorizeTransactionDrawerBody = styled(DrawerBody)`
   padding: 20px;
   background-color: #fff;
 `;

packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionFormFooter.tsx

@@ -48,9 +48,9 @@ export const CategorizeTransactionFormFooter = R.compose(withDrawerActions)(
 );
 
 const Root = styled.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  // right: 0;
+  // background: #fff;
 `;

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.tsx

@@ -1,10 +1,28 @@
+import * as R from 'ramda';
 import { Aside } from '@/components/Aside/Aside';
 import { CategorizeTransactionTabs } from './CategorizeTransactionTabs';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../withBankingActions';
+
+interface CategorizeTransactionAsideProps extends WithBankingActionsProps {}
+
+function CategorizeTransactionAsideRoot({
+  // #withBankingActions
+  closeMatchingTransactionAside,
+}: CategorizeTransactionAsideProps) {
+  const handleClose = () => {
+    closeMatchingTransactionAside();
+  };
 
-export function CategorizeTransactionAside() {
   return (
-    <Aside title={'Categorize Bank Transaction'}>
+    <Aside title={'Categorize Bank Transaction'} onClose={handleClose}>
       <CategorizeTransactionTabs />
     </Aside>
   );
 }
+
+export const CategorizeTransactionAside = R.compose(withBankingActions)(
+  CategorizeTransactionAsideRoot,
+);

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionTabs.tsx

@@ -1,9 +1,7 @@
 import { Tab, Tabs } from '@blueprintjs/core';
-import {
-  CategorizeBankTransactionContent,
-  MatchingBankTransaction,
-} from './MatchingTransaction';
+import { MatchingBankTransaction } from './MatchingTransaction';
 import styles from './CategorizeTransactionTabs.module.scss';
+import { CategorizeTransactionContent } from '../CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent';
 
 export function CategorizeTransactionTabs() {
   return (
@@ -11,7 +9,7 @@ export function CategorizeTransactionTabs() {
       <Tab
         id="categorize"
         title="Categorize Transaction"
-        panel={<CategorizeBankTransactionContent />}
+        panel={<CategorizeTransactionContent />}
       />
       <Tab
         id="matching"

packages/webapp/src/containers/CashFlow/withBanking.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+import { connect } from 'react-redux';
+
+export const withBanking = (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      openMatchingTransactionAside: state.plaid.openMatchingTransactionAside,
+      selectedUncategorizedTransactionId:
+        state.plaid.uncategorizedTransactionIdForMatching,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/CashFlow/withBankingActions.ts

@@ -0,0 +1,30 @@
+import { connect } from 'react-redux';
+import {
+  closeMatchingTransactionAside,
+  setUncategorizedTransactionIdForMatching,
+} from '@/store/banking/banking.reducer';
+
+export interface WithBankingActionsProps {
+  closeMatchingTransactionAside: () => void;
+  setUncategorizedTransactionIdForMatching: (
+    uncategorizedTransactionId: number,
+  ) => void;
+}
+
+const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
+  closeMatchingTransactionAside: () =>
+    dispatch(closeMatchingTransactionAside()),
+  setUncategorizedTransactionIdForMatching: (
+    uncategorizedTransactionId: number,
+  ) =>
+    dispatch(
+      setUncategorizedTransactionIdForMatching(uncategorizedTransactionId),
+    ),
+});
+
+export const withBankingActions = connect<
+  null,
+  WithBankingActionsProps,
+  {},
+  any
+>(null, mapDipatchToProps);