fix: hotbug account dialog edit payload transformation.

package.json

@@ -10,8 +10,6 @@
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
     "@blueprintjs/timezone": "^3.6.2",
-    "@casl/ability": "^5.4.3",
-    "@casl/react": "^2.3.0",
     "@reduxjs/toolkit": "^1.2.5",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",

src/common/abilityOption.js

@@ -1,161 +0,0 @@
-export const AbilitySubject = {
-  Item: 'Item',
-  InventoryAdjustment: 'InventoryAdjustment',
-  Estimate: 'SaleEstimate',
-  Invoice: 'SaleInvoice',
-  Receipt: 'SaleReceipt',
-  PaymentReceive: 'PaymentReceive',
-  Bill: 'Bill',
-  PaymentMade: 'PaymentMade',
-  Customer: 'Customer',
-  Vendor: 'Vendor',
-  Account: 'Account',
-  ManualJournal: 'ManualJournal',
-  Expense: 'Expense',
-  Cashflow: 'Cashflow',
-  Report: 'Report',
-  Preferences: 'Preferences',
-  ExchangeRate: 'ExchangeRate',
-  SubscriptionBilling: 'SubscriptionBilling',
-};
-
-export const ItemAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-};
-
-export const InventoryAdjustmentAction = {
-  Create: 'Create',
-  Edit: 'Edit',
-  View: 'View',
-  Delete: 'Delete',
-};
-
-export const SaleEstimateAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  NotifyBySms: 'NotifyBySms',
-};
-
-export const SaleInvoiceAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  Writeoff: 'bad-debt',
-  NotifyBySms: 'NotifyBySms',
-};
-
-export const SaleReceiptAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  NotifyBySms: 'NotifyBySms',
-};
-
-export const PaymentReceiveAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  NotifyBySms: 'NotifyBySms',
-};
-
-export const BillAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  NotifyBySms: 'NotifyBySms',
-};
-
-export const PaymentMadeAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-};
-
-export const CustomerAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-};
-
-export const VendorAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-};
-
-export const AccountAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  TransactionsLocking: 'TransactionsLocking',
-};
-
-export const ManualJournalAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  TransactionLocking: 'TransactionLocking',
-};
-
-export const ExpenseAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-};
-
-export const CashflowAction = {
-  View: 'View',
-  Create: 'Create',
-  Delete: 'Delete',
-};
-
-export const ReportsAction = {
-  ALL: 'all',
-  READ_BALANCE_SHEET: 'read-balance-sheet',
-  READ_TRIAL_BALANCE_SHEET: 'read-trial-balance-sheet',
-  READ_PROFIT_LOSS: 'read-profit-loss',
-  READ_JOURNAL: 'read-journal',
-  READ_GENERAL_LEDGET: 'read-general-ledger',
-  READ_CASHFLOW: 'read-cashflow',
-  READ_AR_AGING_SUMMARY: 'read-ar-aging-summary',
-  READ_AP_AGING_SUMMARY: 'read-ap-aging-summary',
-  READ_PURCHASES_BY_ITEMS: 'read-purchases-by-items',
-  READ_SALES_BY_ITEMS: 'read-sales-by-items',
-  READ_CUSTOMERS_TRANSACTIONS: 'read-customers-transactions',
-  READ_VENDORS_TRANSACTIONS: 'read-vendors-transactions',
-  READ_CUSTOMERS_SUMMARY_BALANCE: 'read-customers-summary-balance',
-  READ_VENDORS_SUMMARY_BALANCE: 'read-vendors-summary-balance',
-  READ_INVENTORY_VALUATION_SUMMARY: 'read-inventory-valuation-summary',
-  READ_INVENTORY_ITEM_DETAILS: 'read-inventory-item-details',
-  READ_CASHFLOW_ACCOUNT_TRANSACTION: 'read-cashflow-account-transactions',
-};
-
-export const PreferencesAbility = {
-  Mutate: 'Mutate',
-};
-
-export const ExchangeRateAbility = {
-  View: 'view',
-  Create: 'create',
-  Delete: 'delete',
-};
-
-export const SubscriptionBillingAbility = {
-  View: 'view',
-  Payment: 'payment',
-};

src/common/classes.js

@@ -67,7 +67,6 @@ const CLASSES = {
   PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
   PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
   PREFERENCES_PAGE_INSIDE_CONTENT_SMS_INTEGRATION: 'preferences-page__inside-content--sms-integration',
-  PREFERENCES_PAGE_INSIDE_CONTENT_ROLES_FORM: 'preferences-page__inside-content--roles-form',
 
   FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
 

src/common/homepageOptions.js

@@ -1,21 +1,5 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
-import {
-  SaleInvoiceAction,
-  SaleEstimateAction,
-  AbilitySubject,
-  SaleReceiptAction,
-  CustomerAction,
-  PaymentReceiveAction,
-  BillAction,
-  VendorAction,
-  PaymentMadeAction,
-  AccountAction,
-  ManualJournalAction,
-  ExpenseAction,
-  ItemAction,
-  ReportsAction,
-} from '../common/abilityOption';
 
 export const accountsReceivable = [
   {
@@ -25,29 +9,21 @@ export const accountsReceivable = [
         title: <T id={'sales_invoices'} />,
         description: <T id={'tracking_sales_invoices_with_your_customers'} />,
         link: '/invoices',
-        subject: AbilitySubject.Invoice,
-        ability: SaleInvoiceAction.View,
       },
       {
         title: <T id={'sales_estimates'} />,
         description: <T id={'manage_your_sales_estimates_to_create_quotes'} />,
         link: '/estimates',
-        subject: AbilitySubject.Estimate,
-        ability: SaleEstimateAction.View,
       },
       {
         title: <T id={'sales_receipts'} />,
         description: <T id={'manage_sales_receipts_for_sales_that_get_paid'} />,
         link: '/receipts',
-        subject: AbilitySubject.Receipt,
-        ability: SaleReceiptAction.View,
       },
       {
         title: <T id={'customers'} />,
         description: <T id={'manage_the_customers_relations_with_customer'} />,
         link: '/customers',
-        subject: AbilitySubject.Customer,
-        ability: CustomerAction.View,
       },
       {
         title: <T id={'customers_payments'} />,
@@ -55,8 +31,6 @@ export const accountsReceivable = [
           <T id={'manage_payment_transactions_from_your_customers'} />
         ),
         link: '/payment-receives',
-        subject: AbilitySubject.PaymentReceive,
-        ability: PaymentReceiveAction.View,
       },
     ],
   },
@@ -72,8 +46,6 @@ export const accountsPayable = [
           <T id={'manage_the_purchase_invoices_with_your_vendors'} />
         ),
         link: '/bills',
-        subject: AbilitySubject.Bill,
-        ability: BillAction.View,
       },
       {
         title: <T id={'vendors'} />,
@@ -81,15 +53,11 @@ export const accountsPayable = [
           <T id={'manage_the_vendors_relations_with_vendor_relations'} />
         ),
         link: '/vendors',
-        subject: AbilitySubject.Vendor,
-        ability: VendorAction.View,
       },
       {
         title: <T id={'vendors_payments'} />,
         description: <T id={'manage_payments_transactions_to_your_vendors'} />,
         link: '/payment-mades',
-        subject: AbilitySubject.PaymentMade,
-        ability: PaymentMadeAction.View,
       },
     ],
   },
@@ -109,35 +77,21 @@ export const financialAccounting = [
           />
         ),
         link: '/accounts',
-        subject: AbilitySubject.Account,
-        ability: AccountAction.View,
       },
       {
-        title: <T id={'manual_journal'} />,
+        title: <T id={'manual_journal'}/>,
-        description: (
+        description:<T id={'manage_manual_journal_transactions_on_accounts'}/>,
-          <T id={'manage_manual_journal_transactions_on_accounts'} />
-        ),
         link: '/manual-journals',
-        subject: AbilitySubject.ManualJournal,
-        ability: ManualJournalAction.View,
       },
       {
-        title: <T id={'expenses'} />,
+        title: <T id={'expenses'}/>,
-        description: (
+        description:<T id={'track_your_indirect_expenses_under_specific_categories'}/>,
-          <T id={'track_your_indirect_expenses_under_specific_categories'} />
-        ),
         link: '/expenses',
-        subject: AbilitySubject.Expense,
-        ability: ExpenseAction.View,
       },
       {
-        title: <T id={'financial_statements'} />,
+        title: <T id={'financial_statements'}/>,
-        description: (
+        description:<T id={'show_financial_reports_about_your_organization'}/>,
-          <T id={'show_financial_reports_about_your_organization'} />
-        ),
         link: '/financial-reports',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.ALL,
       },
     ],
   },
@@ -148,27 +102,19 @@ export const productsServices = [
     sectionTitle: <T id={'products_services_inventory'} />,
     shortcuts: [
       {
-        title: <T id={'products_services'} />,
+        title: <T id={'products_services'}/>,
-        description: (
+        description:<T id={'manage_your_products_inventory_or_non_inventory'}/>,
-          <T id={'manage_your_products_inventory_or_non_inventory'} />
-        ),
         link: '/items',
-        subject: AbilitySubject.Item,
-        ability: ItemAction.View,
       },
       {
-        title: <T id={'products_services_categories'} />,
+        title: <T id={'products_services_categories'}/>,
-        description: <T id={'group_your_products_and_service'} />,
+        description:<T id={'group_your_products_and_service'}/>,
         link: 'items/categories',
       },
       {
-        title: <T id={'inventory_adjustments'} />,
+        title: <T id={'inventory_adjustments'}/>,
-        description: (
+        description: <T id={'manage_your_inventory_adjustment_of_inventory_items'}/>,
-          <T id={'manage_your_inventory_adjustment_of_inventory_items'} />
-        ),
         link: '/inventory-adjustments',
-        subject: AbilitySubject.InventoryAdjustment,
-        ability: SaleInvoiceAction.View,
       },
     ],
   },

src/common/keyboardShortcutsOptions.js

@@ -1,228 +1,110 @@
+import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  AbilitySubject,
-  AccountAction,
-  BillAction,
-  CashflowAction,
-  CustomerAction,
-  ExpenseAction,
-  ItemAction,
-  ManualJournalAction,
-  ReportsAction,
-  SaleEstimateAction,
-  SaleInvoiceAction,
-  SaleReceiptAction,
-  VendorAction,
-} from './abilityOption';
 
 export default [
   {
     shortcut_key: 'Shift + I',
     description: intl.get('jump_to_the_invoices'),
-    permission: {
-      ability: SaleInvoiceAction.View,
-      subject: AbilitySubject.Invoice,
-    },
   },
   {
     shortcut_key: 'Shift + E',
     description: intl.get('jump_to_the_estimates'),
-    permission: {
-      ability: SaleEstimateAction.View,
-      subject: AbilitySubject.Estimate,
-    },
   },
   {
     shortcut_key: 'Shift + R',
     description: intl.get('jump_to_the_receipts'),
-    permission: {
-      ability: SaleReceiptAction.View,
-      subject: AbilitySubject.Receipt,
-    },
   },
   {
     shortcut_key: 'Shift + X',
     description: intl.get('jump_to_the_expenses'),
-    permission: {
-      ability: ExpenseAction.View,
-      subject: AbilitySubject.Expense,
-    },
   },
   {
     shortcut_key: 'Shift + C',
     description: intl.get('jump_to_the_customers'),
-    permission: {
-      ability: CustomerAction.View,
-      subject: AbilitySubject.Customer,
-    },
   },
   {
     shortcut_key: 'Shift + V',
     description: intl.get('jump_to_the_vendors'),
-    permission: {
-      ability: VendorAction.View,
-      subject: AbilitySubject.Vendor,
-    },
   },
   {
     shortcut_key: 'Shift + A',
     description: intl.get('jump_to_the_chart_of_accounts'),
-    permission: {
-      ability: AccountAction.View,
-      subject: AbilitySubject.Account,
-    },
   },
   {
     shortcut_key: 'Shift + B',
     description: intl.get('jump_to_the_bills'),
-    permission: {
-      ability: BillAction.View,
-      subject: AbilitySubject.Bill,
-    },
   },
   {
     shortcut_key: 'Shift + M',
     description: intl.get('jump_to_the_manual_journals'),
-    permission: {
-      ability: ManualJournalAction.View,
-      subject: AbilitySubject.ManualJournal,
-    },
   },
   {
     shortcut_key: 'Shift + W',
     description: intl.get('jump_to_the_items'),
-    permission: {
-      ability: ItemAction.View,
-      subject: AbilitySubject.Item,
-    },
   },
   {
     shortcut_key: 'Shift + D',
     description: intl.get('jump_to_the_add_money_in'),
-    permission: {
-      ability: CashflowAction.Create,
-      subject: AbilitySubject.Cashflow,
-    },
   },
   {
     shortcut_key: 'Shift + Q',
     description: intl.get('jump_to_the_add_money_out'),
-    permission: {
-      ability: CashflowAction.Create,
-      subject: AbilitySubject.Cashflow,
-    },
   },
   {
     shortcut_key: 'Shift + 1',
     description: intl.get('jump_to_the_balance_sheet'),
-    permission: {
-      ability: ReportsAction.READ_BALANCE_SHEET,
-      subject: AbilitySubject.Report,
-    },
   },
   {
     shortcut_key: 'Shift + 2',
     description: intl.get('jump_to_the_profit_loss_sheet'),
-    permission: {
-      ability: ReportsAction.READ_PROFIT_LOSS,
-      subject: AbilitySubject.Report,
-    },
   },
   {
     shortcut_key: 'Shift + 3',
     description: intl.get('jump_to_the_journal_sheet'),
-    permission: {
-      ability: ReportsAction.READ_JOURNAL,
-      subject: AbilitySubject.Report,
-    },
   },
   {
     shortcut_key: 'Shift + 4',
     description: intl.get('jump_to_the_general_ledger_sheet'),
-    permission: {
-      ability: ReportsAction.READ_GENERAL_LEDGET,
-      subject: AbilitySubject.Report,
-    },
   },
   {
     shortcut_key: 'Shift + 5',
     description: intl.get('jump_to_the_trial_balance_sheet'),
-    permission: {
-      ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
-      subject: AbilitySubject.Report,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + I ',
     description: intl.get('create_a_new_invoice'),
-    permission: {
-      ability: SaleInvoiceAction.Create,
-      subject: AbilitySubject.Invoice,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + E ',
     description: intl.get('create_a_new_estimate'),
-    permission: {
-      ability: SaleEstimateAction.Create,
-      subject: AbilitySubject.Estimate,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + R ',
     description: intl.get('create_a_new_receipt'),
-    permission: {
-      ability: SaleReceiptAction.Create,
-      subject: AbilitySubject.Receipt,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + X ',
     description: intl.get('create_a_new_expense'),
-    permission: {
-      ability: ExpenseAction.Create,
-      subject: AbilitySubject.Expense,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + C ',
     description: intl.get('create_a_new_customer'),
-    permission: {
-      ability: CustomerAction.Create,
-      subject: AbilitySubject.Customer,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + V ',
     description: intl.get('create_a_new_vendor'),
-    permission: {
-      ability: VendorAction.Create,
-      subject: AbilitySubject.Vendor,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + B ',
     description: intl.get('create_a_new_bill'),
-    permission: {
-      ability: BillAction.Create,
-      subject: AbilitySubject.Bill,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + M ',
     description: intl.get('create_a_new_journal'),
-    permission: {
-      ability: ManualJournalAction.Create,
-      subject: AbilitySubject.ManualJournal,
-    },
   },
   {
     shortcut_key: 'Ctrl + Shift  + W ',
     description: intl.get('create_a_new_item'),
-    permission: {
-      ability: ItemAction.Create,
-      subject: AbilitySubject.Item,
-    },
   },
   {
     shortcut_key: 'Ctrl + / ',

src/common/quickNewOptions.js

@@ -1,71 +1,10 @@
 import intl from 'react-intl-universal';
-import {
-  AbilitySubject,
-  SaleInvoiceAction,
-  CustomerAction,
-  VendorAction,
-  ManualJournalAction,
-  ExpenseAction,
-} from '../common/abilityOption';
-import { useAbilitiesFilter } from '../hooks';
 
 export const getQuickNewActions = () => [
-  {
+  { path: 'invoices/new', name: intl.get('sale_invoice') },
-    path: 'invoices/new',
+  { path: 'bills/new', name: intl.get('purchase_invoice') },
-    name: intl.get('sale_invoice'),
+  { path: 'make-journal-entry', name: intl.get('manual_journal') },
-    permission: {
+  { path: 'expenses/new', name: intl.get('expense') },
-      subject: AbilitySubject.Invoice,
+  { path: 'customers/new', name: intl.get('customer') },
-      ability: SaleInvoiceAction.Create,
+  { path: 'vendors/new', name: intl.get('vendor') },
-    },
-  },
-  {
-    path: 'bills/new',
-    name: intl.get('purchase_invoice'),
-    permission: {
-      subject: AbilitySubject.Invoice,
-      ability: SaleInvoiceAction.Create,
-    },
-  },
-  {
-    path: 'make-journal-entry',
-    name: intl.get('manual_journal'),
-    permission: {
-      subject: AbilitySubject.ManualJournal,
-      ability: ManualJournalAction.Create,
-    },
-  },
-  {
-    path: 'expenses/new',
-    name: intl.get('expense'),
-    permission: {
-      subject: AbilitySubject.Expense,
-      ability: ExpenseAction.Create,
-    },
-  },
-  {
-    path: 'customers/new',
-    name: intl.get('customer'),
-    permission: {
-      subject: AbilitySubject.Customer,
-      ability: CustomerAction.Create,
-    },
-  },
-  {
-    path: 'vendors/new',
-    name: intl.get('vendor'),
-    permission: {
-      subject: AbilitySubject.Vendor,
-      ability: VendorAction.Vendor,
-    },
-  },
 ];
-
-/**
- * Retrieve the dashboard quick new menu items.
- */
-export const useGetQuickNewMenu = () => {
-  const quickNewMenu = getQuickNewActions();
-  const abilitiesFilter = useAbilitiesFilter();
-
-  return abilitiesFilter(quickNewMenu);
-};

src/components/Dashboard/AuthenticatedUser.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useUser } from 'hooks/query';
+import withAuthentication from '../../containers/Authentication/withAuthentication';
+
+const AuthenticatedUserContext = React.createContext();
+
+function AuthenticatedUserComponent({ authenticatedUserId, children }) {
+  const { data: user, ...restProps } = useUser(authenticatedUserId);
+
+  return (
+    <AuthenticatedUserContext.Provider
+      value={{
+        user,
+        ...restProps,
+      }}
+      children={children}
+    />
+  );
+}
+
+export const AuthenticatedUser = withAuthentication(
+  ({ authenticatedUserId }) => ({
+    authenticatedUserId,
+  }),
+)(AuthenticatedUserComponent);
+
+export const useAuthenticatedUser = () =>
+  React.useContext(AuthenticatedUserContext);

src/components/Dashboard/DashboardAbilityProvider.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Ability } from '@casl/ability';
-import { createContextualCan } from '@casl/react';
-import { useDashboardMeta } from '../../hooks/query';
-
-export const AbilityContext = React.createContext();
-export const Can = createContextualCan(AbilityContext.Consumer);
-
-/**
- * Dashboard ability provider.
- */
-export function DashboardAbilityProvider({ children }) {
-  const {
-    data: { abilities },
-  } = useDashboardMeta();
-
-  // Ability instance.
-  const ability = new Ability(abilities);
-
-  return (
-    <AbilityContext.Provider value={ability}>
-      {children}
-    </AbilityContext.Provider>
-  );
-}

src/components/Dashboard/DashboardBoot.js

@@ -1,53 +1,18 @@
 import React from 'react';
-import {
+import * as R from 'ramda';
-  useAuthenticatedAccount,
+
-  useCurrentOrganization,
+import { useUser, useCurrentOrganization } from '../../hooks/query';
-  useDashboardMeta,
-} from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
+
+import withAuthentication from '../../containers/Authentication/withAuthentication';
+
 import { setCookie, getCookie } from '../../utils';
 
-/**
- * Dashboard meta async booting.
- */
-export function useDashboardMetaBoot() {
-  const {
-    data: dashboardMeta,
-    isLoading: isDashboardMetaLoading,
-    isSuccess: isDashboardMetaSuccess,
-  } = useDashboardMeta({
-    keepPreviousData: true,
-  });
-  const [startLoading, stopLoading] = useSplashLoading();
-
-  useWatchImmediate((value) => {
-    value && startLoading();
-  }, isDashboardMetaLoading);
-
-  useWatchImmediate(() => {
-    isDashboardMetaSuccess && stopLoading();
-  }, isDashboardMetaSuccess);
-
-  return {
-    isLoading: isDashboardMetaLoading,
-  };
-}
-
 /**
  * Dashboard async booting.
- * @returns {{ isLoading: boolean }}
  */
-export function useDashboardBoot() {
+function DashboardBootJSX({ authenticatedUserId }) {
-  const { isLoading } = useDashboardMetaBoot();
-
-  return { isLoading };
-}
-
-/**
- * Application async booting.
- */
-export function useApplicationBoot() {
   // Fetches the current user's organization.
   const {
     isSuccess: isCurrentOrganizationSuccess,
@@ -57,7 +22,7 @@ export function useApplicationBoot() {
 
   // Authenticated user.
   const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
-    useAuthenticatedAccount();
+    useUser(authenticatedUserId);
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -121,8 +86,11 @@ export function useApplicationBoot() {
       isBooted.current = true;
     },
   );
-
+  return null;
-  return {
-    isLoading: isOrgLoading || isAuthUserLoading,
-  };
 }
+
+export const DashboardBoot = R.compose(
+  withAuthentication(({ authenticatedUserId }) => ({
+    authenticatedUserId,
+  })),
+)(DashboardBootJSX);

src/components/Dashboard/DashboardProvider.js

@@ -1,16 +1,8 @@
 import React from 'react';
-import { DashboardAbilityProvider } from '../../components';
-import { useDashboardBoot } from './DashboardBoot';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  const { isLoading } = useDashboardBoot();
+  return children;
-
-  // Avoid display any dashboard component before complete booting.
-  if (isLoading) {
-    return null;
-  }
-  return <DashboardAbilityProvider>{children}</DashboardAbilityProvider>;
 }

src/components/Dashboard/DashboardTopbar.js

@@ -23,7 +23,6 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 import QuickNewDropdown from 'containers/QuickNewDropdown/QuickNewDropdown';
 import { compose } from 'utils';
 import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-import { useGetUniversalSearchTypeOptions } from '../../containers/UniversalSearch/utils';
 
 function DashboardTopbarSubscriptionMessage() {
   return (
@@ -143,8 +142,11 @@ function DashboardTopbar({
         <Navbar class="dashboard__topbar-navbar">
           <NavbarGroup>
             <If condition={isSubscriptionActive}>
-              <DashboardQuickSearchButton
+              <Button
                 onClick={() => openGlobalSearch(true)}
+                className={Classes.MINIMAL}
+                icon={<Icon icon={'search-24'} iconSize={20} />}
+                text={<T id={'quick_find'} />}
               />
               <QuickNewDropdown />
 
@@ -193,23 +195,3 @@ export default compose(
     'main',
   ),
 )(DashboardTopbar);
-
-/**
- * Dashboard quick search button.
- */
-function DashboardQuickSearchButton({ ...rest }) {
-  const searchTypeOptions = useGetUniversalSearchTypeOptions();
-
-  // Can't continue if there is no any search type option.
-  if (searchTypeOptions.length <= 0) {
-    return null;
-  }
-  return (
-    <Button
-      className={Classes.MINIMAL}
-      icon={<Icon icon={'search-24'} iconSize={20} />}
-      text={<T id={'quick_find'} />}
-      {...rest}
-    />
-  );
-}

src/components/Dashboard/PrivatePagesProvider.js

@@ -1,15 +1,31 @@
 import React from 'react';
+import * as R from 'ramda';
 
-import { useApplicationBoot } from '../../components';
+import { AuthenticatedUser } from './AuthenticatedUser';
+import { DashboardBoot } from '../../components';
+
+import withDashboard from '../../containers/Dashboard/withDashboard';
 
 /**
  * Private pages provider.
  */
-export function PrivatePagesProvider({
+function PrivatePagesProviderComponent({
+  splashScreenCompleted,
+
   // #ownProps
   children,
 }) {
-  const { isLoading } = useApplicationBoot();
+  return (
+    <AuthenticatedUser>
+      <DashboardBoot />
 
-  return <React.Fragment>{!isLoading ? children : null}</React.Fragment>;
+      {splashScreenCompleted ? children : null}
+    </AuthenticatedUser>
+  );
 }
+
+export const PrivatePagesProvider = R.compose(
+  withDashboard(({ splashScreenCompleted }) => ({
+    splashScreenCompleted,
+  })),
+)(PrivatePagesProviderComponent);

src/components/Dashboard/TopbarUser.js

@@ -14,14 +14,10 @@ import { firstLettersArgs } from 'utils';
 import { useAuthActions } from 'hooks/state';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
-
-import { useAuthenticatedAccount } from 'hooks/query'
 import { compose } from 'utils';
+import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
+import { useAuthenticatedUser } from './AuthenticatedUser';
 
-/**
- * Dashboard topbar user.
- */
 function DashboardTopbarUser({
   openDialog,
 
@@ -32,7 +28,7 @@ function DashboardTopbarUser({
   const { setLogout } = useAuthActions();
 
   // Retrieve authenticated user information.
-  const { data: user } = useAuthenticatedAccount();
+  const { user } = useAuthenticatedUser();
 
   const onClickLogout = () => {
     setLogout();

src/components/Dashboard/index.js

@@ -1,4 +1,3 @@
 export * from './SplashScreen';
 export * from './DashboardBoot';
 export * from './DashboardThemeProvider';
-export * from './DashboardAbilityProvider';

src/components/DialogsContainer.js

@@ -23,10 +23,8 @@ import BadDebtDialog from '../containers/Dialogs/BadDebtDialog';
 import NotifyInvoiceViaSMSDialog from '../containers/Dialogs/NotifyInvoiceViaSMSDialog';
 import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMSDialog';
 import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
-import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
+import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog'
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
-import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
-import EasySMSIntegrationDialog from '../containers/Dialogs/EasySMSIntegrationDialog';
 
 /**
  * Dialogs container.
@@ -60,8 +58,6 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
-      <TransactionsLockingDialog dialogName={'transactions-locking'} />
-      <EasySMSIntegrationDialog dialogName={'easysms-integrate'} />
     </div>
   );
 }

src/components/Sidebar/Sidebar.js

@@ -2,19 +2,16 @@ import React from 'react';
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
-import { useGetSidebarMenu } from './utils';
 
 import 'style/containers/Dashboard/Sidebar.scss';
 
 export default function Sidebar({ dashboardContentRef }) {
-  const menu = useGetSidebarMenu();
-
   return (
     <SidebarContainer>
       <SidebarHead />
 
       <div className="sidebar__menu">
-        <SidebarMenu menu={menu} />
+        <SidebarMenu />
       </div>
 
       <div class="sidebar__version">0.0.1-beta version.</div>

src/components/Sidebar/SidebarHead.js

@@ -3,7 +3,7 @@ import { Button, Popover, Menu, Position } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import { compose, firstLettersArgs } from 'utils';
 import withCurrentOrganization from '../../containers/Organization/withCurrentOrganization';
-import { useAuthenticatedAccount } from '../../hooks/query';
+import { useAuthenticatedUser } from '../Dashboard/AuthenticatedUser';
 
 // Popover modifiers.
 const POPOVER_MODIFIERS = {
@@ -18,7 +18,7 @@ function SidebarHead({
   organization,
 }) {
   // Retrieve authenticated user information.
-  const { data: user } = useAuthenticatedAccount();
+  const { user } = useAuthenticatedUser();
 
   return (
     <div className="sidebar__head">

src/components/Sidebar/SidebarMenu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
-
+import sidebarMenuList from 'config/sidebarMenu';
 import { Choose } from 'components';
 import Icon from 'components/Icon';
 import MenuItem from 'components/MenuItem';
@@ -24,7 +24,7 @@ function SidebarMenuItemSpace({ space }) {
   return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
 }
 
-function SidebarMenu({ menu, isSubscriptionActive }) {
+function SidebarMenu({ isSubscriptionActive }) {
   const history = useHistory();
   const location = useLocation();
 
@@ -93,7 +93,7 @@ function SidebarMenu({ menu, isSubscriptionActive }) {
     });
   };
 
-  const filterItems = menu.filter(
+  const filterItems = sidebarMenuList.filter(
     (item) => isSubscriptionActive || item.enableBilling,
   );
   const items = menuItemsMapper(filterItems);

src/components/Sidebar/utils.js

@@ -1,48 +0,0 @@
-import sidebarMenuList from 'config/sidebarMenu';
-import { isArray, isEmpty } from 'lodash';
-import { useAbilityContext } from 'hooks/utils';
-
-export function useGetSidebarMenu() {
-  const ability = useAbilityContext();
-
-  return sidebarMenuList
-    .map((item) => {
-      const children = isArray(item.children)
-        ? item.children.filter((childItem) => {
-            return isArray(childItem.permission)
-              ? childItem.permission.some((perm) =>
-                  ability.can(perm.ability, perm.subject),
-                )
-              : childItem?.permission?.ability && childItem?.permission?.subject
-              ? ability.can(
-                  childItem.permission.ability,
-                  childItem.permission.subject,
-                )
-              : true;
-          })
-        : [];
-
-      return {
-        ...item,
-        ...(isArray(item.children)
-          ? {
-              children,
-            }
-          : {}),
-      };
-    })
-    .filter((item) => {
-      return isArray(item.permission)
-        ? item.permission.some((per) =>
-            ability.can(per.ability, per.subject),
-          )
-        : item?.permission?.ability && item?.permission?.subject
-        ? ability.can(item.permission.ability, item.permission.subject)
-        : true;
-    })
-    .filter((item) =>
-      isEmpty(item.children) && !item.href && !item.label && !item.divider
-        ? false
-        : true,
-    );
-}

src/config/financialReportsMenu.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
-import { ReportsAction, AbilitySubject } from '../common/abilityOption';
 
 export const financialReportMenus = [
   {
@@ -12,8 +11,6 @@ export const financialReportMenus = [
           <T id={'reports_a_company_s_assets_liabilities_and_shareholders'} />
         ),
         link: '/financial-reports/balance-sheet',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_BALANCE_SHEET,
       },
       {
         title: <T id={'trial_balance_sheet'} />,
@@ -21,15 +18,11 @@ export const financialReportMenus = [
           <T id={'summarizes_the_credit_and_debit_balance_of_each_account'} />
         ),
         link: '/financial-reports/trial-balance-sheet',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
       },
       {
         title: <T id={'profit_loss_report'} />,
         desc: <T id={'reports_the_revenues_costs_and_expenses'} />,
         link: '/financial-reports/profit-loss-sheet',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_PROFIT_LOSS,
       },
       {
         title: <T id={'cash_flow_statement'} />,
@@ -37,22 +30,16 @@ export const financialReportMenus = [
           <T id={'reports_inflow_and_outflow_of_cash_and_cash_equivalents'} />
         ),
         link: '/financial-reports/cash-flow',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_CASHFLOW,
       },
       {
         title: <T id={'journal_report'} />,
         desc: <T id={'the_debit_and_credit_entries_of_system_transactions'} />,
         link: '/financial-reports/journal-sheet',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_JOURNAL,
       },
       {
         title: <T id={'general_ledger_report'} />,
         desc: <T id={'reports_every_transaction_going_in_and_out_of_your'} />,
         link: '/financial-reports/general-ledger',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_GENERAL_LEDGET,
       },
       {
         title: <T id={'receivable_aging_summary'} />,
@@ -60,15 +47,11 @@ export const financialReportMenus = [
           <T id={'summarize_total_unpaid_balances_of_customers_invoices'} />
         ),
         link: '/financial-reports/receivable-aging-summary',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_AR_AGING_SUMMARY,
       },
       {
         title: <T id={'payable_aging_summary'} />,
         desc: <T id={'summarize_total_unpaid_balances_of_vendors_purchase'} />,
         link: '/financial-reports/payable-aging-summary',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_AP_AGING_SUMMARY,
       },
     ],
   },
@@ -88,8 +71,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/purchases-by-items',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
       },
       {
         title: <T id={'sales_by_items'} />,
@@ -101,8 +82,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/sales-by-items',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_SALES_BY_ITEMS,
       },
       {
         title: <T id={'inventory_valuation'} />,
@@ -114,8 +93,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/inventory-valuation',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
       },
       {
         title: <T id={'customers_balance_summary'} />,
@@ -127,8 +104,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/customers-balance-summary',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'vendors_balance_summary'} />,
@@ -136,8 +111,6 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'summerize_the_total_amount_your_business_owes_each_vendor'} />
         ),
         link: '/financial-reports/vendors-balance-summary',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
       },
       {
         title: <T id={'customers_transactions'} />,
@@ -147,8 +120,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-customers',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
       },
       {
         title: <T id={'vendors_transactions'} />,
@@ -160,8 +131,6 @@ export const SalesAndPurchasesReportMenus = [
           />
         ),
         link: '/financial-reports/transactions-by-vendors',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
       },
       {
         title: <T id={'inventory_item_details'} />,
@@ -169,8 +138,6 @@ export const SalesAndPurchasesReportMenus = [
           <T id={'reports_every_transaction_going_in_and_out_of_your_items'} />
         ),
         link: '/financial-reports/inventory-item-details',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
       },
     ],
   },

src/config/sidebarMenu.js

@@ -1,26 +1,5 @@
 import React from 'react';
 import { FormattedMessage as T } from 'components';
-import {
-  ReportsAction,
-  AbilitySubject,
-  ItemAction,
-  InventoryAdjustmentAction,
-  SaleEstimateAction,
-  SaleInvoiceAction,
-  SaleReceiptAction,
-  PaymentReceiveAction,
-  BillAction,
-  PaymentMadeAction,
-  CustomerAction,
-  VendorAction,
-  AccountAction,
-  ManualJournalAction,
-  ExpenseAction,
-  CashflowAction,
-  PreferencesAbility,
-  ExchangeRateAbility,
-  SubscriptionBillingAbility,
-} from '../common/abilityOption';
 
 export default [
   {
@@ -32,32 +11,6 @@ export default [
   {
     text: <T id={'sales_inventory'} />,
     label: true,
-    permission: [
-      {
-        subject: AbilitySubject.Item,
-        ability: ItemAction.View,
-      },
-      {
-        subject: AbilitySubject.InventoryAdjustment,
-        ability: InventoryAdjustmentAction.View,
-      },
-      {
-        subject: AbilitySubject.Estimate,
-        ability: SaleEstimateAction.View,
-      },
-      {
-        subject: AbilitySubject.Invoice,
-        ability: SaleInvoiceAction.View,
-      },
-      {
-        subject: AbilitySubject.Receipt,
-        ability: SaleReceiptAction.View,
-      },
-      {
-        subject: AbilitySubject.PaymentReceive,
-        ability: PaymentReceiveAction.View,
-      },
-    ],
   },
   {
     text: <T id={'items'} />,
@@ -65,70 +18,37 @@ export default [
       {
         text: <T id={'items'} />,
         href: '/items',
-        permission: {
-          subject: AbilitySubject.Item,
-          ability: ItemAction.View,
-        },
       },
       {
         text: <T id={'inventory_adjustments'} />,
         href: '/inventory-adjustments',
-        permission: {
-          subject: AbilitySubject.InventoryAdjustment,
-          ability: InventoryAdjustmentAction.View,
-        },
       },
       {
         text: <T id={'category_list'} />,
         href: '/items/categories',
-        permission: {
-          subject: AbilitySubject.Item,
-          ability: ItemAction.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Item,
-            ability: ItemAction.Create,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Item,
-            ability: ItemAction.Create,
-          },
-        ],
       },
       {
         text: <T id={'New inventory item'} />,
         href: '/items/new',
-        permission: {
-          subject: AbilitySubject.Item,
-          ability: ItemAction.Create,
-        },
       },
       {
         text: <T id={'New service'} />,
         href: '/items/new',
-        permission: {
-          subject: AbilitySubject.Item,
-          ability: ItemAction.Create,
-        },
       },
       {
         text: <T id={'New item category'} />,
         href: '/items/categories/new',
-        permission: {
-          subject: AbilitySubject.Item,
-          ability: ItemAction.Create,
-        },
       },
+      // {
+      //   text: <T id={'New inventory adjustment'} />,
+      // },
     ],
   },
   {
@@ -137,109 +57,43 @@ export default [
       {
         text: <T id={'estimates'} />,
         href: '/estimates',
-        permission: {
+        newTabHref: '/estimates/new',
-          subject: AbilitySubject.Estimate,
-          ability: SaleEstimateAction.View,
-        },
       },
       {
         text: <T id={'invoices'} />,
         href: '/invoices',
-        permission: {
+        newTabHref: '/invoices/new',
-          subject: AbilitySubject.Invoice,
-          ability: SaleInvoiceAction.View,
-        },
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts',
-        permission: {
-          subject: AbilitySubject.Receipt,
-          ability: SaleReceiptAction.View,
-        },
       },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
-        permission: {
-          subject: AbilitySubject.PaymentReceive,
-          ability: PaymentReceiveAction.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Estimate,
-            ability: SaleEstimateAction.Create,
-          },
-          {
-            subject: AbilitySubject.Invoice,
-            ability: SaleInvoiceAction.Create,
-          },
-          {
-            subject: AbilitySubject.Receipt,
-            ability: SaleReceiptAction.Create,
-          },
-          {
-            subject: AbilitySubject.PaymentReceive,
-            ability: PaymentReceiveAction.Create,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Estimate,
-            ability: SaleEstimateAction.Create,
-          },
-          {
-            subject: AbilitySubject.Invoice,
-            ability: SaleInvoiceAction.Create,
-          },
-          {
-            subject: AbilitySubject.Receipt,
-            ability: SaleReceiptAction.Create,
-          },
-          {
-            subject: AbilitySubject.PaymentReceive,
-            ability: PaymentReceiveAction.Create,
-          },
-        ],
       },
       {
         text: <T id={'new_estimate'} />,
         href: '/estimates/new',
-        permission: {
-          subject: AbilitySubject.Estimate,
-          ability: SaleEstimateAction.Create,
-        },
       },
       {
         text: <T id={'new_invoice'} />,
         href: '/invoices/new',
-        permission: {
-          subject: AbilitySubject.Invoice,
-          ability: SaleInvoiceAction.Create,
-        },
       },
       {
         text: <T id={'new_receipt'} />,
         href: '/receipts/new',
-        permission: {
-          subject: AbilitySubject.Receipt,
-          ability: SaleReceiptAction.Create,
-        },
       },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
-        permission: {
-          subject: AbilitySubject.PaymentReceive,
-          ability: PaymentReceiveAction.Create,
-        },
       },
     ],
   },
@@ -249,62 +103,27 @@ export default [
       {
         text: <T id={'bills'} />,
         href: '/bills',
-        permission: {
+        newTabHref: '/bills/new',
-          subject: AbilitySubject.Bill,
-          ability: BillAction.View,
-        },
       },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
-        permission: {
-          subject: AbilitySubject.PaymentMade,
-          ability: PaymentMadeAction.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Bill,
-            ability: BillAction.Create,
-          },
-          {
-            subject: AbilitySubject.PaymentMade,
-            ability: PaymentMadeAction.Create,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Bill,
-            ability: BillAction.Create,
-          },
-          {
-            subject: AbilitySubject.PaymentMade,
-            ability: PaymentMadeAction.Create,
-          },
-        ],
       },
       {
         text: <T id={'New purchase invoice'} />,
         href: '/bills/new',
-        permission: {
-          subject: AbilitySubject.Bill,
-          ability: BillAction.Create,
-        },
       },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
-        permission: {
-          subject: AbilitySubject.PaymentMade,
-          ability: PaymentMadeAction.Create,
-        },
       },
     ],
   },
@@ -314,77 +133,33 @@ export default [
       {
         text: <T id={'customers'} />,
         href: '/customers',
-        permission: {
+        newTabHref: '/customers/new',
-          subject: AbilitySubject.Customer,
-          ability: CustomerAction.View,
-        },
       },
       {
         text: <T id={'vendors'} />,
         href: '/vendors',
-        permission: {
+        newTabHref: '/vendors/new',
-          subject: AbilitySubject.Vendor,
-          ability: VendorAction.Create,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Customer,
-            ability: CustomerAction.View,
-          },
-          {
-            subject: AbilitySubject.Vendor,
-            ability: VendorAction.View,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Customer,
-            ability: CustomerAction.View,
-          },
-          {
-            subject: AbilitySubject.Vendor,
-            ability: VendorAction.View,
-          },
-        ],
       },
       {
         text: <T id={'new_customer'} />,
         href: '/customers/new',
-        permission: {
-          subject: AbilitySubject.Customer,
-          ability: CustomerAction.View,
-        },
       },
       {
         text: <T id={'new_vendor'} />,
         href: '/vendors/new',
-        permission: {
-          subject: AbilitySubject.Vendor,
-          ability: VendorAction.View,
-        },
       },
     ],
   },
   {
     text: <T id={'accounting'} />,
     label: true,
-    permission: [
-      {
-        subject: AbilitySubject.Account,
-        ability: AccountAction.View,
-      },
-      {
-        subject: AbilitySubject.ManualJournal,
-        ability: ManualJournalAction.View,
-      },
-    ],
   },
   {
     text: <T id={'financial'} />,
@@ -392,57 +167,25 @@ export default [
       {
         text: <T id={'accounts_chart'} />,
         href: '/accounts',
-        permission: {
-          subject: AbilitySubject.Account,
-          ability: AccountAction.View,
-        },
       },
       {
         text: <T id={'manual_journals'} />,
         href: '/manual-journals',
-        permission: {
-          subject: AbilitySubject.ManualJournal,
-          ability: ManualJournalAction.View,
-        },
       },
-      // {
-      //   text: <T id={'sidebar.transactions_locaking'} />,
-      //   href: '/transactions-locking',
-      //   permission: {
-      //     subject: AbilitySubject.ManualJournal,
-      //     ability: ManualJournalAction.TransactionLocking,
-      //   },
-      // },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',
-        permission: {
-          subject: AbilitySubject.ExchangeRate,
-          ability: ExchangeRateAbility.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: {
-          subject: AbilitySubject.ManualJournal,
-          ability: ManualJournalAction.Create,
-        },
       },
       {
         divider: true,
-        permission: {
-          subject: AbilitySubject.ManualJournal,
-          ability: ManualJournalAction.Create,
-        },
       },
       {
         text: <T id={'make_journal_entry'} />,
         href: '/make-journal-entry',
-        permission: {
-          subject: AbilitySubject.ManualJournal,
-          ability: ManualJournalAction.Create,
-        },
       },
     ],
   },
@@ -452,61 +195,29 @@ export default [
       {
         text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
         href: '/cashflow-accounts',
-        permission: {
-          subject: AbilitySubject.Cashflow,
-          ability: CashflowAction.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Cashflow,
-            ability: CashflowAction.Create,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Cashflow,
-            ability: CashflowAction.Create,
-          },
-        ],
       },
       {
         text: <T id={'cash_flow.label.add_money_in'} />,
         href: '/cashflow-accounts',
-        permission: {
-          subject: AbilitySubject.Cashflow,
-          ability: CashflowAction.Create,
-        },
       },
       {
         text: <T id={'cash_flow.label.add_money_out'} />,
         href: '/cashflow-accounts',
-        permission: {
-          subject: AbilitySubject.Cashflow,
-          ability: CashflowAction.Create,
-        },
       },
       {
         text: <T id={'cash_flow.label.add_cash_account'} />,
         href: '/cashflow-accounts',
-        permission: {
-          subject: AbilitySubject.Cashflow,
-          ability: CashflowAction.Create,
-        },
       },
       {
         text: <T id={'cash_flow.label.add_bank_account'} />,
         href: '/cashflow-accounts',
-        permission: {
-          subject: AbilitySubject.Cashflow,
-          ability: CashflowAction.Create,
-        },
       },
     ],
   },
@@ -516,33 +227,17 @@ export default [
       {
         text: <T id={'expenses'} />,
         href: '/expenses',
-        permission: {
-          subject: AbilitySubject.Expense,
-          ability: ExpenseAction.View,
-        },
       },
       {
         text: <T id={'New tasks'} />,
         label: true,
-        permission: {
-          subject: AbilitySubject.Expense,
-          ability: ExpenseAction.Create,
-        },
       },
       {
         divider: true,
-        permission: {
-          subject: AbilitySubject.Expense,
-          ability: ExpenseAction.Create,
-        },
       },
       {
         text: <T id={'new_expense'} />,
         href: '/expenses/new',
-        permission: {
-          subject: AbilitySubject.Expense,
-          ability: ExpenseAction.Create,
-        },
       },
     ],
   },
@@ -552,216 +247,80 @@ export default [
       {
         text: <T id={'balance_sheet'} />,
         href: '/financial-reports/balance-sheet',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_BALANCE_SHEET,
-        },
       },
       {
         text: <T id={'trial_balance_sheet'} />,
         href: '/financial-reports/trial-balance-sheet',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_TRIAL_BALANCE_SHEET,
-        },
       },
       {
         text: <T id={'journal'} />,
         href: '/financial-reports/journal-sheet',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_JOURNAL,
-        },
       },
       {
         text: <T id={'general_ledger'} />,
         href: '/financial-reports/general-ledger',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_GENERAL_LEDGET,
-        },
       },
       {
         text: <T id={'profit_loss_sheet'} />,
         href: '/financial-reports/profit-loss-sheet',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_PROFIT_LOSS,
-        },
       },
       {
         text: <T id={'cash_flow_statement'} />,
         href: '/financial-reports/cash-flow',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
-        },
       },
       {
         text: <T id={'AR_Aging_Summary'} />,
         href: '/financial-reports/receivable-aging-summary',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_AR_AGING_SUMMARY,
-        },
       },
       {
         text: <T id={'AP_Aging_Summary'} />,
         href: '/financial-reports/payable-aging-summary',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_AP_AGING_SUMMARY,
-        },
       },
       {
         text: <T id={'Sales/Purchases'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_SALES_BY_ITEMS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_SALES_BY_ITEMS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
-          },
-        ],
       },
       {
         text: <T id={'purchases_by_items'} />,
         href: '/financial-reports/purchases-by-items',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_PURCHASES_BY_ITEMS,
-        },
       },
       {
         text: <T id={'sales_by_items'} />,
         href: '/financial-reports/sales-by-items',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_SALES_BY_ITEMS,
-        },
       },
       {
         text: <T id={'customers_transactions'} />,
         href: '/financial-reports/transactions-by-customers',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
-        },
       },
       {
         text: <T id={'vendors_transactions'} />,
         href: '/financial-reports/transactions-by-vendors',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_VENDORS_TRANSACTIONS,
-        },
       },
       {
         text: <T id={'customers_balance_summary'} />,
         href: '/financial-reports/customers-balance-summary',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
-        },
       },
       {
         text: <T id={'vendors_balance_summary'} />,
         href: '/financial-reports/vendors-balance-summary',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
-        },
       },
       {
         text: <T id={'inventory'} />,
         label: true,
-        permission: [
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
-          },
-        ],
       },
       {
         divider: true,
-        permission: [
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
-          },
-          {
-            subject: AbilitySubject.Report,
-            ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
-          },
-        ],
       },
       {
         text: <T id={'inventory_item_details'} />,
         href: '/financial-reports/inventory-item-details',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
-        },
       },
       {
         text: <T id={'inventory_valuation'} />,
         href: '/financial-reports/inventory-valuation',
-        permission: {
-          subject: AbilitySubject.Report,
-          ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
-        },
       },
     ],
   },
@@ -769,32 +328,14 @@ export default [
     text: <T id={'system'} />,
     enableBilling: true,
     label: true,
-    permission: [
-      {
-        subject: AbilitySubject.Preferences,
-        ability: PreferencesAbility.Mutate,
-      },
-      {
-        subject: AbilitySubject.SubscriptionBilling,
-        ability: SubscriptionBillingAbility.View,
-      },
-    ],
   },
   {
     text: <T id={'preferences'} />,
     href: '/preferences',
-    permission: {
-      subject: AbilitySubject.Preferences,
-      ability: PreferencesAbility.Mutate,
-    },
   },
   {
     text: <T id={'billing'} />,
     href: '/billing',
     enableBilling: true,
-    permission: {
-      subject: AbilitySubject.SubscriptionBilling,
-      ability: SubscriptionBillingAbility.View,
-    },
   },
 ];

src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -26,11 +26,8 @@ import withManualJournals from './withManualJournals';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
 
-import { Can, If, DashboardActionViewsList } from 'components';
+import { If, DashboardActionViewsList } from 'components';
-import {
+
-  ManualJournalAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -89,14 +86,13 @@ function ManualJournalActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon="plus" />}
+          icon={<Icon icon="plus" />}
-            text={<T id={'journal_entry'} />}
+          text={<T id={'journal_entry'} />}
-            onClick={onClickNewManualJournal}
+          onClick={onClickNewManualJournal}
-          />
+        />
-        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: manualJournalsFilterConditions,

src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js

@@ -2,11 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
-import {
-  AbilitySubject,
-  ManualJournalAction,
-} from '../../../common/abilityOption';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();
@@ -21,21 +17,19 @@ export default function ManualJournalsEmptyStatus() {
       }
       action={
         <>
-          <Can I={ManualJournalAction.Create} a={AbilitySubject.ManualJournal}>
+          <Button
-            <Button
+            intent={Intent.PRIMARY}
-              intent={Intent.PRIMARY}
+            large={true}
-              large={true}
+            onClick={() => {
-              onClick={() => {
+              history.push('/make-journal-entry');
-                history.push('/make-journal-entry');
+            }}
-              }}
+          >
-            >
+            <T id={'make_journal'} />
-              <T id={'make_journal'} />
+          </Button>
-            </Button>
 
-            <Button intent={Intent.NONE} large={true}>
+          <Button intent={Intent.NONE} large={true}>
-              <T id={'learn_more'} />
+            <T id={'learn_more'} />
-            </Button>
+          </Button>
-          </Can>
         </>
       }
     />

src/containers/Accounting/JournalsLanding/components.js

@@ -13,18 +13,7 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import {
+import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
-  Can,
-  FormattedMessage as T,
-  Choose,
-  Money,
-  If,
-  Icon,
-} from 'components';
-import {
-  ManualJournalAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 /**
@@ -161,31 +150,25 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+      <MenuDivider />
-        <MenuDivider />
+      <If condition={!original.is_published}>
-        <If condition={!original.is_published}>
-          <MenuItem
-            icon={<Icon icon="arrow-to-top" />}
-            text={intl.get('publish_journal')}
-            onClick={safeCallback(onPublish, original)}
-          />
-        </If>
-      </Can>
-      <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          icon={<Icon icon="arrow-to-top" />}
-          text={intl.get('edit_journal')}
+          text={intl.get('publish_journal')}
-          onClick={safeCallback(onEdit, original)}
+          onClick={safeCallback(onPublish, original)}
         />
-      </Can>
+      </If>
-      <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+      <MenuItem
-        <MenuItem
+        icon={<Icon icon="pen-18" />}
-          text={intl.get('delete_journal')}
+        text={intl.get('edit_journal')}
-          icon={<Icon icon="trash-16" iconSize={16} />}
+        onClick={safeCallback(onEdit, original)}
-          intent={Intent.DANGER}
+      />
-          onClick={safeCallback(onDelete, original)}
+      <MenuItem
-        />
+        text={intl.get('delete_journal')}
-      </Can>
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
     </Menu>
   );
 };

src/containers/Accounting/ManualJournalUniversalSearch.js

@@ -1,10 +1,6 @@
 import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from 'common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
-import {
-  AbilitySubject,
-  ManualJournalAction,
-} from '../../common/abilityOption';
 
 /**
  * Universal search manual journal item select action.
@@ -48,8 +44,4 @@ export const universalSearchJournalBind = () => ({
   optionItemLabel: intl.get('manual_journals'),
   selectItemAction: JournalUniversalSearchSelectAction,
   itemSelect: manualJournalsToSearch,
-  permission: {
-    ability: ManualJournalAction.View,
-    subject: AbilitySubject.ManualJournal,
-  },
 });

src/containers/Accounts/AccountUniversalSearch.js

@@ -1,9 +1,6 @@
 import intl from 'react-intl-universal';
-
-import withDrawerActions from '../Drawer/withDrawerActions';
-
-import { AbilitySubject, AccountAction } from '../../common/abilityOption';
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import withDrawerActions from '../Drawer/withDrawerActions';
 
 function AccountUniversalSearchItemSelectComponent({
   // #ownProps
@@ -45,8 +42,4 @@ export const universalSearchAccountBind = () => ({
   optionItemLabel: intl.get('accounts'),
   selectItemAction: AccountUniversalSearchItemSelect,
   itemSelect: accountToSearch,
-  permission: {
-    ability: AccountAction.View,
-    subject: AbilitySubject.Account,
-  },
 });

src/containers/Accounts/AccountsActionsBar.js

@@ -15,7 +15,6 @@ import { FormattedMessage as T } from 'components';
 import {
   AdvancedFilterPopover,
   If,
-  Can,
   DashboardActionViewsList,
   DashboardFilterButton,
   DashboardRowsHeightButton,
@@ -31,8 +30,6 @@ import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
 import withSettings from '../Settings/withSettings';
 import withSettingsActions from '../Settings/withSettingsActions';
-import { AccountAction, AbilitySubject } from '../../common/abilityOption';
-
 import { compose } from 'utils';
 
 /**
@@ -119,14 +116,13 @@ function AccountsActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Can I={AccountAction.Create} a={AbilitySubject.Account}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon="plus" />}
+          icon={<Icon icon="plus" />}
-            text={<T id={'new_account'} />}
+          text={<T id={'new_account'} />}
-            onClick={onClickNewAccount}
+          onClick={onClickNewAccount}
-          />
+        />
-        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: accountsFilterConditions,
@@ -187,13 +183,11 @@ function AccountsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <Switch
-          <Switch
+          labelElement={<T id={'inactive'} />}
-            labelElement={<T id={'inactive'} />}
+          defaultChecked={accountsInactiveMode}
-            defaultChecked={accountsInactiveMode}
+          onChange={handleInactiveSwitchChange}
-            onChange={handleInactiveSwitchChange}
+        />
-          />
-        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Accounts/components.js

@@ -8,10 +8,9 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { Can, Icon, Money, If } from 'components';
+import { Icon, Money, If } from 'components';
 import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
-import { AbilitySubject, AccountAction } from '../../common/abilityOption';
 
 /**
  * Accounts table actions menu.
@@ -35,45 +34,38 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+      <MenuDivider />
-        <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_account')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="plus" />}
+        text={intl.get('new_child_account')}
+        onClick={safeCallback(onNewChild, original)}
+      />
+      <MenuDivider />
+      <If condition={original.active}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          text={intl.get('inactivate_account')}
-          text={intl.get('edit_account')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onEdit, original)}
+          onClick={safeCallback(onInactivate, original)}
         />
-
+      </If>
+      <If condition={!original.active}>
         <MenuItem
-          icon={<Icon icon="plus" />}
+          text={intl.get('activate_account')}
-          text={intl.get('new_child_account')}
+          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onNewChild, original)}
+          onClick={safeCallback(onActivate, original)}
         />
-        <MenuDivider />
+      </If>
-      </Can>
+      <MenuItem
-      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        text={intl.get('delete_account')}
-        <If condition={original.active}>
+        icon={<Icon icon="trash-16" iconSize={16} />}
-          <MenuItem
+        intent={Intent.DANGER}
-            text={intl.get('inactivate_account')}
+        onClick={safeCallback(onDelete, original)}
-            icon={<Icon icon="pause-16" iconSize={16} />}
+      />
-            onClick={safeCallback(onInactivate, original)}
-          />
-        </If>
-        <If condition={!original.active}>
-          <MenuItem
-            text={intl.get('activate_account')}
-            icon={<Icon icon="play-16" iconSize={16} />}
-            onClick={safeCallback(onActivate, original)}
-          />
-        </If>
-      </Can>
-      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
-        <MenuItem
-          text={intl.get('delete_account')}
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDelete, original)}
-        />
-      </Can>
     </Menu>
   );
 }

src/containers/Alerts/EasySMSIntegration/EasySMSDisconnectAlert.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useSettingEasySMSDisconnect } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Easy SMS disconnect alert.
- */
-function EasySMSDisconnectAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: {},
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: disconnectEasySMS, isLoading } =
-    useSettingEasySMSDisconnect();
-
-  // Handle cancel Disconnect alert.
-  const handleCancelDisconnect = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm Disconnect alert.
-  const handleConfirmDisconnect = () => {
-    disconnectEasySMS()
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('easysms.disconnect.alert.success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch(() => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'easysms.label.disconnect'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleCancelDisconnect}
-      onConfirm={handleConfirmDisconnect}
-      loading={isLoading}
-    >
-      <p>Ea aliqua elit reprehenderit pariatur consequat voluptate quis.</p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(EasySMSDisconnectAlert);

src/containers/Alerts/Roles/RoleDeleteAlert.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useDeleteRole } from 'hooks/query';
-import { handleDeleteErrors } from '../../Preferences/Users/Roles/utils';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Role delete alert.
- */
-function RoleDeleteAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { roleId },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
-
-  // Handle cancel delete role alert.
-  const handleCancelDelete = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm delete role.
-  const handleConfirmDeleteRole = () => {
-    deleteRole(roleId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('roles.permission_schema.delete.alert_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch(
-        ({
-          response: {
-            data: { errors },
-          },
-        }) => {
-          handleDeleteErrors(errors);
-        },
-      )
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'delete'} />}
-      icon="trash"
-      intent={Intent.DANGER}
-      isOpen={isOpen}
-      onCancel={handleCancelDelete}
-      onConfirm={handleConfirmDeleteRole}
-      loading={isLoading}
-    >
-      <p>
-        <FormattedHTMLMessage
-          id={
-            'roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it'
-          }
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(RoleDeleteAlert);

src/containers/AlertsContainer/registered.js

@@ -16,8 +16,6 @@ import ExpensesAlerts from '../Expenses/ExpensesAlerts';
 import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTransactionsAlerts';
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
-import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
-import EasySMSIntegrationAlerts from '../Preferences/EasySMSIntegration/EasySMSIntegrationAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -38,6 +36,4 @@ export default [
   ...AccountTransactionsAlerts,
   ...UsersAlerts,
   ...CurrenciesAlerts,
-  ...RolesAlerts,
-  ...EasySMSIntegrationAlerts,
 ];

src/containers/CashFlow/AccountTransactions/components.js

@@ -4,10 +4,9 @@ import intl from 'react-intl-universal';
 import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { MaterialProgressBar } from 'components';
-import { Can, FormatDateCell, If, Icon } from 'components';
+import { FormatDateCell, If, Icon } from 'components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
-import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
 import { safeCallback } from 'utils';
 
 export function ActionsMenu({
@@ -21,17 +20,15 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+      <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
-        <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+        <MenuDivider />
-          <MenuDivider />
+        <MenuItem
-          <MenuItem
+          text={intl.get('delete_transaction')}
-            text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
-            intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
-            onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
-            icon={<Icon icon="trash-16" iconSize={16} />}
+        />
-          />
+      </If>
-        </If>
-      </Can>
     </Menu>
   );
 }
@@ -86,7 +83,7 @@ export function useAccountTransactionsColumns() {
         className: 'deposit',
         textOverview: true,
         align: 'right',
-        clickable: true,
+        clickable: true
       },
       {
         id: 'withdrawal',
@@ -96,7 +93,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true,
+        clickable: true
       },
       {
         id: 'running_balance',
@@ -106,7 +103,7 @@ export function useAccountTransactionsColumns() {
         width: 150,
         textOverview: true,
         align: 'right',
-        clickable: true,
+        clickable: true
       },
       {
         id: 'balance',

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -7,9 +7,8 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import { Can, Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
 import { useRefreshCashflowAccounts } from 'hooks/query';
-import { CashflowAction, AbilitySubject } from '../../../common/abilityOption';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -57,22 +56,19 @@ function CashFlowAccountsActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon={'plus-24'} iconSize={20} />}
-            icon={<Icon icon={'plus-24'} iconSize={20} />}
+          text={<T id={'cash_flow.label.add_cash_account'} />}
-            text={<T id={'cash_flow.label.add_cash_account'} />}
+          onClick={handleAddBankAccount}
-            onClick={handleAddBankAccount}
+        />
-          />
+        <Button
-
+          className={Classes.MINIMAL}
-          <Button
+          icon={<Icon icon={'plus-24'} iconSize={20} />}
-            className={Classes.MINIMAL}
+          text={<T id={'cash_flow.label.add_bank_account'} />}
-            icon={<Icon icon={'plus-24'} iconSize={20} />}
+          onClick={handleAddCashAccount}
-            text={<T id={'cash_flow.label.add_bank_account'} />}
+        />
-            onClick={handleAddCashAccount}
+        <NavbarDivider />
-          />
-          <NavbarDivider />
-        </Can>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
@@ -89,15 +85,13 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-        <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
-          <Switch
-            labelElement={<T id={'inactive'} />}
-            defaultChecked={false}
-            onChange={handleInactiveSwitchChange}
-          />
-        </Can>
-      </NavbarGroup>
 
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={false}
+          onChange={handleInactiveSwitchChange}
+        />
+      </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -13,13 +13,7 @@ import {
   If,
   Icon,
   T,
-  Can,
 } from '../../../components';
-import {
-  AccountAction,
-  CashflowAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
 
@@ -228,56 +222,48 @@ function CashflowAccountContextMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewClick)}
       />
-      <Can I={CashflowAction.Create} a={AbilitySubject.Cashflow}>
+      <MenuDivider />
-        <MenuDivider />
+      <MenuItem
-        <MenuItem
+        text={<T id={'cash_flow_money_in'} />}
-          text={<T id={'cash_flow_money_in'} />}
+        icon={<Icon icon={'arrow-downward'} iconSize={16} />}
-          icon={<Icon icon={'arrow-downward'} iconSize={16} />}
+      >
-        >
+        <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
-          <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
+      </MenuItem>
-        </MenuItem>
 
-        <MenuItem
+      <MenuItem
-          text={<T id={'cash_flow_money_out'} />}
+        text={<T id={'cash_flow_money_out'} />}
-          icon={<Icon icon={'arrow-upward'} iconSize={16} />}
+        icon={<Icon icon={'arrow-upward'} iconSize={16} />}
-        >
+      >
-          <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
+        <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
-        </MenuItem>
+      </MenuItem>
-      </Can>
+      <MenuDivider />
-      <Can I={CashflowAction.Edit} a={AbilitySubject.Cashflow}>
-        <MenuDivider />
 
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_account')}
+        onClick={safeCallback(onEditClick)}
+      />
+      <MenuDivider />
+      <If condition={account.active}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          text={intl.get('inactivate_account')}
-          text={intl.get('edit_account')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onEditClick)}
+          onClick={safeCallback(onInactivateClick)}
         />
-      </Can>
+      </If>
-      <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+      <If condition={!account.active}>
-        <MenuDivider />
-        <If condition={account.active}>
-          <MenuItem
-            text={intl.get('inactivate_account')}
-            icon={<Icon icon="pause-16" iconSize={16} />}
-            onClick={safeCallback(onInactivateClick)}
-          />
-        </If>
-        <If condition={!account.active}>
-          <MenuItem
-            text={intl.get('activate_account')}
-            icon={<Icon icon="play-16" iconSize={16} />}
-            onClick={safeCallback(onActivateClick)}
-          />
-        </If>
-      </Can>
-      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
         <MenuItem
-          text={intl.get('delete_account')}
+          text={intl.get('activate_account')}
-          icon={<Icon icon="trash-16" iconSize={16} />}
+          icon={<Icon icon="play-16" iconSize={16} />}
-          intent={Intent.DANGER}
+          onClick={safeCallback(onActivateClick)}
-          onClick={safeCallback(onDeleteClick)}
         />
-      </Can>
+      </If>
+      <MenuItem
+        text={intl.get('delete_account')}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDeleteClick)}
+      />
     </Menu>
   );
 }

src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -14,7 +14,6 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import {
   If,
   Icon,
-  Can,
   FormattedMessage as T,
   DashboardActionViewsList,
   AdvancedFilterPopover,
@@ -30,7 +29,6 @@ import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withSettingsActions from '../../Settings/withSettingsActions';
 import withSettings from '../../Settings/withSettings';
-import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -105,15 +103,15 @@ function CustomerActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Can I={CustomerAction.Create} a={AbilitySubject.Item}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon={'plus'} />}
+          icon={<Icon icon={'plus'} />}
-            text={<T id={'new_customer'} />}
+          text={<T id={'new_customer'} />}
-            onClick={onClickNewCustomer}
+          onClick={onClickNewCustomer}
-          />
+        />
-          <NavbarDivider />
+        <NavbarDivider />
-        </Can>
+
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: customersFilterConditions,
@@ -154,13 +152,11 @@ function CustomerActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+        <Switch
-          <Switch
+          labelElement={<T id={'inactive'} />}
-            labelElement={<T id={'inactive'} />}
+          defaultChecked={accountsInactiveMode}
-            defaultChecked={accountsInactiveMode}
+          onChange={handleInactiveSwitchChange}
-            onChange={handleInactiveSwitchChange}
+        />
-          />
-        </Can>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button

src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
-import { AbilitySubject, CustomerAction } from '../../../common/abilityOption';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();
@@ -18,21 +17,19 @@ export default function CustomersEmptyStatus() {
       }
       action={
         <>
-          <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
+          <Button
-            <Button
+            intent={Intent.PRIMARY}
-              intent={Intent.PRIMARY}
+            large={true}
-              large={true}
+            onClick={() => {
-              onClick={() => {
+              history.push('/customers/new');
-                history.push('/customers/new');
+            }}
-              }}
+          >
-            >
+            <T id={'new_customer'} />
-              <T id={'new_customer'} />
+          </Button>
-            </Button>
 
-            <Button intent={Intent.NONE} large={true}>
+          <Button intent={Intent.NONE} large={true}>
-              <T id={'learn_more'} />
+            <T id={'learn_more'} />
-            </Button>
+          </Button>
-          </Can>
         </>
       }
     />

src/containers/Customers/CustomersLanding/components.js

@@ -4,8 +4,7 @@ import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
 
-import { Can, Icon, Money, If, AvaterCell } from 'components';
+import { Icon, Money, If, AvaterCell } from 'components';
-import { CustomerAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { safeCallback } from 'utils';
 
@@ -30,46 +29,37 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+      <MenuDivider />
-        <MenuDivider />
+      <MenuItem
-
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_customer')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="duplicate-16" />}
+        text={intl.get('duplicate')}
+        onClick={safeCallback(onDuplicate, original)}
+      />
+      <If condition={original.active}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          text={intl.get('inactivate_customer')}
-          text={intl.get('edit_customer')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onEdit, original)}
+          onClick={safeCallback(onInactivate, original)}
         />
-      </Can>
+      </If>
-      <Can I={CustomerAction.Create} a={AbilitySubject.Customer}>
+      <If condition={!original.active}>
         <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('activate_customer')}
-          text={intl.get('duplicate')}
+          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onDuplicate, original)}
+          onClick={safeCallback(onActivate, original)}
         />
-      </Can>
+      </If>
-      <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+      <MenuItem
-        <If condition={original.active}>
+        icon={<Icon icon="trash-16" iconSize={16} />}
-          <MenuItem
+        text={intl.get('delete_customer')}
-            text={intl.get('inactivate_customer')}
+        intent={Intent.DANGER}
-            icon={<Icon icon="pause-16" iconSize={16} />}
+        onClick={safeCallback(onDelete, original)}
-            onClick={safeCallback(onInactivate, original)}
+      />
-          />
-        </If>
-        <If condition={!original.active}>
-          <MenuItem
-            text={intl.get('activate_customer')}
-            icon={<Icon icon="play-16" iconSize={16} />}
-            onClick={safeCallback(onActivate, original)}
-          />
-        </If>
-      </Can>
-      <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
-        <MenuItem
-          icon={<Icon icon="trash-16" iconSize={16} />}
-          text={intl.get('delete_customer')}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDelete, original)}
-        />
-      </Can>
     </Menu>
   );
 }

src/containers/Customers/CustomersUniversalSearch.js

@@ -1,5 +1,4 @@
 import intl from 'react-intl-universal';
-import { AbilitySubject, CustomerAction } from '../../common/abilityOption';
 
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
 import withDrawerActions from '../Drawer/withDrawerActions';
@@ -43,8 +42,4 @@ export const universalSearchCustomerBind = () => ({
   optionItemLabel: intl.get('customers'),
   selectItemAction: CustomerUniversalSearchSelectAction,
   itemSelect: customersToSearch,
-  permission: {
-    ability: CustomerAction.View,
-    subject: AbilitySubject.Customer,
-  },
 });

src/containers/Dialogs/AccountDialog/utils.js

@@ -1,5 +1,6 @@
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
+import { isEmpty } from 'lodash';
 
 export const transformApiErrors = (errors) => {
   const fields = {};
@@ -42,12 +43,18 @@ const mergeWithAccount = R.curry((transformed, account) => {
   };
 });
 
+/**
+ * Default account payload transformer.
+ */
+const defaultPayloadTransform = () => ({});
+
 /**
  * Defined payload transformers.
  */
 function getConditions() {
   return [
-    ['edit', transformEditMode],
+    ['edit'],
+    ['new_child', transformEditMode],
     ['NEW_ACCOUNT_DEFINED_TYPE', transformNewAccountDefinedType],
   ];
 }
@@ -59,9 +66,13 @@ export const transformAccountToForm = (account, payload) => {
   const conditions = getConditions();
 
   const results = conditions.map((condition) => {
+    const transformer = !isEmpty(condition[1])
+      ? condition[1]
+      : defaultPayloadTransform;
+
     return [
       condition[0] === payload.action ? R.T : R.F,
-      mergeWithAccount(condition[1](payload)),
+      mergeWithAccount(transformer(payload)),
     ];
   });
   return R.cond(results)(account);

src/containers/Dialogs/EasySMSIntegrationDialog/EasySMSIntegrationDialogContent.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { EasySMSIntegrationProvider } from './EasySMSIntegrationProvider';
-import EasySMSIntegrationForm from './EasySMSIntegrationForm';
-
-/**
- * EasySMS integration dialog content.
- */
-export default function EasySMSIntegrationDialogContent({
-  // #ownProps
-  dialogName,
-}) {
-  return (
-    <EasySMSIntegrationProvider dialogName={dialogName}>
-      <EasySMSIntegrationForm />
-    </EasySMSIntegrationProvider>
-  );
-}

src/containers/Dialogs/EasySMSIntegrationDialog/EasySMSIntegrationForm.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { Formik } from 'formik';
-import { Intent } from '@blueprintjs/core';
-
-import '../../../style/pages/EasySMSIntegration/EasySMSIntegration.scss';
-
-import { AppToaster } from 'components';
-import EasySMSIntegrationFormContent from './EasySMSIntegrationFormContent';
-import { CreateEasySMSIntegrationSchema } from './EasySMSIntegrationForm.schema';
-import { useEasySMSIntegration } from './EasySMSIntegrationProvider';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  token: '',
-};
-
-/**
- * EasySMS Integration form.
- */
-function EasySMSIntegrationForm({
-  // #withDialogActions
-  closeDialog,
-}) {
-  const { dialogName, easySMSIntegrateMutate } = useEasySMSIntegration();
-
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    // Handle request response success.
-    const onSuccess = (response) => {
-      AppToaster.show({
-        message: intl.get('easysms.integrate.dialog.success_message'),
-        intent: Intent.SUCCESS,
-      });
-      closeDialog(dialogName);
-    };
-    // Handle request response errors.
-    const onError = ({
-      response: {
-        data: { errors },
-      },
-    }) => {
-      setSubmitting(false);
-    };
-
-    easySMSIntegrateMutate(values).then(onSuccess).catch(onError);
-  };
-
-  return (
-    <Formik
-      validationSchema={CreateEasySMSIntegrationSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-      component={EasySMSIntegrationFormContent}
-    />
-  );
-}
-
-export default compose(withDialogActions)(EasySMSIntegrationForm);

src/containers/Dialogs/EasySMSIntegrationDialog/EasySMSIntegrationForm.schema.js

@@ -1,7 +0,0 @@
-import * as Yup from 'yup';
-
-const Schema = Yup.object().shape({
-  token: Yup.string().required(),
-});
-
-export const CreateEasySMSIntegrationSchema = Schema;

src/containers/Dialogs/EasySMSIntegrationDialog/EasySMSIntegrationFormContent.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
-import { Classes, FormGroup, InputGroup, Button } from '@blueprintjs/core';
-import { FieldRequiredHint, FormattedMessage as T } from 'components';
-import { useEasySMSIntegration } from './EasySMSIntegrationProvider';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { inputIntent, compose } from 'utils';
-
-/**
- * EasySMS Integration form content.
- */
-function EasySMSIntegrationFormContent({
-  // #withDialogActions
-  closeDialog,
-}) {
-  // Formik context.
-  const { isSubmitting } = useFormikContext();
-
-  // EasySMS Integration dialog context.
-  const { dialogName } = useEasySMSIntegration();
-
-  // Handle close button click.
-  const handleCloseBtnClick = () => {
-    closeDialog(dialogName);
-  };
-
-  return (
-    <Form>
-      <div className={Classes.DIALOG_BODY}>
-        {/*------------ Token -----------*/}
-        <FastField name={'token'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'easysms.integrate.dialog.label.token'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="token" />}
-              className={'form-group--token'}
-            >
-              <InputGroup intent={inputIntent({ error, touched })} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button
-            disabled={isSubmitting}
-            onClick={handleCloseBtnClick}
-            style={{ minWidth: '75px' }}
-          >
-            <T id={'close'} />
-          </Button>
-
-          <Button
-            loading={isSubmitting}
-            style={{ minWidth: '75px' }}
-            type="submit"
-          >
-            {<T id={'save'} />}
-          </Button>
-        </div>
-      </div>
-    </Form>
-  );
-}
-
-export default compose(withDialogActions)(EasySMSIntegrationFormContent);

src/containers/Dialogs/EasySMSIntegrationDialog/EasySMSIntegrationProvider.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { DialogContent } from 'components';
-import { useSettingEasySMSIntegrate } from 'hooks/query';
-
-const EasySMSIntegrationDialogContext = React.createContext();
-/**
- * Easy SMS integration dialog provider.
- */
-function EasySMSIntegrationProvider({ dialogName, ...props }) {
-  // easysms integrate mutations.
-  const { mutateAsync: easySMSIntegrateMutate } = useSettingEasySMSIntegrate();
-
-  // State provider.
-  const provider = {
-    dialogName,
-    easySMSIntegrateMutate,
-  };
-
-  return (
-    <DialogContent>
-      <EasySMSIntegrationDialogContext.Provider value={provider} {...props} />
-    </DialogContent>
-  );
-}
-
-const useEasySMSIntegration = () =>
-  React.useContext(EasySMSIntegrationDialogContext);
-
-export { EasySMSIntegrationProvider, useEasySMSIntegration };

src/containers/Dialogs/EasySMSIntegrationDialog/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
-import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'redux';
-
-const EasySMSIntegrationDialogContent = React.lazy(() =>
-  import('./EasySMSIntegrationDialogContent'),
-);
-
-/**
- * EasySms integration dialog.
- */
-function EasySMSIntegrationDialog({ dialogName, payload = {}, isOpen }) {
-  return (
-    <Dialog
-      name={dialogName}
-      title={'EasySMS Inegration'}
-      isOpen={isOpen}
-      canEscapeJeyClose={true}
-      autoFocus={true}
-      className={'dialog--easysms-integrate'}
-    >
-      <DialogSuspense>
-        <EasySMSIntegrationDialogContent dialogName={dialogName} />
-      </DialogSuspense>
-    </Dialog>
-  );
-}
-export default compose(withDialogRedux())(EasySMSIntegrationDialog);

src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js

@@ -2,8 +2,10 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string().email().required().label(intl.get('email')),
+  email: Yup.string()
-  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
+    .email()
+    .required()
+    .label(intl.get('email')),
 });
 
-export const InviteUserFormSchema = Schema;
+export const InviteUserFormSchema = Schema;

src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import {
+import { FormattedMessage as T } from 'components';
-  ListSelect,
-  FieldRequiredHint,
-  FormattedMessage as T,
-} from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
@@ -19,24 +15,23 @@ function InviteUserFormContent({
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
+  const { isEditMode, dialogName } = useInviteUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
   };
-  console.log(roles, 'XX');
+
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
         <p className="mb2">
           <T id={'your_access_to_your_team'} />
         </p>
-        {/* ----------- Email ----------- */}
+
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'email'} />}
-              labelInfo={<FieldRequiredHint />}
               className={classNames('form-group--email', CLASSES.FILL)}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="email" />}
@@ -45,31 +40,6 @@ function InviteUserFormContent({
             </FormGroup>
           )}
         </FastField>
-        {/* ----------- Role name ----------- */}
-        <FastField name={'role_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'roles.label.role_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              helperText={<ErrorMessage name="role_id" />}
-              className={classNames(CLASSES.FILL, 'form-group--role_name')}
-              intent={inputIntent({ error, touched })}
-            >
-              <ListSelect
-                items={roles}
-                onItemSelect={({ id }) => {
-                  form.setFieldValue('role_id', id);
-                }}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                // labelProp={'id '}
-                popoverProps={{ minimal: true }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import { useCreateInviteUser, useUsers, useRoles } from 'hooks/query';
+import { useCreateInviteUser, useUsers } from 'hooks/query';
 import { DialogContent } from 'components';
 
 const InviteUserFormContext = createContext();
@@ -14,9 +14,6 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
   // fetch users list.
   const { isLoading: isUsersLoading } = useUsers();
 
-  // fetch roles list.
-  const { data: roles, isLoading: isRolesLoading } = useRoles();
-
   // Provider state.
   const provider = {
     inviteUserMutate,
@@ -24,14 +21,10 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
     userId,
     isUsersLoading,
     isEditMode,
-    roles,
   };
 
   return (
-    <DialogContent
+    <DialogContent isLoading={isUsersLoading} name={'invite-form'}>
-      isLoading={isUsersLoading || isRolesLoading}
-      name={'invite-form'}
-    >
       <InviteUserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingDialogContent.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { TransactionsLockingFormProvider } from './TransactionsLockingFormProvider';
-import TransactionsLockingForm from './TransactionsLockingForm';
-
-export default function TransactionsLockingDialogContent({
-  // #ownProps
-  dialogName,
-}) {
-  return (
-    <TransactionsLockingFormProvider dialogName={dialogName}>
-      <TransactionsLockingForm />
-    </TransactionsLockingFormProvider>
-  );
-}

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFloatingActions.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'components';
-
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-/**
- * Transactions locking floating actions.
- */
-function TransactionsLockingFloatingActions({
-  // #withDialogActions
-  closeDialog,
-}) {
-  // Formik context.
-  const { isSubmitting } = useFormikContext();
-
-  const { dialogName } = useTransactionLockingContext();
-
-  // Handle cancel button click.
-  const handleCancelBtnClick = (event) => {
-    closeDialog(dialogName);
-  };
-
-  return (
-    <div className={Classes.DIALOG_FOOTER}>
-      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button
-          disabled={isSubmitting}
-          onClick={handleCancelBtnClick}
-          style={{ minWidth: '75px' }}
-        >
-          <T id={'cancel'} />
-        </Button>
-        <Button
-          intent={Intent.PRIMARY}
-          loading={isSubmitting}
-          style={{ minWidth: '75px' }}
-          type="submit"
-        >
-          {<T id={'submit'} />}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default compose(withDialogActions)(TransactionsLockingFloatingActions);

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import intl from 'react-intl-universal';
-
-import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss'
-
-import { AppToaster } from 'components';
-import { CreateTransactionsLockingFormSchema } from './TransactionsLockingForm.schema';
-
-import { useTransactionLockingContext } from './TransactionsLockingFormProvider';
-import TransactionsLockingFormContent from './TransactionsLockingFormContent';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import { compose } from 'utils';
-
-const defaultInitialValues = {
-  date: moment(new Date()).format('YYYY-MM-DD'),
-  reason: '',
-};
-
-/**
- * Transactions Locking From.
- */
-function TransactionsLockingForm({
-  // #withDialogActions
-  closeDialog,
-}) {
-  const { dialogName } = useTransactionLockingContext();
-  // Initial form values.
-  const initialValues = {
-    ...defaultInitialValues,
-  };
-
-  // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {};
-
-  return (
-    <Formik
-      validationSchema={CreateTransactionsLockingFormSchema}
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
-      component={TransactionsLockingFormContent}
-    />
-  );
-}
-export default compose(withDialogActions)(TransactionsLockingForm);

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingForm.schema.js

@@ -1,13 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  date: Yup.date().required().label(intl.get('date')),
-  reason: Yup.string()
-    .required()
-    .min(3)
-    .max(DATATYPES_LENGTH.TEXT)
-    .label(intl.get('reason')),
-});
-export const CreateTransactionsLockingFormSchema = Schema;

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-
-import TransactionsLockingFormFields from './TransactionsLockingFormFields';
-import TransactionsLockingFloatingActions from './TransactionsLockingFloatingActions';
-
-/**
- * Transactions locking form content.
- */
-export default function TransactionsLockingFormContent() {
-  return (
-    <Form>
-      <TransactionsLockingFormFields />
-      <TransactionsLockingFloatingActions />
-    </Form>
-  );
-}

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormFields.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import { FieldRequiredHint, FormattedMessage as T } from 'components';
-import { useAutofocus } from 'hooks';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from 'utils';
-
-/**
- * Transactions locking form fields.
- */
-export default function TransactionsLockingFormFields() {
-  const dateFieldRef = useAutofocus();
-
-  return (
-    <div className={Classes.DIALOG_BODY}>
-      {/*------------ Date -----------*/}
-      <FastField name={'date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'date'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
-            minimal={true}
-            className={classNames(CLASSES.FILL, 'form-group--date')}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{
-                position: Position.BOTTOM,
-                minimal: true,
-              }}
-              intent={inputIntent({ error, touched })}
-              inputRef={(ref) => (dateFieldRef.current = ref)}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-      {/*------------  reasons -----------*/}
-      <FastField name={'reason'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reason'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--reason'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'reason'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-    </div>
-  );
-}

src/containers/Dialogs/TransactionsLockingDialog/TransactionsLockingFormProvider.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DialogContent } from 'components';
-
-const TransactionsLockingContext = React.createContext();
-
-function TransactionsLockingFormProvider({ dialogName, ...props }) {
-  // State provider.
-  const provider = {
-    dialogName,
-  };
-  return (
-    <DialogContent>
-      <TransactionsLockingContext.Provider value={provider} {...props} />
-    </DialogContent>
-  );
-}
-
-const useTransactionLockingContext = () =>
-  React.useContext(TransactionsLockingContext);
-
-export { TransactionsLockingFormProvider, useTransactionLockingContext };

src/containers/Dialogs/TransactionsLockingDialog/index.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
-import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
-
-const TransactionsLockingContent = React.lazy(() =>
-  import('./TransactionsLockingDialogContent'),
-);
-
-/**
- * Transaction Locking dialog
- */
-function TransactionsLockingDialog({ dialogName, payload = {}, isOpen }) {
-  return (
-    <Dialog
-      name={dialogName}
-      autoFocus={true}
-      title={<T id={'transactions_locking.dialog.label'} />}
-      canEscapeKeyClose={true}
-      isOpen={isOpen}
-      className={'dialog--transaction--locking'}
-    >
-      <DialogSuspense>
-        <TransactionsLockingContent dialogName={dialogName} />
-      </DialogSuspense>
-    </Dialog>
-  );
-}
-
-export default compose(withDialogRedux())(TransactionsLockingDialog);

src/containers/Dialogs/UserFormDialog/UserForm.js

@@ -10,7 +10,6 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { UserFormSchema } from './UserForm.schema';
 import UserFormContent from './UserFormContent';
 import { useUserFormContext } from './UserFormProvider';
-import { transformErrors } from './utils';
 
 import { compose, objectKeysTransform } from 'utils';
 
@@ -21,10 +20,13 @@ function UserForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const [calloutCode, setCalloutCode] = React.useState([]);
+  const {
-
+    dialogName,
-  const { dialogName, user, userId, isEditMode, EditUserMutate } =
+    user,
-    useUserFormContext();
+    userId,
+    isEditMode,
+    EditUserMutate,
+  } = useUserFormContext();
 
   const initialValues = {
     ...(isEditMode &&
@@ -57,7 +59,7 @@ function UserForm({
           data: { errors },
         },
       } = error;
-      transformErrors(errors, { setErrors, setCalloutCode });
+
       setSubmitting(false);
     };
 
@@ -70,7 +72,7 @@ function UserForm({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-      <UserFormContent calloutCode={calloutCode} />
+      <UserFormContent />
     </Formik>
   );
 }

src/containers/Dialogs/UserFormDialog/UserForm.schema.js

@@ -2,14 +2,20 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string().email().required().label(intl.get('email')),
+  email: Yup.string()
-  first_name: Yup.string().required().label(intl.get('first_name_')),
+    .email()
-  last_name: Yup.string().required().label(intl.get('last_name_')),
+    .required()
+    .label(intl.get('email')),
+  first_name: Yup.string()
+    .required()
+    .label(intl.get('first_name_')),
+  last_name: Yup.string()
+    .required()
+    .label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
     .label(intl.get('phone_number_')),
-  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
 export const UserFormSchema = Schema;

src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -11,22 +11,20 @@ import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
-import { ListSelect, FieldRequiredHint } from 'components';
+import { FieldRequiredHint } from 'components';
 import { useUserFormContext } from './UserFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
-import { UserFormCalloutAlerts } from './components';
 
 /**
  * User form content.
  */
 function UserFormContent({
-  calloutCode,
   // #withDialogActions
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { dialogName, roles, isAuth } = useUserFormContext();
+  const { dialogName } = useUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
@@ -35,8 +33,6 @@ function UserFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <UserFormCalloutAlerts calloutCodes={calloutCode} />
-
         {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
@@ -92,32 +88,6 @@ function UserFormContent({
             </FormGroup>
           )}
         </FastField>
-        {/* ----------- Role name ----------- */}
-        <FastField name={'role_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'roles.label.role_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              helperText={<ErrorMessage name="role_id" />}
-              className={classNames(CLASSES.FILL, 'form-group--role_name')}
-              intent={inputIntent({ error, touched })}
-            >
-              <ListSelect
-                items={roles}
-                onItemSelect={({ id }) => {
-                  form.setFieldValue('role_id', id);
-                }}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                // labelProp={'id '}
-                popoverProps={{ minimal: true }}
-                intent={inputIntent({ error, touched })}
-                disabled={isAuth}
-              />
-            </FormGroup>
-          )}
-        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/UserFormDialog/UserFormProvider.js

@@ -1,10 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import {
+import { useEditUser, useUser } from 'hooks/query';
-  useEditUser,
-  useUser,
-  useRoles,
-  useAuthenticatedAccount,
-} from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -22,21 +17,10 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     enabled: !!userId,
   });
 
-  // fetch roles list.
-  const { data: roles, isLoading: isRolesLoading } = useRoles();
-
-  // Retrieve authenticated user information.
-  const {
-    data: { id },
-  } = useAuthenticatedAccount();
-
   const isEditMode = userId;
 
-  const isAuth = user.system_user_id == id
-
   // Provider state.
   const provider = {
-    isAuth,
     userId,
     dialogName,
 
@@ -44,14 +28,10 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     EditUserMutate,
 
     isEditMode,
-    roles,
   };
 
   return (
-    <DialogContent
+    <DialogContent isLoading={isUserLoading} name={'user-form'}>
-      isLoading={isUserLoading || isRolesLoading}
-      name={'user-form'}
-    >
       <UserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/UserFormDialog/components.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { includes } from 'lodash';
-import { Callout, Intent } from '@blueprintjs/core';
-
-export const UserFormCalloutAlerts = ({ calloutCodes }) => {
-  return [
-    includes(calloutCodes, 200) && (
-      <Callout icon={null} intent={Intent.DANGER}>
-        {intl.get('roles.error.you_cannot_change_your_own_role')}
-      </Callout>
-    ),
-  ];
-};

src/containers/Dialogs/UserFormDialog/utils.js

@@ -1,13 +0,0 @@
-import intl from 'react-intl-universal';
-
-// handle delete errors.
-export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
-  if (
-    errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
-  ) {
-    setCalloutCode([200]);
-    setErrors({
-      role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
-    });
-  }
-};

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -7,14 +7,13 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { safeCallback } from 'utils';
-import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
@@ -54,31 +53,26 @@ function AccountDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_account'} />}
-            text={<T id={'edit_account'} />}
+          onClick={safeCallback(onEditAccount)}
-            onClick={safeCallback(onEditAccount)}
+        />
-          />
+        <Button
-
+          className={Classes.MINIMAL}
-          <Button
+          icon={<Icon icon="plus" />}
-            className={Classes.MINIMAL}
+          text={<T id={'new_child_account'} />}
-            icon={<Icon icon="plus" />}
+          onClick={safeCallback(onNewChildAccount)}
-            text={<T id={'new_child_account'} />}
+        />
-            onClick={safeCallback(onNewChildAccount)}
+        <NavbarDivider />
-          />
+        <Button
-          <NavbarDivider />
+          className={Classes.MINIMAL}
-        </Can>
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-        <Can I={AccountAction.Delete} a={AbilitySubject.Account}>
+          text={<T id={'delete'} />}
-          <Button
+          intent={Intent.DANGER}
-            className={Classes.MINIMAL}
+          onClick={safeCallback(onDeleteAccount)}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+        />
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={safeCallback(onDeleteAccount)}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/BillDrawer/BillDetailActionsBar.js

@@ -16,12 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, If, Icon, FormattedMessage as T } from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
-import {
-  BillAction,
-  PaymentMadeAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -58,35 +53,29 @@ function BillDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_bill'} />}
+          onClick={safeCallback(onEditBill)}
+        />
+        <NavbarDivider />
+        <If condition={bill.is_open && !bill.is_fully_paid}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="pen-18" />}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'edit_bill'} />}
+            text={<T id={'add_payment'} />}
-            onClick={safeCallback(onEditBill)}
+            onClick={handleQuickBillPayment}
           />
-          <NavbarDivider />
+        </If>
-        </Can>
+        <NavbarDivider />
-        <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+        <Button
-          <If condition={bill.is_open && !bill.is_fully_paid}>
+          className={Classes.MINIMAL}
-            <Button
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-              className={Classes.MINIMAL}
+          text={<T id={'delete'} />}
-              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          intent={Intent.DANGER}
-              text={<T id={'add_payment'} />}
+          onClick={safeCallback(onDeleteBill)}
-              onClick={handleQuickBillPayment}
+        />
-            />
-          </If>
-          <NavbarDivider />
-        </Can>
-        <Can I={BillAction.Delete} a={AbilitySubject.Bill}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={safeCallback(onDeleteBill)}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
-import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
+
 import { compose } from 'utils';
 
 /**
@@ -24,19 +24,17 @@ function CashflowTransactionDrawerActionBar({
   };
 
   return (
-    <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+    <DashboardActionsBar>
-      <DashboardActionsBar>
+      <NavbarGroup>
-        <NavbarGroup>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="trash-16" iconSize={16} />}
-            icon={<Icon icon="trash-16" iconSize={16} />}
+          text={<T id={'delete'} />}
-            text={<T id={'delete'} />}
+          intent={Intent.DANGER}
-            intent={Intent.DANGER}
+          onClick={handleDeleteCashflowTransaction}
-            onClick={handleDeleteCashflowTransaction}
+        />
-          />
+      </NavbarGroup>
-        </NavbarGroup>
+    </DashboardActionsBar>
-      </DashboardActionsBar>
-    </Can>
   );
 }
 export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js

@@ -21,15 +21,8 @@ import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
-import {
+
-  AbilitySubject,
-  SaleInvoiceAction,
-  SaleEstimateAction,
-  SaleReceiptAction,
-  PaymentReceiveAction,
-  CustomerAction,
-} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -69,7 +62,7 @@ function CustomerDetailsActionsBar({
   const handleDeleteCustomer = () => {
     openAlert(`customer-delete`, { contactId: customerId });
   };
-
+  
   const handleEditContact = () => {
     history.push(`/customers/${customerId}/edit`);
     closeDrawer('customer-details-drawer');
@@ -81,34 +74,22 @@ function CustomerDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+              <MenuItem
-                <MenuItem
+                text={<T id={'customer.drawer.action.new_invoice'} />}
-                  text={<T id={'customer.drawer.action.new_invoice'} />}
+                onClick={handleNewInvoiceClick}
-                  onClick={handleNewInvoiceClick}
+              />
-                />
+              <MenuItem
-              </Can>
+                text={<T id={'customer.drawer.action.new_estimate'} />}
-              <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+                onClick={handleNewEstimateClick}
-                <MenuItem
+              />
-                  text={<T id={'customer.drawer.action.new_estimate'} />}
+              <MenuItem
-                  onClick={handleNewEstimateClick}
+                text={<T id={'customer.drawer.action.new_receipt'} />}
-                />
+                onClick={handleNewReceiptClick}
-              </Can>
+              />
-              <Can I={SaleReceiptAction.Create} a={AbilitySubject.Receipt}>
+              <MenuItem
-                <MenuItem
+                text={<T id={'customer.drawer.action.new_payment'} />}
-                  text={<T id={'customer.drawer.action.new_receipt'} />}
+                onClick={handleNewPaymentClick}
-                  onClick={handleNewReceiptClick}
+              />
-                />
-              </Can>
-
-              <Can
-                I={PaymentReceiveAction.Create}
-                a={AbilitySubject.PaymentReceive}
-              >
-                <MenuItem
-                  text={<T id={'customer.drawer.action.new_payment'} />}
-                  onClick={handleNewPaymentClick}
-                />
-              </Can>
             </Menu>
           }
           minimal={true}
@@ -123,24 +104,21 @@ function CustomerDetailsActionsBar({
         </Popover>
 
         <NavbarDivider />
-        <Can I={CustomerAction.Edit} a={AbilitySubject.Customer}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon="pen-18" />}
+          icon={<Icon icon="pen-18" />}
-            text={intl.get('customer.drawer.action.edit')}
+          text={intl.get('customer.drawer.action.edit')}
-            onClick={handleEditContact}
+          onClick={handleEditContact}
-          />
+        />
-          <NavbarDivider />
+        <NavbarDivider />
-        </Can>
+        <Button
-        <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
+          className={Classes.MINIMAL}
-          <Button
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-            className={Classes.MINIMAL}
+          text={<T id={'delete'} />}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+          intent={Intent.DANGER}
-            text={<T id={'delete'} />}
+          onClick={handleDeleteCustomer}
-            intent={Intent.DANGER}
+        />
-            onClick={handleDeleteCustomer}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js

@@ -14,12 +14,8 @@ import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import {
-  SaleEstimateAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
-import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 
 import { compose } from 'utils';
 
@@ -63,40 +59,32 @@ function EstimateDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_estimate'} />}
-            text={<T id={'edit_estimate'} />}
+          onClick={handleEditEstimate}
-            onClick={handleEditEstimate}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+          icon={<Icon icon="print-16" />}
-          <Button
+          text={<T id={'print'} />}
-            className={Classes.MINIMAL}
+          onClick={handlePrintEstimate}
-            icon={<Icon icon="print-16" />}
+        />
-            text={<T id={'print'} />}
+        <Button
-            onClick={handlePrintEstimate}
+          className={Classes.MINIMAL}
-          />
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-        </Can>
+          text={<T id={'delete'} />}
-        <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+          intent={Intent.DANGER}
-          <Button
+          onClick={handleDeleteEstimate}
-            className={Classes.MINIMAL}
+        />
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+        <NavbarDivider />
-            text={<T id={'delete'} />}
+        <MoreMenuItems
-            intent={Intent.DANGER}
+          payload={{
-            onClick={handleDeleteEstimate}
+            onNotifyViaSMS: handleNotifyViaSMS,
-          />
+          }}
-          <NavbarDivider />
+        />
-        </Can>
-        <Can I={SaleEstimateAction.NotifyBySms} a={AbilitySubject.Estimate}>
-          <MoreMenuItems
-            payload={{
-              onNotifyViaSMS: handleNotifyViaSMS,
-            }}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js

@@ -8,8 +8,8 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
-import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
+
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -44,24 +44,20 @@ function ExpenseDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_expense'} />}
-            text={<T id={'edit_expense'} />}
+          onClick={handleEditExpense}
-            onClick={handleEditExpense}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+          icon={<Icon icon="trash-16" iconSize={16} />}
-          <Button
+          text={<T id={'delete'} />}
-            className={Classes.MINIMAL}
+          intent={Intent.DANGER}
-            icon={<Icon icon="trash-16" iconSize={16} />}
+          onClick={handleDeleteExpense}
-            text={<T id={'delete'} />}
+        />
-            intent={Intent.DANGER}
-            onClick={handleDeleteExpense}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js

@@ -7,11 +7,7 @@ import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawer
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
-import {
-  InventoryAdjustmentAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -30,22 +26,17 @@ function InventoryAdjustmentDetailActionsBar({
   };
 
   return (
-    <Can
+    <DashboardActionsBar>
-      I={InventoryAdjustmentAction.Delete}
+      <NavbarGroup>
-      a={AbilitySubject.InventoryAdjustment}
+        <Button
-    >
+          className={Classes.MINIMAL}
-      <DashboardActionsBar>
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-        <NavbarGroup>
+          text={<T id={'delete'} />}
-          <Button
+          intent={Intent.DANGER}
-            className={Classes.MINIMAL}
+          onClick={handleDeleteInventoryAdjustment}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+        />
-            text={<T id={'delete'} />}
+      </NavbarGroup>
-            intent={Intent.DANGER}
+    </DashboardActionsBar>
-            onClick={handleDeleteInventoryAdjustment}
-          />
-        </NavbarGroup>
-      </DashboardActionsBar>
-    </Can>
   );
 }
 

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js

@@ -16,12 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { If, Can, Icon, FormattedMessage as T } from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
-import {
-  SaleInvoiceAction,
-  PaymentReceiveAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -83,54 +78,43 @@ function InvoiceDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_invoice'} />}
+          onClick={handleEditInvoice}
+        />
+        <NavbarDivider />
+        <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon="pen-18" />}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
-            text={<T id={'edit_invoice'} />}
+            text={<T id={'add_payment'} />}
-            onClick={handleEditInvoice}
+            onClick={handleQuickPaymentInvoice}
           />
-
+        </If>
-          <NavbarDivider />
+        <NavbarDivider />
-        </Can>
+        <Button
-        <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+          className={Classes.MINIMAL}
-          <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+          icon={<Icon icon="print-16" />}
-            <Button
+          text={<T id={'print'} />}
-              className={Classes.MINIMAL}
+          onClick={handlePrintInvoice}
-              icon={<Icon icon="quick-payment-16" iconSize={16} />}
+        />
-              text={<T id={'add_payment'} />}
+        <Button
-              onClick={handleQuickPaymentInvoice}
+          className={Classes.MINIMAL}
-            />
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          </If>
+          text={<T id={'delete'} />}
-          <NavbarDivider />
+          intent={Intent.DANGER}
-        </Can>
+          onClick={handleDeleteInvoice}
-        <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+        />
-          <Button
+        <NavbarDivider />
-            className={Classes.MINIMAL}
+        <BadDebtMenuItem
-            icon={<Icon icon="print-16" />}
+          payload={{
-            text={<T id={'print'} />}
+            onBadDebt: handleBadDebtInvoice,
-            onClick={handlePrintInvoice}
+            onCancelBadDebt: handleCancelBadDebtInvoice,
-          />
+            onNotifyViaSMS: handleNotifyViaSMS,
-        </Can>
+          }}
-        <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        />
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleDeleteInvoice}
-          />
-        </Can>
-        <Can I={SaleInvoiceAction.Writeoff} a={AbilitySubject.Invoice}>
-          <NavbarDivider />
-          <BadDebtMenuItem
-            payload={{
-              onBadDebt: handleBadDebtInvoice,
-              onCancelBadDebt: handleCancelBadDebtInvoice,
-              onNotifyViaSMS: handleNotifyViaSMS,
-            }}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -8,11 +8,7 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T, Choose, Can } from 'components';
+import { Icon, FormattedMessage as T, Choose } from 'components';
-import {
-  SaleInvoiceAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 import { FormatNumberCell } from '../../../components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
@@ -92,12 +88,10 @@ export const BadDebtMenuItem = ({
               />
             </Choose.When>
           </Choose>
-          <Can I={SaleInvoiceAction.NotifyBySms} a={AbilitySubject.Invoice}>
+          <MenuItem
-            <MenuItem
+            onClick={onNotifyViaSMS}
-              onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
-              text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
-            />
-          </Can>
         </Menu>
       }
     >

src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js

@@ -10,12 +10,11 @@ import {
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
-import { ItemAction, AbilitySubject } from '../../../common/abilityOption';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
 
 import { compose } from 'utils';
 
@@ -48,25 +47,20 @@ function ItemDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_item'} />}
-            text={<T id={'edit_item'} />}
+          onClick={handleEditItem}
-            onClick={handleEditItem}
+        />
-          />
+        <NavbarDivider />
-
+        <Button
-          <NavbarDivider />
+          className={Classes.MINIMAL}
-        </Can>
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-        <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
+          text={<T id={'delete'} />}
-          <Button
+          intent={Intent.DANGER}
-            className={Classes.MINIMAL}
+          onClick={handleDeleteItem}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+        />
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleDeleteItem}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js

@@ -8,19 +8,14 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
-import {
-  ManualJournalAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
-
 import { compose } from 'utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal action bar.
@@ -49,24 +44,20 @@ function ManualJournalDrawerActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_journal'} />}
-            text={<T id={'edit_journal'} />}
+          onClick={handleEditManualJournal}
-            onClick={handleEditManualJournal}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
+          icon={<Icon icon="trash-16" iconSize={16} />}
-          <Button
+          text={<T id={'delete'} />}
-            className={Classes.MINIMAL}
+          intent={Intent.DANGER}
-            icon={<Icon icon="trash-16" iconSize={16} />}
+          onClick={handleDeleteManualJournal}
-            text={<T id={'delete'} />}
+        />
-            intent={Intent.DANGER}
-            onClick={handleDeleteManualJournal}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js

@@ -16,11 +16,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
-import {
+
-  PaymentMadeAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 import { compose } from 'utils';
 
 /**
@@ -51,24 +48,20 @@ function PaymentMadeDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_made'} />}
-            text={<T id={'edit_payment_made'} />}
+          onClick={handleEditPaymentMade}
-            onClick={handleEditPaymentMade}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          <Button
+          text={<T id={'delete'} />}
-            className={Classes.MINIMAL}
+          intent={Intent.DANGER}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+          onClick={handleDeletePaymentMade}
-            text={<T id={'delete'} />}
+        />
-            intent={Intent.DANGER}
-            onClick={handleDeletePaymentMade}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -16,11 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
-import {
-  PaymentReceiveAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { compose } from 'utils';
 
@@ -61,32 +57,26 @@ function PaymentReceiveActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_receive'} />}
-            text={<T id={'edit_payment_receive'} />}
+          onClick={handleEditPaymentReceive}
-            onClick={handleEditPaymentReceive}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          <Button
+          text={<T id={'delete'} />}
-            className={Classes.MINIMAL}
+          intent={Intent.DANGER}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+          onClick={handleDeletePaymentReceive}
-            text={<T id={'delete'} />}
+        />
-            intent={Intent.DANGER}
+        <NavbarDivider />
-            onClick={handleDeletePaymentReceive}
+        <MoreMenuItems
-          />
+          payload={{
-          <NavbarDivider />
+            onNotifyViaSMS: handleNotifyViaSMS,
-        </Can>
+          }}
-        <Can I={PaymentReceiveAction.NotifyBySms} a={AbilitySubject.PaymentReceive}>
+        />
-          <MoreMenuItems
-            payload={{
-              onNotifyViaSMS: handleNotifyViaSMS,
-            }}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js

@@ -14,12 +14,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T, MoreMenuItems } from 'components';
+import { Icon, FormattedMessage as T, MoreMenuItems } from 'components';
 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
-import {
-  SaleReceiptAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
 
 import { safeCallback, compose } from 'utils';
 
@@ -58,40 +54,32 @@ function ReceiptDetailActionBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Can I={SaleReceiptAction.Edit} a={AbilitySubject.Receipt}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
-            icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_receipt'} />}
-            text={<T id={'edit_receipt'} />}
+          onClick={safeCallback(onEditReceipt)}
-            onClick={safeCallback(onEditReceipt)}
+        />
-          />
+        <NavbarDivider />
-          <NavbarDivider />
+        <Button
-        </Can>
+          className={Classes.MINIMAL}
-        <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+          icon={<Icon icon="print-16" />}
-          <Button
+          text={<T id={'print'} />}
-            className={Classes.MINIMAL}
+          onClick={safeCallback(onPrintReceipt)}
-            icon={<Icon icon="print-16" />}
+        />
-            text={<T id={'print'} />}
+        <Button
-            onClick={safeCallback(onPrintReceipt)}
+          className={Classes.MINIMAL}
-          />
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-        </Can>
+          text={<T id={'delete'} />}
-        <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
+          intent={Intent.DANGER}
-          <Button
+          onClick={safeCallback(onDeleteReceipt)}
-            className={Classes.MINIMAL}
+        />
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+        <NavbarDivider />
-            text={<T id={'delete'} />}
+        <MoreMenuItems
-            intent={Intent.DANGER}
+          payload={{
-            onClick={safeCallback(onDeleteReceipt)}
+            onNotifyViaSMS: handleNotifyViaSMS,
-          />
+          }}
-          <NavbarDivider />
+        />
-        </Can>
-        <Can I={SaleReceiptAction.NotifyBySms} a={AbilitySubject.Receipt}>
-          <MoreMenuItems
-            payload={{
-              onNotifyViaSMS: handleNotifyViaSMS,
-            }}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Drawers/VendorDetailsDrawer/VendorDetailsActionsBar.js

@@ -20,13 +20,8 @@ import { useVendorDetailsDrawerContext } from './VendorDetailsDrawerProvider';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from 'components';
-import {
+
-  AbilitySubject,
-  SaleInvoiceAction,
-  PaymentMadeAction,
-  VendorAction,
-} from '../../../common/abilityOption';
 import { safeCallback, compose } from 'utils';
 
 /**
@@ -69,18 +64,14 @@ function VendorDetailsActionsBar({
         <Popover
           content={
             <Menu>
-              <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+              <MenuItem
-                <MenuItem
+                text={<T id={'vendor.drawer.action.new_invoice'} />}
-                  text={<T id={'vendor.drawer.action.new_invoice'} />}
+                onClick={handleNewInvoiceClick}
-                  onClick={handleNewInvoiceClick}
+              />
-                />
+              <MenuItem
-              </Can>
+                text={<T id={'vendor.drawer.action.new_payment'} />}
-              <Can I={PaymentMadeAction.Create} a={AbilitySubject.PaymentMade}>
+                onClick={handleNewPaymentClick}
-                <MenuItem
+              />
-                  text={<T id={'vendor.drawer.action.new_payment'} />}
-                  onClick={handleNewPaymentClick}
-                />
-              </Can>
             </Menu>
           }
           minimal={true}
@@ -93,25 +84,23 @@ function VendorDetailsActionsBar({
             icon={<Icon icon={'plus'} />}
           />
         </Popover>
+
         <NavbarDivider />
-        <Can I={VendorAction.Edit} a={AbilitySubject.Vendor}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon="pen-18" />}
+          icon={<Icon icon="pen-18" />}
-            text={<T id={'vendor.drawer.action.edit'} />}
+          text={<T id={'vendor.drawer.action.edit'} />}
-            onClick={safeCallback(onEditContact)}
+          onClick={safeCallback(onEditContact)}
-          />
+        />
-          <NavbarDivider />
+        <NavbarDivider />
-        </Can>
+        <Button
-        <Can I={VendorAction.Delete} a={AbilitySubject.Vendor}>
+          className={Classes.MINIMAL}
-          <Button
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
-            className={Classes.MINIMAL}
+          text={<T id={'vendor.drawer.action.delete'} />}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
+          intent={Intent.DANGER}
-            text={<T id={'vendor.drawer.action.delete'} />}
+          onClick={safeCallback(onDeleteContact)}
-            intent={Intent.DANGER}
+        />
-            onClick={safeCallback(onDeleteContact)}
-          />
-        </Can>
       </NavbarGroup>
     </DashboardActionsBar>
   );

src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js

@@ -15,7 +15,6 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import {
   If,
-  Can,
   DashboardRowsHeightButton,
   DashboardActionViewsList,
   DashboardFilterButton,
@@ -23,7 +22,6 @@ import {
   FormattedMessage as T,
 } from 'components';
 
-import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
 import { useRefreshExpenses } from 'hooks/query/expenses';
 import { useExpensesListContext } from './ExpensesListProvider';
 
@@ -94,14 +92,13 @@ function ExpensesActionsBar({
           onChange={handleTabChange}
         />
         <NavbarDivider />
-        <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
+
-          <Button
+        <Button
-            className={Classes.MINIMAL}
+          className={Classes.MINIMAL}
-            icon={<Icon icon="plus" />}
+          icon={<Icon icon="plus" />}
-            text={<T id={'new_expense'} />}
+          text={<T id={'new_expense'} />}
-            onClick={onClickNewExpense}
+          onClick={onClickNewExpense}
-          />
+        />
-        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: expensesFilterConditions,

src/containers/Expenses/ExpensesLanding/ExpensesEmptyStatus.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
-import { AbilitySubject, ExpenseAction } from '../../../common/abilityOption';
 
 export default function InvoicesEmptyStatus() {
   const history = useHistory();
@@ -18,21 +17,19 @@ export default function InvoicesEmptyStatus() {
       }
       action={
         <>
-          <Can I={ExpenseAction.Create} a={AbilitySubject.Expense}>
+          <Button
-            <Button
+            intent={Intent.PRIMARY}
-              intent={Intent.PRIMARY}
+            large={true}
-              large={true}
+            onClick={() => {
-              onClick={() => {
+              history.push('/expenses/new');
-                history.push('/expenses/new');
+            }}
-              }}
+          >
-            >
+            <T id={'new_expense'} />
-              <T id={'new_expense'} />
+          </Button>
-            </Button>
 
-            <Button intent={Intent.NONE} large={true}>
+          <Button intent={Intent.NONE} large={true}>
-              <T id={'learn_more'} />
+            <T id={'learn_more'} />
-            </Button>
+          </Button>
-          </Can>
         </>
       }
     />

src/containers/Expenses/ExpensesLanding/components.js

@@ -12,14 +12,13 @@ import {
   MenuDivider,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
+
 import {
   FormatDateCell,
   FormattedMessage as T,
   Money,
   Icon,
   If,
-  Can,
 } from 'components';
 import { safeCallback } from 'utils';
 
@@ -55,31 +54,25 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
+      <MenuDivider />
-        <MenuDivider />
+      <If condition={!original.is_published}>
-        <If condition={!original.is_published}>
-          <MenuItem
-            icon={<Icon icon={'arrow-to-top'} size={16} />}
-            text={intl.get('publish_expense')}
-            onClick={safeCallback(onPublish, original)}
-          />
-        </If>
-      </Can>
-      <Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          icon={<Icon icon={'arrow-to-top'} size={16} />}
-          text={intl.get('edit_expense')}
+          text={intl.get('publish_expense')}
-          onClick={safeCallback(onEdit, original)}
+          onClick={safeCallback(onPublish, original)}
         />
-      </Can>
+      </If>
-      <Can I={ExpenseAction.Delete} a={AbilitySubject.Expense}>
+      <MenuItem
-        <MenuItem
+        icon={<Icon icon="pen-18" />}
-          icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('edit_expense')}
-          text={intl.get('delete_expense')}
+        onClick={safeCallback(onEdit, original)}
-          intent={Intent.DANGER}
+      />
-          onClick={safeCallback(onDelete, original)}
+      <MenuItem
-        />
+        icon={<Icon icon="trash-16" iconSize={16} />}
-      </Can>
+        text={intl.get('delete_expense')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
     </Menu>
   );
 }

src/containers/FinancialStatements/FilterFinancialReports.js

@@ -1,23 +0,0 @@
-import { isEmpty } from 'lodash';
-import { useAbilityContext } from '../../hooks';
-
-function useFilterFinancialReports(financialSection) {
-  const ability = useAbilityContext();
-
-  const section = financialSection
-    .map((section) => {
-      const reports = section.reports.filter((report) => {
-        return ability.can(report.ability, report.subject);
-      });
-
-      return {
-        sectionTitle: section.sectionTitle,
-        reports,
-      };
-    })
-    .filter(({ reports }) => !isEmpty(reports));
-
-  return section;
-}
-
-export default useFilterFinancialReports;

src/containers/FinancialStatements/FinancialReports.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
-import useFilterFinancialReports from './FilterFinancialReports';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   financialReportMenus,
@@ -37,18 +37,13 @@ function FinancialReportsSection({ sectionTitle, reports }) {
  * Financial reports.
  */
 export default function FinancialReports() {
-  const financialReportMenu = useFilterFinancialReports(financialReportMenus);
-  const SalesAndPurchasesReportMenu = useFilterFinancialReports(
-    SalesAndPurchasesReportMenus,
-  );
-
   return (
     <DashboardInsider name={'financial-reports'}>
       <div class="financial-reports">
-        <For render={FinancialReportsSection} of={financialReportMenu} />
+        <For render={FinancialReportsSection} of={financialReportMenus} />
         <For
           render={FinancialReportsSection}
-          of={SalesAndPurchasesReportMenu}
+          of={SalesAndPurchasesReportMenus}
         />
       </div>
     </DashboardInsider>

src/containers/GlobalErrors/GlobalErrors.js

@@ -1,5 +1,7 @@
+import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import { useHistory } from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
 
 import withGlobalErrors from './withGlobalErrors';
@@ -28,6 +30,7 @@ function GlobalErrors({
       toastKeySessionExpired,
     );
   }
+
   if (globalErrors.session_expired) {
     toastKeySomethingWrong = AppToaster.show(
       {
@@ -40,18 +43,6 @@ function GlobalErrors({
       toastKeySomethingWrong,
     );
   }
-  if (globalErrors.access_denied) {
-    toastKeySomethingWrong = AppToaster.show(
-      {
-        message: 'You do not have permissions to access this page.',
-        intent: Intent.DANGER,
-        onDismiss: () => {
-          globalErrorsSet({ access_denied: false });
-        },
-      },
-      toastKeySomethingWrong,
-    );
-  }
   return null;
 }
 

src/containers/Homepage/ShortcutBoxesSection.js

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import { For } from 'components';
 
 import 'style/pages/FinancialStatements/FinancialSheets.scss';
-import { useFilterShortcutBoxesSection } from './components';
 
 function ShortcutBox({ title, link, description }) {
   return (
@@ -28,6 +27,5 @@ function ShortcutBoxes({ sectionTitle, shortcuts }) {
 }
 
 export default function ShortcutBoxesSection({ section }) {
-  const BoxSection = useFilterShortcutBoxesSection(section);
+  return <For render={ShortcutBoxes} of={section} />;
-  return <For render={ShortcutBoxes} of={BoxSection} />;
 }

src/containers/Homepage/components.js

@@ -1,18 +0,0 @@
-import { isEmpty } from 'lodash';
-import { useAbilityContext } from '../../hooks';
-
-export const useFilterShortcutBoxesSection = (section) => {
-  const ability = useAbilityContext();
-
-  return section
-    .map(({ sectionTitle, shortcuts }) => {
-      const shortcut = shortcuts.filter((shortcuts) => {
-        return ability.can(shortcuts.ability, shortcuts.subject);
-      });
-      return {
-        sectionTitle: sectionTitle,
-        shortcuts: shortcut,
-      };
-    })
-    .filter(({ shortcuts }) => !isEmpty(shortcuts));
-};

src/containers/InventoryAdjustments/components.js

@@ -12,14 +12,10 @@ import {
 import intl from 'react-intl-universal';
 import moment from 'moment';
 
-import { FormattedMessage as T, Can } from 'components';
+import { FormattedMessage as T } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
-import {
-  InventoryAdjustmentAction,
-  AbilitySubject,
-} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -106,31 +102,20 @@ export const ActionsMenu = ({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
-
+      <MenuDivider />
-      <Can
+      <If condition={!original.is_published}>
-        I={InventoryAdjustmentAction.Create}
-        a={AbilitySubject.InventoryAdjustment}
-      >
-        <MenuDivider />
-        <If condition={!original.is_published}>
-          <MenuItem
-            icon={<Icon icon={'arrow-to-top'} size={16} />}
-            text={intl.get('publish_adjustment')}
-            onClick={safeCallback(onPublish, original)}
-          />
-        </If>
-      </Can>
-      <Can
-        I={InventoryAdjustmentAction.Delete}
-        a={AbilitySubject.InventoryAdjustment}
-      >
         <MenuItem
-          text={intl.get('delete_adjustment')}
+          icon={<Icon icon={'arrow-to-top'} size={16} />}
-          intent={Intent.DANGER}
+          text={intl.get('publish_adjustment')}
-          onClick={safeCallback(onDelete, original)}
+          onClick={safeCallback(onPublish, original)}
-          icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </Can>
+      </If>
+      <MenuItem
+        text={intl.get('delete_adjustment')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
     </Menu>
   );
 };

src/containers/Items/ItemsActionsBar.js

@@ -14,7 +14,6 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
   If,
-  Can,
   DashboardActionViewsList,
   AdvancedFilterPopover,
   DashboardFilterButton,
@@ -31,8 +30,6 @@ import withSettings from '../Settings/withSettings';
 import { compose } from 'utils';
 import withSettingsActions from '../Settings/withSettingsActions';
 
-import { ItemAction, AbilitySubject } from '../../common/abilityOption';
-
 /**
  * Items actions bar.
  */
@@ -104,14 +101,13 @@ function ItemsActionsBar({
         />
         <NavbarDivider />
 
-        <Can I={ItemAction.Create} a={AbilitySubject.Item}>
+        <Button
-          <Button
+          className={Classes.MINIMAL}
-            className={Classes.MINIMAL}
+          icon={<Icon icon="plus" />}
-            icon={<Icon icon="plus" />}
+          text={<T id={'new_item'} />}
-            text={<T id={'new_item'} />}
+          onClick={onClickNewItem}
-            onClick={onClickNewItem}
+        />
-          />
+
-        </Can>
         <AdvancedFilterPopover
           advancedFilterProps={{
             conditions: itemsFilterRoles,
@@ -153,13 +149,11 @@ function ItemsActionsBar({
           onChange={handleTableRowSizeChange}
         />
         <NavbarDivider />
-        <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+        <Switch
-          <Switch
+          labelElement={<T id={'inactive'} />}
-            labelElement={<T id={'inactive'} />}
+          defaultChecked={itemsInactiveMode}
-            defaultChecked={itemsInactiveMode}
+          onChange={handleInactiveSwitchChange}
-            onChange={handleInactiveSwitchChange}
+        />
-          />
-        </Can>
       </NavbarGroup>
 
       <NavbarGroup align={Alignment.RIGHT}>

src/containers/Items/ItemsEmptyStatus.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { Can, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
-import { ItemAction, AbilitySubject } from '../../common/abilityOption';
 
 export default function ItemsEmptyStatus() {
   const history = useHistory();
@@ -18,21 +17,19 @@ export default function ItemsEmptyStatus() {
       }
       action={
         <>
-          <Can I={ItemAction.Create} a={AbilitySubject.Item}>
+          <Button
-            <Button
+            intent={Intent.PRIMARY}
-              intent={Intent.PRIMARY}
+            large={true}
-              large={true}
+            onClick={() => {
-              onClick={() => {
+              history.push('/items/new');
-                history.push('/items/new');
+            }}
-              }}
+          >
-            >
+            <T id={'new_item'} />
-              <T id={'new_item'} />
+          </Button>
-            </Button>
 
-            <Button intent={Intent.NONE} large={true}>
+          <Button intent={Intent.NONE} large={true}>
-              <T id={'learn_more'} />
+            <T id={'learn_more'} />
-            </Button>
+          </Button>
-          </Can>
         </>
       }
     />

src/containers/Items/ItemsUniversalSearch.js

@@ -1,9 +1,6 @@
 import intl from 'react-intl-universal';
-
-import withDrawerActions from '../Drawer/withDrawerActions';
-
 import { RESOURCES_TYPES } from '../../common/resourcesTypes';
-import { AbilitySubject, ItemAction } from '../../common/abilityOption';
+import withDrawerActions from '../Drawer/withDrawerActions';
 
 /**
  * Item univrsal search item select action.
@@ -49,8 +46,4 @@ export const universalSearchItemBind = () => ({
   optionItemLabel: intl.get('items'),
   selectItemAction: ItemUniversalSearchSelectAction,
   itemSelect: transfromItemsToSearch,
-  permission: {
-    ability: ItemAction.View,
-    subject: AbilitySubject.Item,
-  },
 });

src/containers/Items/components.js

@@ -12,13 +12,8 @@ import {
 import intl from 'react-intl-universal';
 import { isNumber } from 'lodash';
 
-import { FormattedMessage as T, Icon, Money, If, Can } from 'components';
+import { FormattedMessage as T, Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
-import {
-  AbilitySubject,
-  ItemAction,
-  InventoryAdjustmentAction,
-} from '../../common/abilityOption';
 
 /**
  * Publish accessor
@@ -95,58 +90,44 @@ export function ItemsActionMenuList({
         text={<T id={'view_details'} />}
         onClick={safeCallback(onViewDetails, original)}
       />
-      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+      <MenuDivider />
-        <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_item')}
+        onClick={safeCallback(onEditItem, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="duplicate-16" />}
+        text={intl.get('duplicate')}
+        onClick={safeCallback(onDuplicate, original)}
+      />
+      <If condition={original.active}>
         <MenuItem
-          icon={<Icon icon="pen-18" />}
+          text={intl.get('inactivate_item')}
-          text={intl.get('edit_item')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
-          onClick={safeCallback(onEditItem, original)}
+          onClick={safeCallback(onInactivateItem, original)}
         />
-      </Can>
+      </If>
-      <Can I={ItemAction.Create} a={AbilitySubject.Item}>
+      <If condition={!original.active}>
         <MenuItem
-          icon={<Icon icon="duplicate-16" />}
+          text={intl.get('activate_item')}
-          text={intl.get('duplicate')}
+          icon={<Icon icon="play-16" iconSize={16} />}
-          onClick={safeCallback(onDuplicate, original)}
+          onClick={safeCallback(onActivateItem, original)}
         />
-      </Can>
+      </If>
-      <Can I={ItemAction.Edit} a={AbilitySubject.Item}>
+      <If condition={original.type === 'inventory'}>
-        <If condition={original.active}>
-          <MenuItem
-            text={intl.get('inactivate_item')}
-            icon={<Icon icon="pause-16" iconSize={16} />}
-            onClick={safeCallback(onInactivateItem, original)}
-          />
-        </If>
-
-        <If condition={!original.active}>
-          <MenuItem
-            text={intl.get('activate_item')}
-            icon={<Icon icon="play-16" iconSize={16} />}
-            onClick={safeCallback(onActivateItem, original)}
-          />
-        </If>
-      </Can>
-      <Can
-        I={InventoryAdjustmentAction.Edit}
-        a={AbilitySubject.InventoryAdjustment}
-      >
-        <If condition={original.type === 'inventory'}>
-          <MenuItem
-            text={intl.get('make_adjustment')}
-            icon={<Icon icon={'swap-vert'} iconSize={16} />}
-            onClick={safeCallback(onMakeAdjustment, original)}
-          />
-        </If>
-      </Can>
-      <Can I={ItemAction.Delete} a={AbilitySubject.Item}>
         <MenuItem
-          text={intl.get('delete_item')}
+          text={intl.get('make_adjustment')}
-          icon={<Icon icon="trash-16" iconSize={16} />}
+          icon={<Icon icon={'swap-vert'} iconSize={16} />}
-          onClick={safeCallback(onDeleteItem, original)}
+          onClick={safeCallback(onMakeAdjustment, original)}
-          intent={Intent.DANGER}
         />
-      </Can>
+      </If>
+      <MenuItem
+        text={intl.get('delete_item')}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        onClick={safeCallback(onDeleteItem, original)}
+        intent={Intent.DANGER}
+      />
     </Menu>
   );
 }

src/containers/KeyboardShortcuts/ShortcutsTable.js

@@ -1,13 +1,14 @@
 import React, { useMemo } from 'react';
 import { DataTable } from 'components';
+import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
-import { useKeywordShortcuts } from '../../hooks/dashboard';
+import keyboardShortcuts from 'common/keyboardShortcutsOptions';
 
 /**
  *  keyboard shortcuts table.
  */
-export default function ShortcutsTable() {
+function ShortcutsTable() {
-  const keywordShortcuts = useKeywordShortcuts();
+  
 
   const columns = useMemo(
     () => [
@@ -29,5 +30,8 @@ export default function ShortcutsTable() {
     ],
     [],
   );
-  return <DataTable columns={columns} data={keywordShortcuts} />;
+
+  return <DataTable columns={columns} data={keyboardShortcuts} />;
 }
+
+export default ShortcutsTable;

src/containers/Preferences/Currencies/components.js

@@ -67,7 +67,7 @@ export function useCurrenciesTableColumns() {
         width: 120,
       },
       {
-        Header: intl.get('currency_sign'),
+        Header: 'Currency sign',
         width: 120,
         accessor: 'currency_sign'
       },

src/containers/Preferences/EasySMSIntegration/EasySMSIntegrationAlerts.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const EasySMSDisconnectAlert = React.lazy(() =>
-  import('../../Alerts/EasySMSIntegration/EasySMSDisconnectAlert'),
-);
-
-export default [
-  {
-    name: 'easysms-disconnect',
-    component: EasySMSDisconnectAlert,
-  },
-];

src/containers/Preferences/EasySMSIntegration/EasySMSIntegrationProvider.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-import {
-  useSettingEasySMS,
-  useSettingEasySMSDisconnect,
-  useSettingEasySMSIntegrate,
-} from 'hooks/query';
-
-const EasySMSIntegrationContext = React.createContext();
-
-/**
- * Easysms integration data provider.
- */
-function EasySMSIntegrationProvider({ ...props }) {
-  // Provider
-  const provider = {};
-
-  return (
-    <div className={classNames(CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT)}>
-      <EasySMSIntegrationContext.Provider value={provider} {...props} />
-    </div>
-  );
-}
-
-const useEasySMSIntegrationContext = () =>
-  React.useContext(EasySMSIntegrationContext);
-
-export { EasySMSIntegrationProvider, useEasySMSIntegrationContext };

src/containers/Preferences/EasySMSIntegration/index.js

@@ -1,99 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button, Intent } from '@blueprintjs/core';
-import clsx from 'classnames';
-import { FormattedMessage as T } from 'components';
-
-import { EasySMSIntegrationProvider } from './EasySMSIntegrationProvider';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * EasySMS integration.
- */
-function EasySMSIntegrationList({
-  // #withDialogActions
-  openDialog,
-
-  // #withAlertsActions
-  openAlert,
-}) {
-  // Handle EasySMS integrate.
-  const handleEasySMSIntegrate = () => {
-    openDialog('easysms-integrate', {});
-  };
-
-  // Handle EsaySMS disconnect
-  const handleEasySMSDiconnect = ({}) => {
-    openAlert('easysms-disconnect', {});
-  };
-
-  return (
-    <EasySMSIntegrationProvider>
-      <EasySMSIntegration>
-        <EasySMSIntegrationInner>
-          <EasySMSIntegrationTitle>Easysms Integration</EasySMSIntegrationTitle>
-          <EasySMSIntegrationParagraph>
-            <b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed
-            do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
-            ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-          </EasySMSIntegrationParagraph>
-          <Button
-            text={<T id={'esaysms.label.connect'} />}
-            onClick={handleEasySMSIntegrate}
-          />
-        </EasySMSIntegrationInner>
-        <EasySMSIntegrationFooter>
-          <Button
-            onClick={handleEasySMSIntegrate}
-            text={<T id={'easysms.label.edit_integration_settings'} />}
-          />
-
-          <Button
-            text={<T id={'easysms.label.disconnect'} />}
-            onClick={handleEasySMSDiconnect}
-          />
-        </EasySMSIntegrationFooter>
-      </EasySMSIntegration>
-    </EasySMSIntegrationProvider>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withDialogActions,
-)(EasySMSIntegrationList);
-
-const EasySMSIntegration = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 14px;
-`;
-
-const EasySMSIntegrationInner = styled.div`
-  max-width: 45rem; // 100%
-  margin-bottom: 48px; // 48
-`;
-
-const EasySMSIntegrationTitle = styled.h2`
-  font-weight: 50px;
-  margin-bottom: 12px;
-`;
-
-const EasySMSIntegrationParagraph = styled.p`
-  font-size: 14px;
-  line-height: 1.75rem;
-  margin-bottom: 15px;
-`;
-
-const EasySMSIntegrationFooter = styled.div`
-  width: 100%;
-  /* max-width: 30rem; */
-  display: flex;
-
-  .bp3-button {
-    margin-right: 10px;
-  }
-`;

src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js

@@ -5,7 +5,6 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import SMSMessagesDataTable from './SMSMessagesDataTable';
-import EasySMSIntegration from '../EasySMSIntegration';
 
 import '../../../style/pages/Preferences/SMSIntegration.scss';
 
@@ -28,7 +27,6 @@ function SMSIntegrationTabs({
           <Tab
             id="overview"
             title={intl.get('sms_integration.label.overview')}
-            panel={<EasySMSIntegration />}
           />
           <Tab
             id="sms_messages"

src/containers/Preferences/Users/Roles/RolesAlerts.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const RoleDeleteAlert = React.lazy(() =>
-  import('../../../Alerts/Roles/RoleDeleteAlert'),
-);
-
-/**
- * Roles alerts
- */
-export default [{ name: 'role-delete', component: RoleDeleteAlert }];

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import intl from 'react-intl-universal';
-import { Formik } from 'formik';
-import { isEmpty } from 'lodash';
-
-import 'style/pages/Preferences/Roles/Form.scss';
-
-import { Intent } from '@blueprintjs/core';
-
-import { AppToaster, FormattedMessage as T } from 'components';
-
-import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
-
-import { useRolesFormContext } from './RolesFormProvider';
-import {
-  getNewRoleInitialValues,
-  transformToArray,
-  transformToObject,
-} from './utils';
-
-import RolesFormContent from './RolesFormContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import { handleDeleteErrors } from '../utils';
-
-import { compose, transformToForm } from 'utils';
-
-const defaultValues = {
-  role_name: '',
-  role_description: '',
-  permissions: {},
-};
-
-/**
- *  Preferences - Roles Form.
- */
-function RolesForm({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
-  // History context.
-  const history = useHistory();
-
-  // Role form context.
-  const {
-    isNewMode,
-    createRolePermissionMutate,
-    editRolePermissionMutate,
-    permissionsSchema,
-    role,
-    roleId,
-  } = useRolesFormContext();
-
-  // Initial values.
-  const initialValues = {
-    ...defaultValues,
-    ...(!isEmpty(role)
-      ? transformToForm(transformToObject(role), defaultValues)
-      : getNewRoleInitialValues(permissionsSchema)),
-  };
-  React.useEffect(() => {
-    changePreferencesPageTitle(<T id={'roles.label'} />);
-  }, [changePreferencesPageTitle]);
-
-  // Handle the form submit.
-  const handleFormSubmit = (values, { setSubmitting }) => {
-    const permission = transformToArray(values);
-    const form = {
-      ...values,
-      permissions: permission,
-    };
-    setSubmitting(true);
-    const onSuccess = () => {
-      AppToaster.show({
-        message: intl.get(
-          isNewMode
-            ? 'roles.permission_schema.success_message'
-            : 'roles.permission_schema.upload_message',
-        ),
-        intent: Intent.SUCCESS,
-      });
-      setSubmitting(false);
-      history.push('/preferences/users');
-    };
-
-    const onError = ({
-      response: {
-        data: { errors },
-      },
-    }) => {
-      setSubmitting(false);
-
-      handleDeleteErrors(errors);
-    };
-    if (isNewMode) {
-      createRolePermissionMutate(form).then(onSuccess).catch(onError);
-    } else {
-      editRolePermissionMutate([roleId, form]).then(onSuccess).catch(onError);
-    }
-  };
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      validationSchema={isNewMode ? CreateRolesFormSchema : EditRolesFormSchema}
-      onSubmit={handleFormSubmit}
-    >
-      <RolesFormContent />
-    </Formik>
-  );
-}
-
-export default compose(withDashboardActions)(RolesForm);

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js

@@ -1,17 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-
-const Schema = Yup.object().shape({
-  role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
-  role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
-
-  permissions: Yup.object().shape({
-    subject: Yup.string(),
-    ability: Yup.string(),
-    value: Yup.boolean(),
-  }),
-});
-
-export const CreateRolesFormSchema = Schema;
-export const EditRolesFormSchema = Schema;

src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { ErrorMessage, FastField, Form, useFormikContext } from 'formik';
-import {
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  TextArea,
-} from '@blueprintjs/core';
-import { inputIntent } from 'utils';
-import { FormattedMessage as T, FieldRequiredHint } from 'components';
-import { useAutofocus } from 'hooks';
-import { RolesPermissionList } from './components';
-
-/**
- * Preferences - Roles Form content.
- */
-export default function RolesFormContent() {
-  const history = useHistory();
-
-  const { isSubmitting, values } = useFormikContext();
-  const roleNameFieldRef = useAutofocus();
-
-  const handleCloseClick = () => {
-    history.go(-1);
-  };
-  return (
-    <Form>
-      {/* ----------  name ----------  */}
-      <FastField name={'role_name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'name'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={'form-group--name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="role_name" />}
-            inline={true}
-          >
-            <InputGroup
-              medium={true}
-              inputRef={(ref) => (roleNameFieldRef.current = ref)}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      {/* ----------  description ----------  */}
-      <FastField name={'role_description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'role_description'} />}
-            inline={true}
-          >
-            <TextArea growVertically={true} height={280} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
-      <RolesPermissionList />
-
-      <div className={'card__footer'}>
-        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
-          <T id={'save'} />
-        </Button>
-        <Button onClick={handleCloseClick} disabled={isSubmitting}>
-          <T id={'cancel'} />
-        </Button>
-      </div>
-    </Form>
-  );
-}