feat(webapp): add FCY/BCY switch to the account transactions

packages/webapp/src/components/Dashboard/DashboardBackLink.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 import { useHistory } from 'react-router-dom';
-import { getDashboardRoutes } from '@/routes/dashboard';
+
 import { If, Icon } from '@/components';
 import { FormattedMessage as T } from '@/components';
 import withDashboard from '@/containers/Dashboard/withDashboard';

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx

@@ -4,23 +4,24 @@ import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { compose } from '@/utils';
 import { TableStyle } from '@/constants';
 import { Card, DataTable, If } from '@/components';
+import { AccountDrawerTableOptionsProvider } from './AccountDrawerTableOptionsProvider';
+import { AccountDrawerTableHeader } from './AccountDrawerTableHeader';
+
 import { useAccountReadEntriesColumns } from './utils';
 import { useAppIntlContext } from '@/components/AppIntlProvider';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
+import { compose } from '@/utils';
+
 /**
  * account drawer table.
  */
 function AccountDrawerTable({ closeDrawer }) {
-  const { account, accounts, drawerName } = useAccountDrawerContext();
-
-  // Account read-only entries table columns.
-  const columns = useAccountReadEntriesColumns();
+  const { accounts, drawerName } = useAccountDrawerContext();
 
   // Handle view more link click.
   const handleLinkClick = () => {
@@ -31,27 +32,41 @@ function AccountDrawerTable({ closeDrawer }) {
 
   return (
     <Card>
-      <DataTable
-        columns={columns}
-        data={accounts}
-        payload={{ account }}
-        styleName={TableStyle.Constrant}
-      />
+      <AccountDrawerTableOptionsProvider>
+        <AccountDrawerTableHeader />
+        <AccountDrawerDataTable />
 
-      <If condition={accounts.length > 0}>
-        <TableFooter>
-          <Link
-            to={`/financial-reports/general-ledger`}
-            onClick={handleLinkClick}
-          >
-            {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
-          </Link>
-        </TableFooter>
-      </If>
+        <If condition={accounts.length > 0}>
+          <TableFooter>
+            <Link
+              to={`/financial-reports/general-ledger`}
+              onClick={handleLinkClick}
+            >
+              {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
+            </Link>
+          </TableFooter>
+        </If>
+      </AccountDrawerTableOptionsProvider>
     </Card>
   );
 }
 
+function AccountDrawerDataTable() {
+  const { account, accounts } = useAccountDrawerContext();
+
+  // Account read-only entries table columns.
+  const columns = useAccountReadEntriesColumns();
+
+  return (
+    <DataTable
+      columns={columns}
+      data={accounts}
+      payload={{ account }}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}
+
 export default compose(withDrawerActions)(AccountDrawerTable);
 
 const TableFooter = styled.div`

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableHeader.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, ButtonGroup } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { useAccountDrawerTableOptionsContext } from './AccountDrawerTableOptionsProvider';
+
+export function AccountDrawerTableHeader() {
+  const {
+    setBCYCurrencyType,
+    setFYCCurrencyType,
+    isBCYCurrencyType,
+    isFYCCurrencyType,
+  } = useAccountDrawerTableOptionsContext();
+
+  const handleBCYBtnClick = () => {
+    setBCYCurrencyType();
+  };
+  const handleFCYBtnClick = () => {
+    setFYCCurrencyType();
+  };
+
+  return (
+    <TableHeaderRoot>
+      <ButtonGroup>
+        <Button
+          small
+          outlined
+          onClick={handleFCYBtnClick}
+          active={isFYCCurrencyType}
+        >
+          FCY
+        </Button>
+        <Button
+          small
+          outlined
+          onClick={handleBCYBtnClick}
+          active={isBCYCurrencyType}
+        >
+          BCY
+        </Button>
+      </ButtonGroup>
+    </TableHeaderRoot>
+  );
+}
+
+const TableHeaderRoot = styled.div`
+  margin-bottom: 1rem;
+`;

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableOptionsProvider.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react';
+
+interface AccountDrawerTableOptionsContextValue {
+  setFYCCurrencyType: () => void;
+  setBCYCurrencyType: () => void;
+  isFYCCurrencyType: boolean;
+  isBCYCurrencyType: boolean;
+  currencyType: ForeignCurrencyType;
+}
+
+const AccountDrawerTableOptionsContext = React.createContext(
+  {} as AccountDrawerTableOptionsContextValue,
+);
+
+enum ForeignCurrencyTypes {
+  FYC = 'FYC',
+  BCY = 'BCY',
+}
+type ForeignCurrencyType = ForeignCurrencyTypes.FYC | ForeignCurrencyTypes.BCY;
+
+function AccountDrawerTableOptionsProvider({
+  initialCurrencyType = ForeignCurrencyTypes.FYC,
+  ...props
+}) {
+  const [currencyType, setCurrentType] =
+    useState<ForeignCurrencyType>(initialCurrencyType);
+
+  const setFYCCurrencyType = useCallback(
+    () => setCurrentType(ForeignCurrencyTypes.FYC),
+    [setCurrentType],
+  );
+  const setBCYCurrencyType = useCallback(
+    () => setCurrentType(ForeignCurrencyTypes.BCY),
+    [setCurrentType],
+  );
+
+  // Provider.
+  const provider = {
+    setFYCCurrencyType,
+    setBCYCurrencyType,
+    isFYCCurrencyType: currencyType === ForeignCurrencyTypes.FYC,
+    isBCYCurrencyType: currencyType === ForeignCurrencyTypes.BCY,
+    currencyType,
+  };
+
+  return (
+    <AccountDrawerTableOptionsContext.Provider value={provider} {...props} />
+  );
+}
+
+const useAccountDrawerTableOptionsContext = () =>
+  React.useContext(AccountDrawerTableOptionsContext);
+
+export {
+  AccountDrawerTableOptionsProvider,
+  useAccountDrawerTableOptionsContext,
+};

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

@@ -3,27 +3,15 @@ import intl from 'react-intl-universal';
 import React from 'react';
 
 import { FormatDateCell } from '@/components';
-import { isBlank } from '@/utils';
-
-/**
- * Debit/credit table cell.
- */
-function DebitCreditTableCell({ value, payload: { account } }) {
-  return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
-}
-
-/**
- * Running balance table cell.
- */
-function RunningBalanceTableCell({ value, payload: { account } }) {
-  return account.formatted_amount;
-}
+import { useAccountDrawerTableOptionsContext } from './AccountDrawerTableOptionsProvider';
 
 /**
  * Retrieve entries columns of read-only account view.
  */
-export const useAccountReadEntriesColumns = () =>
-  React.useMemo(
+export const useAccountReadEntriesColumns = () => {
+  const { isFYCCurrencyType } = useAccountDrawerTableOptionsContext();
+
+  return React.useMemo(
     () => [
       {
         Header: intl.get('transaction_date'),
@@ -34,14 +22,15 @@ export const useAccountReadEntriesColumns = () =>
       },
       {
         Header: intl.get('transaction_type'),
-        accessor: 'reference_type_formatted',
+        accessor: 'transaction_type_formatted',
         width: 100,
         textOverview: true,
       },
       {
         Header: intl.get('credit'),
-        accessor: 'credit',
-        Cell: DebitCreditTableCell,
+        accessor: isFYCCurrencyType
+          ? 'formatted_fc_credit'
+          : 'formatted_credit',
         width: 80,
         className: 'credit',
         align: 'right',
@@ -49,22 +38,13 @@ export const useAccountReadEntriesColumns = () =>
       },
       {
         Header: intl.get('debit'),
-        accessor: 'debit',
-        Cell: DebitCreditTableCell,
+        accessor: isFYCCurrencyType ? 'formatted_fc_debit' : 'formatted_debit',
         width: 80,
         className: 'debit',
         align: 'right',
         textOverview: true,
       },
-      {
-        Header: intl.get('running_balance'),
-        Cell: RunningBalanceTableCell,
-        accessor: 'running_balance',
-        width: 110,
-        className: 'running_balance',
-        align: 'right',
-        textOverview: true,
-      },
     ],
-    [],
+    [isFYCCurrencyType],
   );
+};