refactor(webapp): invite and user form with new blueprintjs-formik components

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 import {
   Menu,
   Popover,
@@ -9,6 +10,7 @@ import {
   MenuItem,
   MenuDivider,
   Intent,
+  Tag,
 } from '@blueprintjs/core';
 import { Icon } from '@/components';
 import { safeCallback } from '@/utils';
@@ -52,12 +54,25 @@ export const ActionsCell = (props) => {
   );
 };
 
+export const CurrencyNameAccessor = (value) => {
+  return (
+    <CurrencyNameRoot>
+      {value.currency_name} {value.is_base_currency && <Tag>Base Currency</Tag>}
+    </CurrencyNameRoot>
+  );
+};
+
+const CurrencyNameRoot = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
 export function useCurrenciesTableColumns() {
   return useMemo(
     () => [
       {
         Header: intl.get('currency_name'),
-        accessor: 'currency_name',
+        accessor: CurrencyNameAccessor,
         width: 150,
       },
       {

packages/webapp/src/containers/Preferences/Users/UsersDataTable.tsx

@@ -22,6 +22,14 @@ function UsersDataTable({
   // #withAlertActions
   openAlert,
 }) {
+  const { mutateAsync: resendInviation } = useResendInvitation();
+
+  // Users list columns.
+  const columns = useUsersListColumns();
+
+  // Users list context.
+  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();
+
   // Handle edit user action.
   const handleEditUserAction = useCallback(
     (user) => {
@@ -50,9 +58,6 @@ function UsersDataTable({
     },
     [openAlert],
   );
-
-  const { mutateAsync: resendInviation } = useResendInvitation();
-
   const handleResendInvitation = useCallback((user) => {
     resendInviation(user.id)
       .then(() => {
@@ -71,17 +76,12 @@ function UsersDataTable({
             AppToaster.show({
               message:
                 'This person was recently invited. No need to invite them again just yet.',
-              intent: Intent.DANGER,
+              intent: Intent.WARNING,
             });
           }
         },
       );
   });
-  // Users list columns.
-  const columns = useUsersListColumns();
-
-  // Users list context.
-  const { users, isUsersLoading, isUsersFetching } = useUsersListContext();
 
   return (
     <DataTable

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

@@ -132,15 +132,9 @@ export const useUsersListColumns = () => {
       {
         id: 'role_name',
         Header: intl.get('users.column.role_name'),
-        accessor: 'role.name',
+        accessor: 'role_name',
         width: 120,
       },
-      // {
-      //   id: 'phone_number',
-      //   Header: intl.get('phone_number'),
-      //   accessor: 'phone_number',
-      //   width: 120,
-      // },
       {
         id: 'status',
         Header: intl.get('status'),