re-structure to monorepo.

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx

@@ -0,0 +1,116 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { PaymentReceiveMoreMenuItems } from './utils';
+import {
+  Can,
+  Icon,
+  FormattedMessage as T,
+  DrawerActionsBar,
+} from '@/components';
+import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+
+/**
+ * Payment receive actions bar.
+ */
+function PaymentReceiveActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+
+  // #withDialogActions
+  openDialog,
+}) {
+  const history = useHistory();
+
+  // Retrieve the payment receive drawer context.
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+  // Handle edit payment receive.
+  const handleEditPaymentReceive = () => {
+    history.push(`/payment-receives/${paymentReceiveId}/edit`);
+    closeDrawer('payment-receive-detail-drawer');
+  };
+
+  // Handle delete payment receive.
+  const handleDeletePaymentReceive = () => {
+    openAlert('payment-receive-delete', { paymentReceiveId });
+  };
+
+  // Handle notify via SMS.
+  const handleNotifyViaSMS = () => {
+    openDialog('notify-payment-via-sms', { paymentReceiveId });
+  };
+
+  // Handle print payment receive.
+  const handlePrintPaymentReceive = () => {
+    openDialog('payment-pdf-preview', { paymentReceiveId });
+  };
+
+  return (
+    <DrawerActionsBar>
+      <NavbarGroup>
+        <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_payment_receive'} />}
+            onClick={handleEditPaymentReceive}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" />}
+            text={<T id={'print'} />}
+            onClick={handlePrintPaymentReceive}
+          />
+        </Can>
+        <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentReceive}
+          />
+        </Can>
+        <Can
+          I={PaymentReceiveAction.NotifyBySms}
+          a={AbilitySubject.PaymentReceive}
+        >
+          <NavbarDivider />
+          <PaymentReceiveMoreMenuItems
+            payload={{
+              onNotifyViaSMS: handleNotifyViaSMS,
+            }}
+          />
+        </Can>
+      </NavbarGroup>
+    </DrawerActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentReceiveActionsBar);

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
+
+import { DrawerMainTabs } from '@/components';
+
+import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import { PaymentReceiveGLEntriesPanel } from './PaymentReceiveGLEntriesPanel';
+
+/**
+ * Payment receive details tabs.
+ * @returns {React.JSX}
+ */
+function PaymentReceiveDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentReceiveDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentReceiveGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+/**
+ * Payment receive view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetail() {
+  return (
+    <PaymentReceiveDetailsRoot>
+      <PaymentReceiveActionsBar />
+      <PaymentReceiveDetailsTabs />
+    </PaymentReceiveDetailsRoot>
+  );
+}
+
+const PaymentReceiveDetailsRoot = styled.div``;

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DrawerBody } from '@/components';
+import PaymentReceiveDetail from './PaymentReceiveDetail';
+import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail content.
+ */
+export default function PaymentReceiveDetailContent({
+  // #ownProp
+  paymentReceiveId,
+}) {
+  return (
+    <PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
+      <DrawerBody>
+        <PaymentReceiveDetail />
+      </DrawerBody>
+    </PaymentReceiveDetailProvider>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from 'react';
+
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '@/components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail footer.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+  
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={paymentReceive.statement}>
+          <DetailItem label={<T id={'payment_receive.details.statement'} />}>
+            {paymentReceive.statement}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  CustomerDrawerLink,
+  ExchangeRateDetailItem,
+} from '@/components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail header.
+ */
+export default function PaymentReceiveDetailHeader() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentReceive.payment_date} />}
+            />
+            <DetailItem
+              label={intl.get('payment_receive.details.payment_number')}
+              children={defaultTo(paymentReceive.payment_receive_no, '-')}
+            />
+            <DetailItem label={intl.get('customer_name')}>
+              <CustomerDrawerLink customerId={paymentReceive.customer_id}>
+                {paymentReceive.customer?.display_name}
+              </CustomerDrawerLink>
+            </DetailItem>
+
+            <DetailItem
+              label={intl.get('deposit_account')}
+              children={paymentReceive.deposit_account?.name}
+            />
+            <ExchangeRateDetailItem
+              exchangeRate={paymentReceive?.exchange_rate}
+              toCurrency={paymentReceive?.currency_code}
+            />
+          </DetailsMenu>
+        </Col>
+
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(paymentReceive.reference_no, '-')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentReceive.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { usePaymentReceive } from '@/hooks/query';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+
+const PaymentReceiveDetailContext = React.createContext();
+
+/**
+ * Payment receive detail provider.
+ */
+function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Fetches specific payment receive details.
+  const {
+    data: paymentReceive,
+    isLoading: isPaymentLoading,
+    isFetching: isPaymentFetching,
+  } = usePaymentReceive(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+
+  // Provider.
+  const provider = {
+    isPaymentFetching,
+    paymentReceive,
+    paymentReceiveId,
+  };
+
+  return (
+    <DrawerLoading loading={isPaymentLoading}>
+      <DrawerHeaderContent
+        name="payment-receive-detail-drawer"
+        title={intl.get('payment_receive.drawer.title', {
+          number: paymentReceive.payment_receive_no,
+        })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('payment_receive.drawer.subtitle', {
+                value: paymentReceive.branch?.name,
+              })
+            : null
+        }
+      />
+      <PaymentReceiveDetailContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const usePaymentReceiveDetailContext = () =>
+  React.useContext(PaymentReceiveDetailContext);
+
+export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext };

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { CommercialDocBox } from '@/components';
+
+import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
+import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailTableFooter from './PaymentReceiveDetailTableFooter';
+import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
+
+/**
+ * Payment receive - overview panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailTab() {
+  return (
+    <PaymentReceiveDetailsTabPanelRoot>
+      <CommercialDocBox>
+        <PaymentReceiveDetailHeader />
+        <PaymentReceiveDetailTable />
+        <PaymentReceiveDetailTableFooter />
+        <PaymentReceiveDetailFooter />
+      </CommercialDocBox>
+    </PaymentReceiveDetailsTabPanelRoot>
+  );
+}
+
+const PaymentReceiveDetailsTabPanelRoot = styled.div``;

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { usePaymentReceiveEntriesColumns } from './utils';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import { TableStyle } from '@/constants';
+
+/**
+ * Payment receive readonly details table.
+ */
+export default function PaymentReceiveDetailTable() {
+  const columns = usePaymentReceiveEntriesColumns();
+
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  FormatNumber,
+  TotalLineTextStyle,
+  TotalLineBorderStyle,
+  T,
+  TotalLine,
+  TotalLines,
+} from '@/components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail table footer.
+ * @returns {React.JSX}
+ */
+export default function PaymentReceiveDetailTableFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <PaymentReceiveDetailsFooterRoot>
+      <PaymentReceiveTotalLines
+        labelColWidth={'180px'}
+        amountColWidth={'180px'}
+      >
+        <TotalLine
+          title={<T id={'payment_receive.details.subtotal'} />}
+          value={<FormatNumber value={paymentReceive.amount} />}
+        />
+        <TotalLine
+          title={<T id={'payment_receive.details.total'} />}
+          value={paymentReceive.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentReceiveTotalLines>
+    </PaymentReceiveDetailsFooterRoot>
+  );
+}
+
+export const PaymentReceiveDetailsFooterRoot = styled.div``;
+
+export const PaymentReceiveTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss

@@ -0,0 +1,52 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+  &_table {
+    :global .bigcapital-datatable {
+
+      .thead,
+      .tbody {
+        .invoice_amount,
+        .amount_due,
+        .payment_amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+
+    :global .total_lines {
+      margin-left: auto;
+    }
+    :global .total_lines_line {
+
+      .amount,
+      .title {
+        width: 180px;
+      }
+
+      .amount {
+        text-align: right;
+      }
+    }
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+    &_total {
+      
+    }
+  }
+}

packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveGLEntriesPanel.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from '@/hooks/query';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive GL entries table panel.
+ * @returns {React.JSX}
+ */
+export function PaymentReceiveGLEntriesPanel() {
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionsLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentReceiveId,
+      reference_type: 'paymentReceive',
+    },
+    { enabled: !!paymentReceiveId },
+  );
+
+  return (
+    <PaymentReceiveGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionsLoading}
+        transactions={transactions}
+      />
+    </PaymentReceiveGLEntriesRoot>
+  );
+}
+
+const PaymentReceiveGLEntriesRoot = styled(Card)``;

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

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

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

@@ -0,0 +1,102 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+} from '@blueprintjs/core';
+import { Icon, FormatNumberCell } from '@/components';
+import { getColumnWidth } from '@/utils';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Retrieve payment entries table columns.
+ */
+export const usePaymentReceiveEntriesColumns = () => {
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
+        width: 100,
+        className: 'date',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice.invoice_no',
+        width: 150,
+        className: 'invoice_number',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_amount'),
+        accessor: 'invoice.balance',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'invoice.balance', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount_due'),
+        accessor: 'invoice.due_amount',
+        Cell: FormatNumberCell,
+        align: 'right',
+        width: getColumnWidth(entries, 'invoice.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'invoice.payment_amount',
+        Cell: FormatNumberCell,
+        align: 'right',
+        width: getColumnWidth(entries, 'invoice.payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
+
+export function PaymentReceiveMoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={intl.get('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>
+  );
+}