chrone: sperate client and server to different repos.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { DrawerMainTabs } from 'components';
+
+import EstimateDetailPanel from './EstimateDetailPanel';
+import clsx from 'classnames';
+
+import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+
+/**
+ * Estimate view detail
+ */
+export default function EstimateDetail() {
+  return (
+    <div className={clsx(EstimateDetailsCls.root)}>
+      <DrawerMainTabs>
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<EstimateDetailPanel />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { compose } from 'utils';
+
+/**
+ * Estimate read-only details actions bar of the drawer.
+ */
+function EstimateDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { estimateId } = useEstimateDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit sale estimate.
+  const handleEditEstimate = () => {
+    history.push(`/estimates/${estimateId}/edit`);
+    closeDrawer('estimate-detail-drawer');
+  };
+
+  // Handle delete sale estimate.
+  const handleDeleteEstimate = () => {
+    openAlert('estimate-delete', { estimateId });
+  };
+
+  // Handle print estimate.
+  const handlePrintEstimate = () => {
+    openDialog('estimate-pdf-preview', { estimateId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_estimate'} />}
+          onClick={handleEditEstimate}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" />}
+          text={<T id={'print'} />}
+          onClick={handlePrintEstimate}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteEstimate}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(EstimateDetailActionsBar);

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import EstimateDetail from './EstimateDetail';
+import { EstimateDetailDrawerProvider } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate detail drawer content.
+ */
+export default function EstimateDetailDrawerContent({
+  // #ownProp
+  estimateId,
+}) {
+  return (
+    <EstimateDetailDrawerProvider estimateId={estimateId}>
+      <DrawerBody>
+        <EstimateDetail />
+      </DrawerBody>
+    </EstimateDetailDrawerProvider>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useEstimate } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+
+const EstimateDetailDrawerContext = React.createContext();
+
+/**
+ * Estimate detail provider.
+ */
+function EstimateDetailDrawerProvider({ estimateId, ...props }) {
+  // Fetches the estimate by the given id.
+  const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
+    estimateId,
+    { enabled: !!estimateId },
+  );
+
+  const provider = {
+    estimateId,
+    estimate,
+  };
+
+  return (
+    <DrawerLoading loading={isEstimateLoading}>
+      <DrawerHeaderContent
+        name="estimate-detail-drawer"
+        title={intl.get('estimate_details')}
+      />
+      <EstimateDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useEstimateDetailDrawerContext = () =>
+  React.useContext(EstimateDetailDrawerContext);
+
+export { EstimateDetailDrawerProvider, useEstimateDetailDrawerContext };

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine, If } from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+import { FormatNumber } from '../../../components';
+
+import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+
+/**
+ * Estimate details panel footer content.
+ */
+export default function EstimateDetailFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
+      <TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
+        <TotalLine
+          title={<T id={'estimate.details.subtotal'} />}
+          value={<FormatNumber value={estimate.amount} />}
+          className={EstimateDetailsCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'estimate.details.total'} />}
+          value={estimate.formatted_amount}
+          className={EstimateDetailsCls.total_line_total}
+        />
+      </TotalLines>
+
+      <If condition={false}>
+        <div className={clsx(EstimateDetailsCls.detail_panel_note)}>
+          <p>
+            <b><T id={'estimate.details.note'} />:</b> --
+          </p>
+        </div>
+      </If>
+    </div>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import clsx from 'classnames';
+
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+
+/**
+ * Estimate read-only details drawer header.
+ */
+export default function EstimateDetailHeader() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <div className={clsx(EstimateDetailsCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <span class="big-number">{estimate.formatted_amount}</span>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('estimate.details.estimate_number')}
+          children={defaultTo(estimate.estimate_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={estimate.customer?.display_name}
+        />
+        <DetailItem
+          label={intl.get('estimate_date')}
+          children={estimate.formatted_estimate_date}
+        />
+        <DetailItem
+          label={intl.get('expiration_date')}
+          children={estimate.formatted_expiration_date}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('reference')}
+          children={defaultTo(estimate.reference, '-')}
+        />
+        <DetailItem
+          label={<T id={'estimate.details.created_at'} />}
+          children={<FormatDate value={estimate.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import EstimateDetailActionsBar from './EstimateDetailActionsBar';
+import EstimateDetailHeader from './EstimateDetailHeader';
+import EstimateDetailTable from './EstimateDetailTable';
+
+import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+import EstimateDetailFooter from './EstimateDetailFooter';
+
+export default function EstimateDetailTab() {
+  return (
+    <div className={clsx(EstimateDetailsCls.detail_panel)}>
+      <EstimateDetailActionsBar />
+
+      <Card>
+        <EstimateDetailHeader />
+        <EstimateDetailTable />
+        <EstimateDetailFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { DataTable } from 'components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+import { useEstimateReadonlyEntriesColumns } from './utils';
+
+import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
+
+/**
+ * Estimate detail table.
+ */
+export default function EstimateDetailTable() {
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  // Estimate entries table columns.
+  const columns = useEstimateReadonlyEntriesColumns();
+
+  return (
+    <div className={clsx(EstimateDetailsCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/EstimateDrawerClasses.js

@@ -0,0 +1,32 @@
+const globalStateClassesMapping = {
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  required: 'required',
+  selected: 'selected',
+};
+
+function generateUtilityClass(componentName, slot) {
+  const globalStateClass = globalStateClassesMapping[slot];
+  return globalStateClass || `${componentName}__${slot}`;
+}
+
+function generateUtilityClasses(componentName, modifiers) {
+  const result = {
+    root: componentName,
+  };
+  modifiers.forEach((modifier) => {
+    result[modifier] = generateUtilityClass(componentName, modifier);
+  });
+
+  return result;
+}
+
+export const EstimateDrawerCls = generateUtilityClasses('estimate-drawer', [
+  'content',
+]);

src/containers/Drawers/EstimateDetailDrawer/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const EstimateDetailDrawerContent = React.lazy(() =>
+  import('./EstimateDetailDrawerContent'),
+);
+
+function EstimateDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { estimateId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <EstimateDetailDrawerContent estimateId={estimateId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(EstimateDetailDrawer);

src/containers/Drawers/EstimateDetailDrawer/utils.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve table columns of estimate readonly entries details.
+ */
+export const useEstimateReadonlyEntriesColumns = () =>
+  React.useMemo(() => [
+    {
+      Header: intl.get('product_and_service'),
+      accessor: 'item.name',
+      width: 150,
+      className: 'name',
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('description'),
+      accessor: 'description',
+      className: 'description',
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('quantity'),
+      accessor: 'quantity',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('rate'),
+      accessor: 'rate',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('amount'),
+      accessor: 'amount',
+      Cell: FormatNumberCell,
+      width: 100,
+      align: 'right',
+      disableSortBy: true,
+    },
+  ], []);