chrone: sperate client and server to different repos.

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Intent,
+  Switch,
+  Alignment,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  If,
+  Icon,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { useRefreshCustomers } from 'hooks/query/customers';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customers actions bar.
+ */
+function CustomerActionsBar({
+  // #withCustomers
+  customersSelectedRows = [],
+  customersFilterConditions,
+
+  // #withCustomersActions
+  setCustomersTableState,
+  accountsInactiveMode,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  // History context.
+  const history = useHistory();
+
+  // Customers list context.
+  const { customersViews, fields } = useCustomersListContext();
+
+  // Customers refresh action.
+  const { refresh } = useRefreshCustomers();
+
+  const onClickNewCustomer = () => {
+    history.push('/customers/new');
+  };
+
+  // Handle Customers bulk delete button click.,
+  const handleBulkDelete = () => {
+    openAlert('customers-bulk-delete', { customersIds: customersSelectedRows });
+  };
+
+  const handleTabChange = (view) => {
+    setCustomersTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setCustomersTableState({ inactiveMode: checked });
+  };
+
+  // Handle click a refresh customers
+  const handleRefreshBtnClick = () => { refresh(); };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'customers'}
+          views={customersViews}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_customer'} />}
+          onClick={onClickNewCustomer}
+        />
+        <NavbarDivider />
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: customersFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCustomersTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={customersFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={customersSelectedRows.length}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={accountsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withCustomersActions,
+  withCustomers(({ customersSelectedRows, customersTableState }) => ({
+    customersSelectedRows,
+    accountsInactiveMode: customersTableState.inactiveMode,
+    customersFilterConditions: customersTableState.filterRoles,
+  })),
+  withAlertActions,
+)(CustomerActionsBar);

src/containers/Customers/CustomersLanding/CustomersEmptyStatus.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 CustomersEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'create_and_manage_your_organization_s_customers'} />}
+      description={
+        <p>
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/customers/new');
+            }}
+          >
+            <T id={'new_customer'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Customers/CustomersLanding/CustomersList.js

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+
+import 'style/pages/Customers/List.scss';
+
+import { DashboardPageContent } from 'components';
+
+import CustomersActionsBar from './CustomersActionsBar';
+import CustomersViewsTabs from './CustomersViewsTabs';
+import CustomersTable from './CustomersTable';
+import CustomersAlerts from 'containers/Customers/CustomersAlerts';
+import { CustomersListProvider } from './CustomersListProvider';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customers list.
+ */
+function CustomersList({
+  // #withCustomers
+  customersTableState,
+  customersTableStateChanged,
+
+  // #withCustomersActions
+  resetCustomersTableState,
+}) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      resetCustomersTableState();
+    },
+    [resetCustomersTableState],
+  );
+
+  return (
+    <CustomersListProvider
+      tableState={customersTableState}
+      tableStateChanged={customersTableStateChanged}
+    >
+      <CustomersActionsBar />
+
+      <DashboardPageContent>
+        <CustomersViewsTabs />
+        <CustomersTable />
+      </DashboardPageContent>
+      <CustomersAlerts />
+    </CustomersListProvider>
+  );
+}
+
+export default compose(
+  withCustomers(({ customersTableState, customersTableStateChanged }) => ({
+    customersTableState,
+    customersTableStateChanged,
+  })),
+  withCustomersActions,
+)(CustomersList);

src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -0,0 +1,66 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
+import { transformCustomersStateToQuery } from './utils';
+
+const CustomersListContext = createContext();
+
+function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
+  // Transformes the table state to fetch query.
+  const tableQuery = transformCustomersStateToQuery(tableState);
+
+  // Fetch customers resource views and fields.
+  const { data: customersViews, isLoading: isViewsLoading } =
+    useResourceViews('customers');
+
+  // Fetch the customers resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');
+
+  // Fetches customers data with pagination meta.
+  const {
+    data: { customers, pagination, filterMeta },
+    isLoading: isCustomersLoading,
+    isFetching: isCustomersFetching,
+  } = useCustomers(tableQuery, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(customers) && !isCustomersLoading && !tableStateChanged;
+
+  const state = {
+    customersViews,
+    customers,
+    pagination,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isViewsLoading,
+    isCustomersLoading,
+    isCustomersFetching,
+
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      name={'customers-list'}
+    >
+      <CustomersListContext.Provider value={state} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useCustomersListContext = () => React.useContext(CustomersListContext);
+
+export { CustomersListProvider, useCustomersListContext };

src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import CustomersEmptyStatus from './CustomersEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import { TABLES } from 'common/tables';
+import { DataTable, DashboardContentTable } from 'components';
+import { ActionsMenu, useCustomersTableColumns } from './components';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import { compose } from 'utils';
+
+/**
+ * Customers table.
+ */
+function CustomersTable({
+  // #withCustomersActions
+  setCustomersTableState,
+
+  // #withCustomers
+  customersTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogActions
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Customers table columns.
+  const columns = useCustomersTableColumns();
+
+  // Customers list context.
+  const {
+    isEmptyStatus,
+    customers,
+    pagination,
+    isCustomersLoading,
+    isCustomersFetching,
+  } = useCustomersListContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CUSTOMERS);
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setCustomersTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setCustomersTableState],
+  );
+
+  // Handles the customer delete action.
+  const handleCustomerDelete = ({ id }) => {
+    openAlert('customer-delete', { contactId: id });
+  };
+
+  // Handle the customer edit action.
+  const handleCustomerEdit = (customer) => {
+    history.push(`/customers/${customer.id}/edit`);
+  };
+
+  const handleContactDuplicate = ({ id }) => {
+    openDialog('contact-duplicate', { contactId: id });
+  };
+
+  // Handle cancel/confirm inactive.
+  const handleInactiveCustomer = ({ id, contact_service }) => {
+    openAlert('contact-inactivate', {
+      contactId: id,
+      service: contact_service,
+    });
+  };
+
+  // Handle cancel/confirm  activate.
+  const handleActivateCustomer = ({ id, contact_service }) => {
+    openAlert('contact-activate', { contactId: id, service: contact_service });
+  };
+
+  // Handle view detail contact.
+  const handleViewDetailCustomer = ({ id }) => {
+    openDrawer('customer-details-drawer', { customerId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('customer-details-drawer', { customerId: cell.row.original.id });
+  };
+
+  if (isEmptyStatus) {
+    return <CustomersEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={customers}
+        loading={isCustomersLoading}
+        headerLoading={isCustomersLoading}
+        progressBarLoading={isCustomersFetching}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
+        expandable={false}
+        sticky={true}
+        spinnerProps={{ size: 30 }}
+        pagination={true}
+        manualSortBy={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onDelete: handleCustomerDelete,
+          onEdit: handleCustomerEdit,
+          onDuplicate: handleContactDuplicate,
+          onInactivate: handleInactiveCustomer,
+          onActivate: handleActivateCustomer,
+          onViewDetails: handleViewDetailCustomer,
+        }}
+        ContextMenu={ActionsMenu}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withCustomersActions,
+  withDrawerActions,
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
+)(CustomersTable);

src/containers/Customers/CustomersLanding/CustomersViewsTabs.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { compose, transfromViewsToTabs } from 'utils';
+
+/**
+ * Customers views tabs.
+ */
+function CustomersViewsTabs({
+  // #withCustomersActions
+  setCustomersTableState,
+
+  // #withCustomers
+  customersCurrentView,
+}) {
+  // Customers list context.
+  const { customersViews } = useCustomersListContext();
+
+  // Transformes the views to tabs.
+  const tabs = transfromViewsToTabs(customersViews);
+
+  // Handle tabs change.
+  const handleTabsChange = (viewSlug) => {
+    setCustomersTableState({ viewSlug: viewSlug || null });
+  };
+
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={customersCurrentView}
+          resourceName={'customers'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withCustomersActions,
+  withCustomers(({ customersTableState }) => ({
+    customersCurrentView: customersTableState.viewSlug,
+  })),
+)(CustomersViewsTabs);

src/containers/Customers/CustomersLanding/components.js

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+} from '@blueprintjs/core';
+import clsx from 'classnames';
+import intl from 'react-intl-universal';
+
+import { CLASSES } from '../../../common/classes';
+import { Icon, Money, If } from 'components';
+import {  } from 'utils';
+import { safeCallback, firstLettersArgs } from 'utils';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onDelete,
+    onDuplicate,
+    onInactivate,
+    onActivate,
+    onViewDetails,
+  },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_customer')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="duplicate-16" />}
+        text={intl.get('duplicate')}
+        onClick={safeCallback(onDuplicate, original)}
+      />
+      <If condition={original.active}>
+        <MenuItem
+          text={intl.get('inactivate_customer')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
+          onClick={safeCallback(onInactivate, original)}
+        />
+      </If>
+      <If condition={!original.active}>
+        <MenuItem
+          text={intl.get('activate_customer')}
+          icon={<Icon icon="play-16" iconSize={16} />}
+          onClick={safeCallback(onActivate, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_customer')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Avatar cell.
+ */
+export function AvatarCell(row) {
+  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
+}
+
+/**
+ * Phone number accessor.
+ */
+export function PhoneNumberAccessor(row) {
+  return <div className={'work_phone'}>{row.work_phone}</div>;
+}
+
+/**
+ * Balance accessor.
+ */
+export function BalanceAccessor(row) {
+  return <Money amount={row.closing_balance} currency={row.currency_code} />;
+}
+
+/**
+ * Retrieve customers table columns.
+ */
+export function useCustomersTableColumns() {
+  return useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        className: 'avatar',
+        width: 45,
+        disableResizing: true,
+        disableSortBy: true,
+        clickable: true,
+      },
+      {
+        id: 'display_name',
+        Header: intl.get('display_name'),
+        accessor: 'display_name',
+        className: 'display_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'company_name',
+        Header: intl.get('company_name'),
+        accessor: 'company_name',
+        className: 'company_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'work_phone',
+        Header: intl.get('work_phone'),
+        accessor: PhoneNumberAccessor,
+        className: 'phone_number',
+        width: 100,
+        clickable: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('receivable_balance'),
+        accessor: BalanceAccessor,
+        align: 'right',
+        width: 100,
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Customers/CustomersLanding/utils.js

@@ -0,0 +1,8 @@
+import { transformTableStateToQuery } from 'utils';
+
+export const transformCustomersStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode,
+  };
+};

src/containers/Customers/CustomersLanding/withCustomers.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import {
+  getCustomersTableStateFactory,
+  customersTableStateChangedFactory,
+} from 'store/customers/customers.selectors';
+
+
+export default (mapState) => {
+  const getCustomersTableState = getCustomersTableStateFactory();
+  const customersTableStateChanged = customersTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      customersTableState: getCustomersTableState(state, props),
+      customersTableStateChanged: customersTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Customers/CustomersLanding/withCustomersActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setCustomersTableState,
+  resetCustomersTableState
+} from 'store/customers/customers.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
+  resetCustomersTableState: () => dispatch(resetCustomersTableState()),
+});
+
+export default connect(null, mapDispatchToProps);