re-structure to monorepo.

packages/webapp/src/containers/Preferences/Branches/Branches.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import BranchesDataTable from './BranchesDataTable';
+import BranchesEmptyStatus from './BranchesEmptyStatus';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import { useBranchesContext } from './BranchesProvider';
+
+import { compose } from '@/utils';
+
+function Branches({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  const { isEmptyStatus } = useBranchesContext();
+
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('branches.label'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <React.Fragment>
+      {isEmptyStatus ? <BranchesEmptyStatus /> : <BranchesDataTable />}
+    </React.Fragment>
+  );
+}
+export default compose(withDashboardActions)(Branches);

packages/webapp/src/containers/Preferences/Branches/BranchesActions.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+
+import { Features } from '@/constants';
+import { FeatureCan, FormattedMessage as T, Icon } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function BranchesActions({
+  //#ownProps
+  openDialog,
+}) {
+  const handleClickNewBranche = () => {
+    openDialog('branch-form');
+  };
+
+  return (
+    <React.Fragment>
+      <FeatureCan feature={Features.Branches}>
+        <Button
+          icon={<Icon icon="plus" iconSize={12} />}
+          onClick={handleClickNewBranche}
+          intent={Intent.PRIMARY}
+        >
+          <T id={'branches.label.new_branch'} />
+        </Button>
+      </FeatureCan>
+    </React.Fragment>
+  );
+}
+
+export default compose(withDialogActions)(BranchesActions);

packages/webapp/src/containers/Preferences/Branches/BranchesAlerts.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+import React from 'react';
+
+const BranchDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Branches/BranchDeleteAlert'),
+);
+
+export default [{ name: 'branch-delete', component: BranchDeleteAlert }];

packages/webapp/src/containers/Preferences/Branches/BranchesDataTable.tsx

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+
+import '@/style/pages/Preferences/branchesList.scss';
+
+import { DataTable, Card, AppToaster, TableSkeletonRows } from '@/components';
+import { useBranchesTableColumns, ActionsMenu } from './components';
+import { useBranchesContext } from './BranchesProvider';
+import { useMarkBranchAsPrimary } from '@/hooks/query';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Branches data table.
+ */
+function BranchesDataTable({
+  // #withDialogAction
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  // Table columns.
+  const columns = useBranchesTableColumns();
+
+  // MarkBranchAsPrimary
+  const { mutateAsync: markBranchAsPrimaryMutate } = useMarkBranchAsPrimary();
+
+  const { branches, isBranchesLoading, isBranchesFetching } =
+    useBranchesContext();
+
+  // Handle edit branch.
+  const handleEditBranch = ({ id }) => {
+    openDialog('branch-form', { branchId: id, action: 'edit' });
+  };
+
+  // Handle delete branch.
+  const handleDeleteBranch = ({ id }) => {
+    openAlert('branch-delete', { branchId: id });
+  };
+
+  // Handle mark  branch as primary.
+  const handleMarkBranchAsPrimary = ({ id }) => {
+    markBranchAsPrimaryMutate(id).then(() => {
+      AppToaster.show({
+        message: intl.get('branch.alert.mark_primary_message'),
+        intent: Intent.SUCCESS,
+      });
+    });
+  };
+
+  return (
+    <BranchesTableCard>
+      <BranchesTable
+        columns={columns}
+        data={branches}
+        loading={isBranchesLoading}
+        headerLoading={isBranchesLoading}
+        progressBarLoading={isBranchesFetching}
+        TableLoadingRenderer={TableSkeletonRows}
+        noInitialFetch={true}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditBranch,
+          onDelete: handleDeleteBranch,
+          onMarkPrimary: handleMarkBranchAsPrimary,
+        }}
+      />
+    </BranchesTableCard>
+  );
+}
+
+export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
+
+const BranchesTableCard = styled(Card)`
+  padding: 0;
+`;
+
+const BranchesTable = styled(DataTable)`
+  .table .tr {
+    min-height: 38px;
+
+    .td.td-name {
+      .bp3-icon {
+        margin: 0;
+        margin-left: 2px;
+        vertical-align: top;
+        color: #e1b31d;
+      }
+    }
+  }
+`;

packages/webapp/src/containers/Preferences/Branches/BranchesEmptyStatus.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, EmptyStatus } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { compose } from '@/utils';
+
+function BranchesEmptyStatus({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle activate action branch.
+  const handleActivateBranch = () => {
+    openDialog('branch-activate', {});
+  };
+
+  return (
+    <EmptyStatus
+      title={<T id={'branches.empty_status.title'} />}
+      description={
+        <p>
+          <T id={'branches.empty_status.description'} />
+        </p>
+      }
+      action={
+        <React.Fragment>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={handleActivateBranch}
+          >
+            <T id={'branches.activate_button'} />
+          </Button>
+        </React.Fragment>
+      }
+    />
+  );
+}
+export default compose(withDialogActions)(BranchesEmptyStatus);

packages/webapp/src/containers/Preferences/Branches/BranchesProvider.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { useBranches } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+import { isEmpty } from 'lodash';
+
+const BranchesContext = React.createContext();
+
+/**
+ * Branches data provider.
+ */
+function BranchesProvider({ query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the branches list.
+  const {
+    isLoading: isBranchesLoading,
+    isFetching: isBranchesFetching,
+    data: branches,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    (isEmpty(branches) && !isBranchesLoading) || !isBranchFeatureCan;
+
+  // Provider state.
+  const provider = {
+    branches,
+    isBranchesLoading,
+    isBranchesFetching,
+    isEmptyStatus,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_BRANCHES,
+      )}
+    >
+      <BranchesContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useBranchesContext = () => React.useContext(BranchesContext);
+export { BranchesProvider, useBranchesContext };

packages/webapp/src/containers/Preferences/Branches/components.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+
+import { safeCallback } from '@/utils';
+import { Icon, If } from '@/components';
+
+/**
+ * Context menu of Branches.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onMarkPrimary },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('branches.action.edit_branch')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <If condition={!original.primary}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('branches.action.mark_as_primary')}
+          onClick={safeCallback(onMarkPrimary, original)}
+        />
+      </If>
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('branches.action.delete_branch')}
+        onClick={safeCallback(onDelete, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Branch name cell.
+ */
+function BranchNameCell({ value, row: { original } }) {
+  return (
+    <span>
+      {value} {original.primary && <Icon icon={'star-18dp'} iconSize={16} />}
+    </span>
+  );
+}
+
+/**
+ * Retrieve branches table columns
+ * @returns
+ */
+export function useBranchesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('branches.column.branch_name'),
+        accessor: 'name',
+        Cell: BranchNameCell,
+        width: '120',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        id: 'code',
+        Header: intl.get('branches.column.code'),
+        accessor: 'code',
+        width: '100',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('branches.column.address'),
+        accessor: 'address',
+        width: '180',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('branches.column.phone_number'),
+        accessor: 'phone_number',
+        width: '120',
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Preferences/Branches/index.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+
+import { BranchesProvider } from './BranchesProvider';
+import Branches from './Branches';
+
+/**
+ * Branches .
+ */
+export default function BranchesPreferences() {
+  return (
+    <BranchesProvider>
+      <Branches />
+    </BranchesProvider>
+  );
+}

packages/webapp/src/containers/Preferences/Branches/utils.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+
+/**
+ * Handle delete errors.
+ */
+export const handleDeleteErrors = (errors) => {
+  if (errors.find((error) => error.type === 'COULD_NOT_DELETE_ONLY_BRANCH')) {
+    AppToaster.show({
+      message: intl.get('branch.error.could_not_delete_only_branch'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (errors.some((e) => e.type === 'BRANCH_HAS_ASSOCIATED_TRANSACTIONS')) {
+    AppToaster.show({
+      message: intl.get('branche.error.branch_has_associated_transactions'),
+      intent: Intent.DANGER,
+    });
+  }
+};