feat: toggle banking matching aside

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"