feat: add easysms integrate api.

.env.example

@@ -1 +0,0 @@
-APP_VERSION=$npm_package_version

.gitignore

@@ -13,7 +13,6 @@
 
 # misc
 .DS_Store
-.env
 .env.local
 .env.development.local
 .env.test.local

CHANGELOG.md

@@ -2,66 +2,6 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
-## [1.5.8] - 13-01-2022
-
-### Added
-- Add payment receive PDF print.
-- Add credit note PDF print.
-
-### Fixed
-- fix: Payment receive initial loading state depends on request loading state instead fetching.
-- fix: Balance sheet report alert positioning.
-- fix: Separate customer and vendor inactivate and activate alerts.
-- fix: Hide convert to invoice button if the invoice is already converted.
-- fix: Customer and vendor balance summary percentage of column option.
-- fix: Remove duplicated details in sales and purchases details drawers.
-
-## [1.5.3] - 03-01-2020
-
-### Fixed
-
-- Localize the global errors.
-- Expand account name column on trial balance sheet.
-
-## [1.5.0] - 20-12-2021
-
-### Added
-
-- Add credit note on sales module.
-- Add vendor credit on purchases module.
-- Optimize landed costs on purchase invoices.
-- Display associated payment transactions on sale invoice drawer.
-- Display associated pamyment transactions on purchase invoice drawer.
-- Display item associate invoice, bill, estimate and receipt transactions.
-- Transactions locking on all transactions or individual modules.
-- Roles and permissions access control module.
-- Optimize readonly details style of invoice, receipt, estimate, payment receive,
-  purchase invoice, expense, manual journal, inventory adjustment and cashflow transaction.
-
-### Changed
-
-- Dashboard meta boot and authenticated user request query.
-- Optimize Arabic localization.
-
-## [1.4.0] - 11-09-2021
-
-### Added
-
-- Add SMS notification on sale invoice, receipt, customers payments modules.
-- Customer quick create in customers list.
-- Item quick create in items list.
-
-### Changes
-
-change: BIG-171 alerts in global scope and lazy loading.
-
-### Fixed
-
-fix: BIG-140 - Reordering sell, cost and inventory account on item details.
-fix: BIG-144 - Typo adjustment dialog success message.
-fix: BIG-148 - Items entries ordered by index.
-fix: BIG-132 AR/AP aging summary report filter by none transactions/zero contacts.
-
 ## [1.2.0-RC] - 03-09-2021
 
 Here we write upgrading notes for brands. It's a team effort to make them as
@@ -92,7 +32,7 @@ straightforward as possible.
 - Inventory adjustment publish action.
 - Customers and vendors activate and inactivate action.
 - Add refresh button on dashboard actions bar to all datatables resources.
-- Add clickable datatable rows to display each row details.
+- Add clickable datatable rows to display each row details. 
 
 ### Changed
 

config/env.js

@@ -85,9 +85,6 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
-
-        // Application version.
-        VERSION: paths.appVersion
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin

config/paths.js

@@ -48,8 +48,6 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
-const appVersion = require(resolveApp('package.json')).version;
-
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
@@ -67,7 +65,6 @@ module.exports = {
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrlOrPath,
-  appVersion
 };
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.5.8",
+  "version": "1.2.0",
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
@@ -36,7 +36,6 @@
     "cross-env": "^7.0.2",
     "css-loader": "3.4.2",
     "deep-map-keys": "^2.0.1",
-    "dependency-graph": "^0.11.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.6.0",
@@ -47,7 +46,6 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "fast-deep-equal": "^3.1.3",
     "file-loader": "4.3.0",
     "flow-bin": "^0.123.0",
     "formik": "^2.2.5",
@@ -72,7 +70,6 @@
     "postcss-preset-env": "6.7.0",
     "postcss-rtl": "^1.7.3",
     "postcss-safe-parser": "4.0.1",
-    "query-string": "^7.1.1",
     "ramda": "^0.27.1",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
@@ -94,7 +91,7 @@
     "react-sortablejs": "^2.0.11",
     "react-split-pane": "^0.1.91",
     "react-table": "^7.6.3",
-    "react-table-sticky": "^1.1.3",
+    "react-table-sticky": "^1.1.2",
     "react-transition-group": "^4.4.1",
     "react-use": "^13.26.1",
     "react-use-context-menu": "^0.1.4",
@@ -109,7 +106,6 @@
     "semver": "6.3.0",
     "style-loader": "0.23.1",
     "styled-components": "^5.3.1",
-    "stylis-rtlcss": "^2.1.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",

public/index.html

@@ -2,11 +2,7 @@
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
-    <link
-      rel="icon"
-      href="%PUBLIC_URL%/favicons/favicon-32.ico"
-      sizes="32x32"
-    />
+    <link rel="icon" href="%PUBLIC_URL%/favicons/favicon-32.ico" sizes="32x32">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -19,25 +15,6 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <% if (process.env.NODE_ENV === 'production') { %>
-    <!-- Hotjar Tracking Code for https://app.bigcapital.ly/ -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            (h.hj.q = h.hj.q || []).push(arguments);
-          };
-        h._hjSettings = { hjid: 2774528, hjsv: 6 };
-        a = o.getElementsByTagName('head')[0];
-        r = o.createElement('script');
-        r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
-    </script>
-    <% } %>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -64,11 +41,7 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
-      type="text/css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
     <!-- <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> -->
     <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
   </body>

src/common/TableStyle.js

@@ -1,6 +0,0 @@
-
-
-export const TableStyle = {
-  Constrant: 'constrant',
-  Regular: 'regular'
-}

src/common/abilityOption.js

@@ -17,8 +17,6 @@ export const AbilitySubject = {
   Preferences: 'Preferences',
   ExchangeRate: 'ExchangeRate',
   SubscriptionBilling: 'SubscriptionBilling',
-  CreditNote: 'CreditNote',
-  VendorCredit: 'VendorCredit',
 };
 
 export const ItemAction = {
@@ -68,21 +66,6 @@ export const PaymentReceiveAction = {
   NotifyBySms: 'NotifyBySms',
 };
 
-export const CreditNoteAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  Refund: 'Refund'
-};
-
-export const VendorCreditAction = {
-  View: 'View',
-  Create: 'Create',
-  Edit: 'Edit',
-  Delete: 'Delete',
-  Refund: 'Refund'
-};
 export const BillAction = {
   View: 'View',
   Create: 'Create',

src/common/classes.js

@@ -39,8 +39,6 @@ const CLASSES = {
   PAGE_FORM_ITEM: 'page-form--item',
   PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
   PAGE_FORM_EXPENSE: 'page-form--expense',
-  PAGE_FORM_CREDIT_NOTE:'page-form--credit-note',
-  PAGE_FORM_VENDOR_CREDIT_NOTE:'page-form--vendor-credit-note',
 
   FORM_GROUP_LIST_SELECT: 'form-group--select-list',
 

src/common/drawers.js

@@ -14,8 +14,4 @@ export const DRAWERS = {
   QUICK_WRITE_VENDOR: 'quick-write-vendor',
   QUICK_CREATE_CUSTOMER: 'quick-create-customer',
   QUICK_CREATE_ITEM: 'quick-create-item',
-  CREDIT_NOTE_DETAIL_DRAWER: 'credit-note-detail-drawer',
-  VENDOR_CREDIT_DETAIL_DRAWER: 'vendor-credit-detail-drawer',
-  REFUND_CREDIT_NOTE_DETAIL_DRAWER:'refund-credit-detail-drawer',
-  REFUND_VENDOR_CREDIT_DETAIL_DRAWER:'refund-vendor-detail-drawer'
 };

src/common/index.js

@@ -1,3 +0,0 @@
-export * from './TableStyle';
-
-export const Align = { Left: 'left', Right: 'right', Center: 'center' };

src/common/itemPaymentTranactionsOption.js

@@ -1,51 +0,0 @@
-import intl from 'react-intl-universal';
-import {
-  AbilitySubject,
-  SaleEstimateAction,
-  SaleReceiptAction,
-  SaleInvoiceAction,
-  BillAction,
-} from '../common/abilityOption';
-import { useAbilitiesFilter } from '../hooks';
-
-export const getItemPaymentTransactions = () => [
-  {
-    name: 'invoices',
-    label: intl.get('invoices'),
-    permission: {
-      subject: AbilitySubject.Invoice,
-      ability: SaleInvoiceAction.View,
-    },
-  },
-  {
-    name: 'estimates',
-    label: intl.get('estimates'),
-    permission: {
-      subject: AbilitySubject.Estimate,
-      ability: SaleEstimateAction.View,
-    },
-  },
-  {
-    name: 'receipts',
-    label: intl.get('receipts'),
-    permission: {
-      subject: AbilitySubject.Receipt,
-      ability: SaleReceiptAction.View,
-    },
-  },
-  {
-    name: 'bills',
-    label: intl.get('bills'),
-    permission: {
-      subject: AbilitySubject.Bill,
-      ability: BillAction.View,
-    },
-  },
-];
-
-export const useGetItemPaymentTransactionsMenu = () => {
-  const itemTransactionMenu = getItemPaymentTransactions();
-  const abilitiesFilter = useAbilitiesFilter();
-
-  return abilitiesFilter(itemTransactionMenu);
-};

src/common/permissionsSchema.js

@@ -1,659 +0,0 @@
-import { chain } from 'lodash';
-import intl from 'react-intl-universal';
-import {
-  AbilitySubject,
-  AccountAction,
-  BillAction,
-  CreditNoteAction,
-  CustomerAction,
-  ExpenseAction,
-  ItemAction,
-  ManualJournalAction,
-  PaymentMadeAction,
-  PaymentReceiveAction,
-  ReportsAction,
-  SaleEstimateAction,
-  SaleInvoiceAction,
-  SaleReceiptAction,
-  VendorAction,
-  VendorCreditAction,
-} from './abilityOption';
-
-export const ModulePermissionsStyle = {
-  Columns: 'columns',
-  Vertical: 'vertical',
-};
-
-const PermissionColumn = {
-  View: 'view',
-  Create: 'create',
-  Delete: 'delete',
-  Edit: 'edit',
-};
-
-export const getPermissionsSchema = () => [
-  {
-    label: intl.get('permissions.items_inventory'),
-    type: ModulePermissionsStyle.Columns,
-    serviceFullAccess: true,
-    columns: [
-      { label: intl.get('permissions.column.view'), key: 'view' },
-      { label: intl.get('permissions.column.create'), key: 'create' },
-      { label: intl.get('permissions.column.edit'), key: 'edit' },
-      { label: intl.get('permissions.column.delete'), key: 'delete' },
-    ],
-    services: [
-      {
-        label: intl.get('permissions.items'),
-        subject: AbilitySubject.Item,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: ItemAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: ItemAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: ItemAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: ItemAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: ItemAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: ItemAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: ItemAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.inventory_adjustment'),
-        subject: AbilitySubject.InventoryAdjustment,
-        permissions: [
-          {
-            label: 'View',
-            key: ItemAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: 'Create',
-            key: ItemAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: ItemAction.View }],
-          },
-          {
-            label: 'Edit',
-            key: ItemAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: ItemAction.Create }],
-          },
-          {
-            label: 'Delete',
-            key: ItemAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: ItemAction.Edit }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: intl.get('permissions.contacts'),
-    type: ModulePermissionsStyle.Columns,
-    serviceFullAccess: true,
-    moduleFullAccess: true,
-    columns: [
-      { label: intl.get('permissions.column.view'), key: 'view' },
-      { label: intl.get('permissions.column.create'), key: 'create' },
-      { label: intl.get('permissions.column.edit'), key: 'edit' },
-      { label: intl.get('permissions.column.delete'), key: 'delete' },
-    ],
-    services: [
-      {
-        label: intl.get('permissions.customers'),
-        subject: AbilitySubject.Customer,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: CustomerAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: CustomerAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: CustomerAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: CustomerAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: CustomerAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: CustomerAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: CustomerAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.vendors'),
-        subject: AbilitySubject.Vendor,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: VendorAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: VendorAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: VendorAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: VendorAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: VendorAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: VendorAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: VendorAction.Edit }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: intl.get('permissions.sales'),
-    type: ModulePermissionsStyle.Columns,
-    serviceFullAccess: true,
-    moduleFullAccess: true,
-    columns: [
-      { label: intl.get('permissions.column.view'), key: 'view' },
-      { label: intl.get('permissions.column.create'), key: 'create' },
-      { label: intl.get('permissions.column.edit'), key: 'edit' },
-      { label: intl.get('permissions.column.delete'), key: 'delete' },
-    ],
-    services: [
-      {
-        label: intl.get('permissions.sale_invoice'),
-        subject: AbilitySubject.Invoice,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: SaleInvoiceAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: SaleInvoiceAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: SaleInvoiceAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: SaleInvoiceAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: SaleInvoiceAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: SaleInvoiceAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: SaleInvoiceAction.Edit }],
-          },
-          {
-            label: intl.get('permissions.column.written_off_invoice'),
-            key: SaleInvoiceAction.Writeoff,
-            depend: [{ key: SaleInvoiceAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.sale_estimate'),
-        subject: AbilitySubject.Estimate,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: SaleEstimateAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: SaleEstimateAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: SaleEstimateAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: SaleEstimateAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: SaleEstimateAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: SaleEstimateAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: SaleEstimateAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.sale_receipt'),
-        subject: AbilitySubject.Receipt,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: SaleReceiptAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: SaleReceiptAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: SaleReceiptAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: SaleReceiptAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: SaleReceiptAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: SaleReceiptAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: SaleReceiptAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.credit_note'),
-        subject: AbilitySubject.CreditNote,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: CreditNoteAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: CreditNoteAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: CreditNoteAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: CreditNoteAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: CreditNoteAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: CreditNoteAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: CreditNoteAction.Edit }],
-          },
-          {
-            label: intl.get('permissions.column.refund_credit_note'),
-            key: CreditNoteAction.Refund,
-            depend: [{ key: CreditNoteAction.View }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.payment_receive'),
-        subject: AbilitySubject.PaymentReceive,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: PaymentReceiveAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: PaymentReceiveAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: PaymentReceiveAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: PaymentReceiveAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: PaymentReceiveAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: PaymentReceiveAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: PaymentReceiveAction.Edit }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: intl.get('permissions.purchases'),
-    type: ModulePermissionsStyle.Columns,
-    serviceFullAccess: true,
-    moduleFullAccess: true,
-    columns: [
-      { label: intl.get('permissions.column.view'), key: 'view' },
-      { label: intl.get('permissions.column.create'), key: 'create' },
-      { label: intl.get('permissions.column.edit'), key: 'edit' },
-      { label: intl.get('permissions.column.delete'), key: 'delete' },
-    ],
-    services: [
-      {
-        label: intl.get('permissions.bills'),
-        subject: AbilitySubject.Bill,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: BillAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: BillAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: BillAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: BillAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: BillAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: BillAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: BillAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.vendor_credits'),
-        subject: AbilitySubject.VendorCredit,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: VendorCreditAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: VendorCreditAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: VendorCreditAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: VendorCreditAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: VendorCreditAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: VendorCreditAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: VendorCreditAction.Edit }],
-          },
-          {
-            label: intl.get('permissions.column.refund_vendor_credit'),
-            key: VendorCreditAction.Refund,
-            depend: [{ key: VendorCreditAction.View }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.payment_made'),
-        subject: AbilitySubject.PaymentMade,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: PaymentMadeAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: PaymentMadeAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: PaymentMadeAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: PaymentMadeAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: PaymentMadeAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: PaymentMadeAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: PaymentMadeAction.Edit }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: intl.get('permissions.financial_accounting'),
-    type: ModulePermissionsStyle.Columns,
-    serviceFullAccess: true,
-    moduleFullAccess: true,
-    columns: [
-      { label: intl.get('permissions.column.view'), key: 'view' },
-      { label: intl.get('permissions.column.create'), key: 'create' },
-      { label: intl.get('permissions.column.edit'), key: 'edit' },
-      { label: intl.get('permissions.column.delete'), key: 'delete' },
-    ],
-    services: [
-      {
-        label: intl.get('permissions.manual_journals'),
-        subject: AbilitySubject.ManualJournal,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: ManualJournalAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: ManualJournalAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: ManualJournalAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: ManualJournalAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: ManualJournalAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: ManualJournalAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: ManualJournalAction.Edit }],
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.chart_of_accounts'),
-        subject: AbilitySubject.Account,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: AccountAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: AccountAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: AccountAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: AccountAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: AccountAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: AccountAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: AccountAction.Edit }],
-          },
-          {
-            label: intl.get('permissions.column.transactions_locking'),
-            key: AccountAction.TransactionsLocking,
-          },
-        ],
-      },
-      {
-        label: intl.get('permissions.expenses'),
-        subject: AbilitySubject.Expense,
-        permissions: [
-          {
-            label: intl.get('permissions.column.view'),
-            key: ExpenseAction.View,
-            relatedColumn: PermissionColumn.View,
-          },
-          {
-            label: intl.get('permissions.column.create'),
-            key: ExpenseAction.Create,
-            relatedColumn: PermissionColumn.Create,
-            depend: [{ key: ExpenseAction.View }],
-          },
-          {
-            label: intl.get('permissions.column.edit'),
-            key: ExpenseAction.Edit,
-            relatedColumn: PermissionColumn.Edit,
-            depend: [{ key: ExpenseAction.Create }],
-          },
-          {
-            label: intl.get('permissions.column.delete'),
-            key: ExpenseAction.Delete,
-            relatedColumn: PermissionColumn.Delete,
-            depend: [{ key: ExpenseAction.Edit }],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: intl.get('permissions.reports'),
-    type: ModulePermissionsStyle.Vertical,
-    serviceFullAccess: true,
-    moduleFullAccess: true,
-    services: [
-      {
-        label: intl.get('permissions.financial_reports'),
-        subject: AbilitySubject.Report,
-        permissions: [
-          {
-            label: intl.get('permissions.balance_sheet'),
-            key: ReportsAction.READ_BALANCE_SHEET,
-          },
-          {
-            label: intl.get('permissions.trial_balance_sheet'),
-            key: ReportsAction.READ_TRIAL_BALANCE_SHEET,
-          },
-          {
-            label: intl.get('permissions.profit_loss_sheet'),
-            key: ReportsAction.READ_PROFIT_LOSS,
-          },
-          {
-            label: intl.get('permissions.cash_flow_sheet'),
-            key: ReportsAction.READ_CASHFLOW,
-          },
-          {
-            label: intl.get('permissions.journal_sheet'),
-            key: ReportsAction.READ_JOURNAL,
-          },
-          {
-            label: intl.get('permissions.general_ledger'),
-            key: ReportsAction.READ_GENERAL_LEDGET,
-          },
-          {
-            label: intl.get('permissions.a_r_aging_summary_report'),
-            key: ReportsAction.READ_AR_AGING_SUMMARY,
-          },
-          {
-            label: intl.get('permissions.a_r_aging_summary_report'),
-            key: ReportsAction.READ_AP_AGING_SUMMARY,
-          },
-          {
-            label: intl.get('permissions.purchases_by_items'),
-            key: ReportsAction.READ_PURCHASES_BY_ITEMS,
-          },
-          {
-            label: intl.get('permissions.sales_by_items'),
-            key: ReportsAction.READ_SALES_BY_ITEMS,
-          },
-          {
-            label: intl.get('permissions.customers_transactions'),
-            key: ReportsAction.READ_CUSTOMERS_TRANSACTIONS,
-          },
-          {
-            label: intl.get('permissions.vendors_transactions'),
-            key: ReportsAction.READ_VENDORS_TRANSACTIONS,
-          },
-          {
-            label: intl.get('permissions.customers_summary_balance'),
-            key: ReportsAction.READ_CUSTOMERS_SUMMARY_BALANCE,
-          },
-          {
-            label: intl.get('permissions.vendors_summary_balance'),
-            key: ReportsAction.READ_VENDORS_SUMMARY_BALANCE,
-          },
-          {
-            label: intl.get('permissions.inventory_valuation_summary'),
-            key: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
-          },
-          {
-            label: intl.get('permissions.inventory_items_details'),
-            key: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
-          },
-          {
-            label: intl.get('permissions.cashflow_account_transactions'),
-            key: ReportsAction.READ_CASHFLOW_ACCOUNT_TRANSACTION,
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export function getPermissionsSchemaService(subject) {
-  const permissions = getPermissionsSchema();
-
-  return chain(permissions)
-    .map((perm) => perm.services)
-    .flatten()
-    .find((service) => service.subject === subject)
-    .value();
-}
-
-export function getPermissionsSchemaServices() {
-  const permissions = getPermissionsSchema();
-
-  return chain(permissions)
-    .map((module) => module.services)
-    .flatten()
-    .value();
-}

src/common/resourcesTypes.js

@@ -11,6 +11,4 @@ export const RESOURCES_TYPES = {
   EXPENSE: 'expense',
   MANUAL_JOURNAL: 'manual_journal',
   ACCOUNT: 'account',
-  CREDIT_NOTE: 'credit_note',
-  VENDOR_CREDIT:'vendor_credit'
 };

src/common/tables.js

@@ -14,8 +14,6 @@ export const TABLES = {
   EXPENSES: 'expenses',
   CASHFLOW_ACCOUNTS: 'cashflow_accounts',
   CASHFLOW_Transactions: 'cashflow_transactions',
-  CREDIT_NOTES: 'credit_notes',
-  VENDOR_CREDITS: 'vendor_credits',
 };
 
 export const TABLE_SIZE = {

src/components/Alert/index.js

@@ -1,60 +1,17 @@
 import React from 'react';
 import clsx from 'classnames';
-import styled from 'styled-components';
 
-export function Alert({ title, description, children, intent, className }) {
+import Style from './style.module.scss';
+
+export function Alert({ title, description, intent }) {
   return (
-    <AlertRoot className={clsx(className)} intent={intent}>
-      {title && <AlertTitle>{title}</AlertTitle>}
-      {description && <AlertDesc>{description}</AlertDesc>}
-      {children && <AlertDesc>{children}</AlertDesc>}
-    </AlertRoot>
+    <div
+      className={clsx(Style.root, {
+        [`${Style['root_' + intent]}`]: intent,
+      })}
+    >
+      {title && <h3 className={clsx(Style.title)}>{title}</h3>}
+      {description && <p class={clsx(Style.description)}>{description}</p>}
+    </div>
   );
 }
-
-const AlertRoot = styled.div`
-  border: 1px solid rgb(223, 227, 230);
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-
-  ${(props) =>
-    props.intent === 'danger' &&
-    `
-    border-color: rgb(249, 198, 198);
-    background: rgb(255, 248, 248);
-
-    ${AlertDesc} {
-      color: #d95759;
-    }
-    ${AlertTitle} {
-      color: rgb(205, 43, 49);
-    }
-  `}
-
-  ${(props) =>
-    props.intent === 'primary' &&
-    `
-    background: #fff;
-    border-color: #98a8ee;
-
-    ${AlertTitle} {
-      color: #1a3bd4;
-    }
-    ${AlertDesc} {
-      color: #455883;
-    }
-  `}
-`;
-
-export const AlertTitle = styled.h3`
-  color: rgb(17, 24, 28);
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 600;
-`;
-
-export const AlertDesc = styled.p`
-  color: rgb(104, 112, 118);
-  margin: 0;
-`;

src/components/Alert/style.module.scss

@@ -0,0 +1,32 @@
+.root {
+  border: 1px solid rgb(223, 227, 230);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+
+  &_danger {
+    border-color: rgb(249, 198, 198);
+    background: rgb(255, 248, 248);
+
+    .description {
+      color: #d95759;
+    }
+
+    .title {
+      color: rgb(205, 43, 49);
+    }
+  }
+}
+
+
+.title {
+  color: rgb(17, 24, 28);
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.description {
+  color: rgb(104, 112, 118);
+  margin: 0;
+}

src/components/BankAccounts/index.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 import clsx from 'classnames';
 import Icon from '../Icon';
+import { whenRtl, whenLtr } from 'utils/styled-components';
 
 const ACCOUNT_TYPE = {
   CASH: 'cash',
@@ -184,7 +185,9 @@ const MetaLineValue = styled.div`
   text-align: center;
   color: rgb(23, 43, 77);
   font-size: 11px;
-  margin-left: auto;
+
+  ${whenLtr(`margin-left: auto;`)}
+  ${whenRtl(`margin-right: auto;`)}
 `;
 
 const BankAccountMeta = styled.div`
@@ -201,5 +204,7 @@ const AccountIconWrap = styled.div`
   position: absolute;
   top: 14px;
   color: #abb3bb;
-  right: 12px;
+
+  ${whenLtr(`right: 12px;`)}
+  ${whenRtl(`left: 12px;`)}
 `;

src/components/Button/ButtonLink.js

@@ -5,7 +5,6 @@ export const ButtonLink = styled.button`
   border: 0;
   background: transparent;
   cursor: pointer;
-  text-align: inherit;
 
   &:hover,
   &:active {

src/components/Button/index.js

@@ -1 +1,3 @@
+
+
 export * from './ButtonLink';

src/components/Card.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import classNames from 'classnames';
+ 
+export default function Card({ className, children }) {
+  return <div className={classNames('card', className)}>{children}</div>;
+}

src/components/Card/index.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export function Card({ className, children }) {
-  return <CardRoot className={className}>{children}</CardRoot>;
-}
-
-const CardRoot = styled.div`
-  padding: 15px;
-  margin: 15px;
-  background: #fff;
-  border: 1px solid #d2dce2;
-`;
-
-export const CardFooterActions = styled.div`
-  padding-top: 16px;
-  border-top: 1px solid #e0e7ea;
-  margin-top: 30px;
-
-  .bp3-button {
-    min-width: 70px;
-
-    + .bp3-button {
-      margin-left: 10px;
-    }
-  }
-`;

src/components/CommercialDoc/index.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-import { Card } from '../Card';
-import DataTable from '../DataTable';
-
-export const CommercialDocBox = styled(Card)`
-  padding: 22px 20px;
-`;
-
-export const CommercialDocHeader = styled.div`
-  margin-bottom: 25px;
-`;
-
-export const CommercialDocTopHeader = styled.div`
-  margin-bottom: 25px;
-`;
-
-export const CommercialDocEntriesTable = styled(DataTable)`
-  .tbody .tr:last-child .td {
-    border-bottom: 1px solid #d2dce2;
-  }
-`;
-
-export const CommercialDocFooter = styled.div`
-  margin-top: 28px;
-`;

src/components/Customers/CustomerDrawerLink.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-
-import { ButtonLink } from '../Button';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-function CustomerDrawerLinkComponent({
-  // #ownProps
-  children,
-  customerId,
-
-  // #withDrawerActions
-  openDrawer,
-}) {
-  // Handle view customer drawer.
-  const handleCustomerDrawer = () => {
-    openDrawer('customer-details-drawer', { customerId });
-  };
-
-  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
-}
-
-export const CustomerDrawerLink = R.compose(withDrawerActions)(
-  CustomerDrawerLinkComponent,
-);

src/components/Customers/index.js

@@ -1 +0,0 @@
-export * from './CustomerDrawerLink';

src/components/Dashboard/DashboardActionsBar.js

@@ -1,19 +1,16 @@
 import React from 'react';
-import clsx from 'classnames';
+import classnames from 'classnames';
 import { Navbar } from '@blueprintjs/core';
 
-export default function DashboardActionsBar({ className, children, name }) {
+export default function DashboardActionsBar({ children, name }) {
   return (
     <div
-      className={clsx(
-        {
-          'dashboard__actions-bar': true,
-          [`dashboard__actions-bar--${name}`]: !!name,
-        },
-        className,
-      )}
+      className={classnames({
+        'dashboard__actions-bar': true,
+        [`dashboard__actions-bar--${name}`]: !!name
+      })}
     >
-      <Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
+      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
     </div>
   );
 }

src/components/Dashboard/DashboardThemeProvider.js

@@ -1,16 +1,9 @@
 import React from 'react';
-import { ThemeProvider, StyleSheetManager } from 'styled-components';
-import rtlcss from 'stylis-rtlcss';
+import { ThemeProvider } from 'styled-components';
 import { useAppIntlContext } from '../AppIntlProvider';
 
 export function DashboardThemeProvider({ children }) {
   const { direction } = useAppIntlContext();
 
-  return (
-    <StyleSheetManager
-      {...(direction === 'rtl' ? { stylisPlugins: [rtlcss] } : {})}
-    >
-      <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>
-    </StyleSheetManager>
-  );
+  return <ThemeProvider theme={{ dir: direction }}>{children}</ThemeProvider>;
 }

src/components/Datatable/TableHeader.js

@@ -15,7 +15,7 @@ function TableHeaderCell({ column, index }) {
     <div
       {...column.getHeaderProps({
         className: classNames(column.className || '', 'th', {
-          [`align-${column.align}`]: column.align,
+          'align-right': column.align === 'right',
         }),
       })}
     >
@@ -89,14 +89,12 @@ export default function TableHeader() {
   return (
     <ScrollSyncPane>
       <div className="thead">
-        <div className={'thead-inner'}>
-          {headerGroups.map((headerGroup, index) => (
-            <TableHeaderGroup key={index} headerGroup={headerGroup} />
-          ))}
-          <If condition={progressBarLoading}>
-            <MaterialProgressBar />
-          </If>
-        </div>
+        {headerGroups.map((headerGroup, index) => (
+          <TableHeaderGroup key={index} headerGroup={headerGroup} />
+        ))}
+        <If condition={progressBarLoading}>
+          <MaterialProgressBar />
+        </If>
       </div>
     </ScrollSyncPane>
   );

src/components/Datatable/TableHeaderSkeleton.js

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -9,13 +8,7 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: clsx(
-          'th',
-          {
-            [`align-${column.align}`]: column.align,
-          },
-          column.className,
-        ),
+        className: 'th',
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/Datatable/TableSkeletonRows.js

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import clsx from 'classnames';
 import TableContext from './TableContext';
 import { Skeleton } from 'components';
 
@@ -12,13 +11,7 @@ function TableHeaderCell({ column }) {
   return (
     <div
       {...column.getHeaderProps({
-        className: clsx(
-          'td',
-          {
-            [`align-${column.align}`]: column.align,
-          },
-          column.className,
-        ),
+        className: 'td',
       })}
     >
       <Skeleton minWidth={skeletonWidthMin} maxWidth={skeletonWidthMax} />

src/components/Datatable/TableWrapper.js

@@ -16,7 +16,6 @@ export default function TableWrapper({ children }) {
       expandable,
       virtualizedRows,
       className,
-      styleName,
       size,
     },
   } = useContext(TableContext);
@@ -29,7 +28,6 @@ export default function TableWrapper({ children }) {
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
-        [`table--${styleName}`]: styleName,
       })}
     >
       <ScrollSync>

src/components/Details/index.js

@@ -17,7 +17,6 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
 export function DetailsMenu({
   children,
   direction = DIRECTION.VERTICAL,
-  textAlign,
   minLabelSize,
   className,
 }) {
@@ -28,7 +27,6 @@ export function DetailsMenu({
         {
           'details-menu--vertical': direction === DIRECTION.VERTICAL,
           'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
-          [`align-${textAlign}`]: textAlign,
         },
         className,
       )}

src/components/Dialog/DialogFooter.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Classes } from '@blueprintjs/core';
-
-export function DialogFooter({ children }) {
-  return (
-    <DialogFooterRoot className={Classes.DIALOG_FOOTER}>
-      {children}
-    </DialogFooterRoot>
-  );
-}
-
-const DialogFooterRoot = styled.div`
-  display: flex;
-`;

src/components/Dialog/DialogFooterActions.js

@@ -2,10 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { Classes } from '@blueprintjs/core';
 
-/**
- * Dialog footer actions.
- * @returns {React.JSX}
- */
 export function DialogFooterActions({ alignment = 'right', children }) {
   return (
     <DialogFooterActionsRoot
@@ -17,25 +13,14 @@ export function DialogFooterActions({ alignment = 'right', children }) {
   );
 }
 
-/**
- * Dialog footer.
- * @returns {React.JSX}
- */
-export function DialogFooter({ ...props }) {
-  return <DialogFooterRoot {...props} />;
-}
-
-const DialogFooterRoot = styled.div`
-  flex: 0 0 auto;
-  margin: 0 20px;
-`;
-
 const DialogFooterActionsRoot = styled.div`
-  ${(props) =>
-    props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
+  margin-left: -10px;
+  margin-right: -10px;
+  justify-content: ${(props) =>
+    props.alignment === 'right' ? 'flex-end' : 'flex-start'};
 
   .bp3-button {
-    margin-left: 5px;
-    margin-left: 5px;
+    margin-left: 10px;
+    margin-left: 10px;
   }
 `;

src/components/Dialog/index.js

@@ -3,5 +3,4 @@
 export * from './Dialog';
 export * from './DialogFooterActions';
 export * from './DialogSuspense';
-export * from './DialogContent';
-export * from './DialogFooter';
+export * from './DialogContent';

src/components/DialogsContainer.js

@@ -25,15 +25,8 @@ import NotifyReceiptViaSMSDialog from '../containers/Dialogs/NotifyReceiptViaSMS
 import NotifyEstimateViaSMSDialog from '../containers/Dialogs/NotifyEstimateViaSMSDialog';
 import NotifyPaymentReceiveViaSMSDialog from '../containers/Dialogs/NotifyPaymentReceiveViaSMSDialog';
 import SMSMessageDialog from '../containers/Dialogs/SMSMessageDialog';
-import RefundCreditNoteDialog from '../containers/Dialogs/RefundCreditNoteDialog';
-import RefundVendorCreditDialog from '../containers/Dialogs/RefundVendorCreditDialog';
-import ReconcileCreditNoteDialog from '../containers/Dialogs/ReconcileCreditNoteDialog';
-import ReconcileVendorCreditDialog from '../containers/Dialogs/ReconcileVendorCreditDialog';
-import LockingTransactionsDialog from '../containers/Dialogs/LockingTransactionsDialog';
-import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransactionsDialog';
-import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog';
-import CreditNotePdfPreviewDialog from '../containers/Dialogs/CreditNotePdfPreviewDialog';
-import PaymentReceivePdfPreviewDialog from '../containers/Dialogs/PaymentReceivePdfPreviewDialog';
+import TransactionsLockingDialog from '../containers/Dialogs/TransactionsLockingDialog';
+import EasySMSIntegrationDialog from '../containers/Dialogs/EasySMSIntegrationDialog';
 
 /**
  * Dialogs container.
@@ -67,17 +60,8 @@ export default function DialogsContainer() {
 
       <BadDebtDialog dialogName={'write-off-bad-debt'} />
       <SMSMessageDialog dialogName={'sms-message-form'} />
-      <RefundCreditNoteDialog dialogName={'refund-credit-note'} />
-      <RefundVendorCreditDialog dialogName={'refund-vendor-credit'} />
-      <ReconcileCreditNoteDialog dialogName={'reconcile-credit-note'} />
-      <ReconcileVendorCreditDialog dialogName={'reconcile-vendor-credit'} />
-      <LockingTransactionsDialog dialogName={'locking-transactions'} />
-      <UnlockingTransactionsDialog dialogName={'unlocking-transactions'} />
-      <UnlockingPartialTransactionsDialog
-        dialogName={'unlocking-partial-transactions'}
-      />
-      <CreditNotePdfPreviewDialog dialogName={'credit-note-pdf-preview'} />
-      <PaymentReceivePdfPreviewDialog dialogName={'payment-pdf-preview'} />
+      <TransactionsLockingDialog dialogName={'transactions-locking'} />
+      <EasySMSIntegrationDialog dialogName={'easysms-integrate'} />
     </div>
   );
 }

src/components/Drawer/DrawerActionsBar.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-
-export function DrawerActionsBar({ ...props }) {
-  return <DrawerActionsBarRoot {...props} />;
-}
-
-const DrawerActionsBarRoot = styled(DashboardActionsBar)`
-  border-bottom: 1px solid #d9d9da;
-`;

src/components/Drawer/DrawerMainTabs.js

@@ -1,54 +1,15 @@
 import React from 'react';
 import { Tabs } from '@blueprintjs/core';
-import styled from 'styled-components';
 
 /**
  * Drawer main tabs.
  */
 export function DrawerMainTabs({ children, ...restProps }) {
   return (
-    <DrawerMainTabsRoot>
+    <div class="drawer__main-tabs">
       <Tabs animate={true} large={true} {...restProps}>
         {children}
       </Tabs>
-    </DrawerMainTabsRoot>
+    </div>
   );
 }
-
-const DrawerMainTabsRoot = styled.div`
-  .bp3-tabs {
-    .bp3-tab-list {
-      position: relative;
-      background-color: #fff;
-      padding: 0 15px;
-      border-bottom: 2px solid #e1e2e8;
-
-      > *:not(:last-child) {
-        margin-right: 25px;
-      }
-
-      &.bp3-large > .bp3-tab {
-        font-size: 15px;
-        color: #7f8596;
-        margin: 0 1rem;
-
-        &[aria-selected='true'],
-        &:not([aria-disabled='true']):hover {
-          color: #0052cc;
-        }
-      }
-      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
-        height: 2px;
-        bottom: -2px;
-      }
-    }
-
-    .bp3-tab-panel {
-      margin-top: 0;
-
-      .card {
-        margin: 15px;
-      }
-    }
-  }
-`;

src/components/Drawer/index.js

@@ -13,5 +13,3 @@ export function DrawerLoading({ loading, mount = false, children }) {
 export function DrawerBody({ children }) {
   return <div className={Classes.DRAWER_BODY}>{children}</div>;
 }
-
-export * from './DrawerActionsBar';

src/components/DrawersContainer.js

@@ -17,10 +17,6 @@ import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTrans
 import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
 import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
 import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
-import CreditNoteDetailDrawer from '../containers/Drawers/CreditNoteDetailDrawer';
-import VendorCreditDetailDrawer from '../containers/Drawers/VendorCreditDetailDrawer';
-import RefundCreditNoteDetailDrawer from '../containers/Drawers/RefundCreditNoteDetailDrawer';
-import RefundVendorCreditDetailDrawer from '../containers/Drawers/RefundVendorCreditDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -51,14 +47,6 @@ export default function DrawersContainer() {
       <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
       <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
       <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
-      <CreditNoteDetailDrawer name={DRAWERS.CREDIT_NOTE_DETAIL_DRAWER} />
-      <VendorCreditDetailDrawer name={DRAWERS.VENDOR_CREDIT_DETAIL_DRAWER} />
-      <RefundCreditNoteDetailDrawer
-        name={DRAWERS.REFUND_CREDIT_NOTE_DETAIL_DRAWER}
-      />
-      <RefundVendorCreditDetailDrawer
-        name={DRAWERS.REFUND_VENDOR_CREDIT_DETAIL_DRAWER}
-      />
     </div>
   );
 }

src/components/FinancialReport/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const FinancialStatementRoot = styled.div``;
-const FinancialStatementBodyRoot = styled.div``;
-
-/**
- * 
- * @returns {React.JSX}
- */
-export function FinancialReport({ children, className }) {
-  return <FinancialStatementRoot children={children} className={className} />;
-}
-
-/**
- *
- * @param {React.JSX}
- */
-export function FinancialReportBody({ children, className }) {
-  return (
-    <FinancialStatementBodyRoot children={children} className={className} />
-  );
-}

src/components/FinancialSheet.js

@@ -0,0 +1,103 @@
+import React, { useMemo, useCallback } from 'react';
+import moment from 'moment';
+import classnames from 'classnames';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import 'style/pages/FinancialStatements/FinancialSheet.scss';
+
+import { If, LoadingIndicator, MODIFIER } from 'components';
+
+export default function FinancialSheet({
+  companyName,
+  sheetType,
+  fromDate,
+  toDate,
+  asDate,
+  children,
+  accountingBasis,
+  name,
+  loading,
+  className,
+  basis,
+  minimal = false,
+  fullWidth = false,
+  currentDate = true,
+}) {
+  
+  const format = 'DD MMMM YYYY';
+  const formattedFromDate = useMemo(() => moment(fromDate).format(format), [
+    fromDate,
+  ]);
+  const formattedToDate = useMemo(() => moment(toDate).format(format), [
+    toDate,
+  ]);
+  const formattedAsDate = useMemo(() => moment(asDate).format(format), [
+    asDate,
+  ]);
+
+  const nameModifer = name ? `financial-sheet--${name}` : '';
+  const methodsLabels = useMemo(
+    () => ({
+      cash: intl.get('cash'),
+      accrual: intl.get('accrual'),
+    }),
+    [],
+  );
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(() => getBasisLabel(basis), [
+    getBasisLabel,
+    basis,
+  ]);
+
+  return (
+    <div
+      className={classnames('financial-sheet', nameModifer, className, {
+        [MODIFIER.FINANCIAL_SHEET_MINIMAL]: minimal,
+        'is-full-width': fullWidth,
+      })}
+    >
+      {loading ? (
+        <LoadingIndicator loading={loading} spinnerSize={34} />
+      ) : (
+        <div className={classnames('financial-sheet__inner')}>
+          <If condition={!!companyName}>
+            <h1 class="financial-sheet__title">{companyName}</h1>
+          </If>
+
+          <If condition={!!sheetType}>
+            <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
+          </If>
+
+          <div class="financial-sheet__date">
+            <If condition={asDate}>
+              <T id={'as'} /> {formattedAsDate}
+            </If>
+
+            <If condition={fromDate && toDate}>
+              <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+              {formattedToDate}
+            </If>
+          </div>
+
+          <div class="financial-sheet__table">{children}</div>
+          <div class="financial-sheet__accounting-basis">{accountingBasis}</div>
+
+          <div class="financial-sheet__footer">
+            <If condition={basisLabel}>
+              <span class="financial-sheet__basis">
+                <T id={'accounting_basis'} /> {basisLabel}
+              </span>
+            </If>
+
+            <If condition={currentDate}>
+              <span class="financial-sheet__current-date">
+                {moment().format('YYYY MMM DD  HH:MM')}
+              </span>
+            </If>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/FinancialSheet/FinancialSheet.js

@@ -1,101 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import moment from 'moment';
-import intl from 'react-intl-universal';
-
-import If from '../Utils/If';
-import { FormattedMessage as T } from '../FormattedMessage';
-import {
-  FinancialSheetRoot,
-  FinancialSheetFooterCurrentTime,
-  FinancialSheetFooterBasis,
-  FinancialSheetFooter,
-  FinancialSheetAccountingBasis,
-  FinancialSheetTable,
-  FinancialSheetDate,
-  FinancialSheetType,
-  FinancialSheetTitle,
-} from './StyledFinancialSheet';
-
-/**
- * Financial sheet.
- * @returns {React.JSX}
- */
-export function FinancialSheet({
-  companyName,
-  sheetType,
-  fromDate,
-  toDate,
-  asDate,
-  children,
-  accountingBasis,
-  basis,
-  minimal = false,
-  fullWidth = false,
-  currentDate = true,
-  className,
-}) {
-  const format = 'DD MMMM YYYY';
-  const formattedFromDate = useMemo(
-    () => moment(fromDate).format(format),
-    [fromDate],
-  );
-  const formattedToDate = useMemo(
-    () => moment(toDate).format(format),
-    [toDate],
-  );
-  const formattedAsDate = useMemo(
-    () => moment(asDate).format(format),
-    [asDate],
-  );
-  const methodsLabels = useMemo(
-    () => ({
-      cash: intl.get('cash'),
-      accrual: intl.get('accrual'),
-    }),
-    [],
-  );
-  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
-  const basisLabel = useMemo(
-    () => getBasisLabel(basis),
-    [getBasisLabel, basis],
-  );
-
-  return (
-    <FinancialSheetRoot
-      minimal={minimal}
-      fullWidth={fullWidth}
-      className={className}
-    >
-      {companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
-      {sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
-
-      <FinancialSheetDate>
-        <If condition={asDate}>
-          <T id={'as'} /> {formattedAsDate}
-        </If>
-        <If condition={fromDate && toDate}>
-          <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
-          {formattedToDate}
-        </If>
-      </FinancialSheetDate>
-
-      <FinancialSheetTable>{children}</FinancialSheetTable>
-      <FinancialSheetAccountingBasis>
-        {accountingBasis}
-      </FinancialSheetAccountingBasis>
-
-      <FinancialSheetFooter>
-        {basisLabel && (
-          <FinancialSheetFooterBasis>
-            <T id={'accounting_basis'} /> {basisLabel}
-          </FinancialSheetFooterBasis>
-        )}
-        {currentDate && (
-          <FinancialSheetFooterCurrentTime>
-            {moment().format('YYYY MMM DD  HH:MM')}
-          </FinancialSheetFooterCurrentTime>
-        )}
-      </FinancialSheetFooter>
-    </FinancialSheetRoot>
-  );
-}

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Align } from 'common';
-import { SkeletonText } from 'components';
-import DataTable from '../../components/DataTable'
-
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import { TableStyle } from 'common';
-import {
-  FinancialSheetRoot,
-  FinancialSheetTitle,
-  FinancialSheetType,
-  FinancialSheetDate,
-  FinancialSheetTable,
-} from './StyledFinancialSheet';
-
-/**
- * Financial sheet paper skeleton.
- * @returns {React.JSX}
- */
-export function FinancialSheetSkeleton({
-  minimal,
-  fullWidth,
-  titleCharsLength,
-  typeCharsLength,
-  dateCharsLength,
-  skeletonTableColumns,
-}) {
-  return (
-    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
-      <FinancialSheetTitle>
-        <SkeletonText charsLength={titleCharsLength} />
-      </FinancialSheetTitle>
-
-      <FinancialSheetType>
-        <SkeletonText charsLength={typeCharsLength} />
-      </FinancialSheetType>
-
-      <FinancialSheetDate>
-        <SkeletonText charsLength={dateCharsLength} />
-      </FinancialSheetDate>
-
-      <FinancialSheetTable>
-        <FinancialSkeletonTable
-          columns={skeletonTableColumns}
-          data={[]}
-          noInitialFetch={true}
-          expandable={true}
-          styleName={TableStyle.Constrant}
-          TableLoadingRenderer={TableSkeletonRows}
-          TableHeaderSkeletonRenderer={TableSkeletonHeader}
-          headerLoading={true}
-          loading={true}
-        />
-      </FinancialSheetTable>
-    </FinancialSheetRoot>
-  );
-}
-
-FinancialSheetSkeleton.defaultProps = {
-  titleCharsLength: 20,
-  typeCharsLength: 40,
-  dateCharsLength: 20,
-  skeletonTableColumns: [
-    {
-      id: 'skeleton-1',
-      className: 'skeleton-1',
-    },
-    {
-      id: 'skeleton-2',
-      className: 'skeleton-2',
-      align: Align.Right,
-    },
-  ],
-};
-
-const FinancialSkeletonTable = styled(DataTable)`
-  .table .th .skeleton,
-  .table .td .skeleton {
-    margin-top: 4px;
-    margin-bottom: 4px;
-  }
-`;

src/components/FinancialSheet/ReportDataTable.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-import DataTable from '../DataTable';
-
-export const ReportDataTable = styled(DataTable)`
-  .table .tbody .tr.no-results:last-of-type .td {
-    border-bottom: 1px solid #ddd;
-  }
-`;

src/components/FinancialSheet/StyledFinancialSheet.js

@@ -1,82 +0,0 @@
-import styled from 'styled-components';
-
-export const FinancialSheetRoot = styled.div`
-  border: 2px solid #f0f0f0;
-  border-radius: 10px;
-  min-width: 640px;
-  width: auto;
-  padding: 30px 18px;
-  max-width: 100%;
-  margin: 35px auto;
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-
-  ${(props) =>
-    props.fullWidth &&
-    `
-    width: 100%;
-    margin-top: 25px;`}
-
-  ${(props) =>
-    props.minimal &&
-    `
-    border: 0;
-    padding: 0;
-    margin-top: 20px;
-
-  ${FinancialSheetTitle} {
-    font-size: 18px;
-    color: #333;
-  }
-  ${FinancialSheetTitle} + ${FinancialSheetDate} {
-    margin-top: 8px;
-  }
-  ${FinancialSheetDate} {
-    margin-top: 20px;
-  }  
-`}
-`;
-
-export const FinancialSheetTitle = styled.h1`
-  margin: 0;
-  font-weight: 400;
-  font-size: 20px;
-  color: #464646;
-  text-align: center;
-`;
-
-export const FinancialSheetType = styled.h6`
-  text-align: center;
-  margin: 0;
-  font-size: 16px;
-  font-weight: 400;
-  color: #666;
-  margin-top: 6px;
-`;
-
-export const FinancialSheetDate = styled.div`
-  text-align: center;
-  color: #666;
-  margin-top: 6px;
-`;
-
-export const FinancialSheetFooter = styled.div`
-  color: #888;
-  text-align: center;
-  margin-top: auto;
-  padding-top: 18px;
-  font-size: 13px;
-
-  > span + span {
-    padding-left: 10px;
-  }
-`;
-export const FinancialSheetTable = styled.div`
-  margin-top: 24px;
-`;
-export const FinancialSheetFooterBasis = styled.span``;
-export const FinancialSheetFooterCurrentTime = styled.span``;
-
-export const FinancialSheetAccountingBasis = styled.div``;

src/components/FinancialSheet/index.js

@@ -1,3 +0,0 @@
-export * from './FinancialSheet';
-export * from './FinancialSheetSkeleton';
-export * from './ReportDataTable';

src/components/FinancialStatement.js

@@ -1,24 +1,15 @@
 import React from 'react';
-import styled from 'styled-components';
+import className from 'classnames';
+import 'style/containers/FinancialStatements/FinancialSheet.scss';
 
-const FinancialStatementRoot = styled.div``;
-const FinancialStatementBodyRoot = styled.div``;
-
-/**
- * 
- * @param {*} param0 
- * @returns 
- */
-export function FinancialStatement({ children, className }) {
-  return <FinancialStatementRoot children={children} className={className} />;
-}
-
-/**
- *
- * @param {React.JSX}
- */
-export function FinancialStatementBody({ children, className }) {
+export default function FinancialStatements({ name, children }) {
   return (
-    <FinancialStatementBodyRoot children={children} className={className} />
+    <div
+      className={className('financial-statement', {
+        [`financial-statement--${name}`]: name,
+      })}
+    >
+      {children}
+    </div>
   );
 }

src/components/Forms/FormikObserver.js

@@ -1,14 +0,0 @@
-
-import { useDeepCompareEffect } from 'hooks/utils';
-
-export function FormikObserver({ onChange, values }) {
-  useDeepCompareEffect(() => {
-    onChange(values);
-  }, [values]);
-
-  return null;
-}
-
-FormikObserver.defaultProps = {
-  onChange: () => null,
-};

src/components/Forms/index.js

@@ -1,2 +1 @@
-export * from './FormObserver';
-export * from './FormikObserver';
+export * from './FormObserver';

src/components/Preferences/PreferencesPage.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import classNames from 'classnames';
-import * as R from 'ramda';
-
 import { CLASSES } from 'common/classes';
 
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
@@ -10,28 +8,18 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
 import 'style/pages/Preferences/Page.scss';
 
 /**
  * Preferences page.
  */
-function PreferencesPage({ toggleSidebarExpand }) {
-  // Shrink the dashboard sidebar once open application preferences page.
-  React.useEffect(() => {
-    toggleSidebarExpand(false);
-  }, [toggleSidebarExpand]);
-
+export default function PreferencesPage() {
   return (
     <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <div
-        id={'dashboard'}
-        className={classNames(
-          CLASSES.DASHBOARD_CONTENT,
-          CLASSES.DASHBOARD_CONTENT_PREFERENCES,
-        )}
-      >
+      <div id={'dashboard'} className={classNames(
+        CLASSES.DASHBOARD_CONTENT,
+        CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+      )}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
           <PreferencesSidebar />
 
@@ -44,5 +32,3 @@ function PreferencesPage({ toggleSidebarExpand }) {
     </ErrorBoundary>
   );
 }
-
-export default R.compose(withDashboardActions)(PreferencesPage);

src/components/Sidebar/Sidebar.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import SidebarContainer from 'components/Sidebar/SidebarContainer';
 import SidebarHead from 'components/Sidebar/SidebarHead';
 import SidebarMenu from 'components/Sidebar/SidebarMenu';
@@ -18,20 +17,7 @@ export default function Sidebar({ dashboardContentRef }) {
         <SidebarMenu menu={menu} />
       </div>
 
-      <SidebarFooterVersion />
+      <div class="sidebar__version">0.0.1-beta version.</div>
     </SidebarContainer>
   );
 }
-
-/**
- * Sidebar footer version. 
- * @returns {React.JSX}
- */
-function SidebarFooterVersion() {
-  const { VERSION } = process.env;
-
-  if (!VERSION) {
-    return null;
-  }
-  return <div class="sidebar__version">v{VERSION}</div>;
-}

src/components/Skeleton.js

@@ -6,36 +6,14 @@ import { randomNumber } from 'utils';
 /**
  * Skeleton component.
  */
-export function Skeleton({
+export default function Skeleton({
   Tag = 'span',
   minWidth = 40,
   maxWidth = 100,
-  children,
 }) {
-  const randomWidth = useMemo(
-    () => randomNumber(minWidth, maxWidth),
-    [minWidth, maxWidth],
-  );
-  return (
-    <Tag
-      className={'skeleton'}
-      style={{ width: `${randomWidth}%` }}
-      children={children}
-    />
-  );
-}
-
-export function SkeletonText({
-  Tag = 'span',
-  charsLength,
-  minChars = 40,
-  maxChars = 100,
-}) {
-  const computedCharLength = useMemo(
-    () => (charsLength ? charsLength : randomNumber(minChars, maxChars)),
-    [charsLength, minChars, maxChars],
-  );
-  const randamText = 'X'.repeat(computedCharLength);
-
-  return <Tag className={'skeleton'}>{randamText}</Tag>;
+  const randomWidth = useMemo(() => randomNumber(minWidth, maxWidth), [
+    minWidth,
+    maxWidth,
+  ]);
+  return <Tag className={'skeleton'} style={{ width: `${randomWidth}%` }} />;
 }

src/components/Table/index.js

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export const Table = styled.table`
-  width: 100%;
-  vertical-align: top;
-  border-color: #dee2e6;
-  border-spacing: 0;
-`;
-export const TBody = styled.tbody``;
-export const TR = styled.tr``;
-export const TD = styled.td`
-  padding: 0.5rem 0.5rem;
-  border-bottom-width: 1px;
-  border-bottom-color: inherit;
-  border-bottom-style: solid;
-
-  ${(props) =>
-    props.textAlign === 'right' &&
-    `
-  text-align: right;`}
-`;
-
-export const TRDarkSingleLine = styled(TR)`
-  ${TD} {
-    border-bottom: 1px solid #000;
-  }
-`;
-
-export const TRDarkDoubleLines = styled(TR)`
-  ${TD} {
-    border-bottom: 3px double #000;
-  }
-`;

src/components/Tags/CurrencyTag.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const CurrencyTag = styled.span`
-  background: #3e9215;
-  color: #fff;
-  display: inline-block;
-  border-radius: 3px;
-  padding: 2px 4px;
-  line-height: 1;
-  margin-left: 4px;
-`;

src/components/Tags/index.js

@@ -1,3 +0,0 @@
-
-
-export * from './CurrencyTag';

src/components/TextStatus/index.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export function TextStatus({ intent, children }) {
-  return <TextStatusRoot intent={intent}>{children}</TextStatusRoot>;
-}
-
-const TextStatusRoot = styled.span`
-  ${(props) =>
-    props.intent === 'warning' &&
-    `
-  color: #ec5b0a;`}
-
-  ${(props) =>
-    props.intent === 'success' &&
-    `
-  color: #2ba01d;`}
-
-  ${(props) =>
-    props.intent === 'none' &&
-    `
-  color: #777;`}
-
-  ${(props) =>
-    props.intent === 'primary' &&
-    `
-  color: #1652c8;`}
-`;

src/components/TotalLines/TotalLines.module.scss

@@ -0,0 +1,12 @@
+.total_lines {}
+
+
+.total_line {
+    display: flex;
+    border-bottom: 1px solid #d2dde2;
+    
+    :global .amount,
+    :global .title{
+        padding: 8px;
+    }
+}

src/components/TotalLines/index.js

@@ -1,93 +1,23 @@
 import React from 'react';
-import styled from 'styled-components';
+import clsx from 'classnames';
 
-export const TotalLineBorderStyle = {
-  SingleDark: 'SingleDark',
-  DoubleDark: 'DoubleDark',
-};
+import TotalLinesCls from './TotalLines.module.scss';
 
-export const TotalLineTextStyle = {
-  Regular: 'Regular',
-  Bold: 'Bold',
-};
-
-export function TotalLines({
-  children,
-  amountColWidth,
-  labelColWidth,
-  className,
-}) {
+export function TotalLines({ children, className }) {
   return (
-    <TotalLinesRoot
-      className={className}
-      amountColWidth={amountColWidth}
-      labelColWidth={labelColWidth}
-    >
+    <div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
       {children}
-    </TotalLinesRoot>
+    </div>
   );
 }
 
-export function TotalLine({ title, value, borderStyle, textStyle, className }) {
+export function TotalLine({ title, value, className }) {
   return (
-    <TotalLineRoot
-      borderStyle={borderStyle}
-      textStyle={textStyle}
-      className={className}
+    <div
+      className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
     >
       <div class="title">{title}</div>
       <div class="amount">{value}</div>
-    </TotalLineRoot>
+    </div>
   );
 }
-
-export const TotalLinesRoot = styled.div`
-  display: table;
-
-  ${(props) =>
-    props.amountColWidth &&
-    `
-    .amount{
-      width: ${props.amountColWidth}
-    }
-  `}
-
-  ${(props) =>
-    props.labelColWidth &&
-    `
-    .title{
-      width: ${props.labelColWidth}
-    }
-  `}
-`;
-
-export const TotalLineRoot = styled.div`
-  display: table-row;
-
-  .amount,
-  .title {
-    display: table-cell;
-    padding: 8px;
-    border-bottom: 1px solid #d2dde2;
-
-    ${(props) =>
-      props.borderStyle === TotalLineBorderStyle.DoubleDark &&
-      `
-      border-bottom: 3px double #000;
-    `}
-    ${(props) =>
-      props.borderStyle === TotalLineBorderStyle.SingleDark &&
-      `
-      border-bottom: 1px double #000;
-    `}
-    ${(props) =>
-      props.textStyle === TotalLineTextStyle.Bold &&
-      `
-      font-weight: 600;
-    `}
-  }
-
-  .amount {
-    text-align: right;
-  }
-`;

src/components/Typo/Paragraph.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import clsx from 'classnames';
-
-export function Paragraph({ className, children }) {
-  return <p className={clsx('paragraph', className)}>{children}</p>;
-}

src/components/Typo/index.js

@@ -1,2 +0,0 @@
-
-export * from './Paragraph';

src/components/Utils/Join.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export function Join({ items, sep }) {
-  return items.length > 0
-    ? items.reduce((result, item) => (
-        <>
-          {result}
-          {sep}
-          {item}
-        </>
-      ))
-    : null;
-}

src/components/Utils/index.js

@@ -1,5 +1,4 @@
 
 
 export * from './FormatNumber';
-export * from './FormatDate';
-export * from './Join';
+export * from './FormatDate';

src/components/Vendors/VendorDrawerLink.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import * as R from 'ramda';
-
-import { ButtonLink } from '../Button';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-function VendorDrawerLinkComponent({
-  // #ownProps
-  children,
-  vendorId,
-
-  // #withDrawerActions
-  openDrawer,
-}) {
-  // Handle view customer drawer.
-  const handleVendorDrawer = () => {
-    openDrawer('vendor-details-drawer', { vendorId });
-  };
-
-  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
-}
-
-export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);

src/components/Vendors/index.js

@@ -1 +0,0 @@
-export * from './VendorDrawerLink'

src/components/index.js

@@ -5,6 +5,9 @@ import Choose from './Utils/Choose';
 import For from './Utils/For';
 import { FormattedMessage, FormattedHTMLMessage } from './FormattedMessage';
 import ListSelect from './ListSelect';
+import FinancialStatement from './FinancialStatement';
+// import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
+// import DynamicFilterCompatatorField from './DynamicFilter/DynamicFilterCompatatorField';
 import ErrorMessage from './ErrorMessage';
 import MODIFIER from './modifiers';
 import FieldHint from './FieldHint';
@@ -38,6 +41,7 @@ import InputPrependText from './Forms/InputPrependText';
 import PageFormBigNumber from './PageFormBigNumber';
 import AccountsMultiSelect from './AccountsMultiSelect';
 import ContactsMultiSelect from './ContactsMultiSelect';
+import Skeleton from './Skeleton';
 import ContextMenu from './ContextMenu';
 import TableFastCell from './Datatable/TableFastCell';
 import DashboardContentTable from './Dashboard/DashboardContentTable';
@@ -50,6 +54,7 @@ import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
+import Card from './Card';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -82,19 +87,6 @@ export * from './Button';
 export * from './IntersectionObserver';
 export * from './SMSPreview';
 export * from './Contacts';
-export * from './Utils/Join';
-export * from './Typo';
-export * from './TextStatus';
-export * from './Tags';
-export * from './CommercialDoc';
-export * from './Card';
-export * from './Customers'
-export * from './Vendors'
-export * from './Table';
-export * from './Skeleton';
-export * from './FinancialStatement';
-export * from './FinancialReport';
-export * from './FinancialSheet';
 
 const Hint = FieldHint;
 
@@ -110,6 +102,7 @@ export {
   T,
   Money,
   ListSelect,
+  FinancialStatement,
   // DynamicFilterValueField,
   // DynamicFilterCompatatorField,
   MODIFIER,
@@ -147,6 +140,7 @@ export {
   DataTableEditable,
   ContactsMultiSelect,
   TableFastCell,
+  Skeleton,
   ContextMenu,
   DashboardContentTable,
   DashboardPageContent,
@@ -159,6 +153,7 @@ export {
   MaterialProgressBar,
   MoneyFieldCell,
   ItemsMultiSelect,
+  Card,
   AvaterCell,
   MoreMenuItems,
 };

src/config/financialReportsMenu.js

@@ -70,20 +70,6 @@ export const financialReportMenus = [
         subject: AbilitySubject.Report,
         ability: ReportsAction.READ_AP_AGING_SUMMARY,
       },
-      {
-        title: <T id={'report.balance_sheet_comparison.title'} />,
-        desc: <T id={'report.balance_sheet_comparison.desc'} />,
-        link: 'financial-reports/balance-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_BALANCE_SHEET,
-      },
-      {
-        title: <T id={'report.profit_loss_sheet_comparison.title'} />,
-        desc: <T id={'report.profit_loss_sheet_comparison.desc'} />,
-        link: '/financial-reports/profit-loss-sheet?previousYear=true&previousYearAmountChange=true&previousYearPercentageChange=true',
-        subject: AbilitySubject.Report,
-        ability: ReportsAction.READ_PROFIT_LOSS,
-      },
     ],
   },
 ];

src/config/sidebarMenu.js

@@ -158,10 +158,6 @@ export default [
           ability: SaleReceiptAction.View,
         },
       },
-      {
-        text: <T id={'sidebar_credit_note'} />,
-        href: '/credit-notes',
-      },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receives',
@@ -237,10 +233,6 @@ export default [
           ability: SaleReceiptAction.Create,
         },
       },
-      {
-        text: <T id={'credit_note.label.new_credit_note'} />,
-        href: '/credit-notes/new',
-      },
       {
         text: <T id={'new_payment_receive'} />,
         href: '/payment-receives/new',
@@ -262,10 +254,6 @@ export default [
           ability: BillAction.View,
         },
       },
-      {
-        text: <T id={'sidebar_vendor_credits'} />,
-        href: '/vendor-credits',
-      },
       {
         text: <T id={'payment_mades'} />,
         href: '/payment-mades',
@@ -310,14 +298,6 @@ export default [
           ability: BillAction.Create,
         },
       },
-      {
-        text: <T id={'vendor_credits.label.new_vendor_credit'} />,
-        href: '/vendor-credits/new',
-        permission: {
-          subject: AbilitySubject.Bill,
-          ability: BillAction.Create,
-        },
-      },
       {
         text: <T id={'new_payment_made'} />,
         href: '/payment-mades/new',
@@ -425,14 +405,14 @@ export default [
           ability: ManualJournalAction.View,
         },
       },
-      {
-        text: <T id={'sidebar.transactions_locaking'} />,
-        href: '/transactions-locking',
-        // permission: {
-        //   subject: AbilitySubject.ManualJournal,
-        //   ability: ManualJournalAction.TransactionLocking,
-        // },
-      },
+      // {
+      //   text: <T id={'sidebar.transactions_locaking'} />,
+      //   href: '/transactions-locking',
+      //   permission: {
+      //     subject: AbilitySubject.ManualJournal,
+      //     ability: ManualJournalAction.TransactionLocking,
+      //   },
+      // },
       {
         text: <T id={'exchange_rate'} />,
         href: '/exchange-rates',

src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js

@@ -46,7 +46,8 @@ function ManualJournalsListProvider({ query, tableStateChanged, ...props }) {
     isEmptyStatus,
   };
 
-  const isPageLoading = isViewsLoading || isResourceMetaLoading;
+  const isPageLoading =
+    isManualJournalsLoading || isViewsLoading || isResourceMetaLoading;
 
   return (
     <DashboardInsider loading={isPageLoading} name={'manual-journals'}>

src/containers/Accounting/JournalsLanding/components.js

@@ -101,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true} round={true}>
+        <Tag minimal={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING} round={true}>
+        <Tag minimal={true} intent={Intent.WARNING}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
@@ -179,7 +179,6 @@ export const ActionsMenu = ({
         />
       </Can>
       <Can I={ManualJournalAction.Delete} a={AbilitySubject.ManualJournal}>
-        <MenuDivider />
         <MenuItem
           text={intl.get('delete_journal')}
           icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js

@@ -151,7 +151,6 @@ export default function MakeJournalFloatingAction() {
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             onClick={handleSubmitPublishBtnClick}
-            style={{ minWidth: '85px' }}
             text={<T id={'save'} />}
           />
           <Popover

src/containers/Accounting/MakeJournal/MakeJournalProvider.js

@@ -7,8 +7,7 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings,
-  useSettingsManualJournals
+  useSettings
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -41,7 +40,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
+  const { isLoading: isSettingsLoading } = useSettings();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

@@ -57,7 +57,9 @@ function BillTransactionDeleteAlert({
       loading={isLoading}
     >
       <p>
-        <T id={`landed_cost.once_your_delete_this_located_landed_cost`} />
+        <T
+          id={`Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?`}
+        />
       </p>
     </Alert>
   );

src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { useDeleteCreditNote } from 'hooks/query';
-import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
-import { compose } from 'utils';
-
-/**
- * Credit note delete alert.
- */
-function CreditNoteDeleteAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { creditNoteId },
-
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
-    useDeleteCreditNote();
-
-  // handle cancel delete credit note alert.
-  const handleCancelDeleteAlert = () => {
-    closeAlert(name);
-  };
-  const handleConfirmCreditNoteDelete = () => {
-    deleteCreditNoteMutate(creditNoteId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('credit_note.alert.delete_message'),
-          intent: Intent.SUCCESS,
-        });
-        closeDrawer('credit-note-detail-drawer');
-      })
-      .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={handleCancelDeleteAlert}
-      onConfirm={handleConfirmCreditNoteDelete}
-      loading={isLoading}
-    >
-      <p>
-        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(CreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.js

@@ -1,87 +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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { useDeleteReconcileCredit } from 'hooks/query';
-import { handleDeleteErrors } from '../../Sales/CreditNotes/CreditNotesLanding/utils';
-import { compose } from 'utils';
-
-/**
- * Reconcile credit note delete alert.
- */
-function ReconcileCreditNoteDeleteAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { creditNoteId },
-
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { isLoading, mutateAsync: deleteReconcileCreditMutate } =
-    useDeleteReconcileCredit();
-
-  // handle cancel delete credit note alert.
-  const handleCancelDeleteAlert = () => {
-    closeAlert(name);
-  };
-
-  const handleConfirmVendorCreditDelete = () => {
-    deleteReconcileCreditMutate(creditNoteId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('reconcile_credit_note.alert.success_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={handleCancelDeleteAlert}
-      onConfirm={handleConfirmVendorCreditDelete}
-      loading={isLoading}
-    >
-      <p>
-        <FormattedHTMLMessage
-          id={
-            'reconcile_credit_note.once_you_delete_this_reconcile_credit_note'
-          }
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(ReconcileCreditNoteDeleteAlert);

src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js

@@ -1,76 +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 { useDeleteRefundCreditNote } from 'hooks/query';
-
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { compose } from 'utils';
-
-/**
- * Refund credit transactions delete alert
- */
-function RefundCreditNoteDeleteAlert({
-  name,
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { creditNoteId },
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
-    useDeleteRefundCreditNote();
-
-  // Handle cancel delete.
-  const handleCancelAlert = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm delete .
-  const handleConfirmRefundCreditDelete = () => {
-    deleteRefundCreditMutate(creditNoteId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('refund_credit_transactions.alert.delete_message'),
-          intent: Intent.SUCCESS,
-        });
-        closeDrawer('refund-credit-detail-drawer');
-      })
-      .catch(() => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'delete'} />}
-      icon="trash"
-      intent={Intent.DANGER}
-      isOpen={isOpen}
-      onCancel={handleCancelAlert}
-      onConfirm={handleConfirmRefundCreditDelete}
-      loading={isLoading}
-    >
-      <p>
-        <T
-          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(RefundCreditNoteDeleteAlert);

src/containers/Alerts/Customers/CustomerActivateAlert.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useActivateContact } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Customer activate alert.
- */
-function CustomerActivateAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { customerId, service },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: activateContact, isLoading } = useActivateContact();
-
-  // Handle activate constomer alert cancel.
-  const handleCancelActivateCustomer = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm customer activated.
-  const handleConfirmCustomerActivate = () => {
-    activateContact(customerId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('customer.alert.activated_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'activate'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleCancelActivateCustomer}
-      loading={isLoading}
-      onConfirm={handleConfirmCustomerActivate}
-    >
-      <p>{intl.get('customer.alert.are_you_sure_want_to_activate_this_customer')}</p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(CustomerActivateAlert);

src/containers/Alerts/Customers/CustomerInactivateAlert.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useInactivateContact } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * customer inactivate alert.
- */
-function CustomerInactivateAlert({
-  name,
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { customerId, service },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: inactivateContact, isLoading } = useInactivateContact();
-
-  // Handle cancel inactivate alert.
-  const handleCancelInactivateCustomer = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm contact Inactive.
-  const handleConfirmCustomerInactive = () => {
-    inactivateContact(customerId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('the_contact_has_been_inactivated_successfully'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'inactivate'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleCancelInactivateCustomer}
-      onConfirm={handleConfirmCustomerInactive}
-      loading={isLoading}
-    >
-      <p>
-        {intl.get(
-          'customer.alert.are_you_sure_want_to_inactivate_this_customer',
-        )}
-      </p>
-    </Alert>
-  );
-}
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(CustomerInactivateAlert);

src/containers/Alerts/EasySMSIntegration/EasySMSDisconnectAlert.js

@@ -1,46 +1,47 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
-
-import { useOpenCreditNote } from 'hooks/query';
 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';
 
 /**
- * Credit note opened alert.
+ * Easy SMS disconnect alert.
  */
-function CreditNoteOpenedAlert({
+function EasySMSDisconnectAlert({
   name,
 
   // #withAlertStoreConnect
   isOpen,
-  payload: { creditNoteId },
+  payload: {},
 
   // #withAlertActions
   closeAlert,
 }) {
-  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+  const { mutateAsync: disconnectEasySMS, isLoading } =
+    useSettingEasySMSDisconnect();
 
-  // Handle cancel opened credit note alert.
-  const handleAlertCancel = () => {
+  // Handle cancel Disconnect alert.
+  const handleCancelDisconnect = () => {
     closeAlert(name);
   };
 
-  // Handle confirm credit note opened.
-  const handleAlertConfirm = () => {
-    openCreditNoteMutate(creditNoteId)
+  // Handle confirm Disconnect alert.
+  const handleConfirmDisconnect = () => {
+    disconnectEasySMS()
       .then(() => {
         AppToaster.show({
-          message: intl.get('credit_note_opened.alert.success_message'),
+          message: intl.get('easysms.disconnect.alert.success_message'),
           intent: Intent.SUCCESS,
         });
       })
-      .catch((error) => {})
+      .catch(() => {})
       .finally(() => {
         closeAlert(name);
       });
@@ -49,20 +50,19 @@ function CreditNoteOpenedAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'open'} />}
+      confirmButtonText={<T id={'easysms.label.disconnect'} />}
       intent={Intent.WARNING}
       isOpen={isOpen}
-      onCancel={handleAlertCancel}
-      onConfirm={handleAlertConfirm}
+      onCancel={handleCancelDisconnect}
+      onConfirm={handleConfirmDisconnect}
       loading={isLoading}
     >
-      <p>
-        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
-      </p>
+      <p>Ea aliqua elit reprehenderit pariatur consequat voluptate quis.</p>
     </Alert>
   );
 }
+
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-)(CreditNoteOpenedAlert);
+)(EasySMSDisconnectAlert);

src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.js

@@ -1,81 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { FormattedMessage as T } from 'components';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useCancelUnlockingPartialTransactions } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Cancel Unlocking partial transactions alerts.
- */
-function CancelUnlockingPartialTarnsactions({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { module },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: cancelUnlockingPartial, isLoading } =
-    useCancelUnlockingPartialTransactions();
-
-  // Handle cancel.
-  const handleCancel = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm.
-  const handleConfirm = () => {
-    const values = {
-      module: module,
-    };
-    cancelUnlockingPartial(values)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get(
-            'unlocking_partial_transactions.alert.cancel_message',
-          ),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch(
-        ({
-          response: {
-            data: { errors },
-          },
-        }) => {},
-      )
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'yes'} />}
-      intent={Intent.DANGER}
-      isOpen={isOpen}
-      onCancel={handleCancel}
-      onConfirm={handleConfirm}
-      loading={isLoading}
-    >
-      <p>
-        <T id={'unlocking_partial_transactions.alert.message'} />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(CancelUnlockingPartialTarnsactions);

src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { useDeleteReconcileVendorCredit } from 'hooks/query';
-import { compose } from 'utils';
-
-/**
- * Reconcile vendor credit delete alert.
- */
-function ReconcileVendorCreditDeleteAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorCreditId },
-
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { isLoading, mutateAsync: deleteReconcileVendorCreditMutate } =
-    useDeleteReconcileVendorCredit();
-
-  // handle cancel delete credit note alert.
-  const handleCancelDeleteAlert = () => {
-    closeAlert(name);
-  };
-
-  const handleConfirmReconcileVendorCreditDelete = () => {
-    deleteReconcileVendorCreditMutate(vendorCreditId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('reconcile_vendor_credit.alert.success_message'),
-          intent: Intent.SUCCESS,
-        });
-        // closeDrawer('vendor-credit-detail-drawer');
-      })
-      .catch(
-        ({
-          response: {
-            data: { errors },
-          },
-        }) => {},
-      )
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'delete'} />}
-      icon="trash"
-      intent={Intent.DANGER}
-      isOpen={isOpen}
-      onCancel={handleCancelDeleteAlert}
-      onConfirm={handleConfirmReconcileVendorCreditDelete}
-      loading={isLoading}
-    >
-      <p>
-        <FormattedHTMLMessage
-          id={'reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit'}
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(ReconcileVendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js

@@ -1,78 +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 { useDeleteRefundVendorCredit } from 'hooks/query';
-
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { compose } from 'utils';
-
-/**
- * Refund Vendor transactions delete alert.
- */
-function RefundVendorCreditDeleteAlert({
-  name,
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorCreditId },
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
-    useDeleteRefundVendorCredit();
-
-  // Handle cancel delete.
-  const handleCancelAlert = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm delete .
-  const handleConfirmRefundVendorCreditDelete = () => {
-    deleteRefundVendorCreditMutate(vendorCreditId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get(
-            'refund_vendor_credit_transactions.alert.delete_message',
-          ),
-          intent: Intent.SUCCESS,
-        });
-        closeDrawer('refund-vendor-detail-drawer');
-      })
-      .catch(() => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'delete'} />}
-      icon="trash"
-      intent={Intent.DANGER}
-      isOpen={isOpen}
-      onCancel={handleCancelAlert}
-      onConfirm={handleConfirmRefundVendorCreditDelete}
-      loading={isLoading}
-    >
-      <p>
-        <T
-          id={`refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit`}
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(RefundVendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.js

@@ -1,84 +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 withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import { handleDeleteErrors } from '../../Purchases/CreditNotes/CreditNotesLanding/utils';
-import { useDeleteVendorCredit } from 'hooks/query';
-import { compose } from 'utils';
-
-/**
- * Vendor Credit delete alert.
- */
-function VendorCreditDeleteAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorCreditId },
-
-  // #withAlertActions
-  closeAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
-    useDeleteVendorCredit();
-
-  // handle cancel delete credit note alert.
-  const handleCancelDeleteAlert = () => {
-    closeAlert(name);
-  };
-  const handleConfirmCreditDelete = () => {
-    deleteVendorCreditMutate(vendorCreditId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('vendor_credits.alert.delete_message'),
-          intent: Intent.SUCCESS,
-        });
-        closeDrawer('vendor-credit-detail-drawer');
-      })
-      .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={handleCancelDeleteAlert}
-      onConfirm={handleConfirmCreditDelete}
-      loading={isLoading}
-    >
-      <p>
-        <FormattedHTMLMessage
-          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
-        />
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-  withDrawerActions,
-)(VendorCreditDeleteAlert);

src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { Intent, Alert } from '@blueprintjs/core';
-
-import { useOpenVendorCredit } from 'hooks/query';
-import { AppToaster } from 'components';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- *  Vendor credit opened alert.
- */
-function VendorCreditOpenedAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorCreditId },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: openVendorCreditMutate, isLoading } =
-    useOpenVendorCredit();
-
-  // Handle cancel opened credit note alert.
-  const handleAlertCancel = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm  vendor credit as opened.
-  const handleAlertConfirm = () => {
-    openVendorCreditMutate(vendorCreditId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('vendor_credit_opened.alert.success_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'open'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleAlertCancel}
-      onConfirm={handleAlertConfirm}
-      loading={isLoading}
-    >
-      <p>
-        <T id={'vendor_credit_opened.are_sure_to_open_this_credit'} />
-      </p>
-    </Alert>
-  );
-}
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(VendorCreditOpenedAlert);

src/containers/Alerts/Vendors/VendorActivateAlert.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useActivateContact } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Vendor activate alert.
- */
-function VendorActivateAlert({
-  name,
-
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorId },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: activateContact, isLoading } = useActivateContact();
-
-  // Handle activate vendor alert cancel.
-  const handleCancelActivateVendor = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm vendor activated.
-  const handleConfirmVendorActivate = () => {
-    activateContact(vendorId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('vendor.alert.activated_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'activate'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleCancelActivateVendor}
-      loading={isLoading}
-      onConfirm={handleConfirmVendorActivate}
-    >
-      <p>
-        {intl.get('vendor.alert.are_you_sure_want_to_activate_this_vendor')}
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(VendorActivateAlert);

src/containers/Alerts/Vendors/VendorInactivateAlert.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-
-import { useInactivateContact } from 'hooks/query';
-
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
-import withAlertActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-
-/**
- * Vendor inactivate alert.
- */
-function VendorInactivateAlert({
-  name,
-  // #withAlertStoreConnect
-  isOpen,
-  payload: { vendorId },
-
-  // #withAlertActions
-  closeAlert,
-}) {
-  const { mutateAsync: inactivateContact, isLoading } = useInactivateContact();
-
-  // Handle cancel inactivate alert.
-  const handleCancelInactivateVendor = () => {
-    closeAlert(name);
-  };
-
-  // Handle confirm contact Inactive.
-  const handleConfirmVendorInactive = () => {
-    inactivateContact(vendorId)
-      .then(() => {
-        AppToaster.show({
-          message: intl.get('vendor.alert.inactivated_message'),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert(name);
-      });
-  };
-
-  return (
-    <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'inactivate'} />}
-      intent={Intent.WARNING}
-      isOpen={isOpen}
-      onCancel={handleCancelInactivateVendor}
-      onConfirm={handleConfirmVendorInactive}
-      loading={isLoading}
-    >
-      <p>
-        {intl.get('vendor.alert.are_you_sure_want_to_inactivate_this_vendor')}
-      </p>
-    </Alert>
-  );
-}
-
-export default compose(
-  withAlertStoreConnect(),
-  withAlertActions,
-)(VendorInactivateAlert);

src/containers/AlertsContainer/registered.js

@@ -17,9 +17,7 @@ import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTr
 import UsersAlerts from '../Preferences/Users/UsersAlerts';
 import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
 import RolesAlerts from '../Preferences/Users/Roles/RolesAlerts';
-import CreditNotesAlerts from '../Sales/CreditNotes/CreditNotesAlerts';
-import VendorCreditNotesAlerts from '../Purchases/CreditNotes/VendorCreditNotesAlerts';
-import TransactionsLockingAlerts from '../TransactionsLocking/TransactionsLockingAlerts'
+import EasySMSIntegrationAlerts from '../Preferences/EasySMSIntegration/EasySMSIntegrationAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -41,7 +39,5 @@ export default [
   ...UsersAlerts,
   ...CurrenciesAlerts,
   ...RolesAlerts,
-  ...CreditNotesAlerts,
-  ...VendorCreditNotesAlerts,
-  ...TransactionsLockingAlerts
+  ...EasySMSIntegrationAlerts,
 ];

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -18,6 +18,7 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { handleCashFlowTransactionType } from './utils';
 
 import { compose } from 'utils';
+import { whenRtl, whenLtr } from 'utils/styled-components';
 
 /**
  * Account transactions data table.
@@ -128,7 +129,8 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)`
 
     .tbody-inner {
       .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
+        ${whenLtr(`border-left: 1px solid #e6e6e6;`)}
+        ${whenRtl(`border-right: 1px solid #e6e6e6;`)}
       }
     }
   }

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -14,6 +14,7 @@ import { curry } from 'lodash/fp';
 
 import { Icon } from '../../../components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { whenRtl, whenLtr } from 'utils/styled-components';
 
 function AccountSwitchButton() {
   const { currentAccount } = useAccountTransactionsContext();
@@ -22,7 +23,7 @@ function AccountSwitchButton() {
     <AccountSwitchButtonBase
       minimal={true}
       rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-    >
+    > 
       <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
     </AccountSwitchButtonBase>
   );
@@ -160,7 +161,8 @@ const AccountBalanceAmount = styled.span`
   font-weight: 600;
   display: inline-block;
   color: rgb(31, 50, 85);
-  margin-left: 10px;
+  ${whenLtr(`margin-left: 10px;`)}
+  ${whenRtl(`margin-right: 10px;`)}
 `;
 
 const AccountSwitchItemName = styled.div`
@@ -178,6 +180,7 @@ const AccountSwitchItemUpdatedAt = styled.div`
 
 const AccountSwitchButtonBase = styled(Button)`
   .bp3-button-text {
-    margin-right: 5px;
+    ${whenLtr(`margin-right: 5px;`)}
+    ${whenRtl(`margin-left: 5px;`)}
   }
 `;

src/containers/CashFlow/AccountTransactions/utils.js

@@ -71,18 +71,6 @@ export const handleCashFlowTransactionType = (reference, openDrawer) => {
       return openDrawer('payment-made-detail-drawer', {
         paymentMadeId: reference.reference_id,
       });
-    case 'RefundCreditNote':
-      return openDrawer('refund-credit-detail-drawer', {
-        refundTransactionId: reference.reference_id,
-      });
-    case 'RefundVendorCredit':
-      return openDrawer('refund-vendor-detail-drawer', {
-        refundTransactionId: reference.reference_id,
-      });
-    case 'InventoryAdjustment':
-      return openDrawer('inventory-adjustment-drawer', {
-        inventoryId: reference.reference_id,
-      });
 
     default:
       return openDrawer('cashflow-transaction-drawer', {

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -271,7 +271,6 @@ function CashflowAccountContextMenu({
         </If>
       </Can>
       <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
-        <MenuDivider />
         <MenuItem
           text={intl.get('delete_account')}
           icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Customers/CustomersAlerts.js

@@ -3,11 +3,11 @@ import React from 'react';
 const CustomerDeleteAlert = React.lazy(() =>
   import('../Alerts/Customers/CustomerDeleteAlert'),
 );
-const CustomerActivateAlert = React.lazy(() =>
-  import('../Alerts/Customers/CustomerActivateAlert'),
+const ContactActivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactActivateAlert'),
 );
-const CustomerInactivateAlert = React.lazy(() =>
-  import('../Alerts/Customers/CustomerInactivateAlert'),
+const ContactInactivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactInactivateAlert'),
 );
 
 /**
@@ -15,6 +15,6 @@ const CustomerInactivateAlert = React.lazy(() =>
  */
 export default [
   { name: 'customer-delete', component: CustomerDeleteAlert },
-  { name: 'customer-activate', component: CustomerActivateAlert },
-  { name: 'customer-inactivate', component: CustomerInactivateAlert },
+  { name: 'contact-activate', component: ContactActivateAlert },
+  { name: 'contact-inactivate', component: ContactInactivateAlert },
 ];

src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -53,7 +53,7 @@ function CustomersListProvider({ tableState, tableStateChanged, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isResourceMetaLoading }
+      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
       name={'customers-list'}
     >
       <CustomersListContext.Provider value={state} {...props} />

src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -89,17 +89,15 @@ function CustomersTable({
 
   // Handle cancel/confirm inactive.
   const handleInactiveCustomer = ({ id, contact_service }) => {
-    openAlert('customer-inactivate', {
-      customerId: id,
+    openAlert('contact-inactivate', {
+      contactId: id,
+      service: contact_service,
     });
   };
 
   // Handle cancel/confirm  activate.
   const handleActivateCustomer = ({ id, contact_service }) => {
-    openAlert('customer-activate', {
-      customerId: id,
-      service: contact_service,
-    });
+    openAlert('contact-activate', { contactId: id, service: contact_service });
   };
 
   // Handle view detail contact.

src/containers/Customers/CustomersLanding/components.js

@@ -1,13 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Intent,
-  Tooltip,
-  Position,
-  Classes,
-} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
 
 import intl from 'react-intl-universal';
@@ -71,7 +63,6 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={CustomerAction.Delete} a={AbilitySubject.Customer}>
-        <MenuDivider />
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={intl.get('delete_customer')}
@@ -87,7 +78,7 @@ export function ActionsMenu({
  * Phone number accessor.
  */
 export function PhoneNumberAccessor(row) {
-  return <div className={'work_phone'}>{row.personal_phone}</div>;
+  return <div className={'work_phone'}>{row.work_phone}</div>;
 }
 
 /**
@@ -97,24 +88,6 @@ export function BalanceAccessor(row) {
   return <Money amount={row.closing_balance} currency={row.currency_code} />;
 }
 
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
-  return (
-    <If condition={row.note}>
-      <Tooltip
-        className={Classes.TOOLTIP_INDICATOR}
-        content={row.note}
-        position={Position.LEFT_TOP}
-        hoverOpenDelay={50}
-      >
-        <Icon icon={'file-alt'} iconSize={16} />
-      </Tooltip>
-    </If>
-  );
-}
-
 /**
  * Retrieve customers table columns.
  */
@@ -149,20 +122,12 @@ export function useCustomersTableColumns() {
       },
       {
         id: 'work_phone',
-        Header: intl.get('phone_number'),
+        Header: intl.get('work_phone'),
         accessor: PhoneNumberAccessor,
         className: 'phone_number',
         width: 100,
         clickable: true,
       },
-      {
-        id: 'note',
-        Header: intl.get('note'),
-        accessor: NoteAccessor,
-        disableSortBy: true,
-        width: 85,
-        clickable: true,
-      },
       {
         id: 'balance',
         Header: intl.get('receivable_balance'),

src/containers/Dialogs/AccountDialog/utils.js

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

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -1,16 +1,6 @@
 import React from 'react';
-import { defaultTo, get } from 'lodash';
 import { DialogContent } from 'components';
-import {
-  useBill,
-  useCreateLandedCost,
-  useLandedCostTransaction,
-} from 'hooks/query';
-import {
-  getEntriesByTransactionId,
-  getCostTransactionById,
-  getTransactionEntryById,
-} from './utils';
+import { useBill, useCreateLandedCost } from 'hooks/query';
 
 const AllocateLandedCostDialogContext = React.createContext();
 
@@ -23,79 +13,22 @@ function AllocateLandedCostDialogProvider({
   dialogName,
   ...props
 }) {
-  const [transactionsType, setTransactionsType] = React.useState(null);
-  const [transactionId, setTransactionId] = React.useState(null);
-  const [transactionEntryId, setTransactionEntryId] = React.useState(null);
-
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
   });
-  // Retrieve the landed cost transactions based on the given transactions type.
-  const {
-    data: { transactions: landedCostTransactions },
-  } = useLandedCostTransaction(transactionsType, {
-    enabled: !!transactionsType,
-  });
-  // Landed cost selected transaction.
-  const costTransaction = React.useMemo(
-    () =>
-      transactionId
-        ? getCostTransactionById(transactionId, landedCostTransactions)
-        : null,
-    [transactionId, landedCostTransactions],
-  );
-  // Retrieve the cost transaction entry.
-  const costTransactionEntry = React.useMemo(
-    () =>
-      costTransaction && transactionEntryId
-        ? getTransactionEntryById(costTransaction, transactionEntryId)
-        : null,
-    [costTransaction, transactionEntryId],
-  );
-  // Retrieve entries of the given transaction id.
-  const costTransactionEntries = React.useMemo(
-    () =>
-      transactionId
-        ? getEntriesByTransactionId(landedCostTransactions, transactionId)
-        : [],
-    [landedCostTransactions, transactionId],
-  );
+
   // Create landed cost mutations.
   const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
 
-  // Retrieve the unallocate cost amount of cost transaction.
-  const unallocatedCostAmount = defaultTo(
-    get(costTransactionEntry, 'unallocated_cost_amount'),
-    0,
-  );
-
-  // Retrieve the unallocate cost amount of cost transaction.
-  const formattedUnallocatedCostAmount = defaultTo(
-    get(costTransactionEntry, 'formatted_unallocated_cost_amount'),
-    0,
-  );
-
-  // Provider payload.
+  // provider payload.
   const provider = {
     isBillLoading,
     bill,
     dialogName,
     query,
     createLandedCostMutate,
-    costTransaction,
-    costTransactionEntries,
-    transactionsType,
-    landedCostTransactions,
-    setTransactionsType,
-    setTransactionId,
-    setTransactionEntryId,
-    costTransactionEntry,
-    transactionEntryId,
-    transactionId,
     billId,
-    unallocatedCostAmount,
-    formattedUnallocatedCostAmount,
   };
 
   return (

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -1,10 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-
-import { DataTableEditable } from 'components';
-
+import intl from 'react-intl-universal';
+import { MoneyFieldCell, DataTableEditable } from 'components';
 import { compose, updateTableCell } from 'utils';
-import { useAllocateLandedCostEntriesTableColumns } from './utils';
 
 /**
  * Allocate landed cost entries table.
@@ -14,7 +11,42 @@ export default function AllocateLandedCostEntriesTable({
   entries,
 }) {
   // Allocate landed cost entries table columns.
-  const columns = useAllocateLandedCostEntriesTableColumns();
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
 
   // Handle update data.
   const handleUpdateData = React.useCallback(
@@ -28,7 +60,7 @@ export default function AllocateLandedCostEntriesTable({
   );
 
   return (
-    <AllocateLandeedCostEntriesEditableTable
+    <DataTableEditable
       columns={columns}
       data={entries}
       payload={{
@@ -38,18 +70,3 @@ export default function AllocateLandedCostEntriesTable({
     />
   );
 }
-
-export const AllocateLandeedCostEntriesEditableTable = styled(
-  DataTableEditable,
-)`
-  .table {
-    .thead .tr .th {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-
-    .tbody .tr .td {
-      padding: 0.25rem;
-    }
-  }
-`;