re-structure to monorepo.

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Tab } from '@blueprintjs/core';
+
+import { DrawerMainTabs } from '@/components';
+
+import EstimateDetailActionsBar from './EstimateDetailActionsBar';
+import EstimateDetailPanel from './EstimateDetailPanel';
+
+/**
+ * Estimate details tabs.
+ * @returns {React.JSX}
+ */
+function EstimateDetailsTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<EstimateDetailPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+/**
+ * Estimate view detail
+ */
+export default function EstimateDetail() {
+  return (
+    <EstimateDetailsRoot>
+      <EstimateDetailActionsBar />
+      <EstimateDetailsTabs />
+    </EstimateDetailsRoot>
+  );
+}
+
+const EstimateDetailsRoot = styled.div``;

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx

@@ -0,0 +1,114 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import { EstimateMoreMenuItems } from './components';
+import {
+  DrawerActionsBar,
+  Icon,
+  FormattedMessage as T,
+  Can,
+} from '@/components';
+
+import { compose } from '@/utils';
+
+/**
+ * Estimate read-only details actions bar of the drawer.
+ */
+function EstimateDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  // Estimate details drawer context.
+  const { estimateId } = useEstimateDetailDrawerContext();
+
+  // History.
+  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 });
+  };
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-estimate-via-sms', { estimateId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_estimate'} />}
+            onClick={handleEditEstimate}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintEstimate}
+          />
+        </Can>
+        <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteEstimate}
+          />
+        </Can>
+        <Can I={SaleEstimateAction.NotifyBySms} a={AbilitySubject.Estimate}>
+          <NavbarDivider />
+          <EstimateMoreMenuItems
+            payload={{
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(EstimateDetailActionsBar);

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+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>
+  );
+}

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Features } from '@/constants';
+import { useEstimate } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+
+const EstimateDetailDrawerContext = React.createContext();
+
+/**
+ * Estimate detail provider.
+ */
+function EstimateDetailDrawerProvider({ estimateId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // 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.drawer.title', {
+          number: estimate.estimate_number,
+        })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('estimate.drawer.subtitle', {
+                value: estimate.branch?.name,
+              })
+            : null
+        }
+      />
+      <EstimateDetailDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useEstimateDetailDrawerContext = () =>
+  React.useContext(EstimateDetailDrawerContext);
+
+export { EstimateDetailDrawerProvider, useEstimateDetailDrawerContext };

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '@/components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate details footer.
+ * @returns {React.JSX}
+ */
+export default function EstimateDetailFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+  
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={estimate.terms_conditions}>
+          <DetailItem label={<T id={'estimate.details.terms_conditions'} />}>
+            {estimate.terms_conditions}
+          </DetailItem>
+        </If>
+        <If condition={estimate.note}>
+          <DetailItem label={<T id={'estimate.details.note'} />}>
+            {estimate.note}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  FormatDate,
+  T,
+  DetailsMenu,
+  DetailItem,
+  Row,
+  Col,
+  CustomerDrawerLink,
+  ExchangeRateDetailItem,
+} from '@/components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+import { EstimateDetailsStatus } from './components';
+
+/**
+ * Estimate read-only details drawer header.
+ */
+export default function EstimateDetailHeader() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <AmountEstimateDetail label={intl.get('amount')}>
+            <span class="big-number">{estimate.formatted_amount}</span>
+          </AmountEstimateDetail>
+
+          <EstimateStatusDetail>
+            <EstimateDetailsStatus estimate={estimate} />
+          </EstimateStatusDetail>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('estimate.details.estimate_number')}
+              children={defaultTo(estimate.estimate_number, '-')}
+            />
+
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={estimate.customer_id}>
+                {estimate.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('estimate_date')}
+              children={estimate.formatted_estimate_date}
+            />
+
+            <DetailItem
+              label={intl.get('expiration_date')}
+              children={estimate.formatted_expiration_date}
+            />
+            <ExchangeRateDetailItem
+              exchangeRate={estimate?.exchange_rate}
+              toCurrency={estimate?.currency_code}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(estimate.reference, '-')}
+            />
+            <DetailItem
+              label={<T id={'estimate.details.created_at'} />}
+              children={<FormatDate value={estimate.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const EstimateStatusDetail = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+`;
+const AmountEstimateDetail = styled(DetailItem)`
+  width: 50%;
+`;

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocBox } from '@/components';
+
+import EstimateDetailHeader from './EstimateDetailHeader';
+import EstimateDetailTable from './EstimateDetailTable';
+import EstimateDetailTableFooter from './EstimateDetailTableFooter';
+import EstimateDetailFooter from './EstimateDetailFooter';
+
+
+export default function EstimateDetailTab() {
+  return (
+    <CommercialDocBox>
+      <EstimateDetailHeader />
+      <EstimateDetailTable />
+      <EstimateDetailTableFooter />
+      <EstimateDetailFooter />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+import { useEstimateReadonlyEntriesColumns } from './utils';
+
+import { TableStyle } from '@/constants';
+
+/**
+ * Estimate detail table.
+ */
+export default function EstimateDetailTable() {
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  // Estimate entries table columns.
+  const columns = useEstimateReadonlyEntriesColumns();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+  FormatNumber,
+} from '@/components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate details panel footer content.
+ */
+export default function EstimateDetailTableFooter() {
+  const { estimate } = useEstimateDetailDrawerContext();
+
+  return (
+    <EstimateDetailsFooterRoot>
+      <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'estimate.details.subtotal'} />}
+          value={<FormatNumber value={estimate.amount} />}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'estimate.details.total'} />}
+          value={estimate.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </EstimateTotalLines>
+    </EstimateDetailsFooterRoot>
+  );
+}
+
+export const EstimateDetailsFooterRoot = styled.div``;
+
+export const EstimateTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDrawerClasses.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+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',
+]);

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/components.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Tag,
+} from '@blueprintjs/core';
+
+import { Icon, T, Choose } from '@/components';
+
+/**
+ * Estimate details status.
+ * @return {React.JSX}
+ */
+export function EstimateDetailsStatus({ estimate }) {
+  return (
+    <Choose>
+      <Choose.When condition={estimate.is_approved}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'approved'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_rejected}>
+        <Tag intent={Intent.DANGER} round={true}>
+          <T id={'rejected'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_expired}>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'estimate.status.expired'} />
+        </Tag>
+      </Choose.When>
+      <Choose.When condition={estimate.is_delivered}>
+        <Tag intent={Intent.SUCCESS} round={true}>
+          <T id={'delivered'} />
+        </Tag>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag round={true} minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
+        </Menu>
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/index.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Drawers/EstimateDetailDrawer/utils.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { getColumnWidth } from '@/utils';
+import { FormatNumberCell, TextOverviewTooltipCell } from '@/components';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Retrieve table columns of estimate readonly entries details.
+ */
+export const useEstimateReadonlyEntriesColumns = () => {
+  // estimate details drawer context.
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};