re-structure to monorepo.

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetail.tsx

@@ -0,0 +1,40 @@
+// @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 RefundCreditNoteDetailTab from './RefundCreditNoteDetailTab';
+import RefundCreditNoteDetailActionsBar from './RefundCreditNoteDetailActionsBar';
+
+/**
+ * Refund credit note detail.
+ * @returns {React.JSX}
+ */
+export default function RefundCreditNoteDetail() {
+  return (
+    <RefundCreditNoteDetailRoot>
+      <RefundCreditNoteDetailActionsBar />
+      <RefundCreditNoteDetailTabs />
+    </RefundCreditNoteDetailRoot>
+  );
+}
+
+/**
+ * Refund credit note detail tabs.
+ * @returns {React.JSX}
+ */
+function RefundCreditNoteDetailTabs() {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        title={intl.get('details')}
+        id={'details'}
+        panel={<RefundCreditNoteDetailTab />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+const RefundCreditNoteDetailRoot = styled.div``;

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailActionsBar.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import {
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+  Can,
+} from '@/components';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { compose } from '@/utils';
+
+/**
+ * Refund credit note actions bar.
+ */
+function RefundCreditNoteDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundTransactionId } = useRefundCreditNoteDrawerContext();
+
+  // Handle delete refund credit.
+  const handleDeleteRefundCreditNote = () => {
+    openAlert('refund-credit-delete', { creditNoteId: refundTransactionId });
+  };
+
+  return (
+    <Can I={CreditNoteAction.Delete} a={AbilitySubject.CreditNote}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteRefundCreditNote}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteDetailActionsBar);

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailHeader.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  CommercialDocHeader,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+} from '@/components';
+
+import { useRefundCreditNoteDrawerContext } from './RefundCreditNoteDrawerProvider';
+
+export default function RefundCreditNoteDetailHeader() {
+  const { refundCreditTransaction } = useRefundCreditNoteDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <DetailItem
+          label={intl.get('date')}
+          children={
+            <FormatDate value={refundCreditTransaction.formatted_date} />
+          }
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.amount')}>
+          <strong>{refundCreditTransaction.formtted_amount}</strong>
+        </DetailItem>
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.credit_note_no')}
+          children={refundCreditTransaction.credit_note?.credit_note_number}
+        />
+
+        <DetailItem
+          label={intl.get('refund_credit.drawer.label.withdrawal_account')}
+          children={refundCreditTransaction.from_account.name}
+        />
+        <DetailItem label={intl.get('refund_credit.drawer.label.reference_no')}>
+          {defaultTo(refundCreditTransaction.reference_no, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('refund_credit.drawer.label.description')}>
+          {defaultTo(refundCreditTransaction.description, '—')}
+        </DetailItem>
+      </DetailsMenu>
+    </CommercialDocHeader>
+  );
+}

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDetailTab.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocBox } from '@/components';
+import RefundCreditNoteDetailHeader from './RefundCreditNoteDetailHeader';
+
+/**
+ * Refund credit note detail tab.
+ * @returns
+ */
+export default function RefundCreditNoteDetailTab() {
+  return (
+    <CommercialDocBox>
+      <RefundCreditNoteDetailHeader />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerContent.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DrawerBody } from '@/components';
+import { RefundCreditNoteDrawerProvider } from './RefundCreditNoteDrawerProvider';
+import RefundCreditNoteDetail from './RefundCreditNoteDetail';
+
+/**
+ * Refund credit note drawer content.
+ */
+export default function RefundCreditNoteDrawerContent({ refundTransactionId }) {
+  return (
+    <RefundCreditNoteDrawerProvider refundTransactionId={refundTransactionId}>
+      <DrawerBody>
+        <RefundCreditNoteDetail />
+      </DrawerBody>
+    </RefundCreditNoteDrawerProvider>
+  );
+}

packages/webapp/src/containers/Drawers/RefundCreditNoteDetailDrawer/RefundCreditNoteDrawerProvider.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { useRefundCreditTransaction } from '@/hooks/query';
+
+const RefundCreditNoteDrawerContext = React.createContext();
+
+/**
+ * Refund credit note drawer provider.
+ */
+function RefundCreditNoteDrawerProvider({ refundTransactionId, ...props }) {
+  // Handle fetch refund credit note transaction.
+  const {
+    data: refundCreditTransaction,
+    isLoading: isRefundCreditTransaction,
+  } = useRefundCreditTransaction(refundTransactionId, {
+    enabled: !!refundTransactionId,
+  });
+
+  // provider
+  const provider = {
+    refundTransactionId,
+    refundCreditTransaction,
+  };
+
+  return (
+    <DrawerLoading loading={isRefundCreditTransaction}>
+      <DrawerHeaderContent
+        name="refund-credit-detail-drawer"
+        title={intl.get('refund_credit.drawer.title')}
+      />
+      <RefundCreditNoteDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useRefundCreditNoteDrawerContext = () =>
+  React.useContext(RefundCreditNoteDrawerContext);
+
+export { RefundCreditNoteDrawerProvider, useRefundCreditNoteDrawerContext };

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

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const RefundCreditNoteDrawerContent = React.lazy(() =>
+  import('./RefundCreditNoteDrawerContent'),
+);
+
+/**
+ * Refund credit note detail.
+ * @returns
+ */
+function RefundCreditNoteDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { refundTransactionId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '750px' }}
+      size={'65%'}
+    >
+      <DrawerSuspense>
+        <RefundCreditNoteDrawerContent
+          refundTransactionId={refundTransactionId}
+        />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+export default compose(withDrawers())(RefundCreditNoteDetailDrawer);