feat(webapp): rule form

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContent.tsx

@@ -1,19 +1,20 @@
-import { RuleFormBoot } from "./RuleFormBoot";
-
+import { RuleFormBoot } from './RuleFormBoot';
+import { RuleFormContentForm } from './RuleFormContentForm';
 
 interface RuleFormContentProps {
   dialogName: string;
   bankRuleId?: number;
 }
-export function RuleFormContent({
+
+export default function RuleFormContent({
   dialogName,
   bankRuleId,
 }: RuleFormContentProps) {
   return (
-    <RuleFormBoot
-      bankRuleId={bankRuleId}
-    >
-      
-    </RuleFormBoot>
+    <div>
+      <RuleFormBoot bankRuleId={bankRuleId}>
+        <RuleFormContentForm />
+      </RuleFormBoot>
+    </div>
   );
 }

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx

@@ -1,5 +1,5 @@
 import { Form, Formik, useFormikContext } from 'formik';
-import { Button, Radio } from '@blueprintjs/core';
+import { Button, Classes, Intent, Radio } from '@blueprintjs/core';
 import { CreateRuleFormSchema } from './RuleFormContentForm.schema';
 import {
   Box,
@@ -61,7 +61,10 @@ export function RuleFormContentForm() {
           <FSelect name={'conditionsType'} items={[]} />
         </FFormGroup>
 
-        <FFormGroup name={''} label={'Categorize the transactions when'}>
+        <FFormGroup
+          name={'conditionsType'}
+          label={'Categorize the transactions when'}
+        >
           <FRadioGroup name={'conditionsType'}>
             <Radio value={'and'} label={'All the following criteria matches'} />
             <Radio
@@ -72,7 +75,6 @@ export function RuleFormContentForm() {
         </FFormGroup>
 
         <RuleFormConditions />
-
         <h3>Then Assign</h3>
 
         <FFormGroup name={'assignCategory'} label={'Transaction type'}>
@@ -86,6 +88,8 @@ export function RuleFormContentForm() {
         <FFormGroup name={'assignRef'} label={'Reference'}>
           <FInputGroup name={'assignRef'} />
         </FFormGroup>
+
+        <RuleFormActions />
       </Form>
     </Formik>
   );
@@ -132,3 +136,25 @@ function RuleFormConditions() {
     </Box>
   );
 }
+
+function RuleFormActions() {
+  const { isSubmitting, submitForm } = useFormikContext<RuleFormValues>();
+
+  const handleSaveBtnClick = () => {
+    submitForm();
+  };
+  const handleCancelBtnClick = () => {};
+
+  return (
+    <Box className={Classes.DIALOG_FOOTER}>
+      <Button
+        intent={Intent.PRIMARY}
+        loading={isSubmitting}
+        onClick={handleSaveBtnClick}
+      >
+        Save
+      </Button>
+      <Button onClick={handleCancelBtnClick}>Cancel</Button>
+    </Box>
+  );
+}

packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx

@@ -9,14 +9,14 @@ const RuleFormContent = React.lazy(() => import('./RuleFormContent'));
 /**
  * Payment mail dialog.
  */
-function RuleFormDialog({
+function RuleFormDialogRoot({
   dialogName,
   payload: { bankRuleId = null },
   isOpen,
 }) {
   return (
     <Dialog
-      name={dialogName}
+      name={dialogName}f
       title={'New Bank Rule'}
       isOpen={isOpen}
       canEscapeJeyClose={true}
@@ -30,4 +30,6 @@ function RuleFormDialog({
   );
 }
 
-export default compose(withDialogRedux())(RuleFormDialog);
+export const RuleFormDialog = compose(withDialogRedux())(RuleFormDialogRoot);
+
+RuleFormDialog.displayName = 'RuleFormDialog';

packages/webapp/src/containers/Banking/Rules/RulesList/RulesLandingPage.ts

@@ -0,0 +1,3 @@
+import { RulesList } from './RulesList';
+
+export default RulesList;

packages/webapp/src/containers/Banking/Rules/RulesList/RulesListActionsBar.tsx

@@ -1,10 +1,37 @@
-import { DashboardActionsBar } from '@/components';
-import { NavbarGroup } from '@blueprintjs/core';
+// @ts-nocheck
+import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
+import * as R from 'ramda';
+import { Can, DashboardActionsBar, Icon } from '@/components';
+import { AbilitySubject, BankRuleAction } from '@/constants/abilityOption';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+
+function RulesListActionsBarRoot({
+  // #withDialogActions
+  openDialog,
+}) {
+  const handleCreateBtnClick = () => {
+    openDialog(DialogsName.BankRuleForm);
+  };
 
-export function RulesListActionsBar() {
   return (
     <DashboardActionsBar>
-      <NavbarGroup></NavbarGroup>
+      <NavbarGroup>
+        <Can I={BankRuleAction.Create} a={AbilitySubject.BankRule}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={'New Bank Rule'}
+            onClick={handleCreateBtnClick}
+          />
+        </Can>
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
+
+export const RulesListActionsBar = R.compose(
+  withDialogActions,
+  withAlertActions,
+)(RulesListActionsBarRoot);

packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx

@@ -38,8 +38,10 @@ function RulesTable({
   // Handle delete bank rule.
   const handleEditBankRule = () => {};
 
+  const isEmptyState = false;
+
   // Display invoice empty status instead of the table.
-  if (isEmptyStatus) {
+  if (isEmptyState) {
     return <BankRulesLandingEmptyState />;
   }
 
@@ -62,11 +64,11 @@ function RulesTable({
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={BankRulesTableActionsMenu}
-        onCellClick={handleCellClick}
+        // onCellClick={handleCellClick}
         size={'medium'}
         payload={{
-          onDelete: handleDeleteTaxRate,
-          onEdit: handleEditTaxRate,
+          onDelete: handleDeleteBankRule,
+          onEdit: handleEditBankRule,
         }}
       />
     </DashboardContentTable>