From 672a1bbb82b0c32558f8b180951529a5a2ba2ec8 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 19 Apr 2023 06:15:13 +0200 Subject: [PATCH] feat(webapp): add FCY/BCY switch to the account transactions --- .../Dashboard/DashboardBackLink.tsx | 2 +- .../AccountDrawer/AccountDrawerTable.tsx | 57 ++++++++++++------- .../AccountDrawerTableHeader.tsx | 47 +++++++++++++++ .../AccountDrawerTableOptionsProvider.tsx | 57 +++++++++++++++++++ .../Drawers/AccountDrawer/utils.tsx | 44 ++++---------- 5 files changed, 153 insertions(+), 54 deletions(-) create mode 100644 packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableHeader.tsx create mode 100644 packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableOptionsProvider.tsx diff --git a/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx b/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx index e68501dfb..2471a46e0 100644 --- a/packages/webapp/src/components/Dashboard/DashboardBackLink.tsx +++ b/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'; diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx index 785ed93f9..1b08f102c 100644 --- a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx +++ b/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 ( - + + + - 0}> - - - {isRTL ? '→' : '←'} {intl.get('view_more_transactions')} - - - + 0}> + + + {isRTL ? '→' : '←'} {intl.get('view_more_transactions')} + + + + ); } +function AccountDrawerDataTable() { + const { account, accounts } = useAccountDrawerContext(); + + // Account read-only entries table columns. + const columns = useAccountReadEntriesColumns(); + + return ( + + ); +} + export default compose(withDrawerActions)(AccountDrawerTable); const TableFooter = styled.div` diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableHeader.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableHeader.tsx new file mode 100644 index 000000000..1b2d6e530 --- /dev/null +++ b/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 ( + + + + + + + ); +} + +const TableHeaderRoot = styled.div` + margin-bottom: 1rem; +`; diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableOptionsProvider.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTableOptionsProvider.tsx new file mode 100644 index 000000000..4b766dd9f --- /dev/null +++ b/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(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 ( + + ); +} + +const useAccountDrawerTableOptionsContext = () => + React.useContext(AccountDrawerTableOptionsContext); + +export { + AccountDrawerTableOptionsProvider, + useAccountDrawerTableOptionsContext, +}; diff --git a/packages/webapp/src/containers/Drawers/AccountDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/AccountDrawer/utils.tsx index de1a237ea..c254cbaa5 100644 --- a/packages/webapp/src/containers/Drawers/AccountDrawer/utils.tsx +++ b/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], ); +};