Merge branch 'develop' into feature/multi-dimensions

src/components/Button/index.js

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

src/components/Customers/CustomerDrawerLink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { ButtonLink } from 'components';
+import { ButtonLink } from '../Button';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 function CustomerDrawerLinkComponent({

src/components/Dashboard/DashboardAbilityProvider.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Ability } from '@casl/ability';
 import { createContextualCan } from '@casl/react';
-import { useDashboardMeta } from '../../hooks/query';
+
+import { useDashboardMetaBoot } from './DashboardBoot';
 
 export const AbilityContext = React.createContext();
 export const Can = createContextualCan(AbilityContext.Consumer);
@@ -11,8 +12,8 @@ export const Can = createContextualCan(AbilityContext.Consumer);
  */
 export function DashboardAbilityProvider({ children }) {
   const {
-    data: { abilities },
-  } = useDashboardMeta();
+    meta: { abilities },
+  } = useDashboardMetaBoot();
 
   // Ability instance.
   const ability = new Ability(abilities);

src/components/Dashboard/DashboardBoot.js

@@ -6,18 +6,26 @@ import {
 } from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
+import { useSubscription } from '../../hooks/state';
 import { setCookie, getCookie } from '../../utils';
 
 /**
  * Dashboard meta async booting.
+ *  - Fetches the dashboard meta only if the organization subscribe is active.
+ *  - Once the dashboard meta query is loading display dashboard splash screen.
  */
 export function useDashboardMetaBoot() {
+  const { isSubscriptionActive } = useSubscription();
+
   const {
     data: dashboardMeta,
     isLoading: isDashboardMetaLoading,
     isSuccess: isDashboardMetaSuccess,
   } = useDashboardMeta({
     keepPreviousData: true,
+
+    // Avoid run the query if the organization subscription is not active.
+    enabled: isSubscriptionActive,
   });
   const [startLoading, stopLoading] = useSplashLoading();
 
@@ -30,20 +38,12 @@ export function useDashboardMetaBoot() {
   }, isDashboardMetaSuccess);
 
   return {
+    meta: dashboardMeta,
     isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess
   };
 }
 
-/**
- * Dashboard async booting.
- * @returns {{ isLoading: boolean }}
- */
-export function useDashboardBoot() {
-  const { isLoading } = useDashboardMetaBoot();
-
-  return { isLoading };
-}
-
 /**
  * Application async booting.
  */

src/components/Dashboard/DashboardProvider.js

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

src/components/FinancialSheet/FinancialSheet.js

@@ -2,7 +2,8 @@ import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 
-import { If, FormattedMessage as T } from 'components';
+import If from '../Utils/If';
+import { FormattedMessage as T } from '../FormattedMessage';
 import {
   FinancialSheetRoot,
   FinancialSheetFooterCurrentTime,

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -2,7 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Align } from 'common';
-import { SkeletonText, DataTable } from 'components';
+import { SkeletonText } from 'components';
+import DataTable from '../../components/DataTable'
 
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

src/components/FinancialSheet/ReportDataTable.js

@@ -0,0 +1,9 @@
+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/index.js

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

src/components/Vendors/VendorDrawerLink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { ButtonLink } from 'components';
+import { ButtonLink } from '../Button';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 function VendorDrawerLinkComponent({