chrone: sperate client and server to different repos.

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+import {
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  FormattedMessage as T,
+} from 'components';
+
+import { If, DashboardActionViewsList } from 'components';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withReceiptsActions from './withReceiptsActions';
+import withReceipts from './withReceipts';
+
+import { useReceiptsListContext } from './ReceiptsListProvider';
+import { useRefreshReceipts } from 'hooks/query/receipts';
+import { compose } from 'utils';
+
+/**
+ * Receipts actions bar.
+ */
+function ReceiptActionsBar({
+  // #withReceiptsActions
+  setReceiptsTableState,
+
+  // #withReceipts
+  receiptsFilterConditions,
+}) {
+  const history = useHistory();
+
+  // Sale receipts list context.
+  const { receiptsViews, fields } = useReceiptsListContext();
+
+  // Handle new receipt button click.
+  const onClickNewReceipt = () => {
+    history.push('/receipts/new');
+  };
+
+  // Sale receipt refresh action.
+  const { refresh } = useRefreshReceipts();
+
+  const handleTabChange = (view) => {
+    setReceiptsTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'receipts'}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          views={receiptsViews}
+          onChange={handleTabChange}
+        />
+
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_receipt'} />}
+          onClick={onClickNewReceipt}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: receiptsFilterConditions,
+            defaultFieldKey: 'reference_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setReceiptsTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={receiptsFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withReceiptsActions,
+  withReceipts(({ receiptTableState }) => ({
+    receiptsFilterConditions: receiptTableState.filterRoles,
+  })),
+)(ReceiptActionsBar);

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+import withReceiptActions from './withReceiptsActions';
+import withReceipts from './withReceipts';
+
+import { compose, transfromViewsToTabs } from 'utils';
+import { useReceiptsListContext } from './ReceiptsListProvider';
+
+/**
+ * Receipts views tabs.
+ */
+function ReceiptViewTabs({
+  // #withReceiptActions
+  setReceiptsTableState,
+
+  // #withReceipts
+  receiptsCurrentView,
+}) {
+  // Receipts list context.
+  const { receiptsViews } = useReceiptsListContext();
+
+  const tabs = transfromViewsToTabs(receiptsViews);
+
+  // Handles the active tab chaning.
+  const handleTabsChange = (viewSlug) => {
+    setReceiptsTableState({
+      viewSlug: viewSlug || null,
+    });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={receiptsCurrentView}
+          tabs={tabs}
+          resourceName={'receipts'}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withReceiptActions,
+  withReceipts(({ receiptTableState }) => ({
+    receiptsCurrentView: receiptTableState.viewSlug,
+  })),
+)(ReceiptViewTabs);

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'components';
+
+export default function ReceiptsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'manage_the_organization_s_services_and_products'} />}
+      description={
+        <p>
+          <T id={'receipt_empty_status_description'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/receipts/new');
+            }}
+          >
+            <T id={'new_receipt'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+         <T id={'learn_more'}/>
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
+
+import 'style/pages/SaleReceipt/List.scss';
+
+import ReceiptActionsBar from './ReceiptActionsBar';
+import ReceiptViewTabs from './ReceiptViewTabs';
+import ReceiptsAlerts from '../ReceiptsAlerts';
+import ReceiptsTable from './ReceiptsTable';
+
+import withReceipts from './withReceipts';
+import withReceiptsActions from './withReceiptsActions';
+
+import { ReceiptsListProvider } from './ReceiptsListProvider';
+import { transformTableStateToQuery, compose } from 'utils';
+
+/**
+ * Receipts list page.
+ */
+function ReceiptsList({
+  // #withReceipts
+  receiptTableState,
+  receiptsTableStateChanged,
+
+  // #withReceiptsActions
+  resetReceiptsTableState,
+}) {
+  // Resets the receipts table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetReceiptsTableState();
+    },
+    [resetReceiptsTableState],
+  );
+
+  return (
+    <ReceiptsListProvider
+      query={transformTableStateToQuery(receiptTableState)}
+      tableStateChanged={receiptsTableStateChanged}
+    >
+      <DashboardPageContent>
+        <ReceiptActionsBar />
+
+        <DashboardPageContent>
+          <ReceiptViewTabs />
+          <ReceiptsTable />
+        </DashboardPageContent>
+
+        <ReceiptsAlerts />
+      </DashboardPageContent>
+    </ReceiptsListProvider>
+  );
+}
+
+export default compose(
+  withReceipts(({ receiptTableState, receiptsTableStateChanged }) => ({
+    receiptTableState,
+    receiptsTableStateChanged,
+  })),
+  withReceiptsActions,
+)(ReceiptsList);

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js

@@ -0,0 +1,60 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import { useResourceMeta, useResourceViews, useReceipts } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
+
+const ReceiptsListContext = createContext();
+
+// Receipts list provider.
+function ReceiptsListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch receipts resource views and fields.
+  const { data: receiptsViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_receipt');
+
+  // Fetches the sale receipts resource fields.
+  const {
+    data: resourceMeta,
+    isFetching: isResourceFetching,
+    isLoading: isResourceLoading,
+  } = useResourceMeta('sale_receipt');
+
+  const {
+    data: { receipts, pagination, filterMeta },
+    isLoading: isReceiptsLoading,
+    isFetching: isReceiptsFetching,
+  } = useReceipts(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(receipts) && !tableStateChanged && !isReceiptsLoading;
+
+  const provider = {
+    receipts,
+    pagination,
+
+    receiptsViews,
+    isViewsLoading,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceFetching,
+    isResourceLoading,
+
+    isReceiptsLoading,
+    isReceiptsFetching,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider loading={isViewsLoading} name={'sales_receipts'}>
+      <ReceiptsListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useReceiptsListContext = () => React.useContext(ReceiptsListContext);
+
+export { ReceiptsListProvider, useReceiptsListContext };

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js

@@ -0,0 +1,148 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { compose } from 'utils';
+import { DataTable, DashboardContentTable } from 'components';
+import { TABLES } from 'common/tables';
+
+import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withReceipts from './withReceipts';
+import withReceiptsActions from './withReceiptsActions';
+
+import { useReceiptsListContext } from './ReceiptsListProvider';
+import { useReceiptsTableColumns, ActionsMenu } from './components';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+/**
+ * Sale receipts datatable.
+ */
+function ReceiptsDataTable({
+  // #withReceiptsActions
+  setReceiptsTableState,
+
+  // #withReceipts
+  receiptTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Receipts list context.
+  const {
+    receipts,
+    pagination,
+    isReceiptsFetching,
+    isReceiptsLoading,
+    isEmptyStatus,
+  } = useReceiptsListContext();
+
+  // Receipts table columns.
+  const columns = useReceiptsTableColumns();
+
+  // Handle receipt edit action.
+  const handleEditReceipt = ({ id }) => {
+    history.push(`/receipts/${id}/edit`);
+  };
+
+  // Handles receipt delete action.
+  const handleDeleteReceipt = (receipt) => {
+    openAlert('receipt-delete', { receiptId: receipt.id });
+  };
+
+  // Handles receipt close action.
+  const handleCloseReceipt = (receipt) => {
+    openAlert('receipt-close', { receiptId: receipt.id });
+  };
+
+  // Handle view detail receipt.
+  const handleViewDetailReceipt = ({ id }) => {
+    openDrawer('receipt-detail-drawer', { receiptId: id });
+  };
+
+  // Handle print receipt.
+  const handlePrintInvoice = ({ id }) => {
+    openDialog('receipt-pdf-preview', { receiptId: id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.RECEIPTS);
+
+  // Handles the datable fetch data once the state changing.
+  const handleDataTableFetchData = useCallback(
+    ({ sortBy, pageIndex, pageSize }) => {
+      setReceiptsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setReceiptsTableState],
+  );
+
+  if (isEmptyStatus) {
+    return <ReceiptsEmptyStatus />;
+  }
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id });
+  };
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={receipts}
+        loading={isReceiptsLoading}
+        headerLoading={isReceiptsLoading}
+        progressBarLoading={isReceiptsFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        manualPagination={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onEdit: handleEditReceipt,
+          onDelete: handleDeleteReceipt,
+          onClose: handleCloseReceipt,
+          onViewDetails: handleViewDetailReceipt,
+          onPrint: handlePrintInvoice,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withReceiptsActions,
+  withDrawerActions,
+  withDialogActions,
+  withReceipts(({ receiptTableState }) => ({
+    receiptTableState,
+  })),
+)(ReceiptsDataTable);

src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  Position,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+  Popover,
+  Tag,
+  Button,
+} from '@blueprintjs/core';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../../common/classes';
+import { safeCallback } from 'utils';
+import { FormatDateCell, Choose, Money, Icon, If } from 'components';
+
+export function ActionsMenu({
+  payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
+  row: { original: receipt },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, receipt)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_receipt')}
+        onClick={safeCallback(onEdit, receipt)}
+      />
+      <If condition={!receipt.is_closed}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('mark_as_closed')}
+          onClick={safeCallback(onClose, receipt)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon={'print-16'} iconSize={16} />}
+        text={intl.get('print')}
+        onClick={safeCallback(onPrint, receipt)}
+      />
+      <MenuItem
+        text={intl.get('delete_receipt')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, receipt)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(receipt) {
+  return (
+    <Choose>
+      <Choose.When condition={receipt.is_closed}>
+        <Tag minimal={true} intent={Intent.SUCCESS}>
+          <T id={'closed'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true} intent={Intent.WARNING}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Retrieve receipts table columns.
+ */
+export function useReceiptsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('receipt_date'),
+        accessor: 'receipt_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'receipt_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_number'),
+        accessor: 'receipt_number',
+        width: 140,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'deposit_account',
+        Header: intl.get('deposit_account'),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
+        width: 140,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js

@@ -0,0 +1,19 @@
+  import { connect } from 'react-redux';
+import {
+  getReceiptsTableStateFactory,
+  receiptsTableStateChangedFactory,
+} from 'store/receipts/receipts.selector';
+
+export default (mapState) => {
+  const getReceiptsTableState = getReceiptsTableStateFactory();
+  const receiptsTableStateChanged = receiptsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      receiptTableState: getReceiptsTableState(state, props),
+      receiptsTableStateChanged: receiptsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setReceiptsTableState,
+  resetReceiptsTableState,
+} from 'store/receipts/receipts.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setReceiptsTableState: (queries) => dispatch(setReceiptsTableState(queries)),
+  resetReceiptsTableState: () => dispatch(resetReceiptsTableState()),
+});
+
+export default connect(null, mapDispatchToProps);