re-structure to monorepo.

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  DrawerActionsBar,
+  Can,
+  FormattedMessage as T,
+} from '@/components';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import { ManualJournalAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+
+/**
+ * Manual journal action bar.
+ */
+function ManualJournalDrawerActionBar({
+  // #withAlertsDialog
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+  const { manualJournalId } = useManualJournalDrawerContext();
+
+  // Handle edit manual journal action.
+  const handleEditManualJournal = () => {
+    history.push(`/manual-journals/${manualJournalId}/edit`);
+    closeDrawer('journal-drawer');
+  };
+
+  // Handle manual journal delete action.
+  const handleDeleteManualJournal = () => {
+    openAlert('journal-delete', { manualJournalId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_journal'} />}
+            onClick={handleEditManualJournal}
+          />
+        </Can>
+        <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+          <NavbarDivider />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteManualJournal}
+          />
+        </Can>
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(ManualJournalDrawerActionBar);

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/components/Drawers/ManualJournalDrawer.scss';
+
+import { DrawerBody } from '@/components';
+import { ManualJournalDrawerProvider } from './ManualJournalDrawerProvider';
+import ManualJournalDrawerDetails from './ManualJournalDrawerDetails';
+
+/**
+ * Manual Journal drawer content.
+ */
+export default function ManualJournalDrawerContent({
+  // #ownProp
+  manualJournalId,
+}) {
+  return (
+    <ManualJournalDrawerProvider manualJournalId={manualJournalId}>
+      <DrawerBody>
+        <ManualJournalDrawerDetails />
+      </DrawerBody>
+    </ManualJournalDrawerProvider>
+  );
+}

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { CommercialDocBox } from '@/components';
+
+import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
+import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
+import ManualJournalDrawerTable from './ManualJournalDrawerTable';
+import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
+
+/**
+ * Manual journal view details.
+ */
+export default function ManualJournalDrawerDetails() {
+  return (
+    <ManualJournalDetailsRoot>
+      <ManualJournalDrawerActionBar />
+
+      <CommercialDocBox>
+        <ManualJournalDrawerHeader />
+        <ManualJournalDrawerTable />
+        <ManualJournalDrawerFooter />
+      </CommercialDocBox>
+    </ManualJournalDetailsRoot>
+  );
+}
+
+const ManualJournalDetailsRoot = styled.div``;

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+import {
+  TRDarkSingleLine,
+  TRDarkDoubleLines,
+  T,
+  FormatNumber,
+  Table,
+  TD,
+} from '@/components';
+
+/**
+ * Manual journal readonly details footer.
+ */
+export default function ManualJournalDrawerFooter() {
+  const {
+    manualJournal: { amount, formatted_amount },
+  } = useManualJournalDrawerContext();
+
+  return (
+    <div className="journal-drawer__content-footer">
+      <JournalTotalTable>
+        <TRDarkSingleLine>
+          <TDLabel>
+            <T id={'manual_journal.details.subtotal'} />
+          </TDLabel>
+          <TDAmount textAlign={'right'}>
+            <FormatNumber value={amount} />
+          </TDAmount>
+          <TDAmount textAlign={'right'}>
+            <FormatNumber value={amount} />
+          </TDAmount>
+        </TRDarkSingleLine>
+
+        <TRDarkDoubleLines>
+          <TDLabel>
+            <T id={'manual_journal.details.total'} />
+          </TDLabel>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+          <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
+        </TRDarkDoubleLines>
+      </JournalTotalTable>
+    </div>
+  );
+}
+
+const JournalTotalTable = styled(Table)`
+  font-weight: 600;
+  width: auto;
+  margin-left: auto;
+`;
+
+const TDLabel = styled(TD)`
+  width: 220px;
+`;
+
+const TDAmount = styled(TD)`
+  width: 155px;
+`;

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
+import {
+  Row,
+  Col,
+  DetailsMenu,
+  DetailItem,
+  FormattedMessage as T,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+} from '@/components';
+import { ManualJournalDetailsStatus } from './utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+/**
+ * Manual journal details header.
+ */
+export default function ManualJournalDrawerHeader() {
+  const { manualJournal } = useManualJournalDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="big-number">{manualJournal.formatted_amount}</h3>
+          </DetailItem>
+
+          <StatusDetailItem>
+            <ManualJournalDetailsStatus manualJournal={manualJournal} />
+          </StatusDetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
+              {manualJournal.journal_type}
+            </DetailItem>
+
+            <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
+              {manualJournal.journal_number}
+            </DetailItem>
+
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(manualJournal.reference, '-')}
+            </DetailItem>
+
+            <DetailItem name={'currency'} label={<T id={'currency'} />}>
+              {manualJournal.currency_code}
+            </DetailItem>
+
+            <DetailItem label={<T id={'description'} />}>
+              {defaultTo(manualJournal.description, '—')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useJournal } from '@/hooks/query';
+import { DrawerLoading, DrawerHeaderContent } from '@/components';
+
+const ManualJournalDrawerContext = React.createContext();
+
+/**
+ * Manual journal drawer provider.
+ */
+function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
+  // Fetch the specific manual journal details.
+  const {
+    data: manualJournal,
+    isLoading: isJournalLoading,
+    isFetching: isJournalFetching,
+  } = useJournal(manualJournalId, {
+    enabled: !!manualJournalId,
+  });
+
+  // Provider.
+  const provider = {
+    manualJournalId,
+    manualJournal,
+
+    isJournalFetching,
+    isJournalLoading,
+  };
+
+  return (
+    <DrawerLoading loading={isJournalLoading}>
+      <DrawerHeaderContent
+        name={'journal-drawer'}
+        title={intl.get('manual_journal.drawer.title', {
+          number: manualJournal?.journal_number,
+        })}
+      />
+      <ManualJournalDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useManualJournalDrawerContext = () =>
+  React.useContext(ManualJournalDrawerContext);
+
+export { ManualJournalDrawerProvider, useManualJournalDrawerContext };

packages/webapp/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+import { useManualJournalEntriesColumns } from './utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+import { TableStyle } from '@/constants';
+
+/**
+ * Manual journal drawer table.
+ */
+export default function ManualJournalDrawerTable() {
+  // Retrieves the readonly manual journal entries columns.
+  const columns = useManualJournalEntriesColumns();
+
+  // Manual journal drawer context.
+  const { manualJournal } = useManualJournalDrawerContext();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={manualJournal.entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

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

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const ManualJournalDrawerContent = lazy(() =>
+  import('./ManualJournalDrawerContent'),
+);
+
+/**
+ * Manual journal drawer.
+ */
+function ManualJournalDrawer({
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload: { manualJournalId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+    >
+      <DrawerSuspense>
+        <ManualJournalDrawerContent manualJournalId={manualJournalId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(ManualJournalDrawer);

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

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Tag, Intent } from '@blueprintjs/core';
+
+import {
+  T,
+  Choose,
+  FormatNumberCell,
+  TextOverviewTooltipCell,
+} from '@/components';
+import { Features } from '@/constants';
+import { getColumnWidth } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+/**
+ * Publish column accessor.
+ */
+export function ManualJournalDetailsStatus({ manualJournal }) {
+  return (
+    <Choose>
+      <Choose.When condition={!!manualJournal.is_published}>
+        <Tag minimal={true} round={true}>
+          <T id={'published'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+/**
+ * Retrieve read-only manual journal entries columns.
+ */
+export const useManualJournalEntriesColumns = () => {
+  const { featureCan } = useFeatureCan();
+
+  // manual journal details drawer context.
+  const {
+    manualJournal: { entries },
+  } = useManualJournalDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('account_name'),
+        Cell: TextOverviewTooltipCell,
+        accessor: 'account.name',
+        width: 130,
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contact.display_name',
+        Cell: TextOverviewTooltipCell,
+        width: 100,
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('note'),
+        accessor: 'note',
+        Cell: TextOverviewTooltipCell,
+        disableSortBy: true,
+        textOverview: true,
+        width: 100,
+      },
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('branch'),
+              width: 100,
+              accessor: 'branch.name',
+              disableSortBy: true,
+            },
+          ]
+        : []),
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'credit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableResizable: true,
+        disableSortBy: true,
+        textOverview: true,
+        formatNumber: { noZero: true },
+        align: 'right',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'debit', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableResizable: true,
+        textOverview: true,
+        disableSortBy: true,
+        formatNumber: { noZero: true },
+        align: 'right',
+      },
+    ],
+    [],
+  );
+};