re-structure to monorepo.

packages/webapp/src/containers/Preferences/Currencies/Currencies.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import CurrenciesList from './CurrenciesList';
+
+export default function PreferencesCurrenciesPage() {
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
+      )}
+    >
+      <CurrenciesCard>
+        <CurrenciesList />
+      </CurrenciesCard>
+    </div>
+  );
+}
+
+const CurrenciesCard = styled(Card)`
+  padding: 0;
+`;

packages/webapp/src/containers/Preferences/Currencies/CurrenciesActions.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { compose } from '@/utils';
+import { Icon, FormattedMessage as T } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+function CurrenciesActions({ openDialog }) {
+  const handleClickNewCurrency = useCallback(() => {
+    openDialog('currency-form');
+  }, [openDialog]);
+
+  return (
+    <div class="users-actions">
+      <Button
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={handleClickNewCurrency}
+        intent={Intent.PRIMARY}
+      >
+        <T id={'new_currency'} />
+      </Button>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(CurrenciesActions);

packages/webapp/src/containers/Preferences/Currencies/CurrenciesAlerts.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import React from 'react';
+
+const CurrencyDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Currencies/CurrencyDeleteAlert'),
+);
+export default [{ name: 'currency-delete', component: CurrencyDeleteAlert }];

packages/webapp/src/containers/Preferences/Currencies/CurrenciesDataTable.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { compose } from '@/utils';
+
+import { DataTable, TableSkeletonRows } from '@/components';
+
+import { useCurrenciesContext } from './CurrenciesProvider';
+
+import { ActionMenuList, useCurrenciesTableColumns } from './components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+/**
+ * Currencies table.
+ */
+function CurrenciesDataTable({
+  // #ownProps
+  tableProps,
+
+  // #withDialog.
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  const { currencies, isCurrenciesLoading } = useCurrenciesContext();
+
+  // Table columns.
+  const columns = useCurrenciesTableColumns();
+
+  // Handle Edit Currency.
+  const handleEditCurrency = useCallback(
+    (currency) => {
+      openDialog('currency-form', {
+        action: 'edit',
+        currency: currency,
+      });
+    },
+    [openDialog],
+  );
+
+  // Handle delete currency.
+  const handleDeleteCurrency = ({ currency_code }) => {
+    openAlert('currency-delete', { currency_code: currency_code });
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={currencies}
+      loading={isCurrenciesLoading}
+      progressBarLoading={isCurrenciesLoading}
+      TableLoadingRenderer={TableSkeletonRows}
+      ContextMenu={ActionMenuList}
+      noInitialFetch={true}
+      payload={{
+        onDeleteCurrency: handleDeleteCurrency,
+        onEditCurrency: handleEditCurrency,
+      }}
+      rowContextMenu={ActionMenuList}
+      {...tableProps}
+    />
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertActions,
+)(CurrenciesDataTable);

packages/webapp/src/containers/Preferences/Currencies/CurrenciesList.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
+
+import { CurrenciesProvider } from './CurrenciesProvider';
+import CurrenciesDataTable from './CurrenciesDataTable';
+
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+import { compose } from '@/utils';
+
+function CurrenciesList({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  useEffect(() => {
+    changePreferencesPageTitle(intl.get('currencies'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <CurrenciesProvider>
+      <CurrenciesDataTable />
+    </CurrenciesProvider>
+  );
+}
+
+export default compose(withDashboardActions)(CurrenciesList);

packages/webapp/src/containers/Preferences/Currencies/CurrenciesProvider.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { useCurrencies } from '@/hooks/query';
+
+const CurrenciesContext = createContext();
+
+/**
+ * currencies provider.
+ */
+function CurrenciesProvider({ ...props }) {
+  // fetches the currencies list.
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  const state = {
+    currencies,
+    isCurrenciesLoading,
+  };
+
+  return <CurrenciesContext.Provider value={state} {...props} />;
+}
+
+const useCurrenciesContext = () => useContext(CurrenciesContext);
+
+export { CurrenciesProvider, useCurrenciesContext };

packages/webapp/src/containers/Preferences/Currencies/components.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import {
+  Menu,
+  Popover,
+  Button,
+  Position,
+  MenuItem,
+  MenuDivider,
+  Intent,
+} from '@blueprintjs/core';
+import { Icon } from '@/components';
+import { safeCallback } from '@/utils';
+
+/**
+ * Row actions menu list.
+ */
+export function ActionMenuList({
+  row: { original },
+  payload: { onEditCurrency, onDeleteCurrency },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_currency')}
+        onClick={safeCallback(onEditCurrency, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_currency')}
+        onClick={safeCallback(onDeleteCurrency, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export const ActionsCell = (props) => {
+  return (
+    <Popover
+      position={Position.RIGHT_BOTTOM}
+      content={<ActionMenuList {...props} />}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+};
+
+export function useCurrenciesTableColumns() {
+  return useMemo(
+    () => [
+      {
+        Header: intl.get('currency_name'),
+        accessor: 'currency_name',
+        width: 150,
+      },
+      {
+        Header: intl.get('currency_code'),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 120,
+      },
+      {
+        Header: intl.get('currency_sign'),
+        width: 120,
+        accessor: 'currency_sign',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [],
+  );
+}