Merge branch 'develop' into feature/multi-dimensions

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js

@@ -64,6 +64,7 @@ function BillPaymentTransactions({
       }}
       styleName={TableStyle.Constrant}
       TableLoadingRenderer={TableSkeletonRows}
+      sticky={true}
     />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js

@@ -66,6 +66,7 @@ function EstimatePaymentTransactions({
       }}
       styleName={TableStyle.Constrant}
       TableLoadingRenderer={TableSkeletonRows}
+      sticky={true}
     />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js

@@ -68,6 +68,7 @@ function InvoicePaymentTransactions({
       }}
       styleName={TableStyle.Constrant}
       TableLoadingRenderer={TableSkeletonRows}
+      sticky={true}
     />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js

@@ -66,6 +66,7 @@ function ReceiptPaymentTransactions({
       }}
       styleName={TableStyle.Constrant}
       TableLoadingRenderer={TableSkeletonRows}
+      sticky={true}
     />
   );
 }

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js

@@ -4,6 +4,7 @@ import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
@@ -12,8 +13,8 @@ import APAgingSummaryHeaderDimensions from './APAgingSummaryHeaderDimensions';
 import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { compose } from 'utils';
 import { transformToForm } from '../../../utils';
+import { compose } from 'utils';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -74,7 +75,7 @@ function APAgingSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <APAgingDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -106,7 +107,7 @@ function APAgingSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </APAgingDrawerHeader>
   );
 }
 
@@ -116,3 +117,9 @@ export default compose(
     isFilterDrawerOpen: APAgingSummaryFilterDrawer,
   })),
 )(APAgingSummaryHeader);
+
+const APAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 import { TableStyle } from 'common';
 
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
@@ -29,7 +29,6 @@ export default function APAgingSummaryTable({
   return (
     <FinancialSheet
       companyName={organizationName}
-      name={'payable-aging-summary'}
       sheetType={intl.get('payable_aging_summary')}
       asDate={new Date()}
       loading={isAPAgingLoading}
@@ -46,7 +45,7 @@ export default function APAgingSummaryTable({
   );
 }
 
-const APAgingSummaryDataTable = styled(DataTable)`
+const APAgingSummaryDataTable = styled(ReportDataTable)`
   .table {
     .tbody .tr {
       .td {

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js

@@ -4,6 +4,7 @@ import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
@@ -60,14 +61,12 @@ function ARAgingSummaryHeader({
     },
     defaultValues,
   );
-
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
@@ -78,7 +77,7 @@ function ARAgingSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <ARAgingDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -111,7 +110,7 @@ function ARAgingSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </ARAgingDrawerHeader>
   );
 }
 
@@ -121,3 +120,9 @@ export default compose(
     isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
 )(ARAgingSummaryHeader);
+
+const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 import { TableStyle } from 'common';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
@@ -26,7 +26,6 @@ export default function ReceivableAgingSummaryTable({
   return (
     <FinancialSheet
       companyName={organizationName}
-      name={'receivable-aging-summary'}
       sheetType={intl.get('receivable_aging_summary')}
       asDate={new Date()}
       loading={isARAgingLoading}
@@ -43,7 +42,7 @@ export default function ReceivableAgingSummaryTable({
   );
 }
 
-const ARAgingSummaryDataTable = styled(DataTable)`
+const ARAgingSummaryDataTable = styled(ReportDataTable)`
   .table {
     .tbody .tr {
       .td {

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -65,9 +67,11 @@ function BalanceSheetHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <BalanceSheetFinancialHeader
       isOpen={balanceSheetDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
+      drawerProps={{
+        onClose: handleDrawerClose,
+      }}
     >
       <Formik
         initialValues={initialValues}
@@ -103,7 +107,7 @@ function BalanceSheetHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </BalanceSheetFinancialHeader>
   );
 }
 
@@ -113,3 +117,9 @@ export default compose(
   })),
   withBalanceSheetActions,
 )(BalanceSheetHeader);
+
+const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 
@@ -56,7 +56,7 @@ export default function BalanceSheetTable({
   );
 }
 
-const BalanceSheetDataTable = styled(DataTable)`
+const BalanceSheetDataTable = styled(ReportDataTable)`
   .table {
     .tbody .tr {
       .td {
@@ -81,7 +81,7 @@ const BalanceSheetDataTable = styled(DataTable)`
       }
       &.row_type--TOTAL.row-id--ASSETS,
       &.row_type--TOTAL.row-id--LIABILITY_EQUITY {
-        .td{
+        .td {
           border-bottom: 3px double #000;
         }
       }

src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.js

@@ -17,6 +17,7 @@ const accountNameMapper = (column) => ({
   textOverview: true,
   width: 400,
   disableSortBy: true,
+  sticky: Align.Left,
 });
 
 /**

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js

@@ -3,6 +3,8 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -30,7 +32,6 @@ function CustomersBalanceSummaryHeader({
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
   });
-
   // Default form values.
   const defaultValues = {
     ...pageFilter,
@@ -47,21 +48,19 @@ function CustomersBalanceSummaryHeader({
     },
     defaultValues,
   );
-
   // handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleCustomerBalanceFilterDrawer(false);
     setSubmitting(false);
   };
-
   // handle close drawer.
   const handleDrawerClose = () => {
     toggleCustomerBalanceFilterDrawer(false);
   };
 
   return (
-    <FinancialStatementHeader
+    <CustomerBalanceDrawerHeader
       isOpen={customersBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -89,7 +88,7 @@ function CustomersBalanceSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </CustomerBalanceDrawerHeader>
   );
 }
 
@@ -99,3 +98,9 @@ export default compose(
   })),
   withCustomersBalanceSummaryActions,
 )(CustomersBalanceSummaryHeader);
+
+const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';
 
+import { TableStyle } from 'common';
 import { tableRowTypesToClassnames } from 'utils';
 
 /**
- * customers balance summary table.
+ * Customers balance summary table.
  */
 export default function CustomersBalanceSummaryTable({
   // #ownProps
@@ -19,6 +21,7 @@ export default function CustomersBalanceSummaryTable({
     CustomerBalanceSummary: { table },
   } = useCustomersBalanceSummaryContext();
 
+  // Retrieves the customers summary columns.
   const columns = useCustomersSummaryColumns();
 
   return (
@@ -27,12 +30,36 @@ export default function CustomersBalanceSummaryTable({
       sheetType={intl.get('customers_balance_summary')}
       asDate={new Date()}
     >
-      <DataTable
+      <CustomerBalanceDataTable
         columns={columns}
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const CustomerBalanceDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody {
+      .tr:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+
+        &.row_type--TOTAL {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/CustomersBalanceSummary/components.js

@@ -6,6 +6,8 @@ import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 
+import { Align } from 'common';
+
 /**
  * Retrieve customers balance summary columns.
  */
@@ -37,6 +39,7 @@ const totalColumnAccessor = () => ({
   accessor: 'cells[1].value',
   className: 'total',
   width: 140,
+  align: Align.Right,
 });
 
 /**
@@ -47,6 +50,7 @@ const percentageColumnAccessor = () => ({
   accessor: 'cells[2].value',
   className: 'total',
   width: 140,
+  align: Align.Right,
 });
 
 const dynamicColumns = (columns) => {
@@ -54,7 +58,10 @@ const dynamicColumns = (columns) => {
     R.compose(
       R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor),
       R.when(R.pathEq(['key'], 'total'), totalColumnAccessor),
-      R.when(R.pathEq(['key'], 'percentage_of_column'), percentageColumnAccessor),
+      R.when(
+        R.pathEq(['key'], 'percentage_of_column'),
+        percentageColumnAccessor,
+      ),
     ),
   )(columns);
 };

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js

@@ -5,6 +5,7 @@ import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel';
@@ -67,7 +68,7 @@ function CustomersTransactionsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <CustomerTransactionsDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -95,7 +96,7 @@ function CustomersTransactionsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </CustomerTransactionsDrawerHeader>
   );
 }
 
@@ -105,3 +106,9 @@ export default compose(
   })),
   withCustomersTransactionsActions,
 )(CustomersTransactionsHeader);
+
+const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -58,10 +58,10 @@ const CustomersTransactionsDataTable = styled(DataTable)`
   .table {
     .tbody {
       .tr .td {
-        padding-top: 0.2rem;
-        padding-bottom: 0.2rem;
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
       }
-      .tr:not(.no-results) .td {
+      .tr:not(.no-results) .td:not(:first-of-type) {
         border-left: 1px solid #ececec;
       }
       .tr:last-child .td {
@@ -73,6 +73,11 @@ const CustomersTransactionsDataTable = styled(DataTable)`
           .td {
             &.customer_name {
               font-weight: 500;
+
+              .cell-inner {
+                white-space: nowrap;
+                position: relative;
+              }
             }
           }
           &:not(:first-child).is-expanded .td {

src/containers/FinancialStatements/CustomersTransactions/components.js

@@ -3,14 +3,13 @@ import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getForceWidth, getColumnWidth } from 'utils';
+import { getColumnWidth } from 'utils';
 
 import { Align } from 'common';
 
 /**
  * Retrieve customers transactions columns.
  */
-
 export const useCustomersTransactionsColumns = () => {
   const {
     customersTransactions: { tableRows },
@@ -20,16 +19,7 @@ export const useCustomersTransactionsColumns = () => {
     () => [
       {
         Header: intl.get('customer_name'),
-        accessor: ({ cells }) => {
-          return (
-            <span
-              className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].value) }}
-            >
-              {cells[0].value}
-            </span>
-          );
-        },
+        accessor: 'cells[0].value',
         className: 'customer_name',
       },
       {

src/containers/FinancialStatements/FinancialStatementHeader.js

@@ -3,10 +3,15 @@ import classNames from 'classnames';
 import { Position, Drawer } from '@blueprintjs/core';
 import 'style/containers/FinancialStatements/DrawerHeader.scss';
 
+/**
+ * Financial statement header.
+ * @returns {JSX.Element}
+ */
 export default function FinancialStatementHeader({
   children,
   isOpen,
   drawerProps,
+  className,
 }) {
   const timeoutRef = React.useRef();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -42,6 +47,7 @@ export default function FinancialStatementHeader({
         {
           'is-hidden': !isDrawerOpen,
         },
+        className,
       )}
     >
       <Drawer

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -3,6 +3,8 @@ import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -71,7 +73,7 @@ function GeneralLedgerHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <GeneralLedgerDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -105,7 +107,7 @@ function GeneralLedgerHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </GeneralLedgerDrawerHeader>
   );
 }
 
@@ -115,3 +117,9 @@ export default compose(
   })),
   withGeneralLedgerActions,
 )(GeneralLedgerHeader);
+
+const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
 
-import { FinancialSheet, DataTable } from 'components';
+import { FinancialSheet, ReportDataTable } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
 
@@ -66,7 +66,7 @@ export default function GeneralLedgerTable({ companyName }) {
   );
 }
 
-const GeneralLedgerDataTable = styled(DataTable)`
+const GeneralLedgerDataTable = styled(ReportDataTable)`
   .tbody {
     .tr .td {
       padding-top: 0.2rem;
@@ -78,7 +78,7 @@ const GeneralLedgerDataTable = styled(DataTable)`
       }
     }
 
-    .tr:not(.no-results) .td {
+    .tr:not(.no-results) .td:not(:first-of-type) {
       border-left: 1px solid #ececec;
     }
     .tr:last-child .td {
@@ -90,13 +90,13 @@ const GeneralLedgerDataTable = styled(DataTable)`
         .td {
           &.date {
             font-weight: 500;
-          }
 
-          &.name {
-            border-left-color: transparent;
+            .cell-inner {
+              white-space: nowrap;
+              position: relative;
+            }
           }
         }
-
         &:not(:first-child).is-expanded .td {
           border-top: 1px solid #ddd;
         }
@@ -108,7 +108,6 @@ const GeneralLedgerDataTable = styled(DataTable)`
           font-weight: 500;
         }
       }
-
       &--CLOSING_BALANCE {
         .name {
           font-weight: 500;

src/containers/FinancialStatements/GeneralLedger/components.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
-import { ForceWidth, FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 
 import { getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
@@ -23,12 +23,7 @@ export function useGeneralLedgerTableColumns() {
     () => [
       {
         Header: intl.get('date'),
-        accessor: (row) => {
-          if (row.rowType === 'ACCOUNT_ROW') {
-            return <ForceWidth children={row.date} />;
-          }
-          return row.date;
-        },
+        accessor: 'date',
         className: 'date',
         width: 120,
       },

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js

@@ -3,8 +3,10 @@ import * as Yup from 'yup';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
@@ -68,7 +70,7 @@ function InventoryItemDetailsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <InventoryItemDetailsDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -100,7 +102,7 @@ function InventoryItemDetailsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </InventoryItemDetailsDrawerHeader>
   );
 }
 
@@ -110,3 +112,9 @@ export default compose(
   })),
   withInventoryItemDetailsActions,
 )(InventoryItemDetailsHeader);
+
+const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 400px;
+  }
+`;

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js

@@ -2,12 +2,11 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 import { useInventoryItemDetailsColumns } from './components';
 import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
 
 import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
-
 import { TableStyle } from 'common';
 
 /**
@@ -37,6 +36,7 @@ export function InventoryItemDetailsTable({
       loading={isInventoryItemDetailsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}
+      fullWidth={true}
     >
       <InventoryItemDetailsDataTable
         columns={columns}
@@ -53,27 +53,15 @@ export function InventoryItemDetailsTable({
   );
 }
 
-const InventoryItemDetailsDataTable = styled(DataTable)`
+const InventoryItemDetailsDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr .td {
-        padding-top: 0.2rem;
-        padding-bottom: 0.2rem;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-
-        &.date {
-          > div {
-            display: flex;
-          }
-
-          span.force-width {
-            position: relative;
-          }
-        }
+        padding-top: 0.3rem;
+        padding-bottom: 0.3rem;
       }
 
-      .tr:not(.no-results) .td {
+      .tr:not(.no-results) .td:not(:first-of-type) {
         border-left: 1px solid #ececec;
       }
 
@@ -87,8 +75,14 @@ const InventoryItemDetailsDataTable = styled(DataTable)`
             &.transaction_type {
               border-left-color: transparent;
             }
-          }
 
+            &.date {
+              .cell-inner {
+                white-space: nowrap;
+                position: relative;
+              }
+            }
+          }
           &:not(:first-child).is-expanded .td {
             border-top: 1px solid #ddd;
           }

src/containers/FinancialStatements/InventoryItemDetails/utils.js

@@ -1,17 +1,43 @@
 import * as R from 'ramda';
+
 import { getColumnWidth } from 'utils';
-import { CellForceWidth } from '../../../components';
+import { Align } from 'common';
+
+const itemNameOrDateColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+}));
+
+const numericColumn = R.curry((data, index, column) => ({
+  id: column.key,
+  key: column.key,
+  Header: column.label,
+  accessor: `cells[${index}].value`,
+  className: column.key,
+  width: getColumnWidth(data, `cells.${index}.key`, {
+    minWidth: 130,
+    magicSpacing: 10,
+  }),
+  disableSortBy: true,
+  align: Align.Right,
+}));
 
 /**
  *  columns mapper.
  */
-const columnsMapper = (data, index, column) => ({
+const columnsMapper = R.curry((data, index, column) => ({
   id: column.key,
   key: column.key,
   Header: column.label,
-  Cell: CellForceWidth,
   accessor: `cells[${index}].value`,
-  forceWidthAccess: `cells[0].value`,
   className: column.key,
   width: getColumnWidth(data, `cells.${index}.key`, {
     minWidth: 130,
@@ -19,7 +45,7 @@ const columnsMapper = (data, index, column) => ({
   }),
   disableSortBy: true,
   textOverview: true,
-});
+}));
 
 /**
  * Inventory item details columns.
@@ -27,7 +53,17 @@ const columnsMapper = (data, index, column) => ({
 export const dynamicColumns = (columns, data) => {
   const mapper = (column, index) => {
     return R.compose(
-      R.when(R.pathEq(['key']), R.curry(columnsMapper)(data, index)),
+      R.cond([
+        [R.pathEq(['key'], 'date'), itemNameOrDateColumn(data, index)],
+        [R.pathEq(['key'], 'running_quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'profit_margin'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'running_value'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'quantity'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'rate'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'total'), numericColumn(data, index)],
+        [R.pathEq(['key'], 'value'), numericColumn(data, index)],
+        [R.T, columnsMapper(data, index)],
+      ]),
     )(column);
   };
   return columns.map(mapper);

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel';
@@ -68,7 +70,7 @@ function InventoryValuationHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <InventoryValuationDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -100,7 +102,7 @@ function InventoryValuationHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </InventoryValuationDrawerHeader>
   );
 }
 
@@ -110,3 +112,9 @@ export default compose(
   })),
   withInventoryValuationActions,
 )(InventoryValuationHeader);
+
+const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import { useInventoryValuationTableColumns } from './components';
@@ -54,7 +54,7 @@ const InventoryValuationSheet = styled(FinancialSheet)`
   min-width: 850px;
 `;
 
-const InventoryValuationDataTable = styled(DataTable)`
+const InventoryValuationDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr .td {

src/containers/FinancialStatements/Journal/JournalHeader.js

@@ -3,6 +3,8 @@ import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
 import * as Yup from 'yup';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
@@ -56,7 +58,7 @@ function JournalHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <JournalDrawerHeader
       isOpen={journalSheetDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -89,7 +91,7 @@ function JournalHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </JournalDrawerHeader>
   );
 }
 
@@ -99,3 +101,9 @@ export default compose(
   })),
   withJournalActions,
 )(JournalHeader);
+
+const JournalDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 350px;
+  }
+`;

src/containers/FinancialStatements/Journal/JournalTable.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
 
@@ -60,7 +60,7 @@ export function JournalTable({ companyName }) {
   );
 }
 
-const JournalDataTable = styled(DataTable)`
+const JournalDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr:not(.no-results) .td {

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 import { Formik, Form } from 'formik';
 import * as R from 'ramda';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import { FormattedMessage as T } from 'components';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -54,7 +55,7 @@ function ProfitLossHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <ProfitLossSheetHeader
       isOpen={profitLossDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -92,7 +93,7 @@ function ProfitLossHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </ProfitLossSheetHeader>
   );
 }
 
@@ -102,3 +103,9 @@ export default R.compose(
   })),
   withProfitLossActions,
 )(ProfitLossHeader);
+
+const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -2,7 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { TableStyle } from 'common';
-import { DataTable, FinancialSheet, FormattedMessage as T } from 'components';
+import {
+  ReportDataTable,
+  FinancialSheet,
+  FormattedMessage as T,
+} from 'components';
 
 import { tableRowTypesToClassnames, defaultExpanderReducer } from 'utils';
 import { useProfitLossSheetColumns } from './hooks';
@@ -49,7 +53,7 @@ export default function ProfitLossSheetTable({
   );
 }
 
-const ProfitLossDataTable = styled(DataTable)`
+const ProfitLossDataTable = styled(ReportDataTable)`
   .table {
     .tbody .tr {
       .td {

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel';
@@ -36,7 +38,6 @@ function PurchasesByItemsHeader({
       .required()
       .label(intl.get('to_date')),
   });
-
   // Default form values.
   const defaultValues = {
     ...pageFilter,
@@ -68,7 +69,7 @@ function PurchasesByItemsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <PurchasesByItemsDrawerHeader
       isOpen={purchasesByItemsDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -95,7 +96,7 @@ function PurchasesByItemsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </PurchasesByItemsDrawerHeader>
   );
 }
 
@@ -105,3 +106,9 @@ export default compose(
   })),
   withPurchasesByItemsActions,
 )(PurchasesByItemsHeader);
+
+const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
 import { usePurchasesByItemsTableColumns } from './components';
@@ -50,7 +50,7 @@ const PurchasesByItemsSheet = styled(FinancialSheet)`
   min-width: 850px;
 `;
 
-const PurchasesByItemsDataTable = styled(DataTable)`
+const PurchasesByItemsDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr .td {

src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import SalesByItemsHeaderGeneralPanel from './SalesByItemsHeaderGeneralPanel';
@@ -61,7 +63,7 @@ function SalesByItemsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <SalesByItemsDrawerHeader
       isOpen={salesByItemsDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -88,7 +90,7 @@ function SalesByItemsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </SalesByItemsDrawerHeader>
   );
 }
 
@@ -98,3 +100,9 @@ export default compose(
   })),
   withSalesByItemsActions,
 )(SalesByItemsHeader);
+
+const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import { useSalesByItemsTableColumns } from './components';
@@ -52,7 +52,7 @@ const SalesByItemsSheet = styled(FinancialSheet)`
   min-width: 850px;
 `;
 
-const SalesByItemsDataTable = styled(DataTable)`
+const SalesByItemsDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr .td {

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -22,9 +22,6 @@ import { compose } from 'utils';
  * Trial balance sheet.
  */
 function TrialBalanceSheet({
-  // #withPreferences
-  organizationName,
-
   // #withTrialBalanceSheetActions
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
@@ -44,7 +41,6 @@ function TrialBalanceSheet({
     },
     [setFilter],
   );
-
   // Handle numebr format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
+import intl from 'react-intl-universal';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGeneralPanel';
@@ -72,7 +74,7 @@ function TrialBalanceSheetHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <TrialBalanceSheetDrawerHeader
       isOpen={trialBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -105,7 +107,7 @@ function TrialBalanceSheetHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </TrialBalanceSheetDrawerHeader>
   );
 }
 
@@ -115,3 +117,9 @@ export default compose(
   })),
   withTrialBalanceActions,
 )(TrialBalanceSheetHeader);
+
+const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -2,7 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { useTrialBalanceTableColumns } from './components';
@@ -47,7 +47,7 @@ export default function TrialBalanceSheetTable({ companyName }) {
   );
 }
 
-const TrialBalanceDataTable = styled(DataTable)`
+const TrialBalanceDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr .td {

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js

@@ -13,6 +13,7 @@ import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
+import { TableStyle } from 'common';
 import { getDefaultVendorsBalanceQuery } from './utils';
 import { compose } from 'utils';
 

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js

@@ -3,6 +3,8 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -61,7 +63,7 @@ function VendorsBalanceSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <VendorBalanceDrawerHeader
       isOpen={VendorsSummaryFilterDrawer}
       drawerProps={{ onClose: handleCancelClick }}
     >
@@ -88,7 +90,7 @@ function VendorsBalanceSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </VendorBalanceDrawerHeader>
   );
 }
 
@@ -98,3 +100,9 @@ export default compose(
   })),
   withVendorsBalanceSummaryActions,
 )(VendorsBalanceSummaryHeader);
+
+const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;

src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js

@@ -2,11 +2,12 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { ReportDataTable, FinancialSheet } from 'components';
 
 import { useVendorsBalanceColumns } from './components';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
+import { TableStyle } from 'common';
 import { tableRowTypesToClassnames } from 'utils';
 
 /**
@@ -34,6 +35,7 @@ export default function VendorsBalanceSummaryTable({
         data={table.data}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
+        styleName={TableStyle.Constrant}
       />
     </VendorBalanceFinancialSheet>
   );
@@ -41,7 +43,7 @@ export default function VendorsBalanceSummaryTable({
 
 const VendorBalanceFinancialSheet = styled(FinancialSheet)``;
 
-const VendorBalanceDataTable = styled(DataTable)`
+const VendorBalanceDataTable = styled(ReportDataTable)`
   .table {
     .tbody {
       .tr:not(.no-results) {
@@ -51,7 +53,7 @@ const VendorBalanceDataTable = styled(DataTable)`
           padding-bottom: 0.4rem;
         }
 
-        &.row-type--TOTAL {
+        &.row_type--TOTAL {
           font-weight: 500;
 
           .td {

src/containers/FinancialStatements/VendorsBalanceSummary/components.js

@@ -6,6 +6,8 @@ import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
+import { Align } from 'common';
+
 /**
  * Retrieve vendors balance summary columns.
  */
@@ -39,8 +41,8 @@ const percentageColumnAccessor = () => ({
   accessor: 'cells[2].value',
   className: 'total',
   width: 140,
-  align: 'right',
   textOverview: true,
+  align: Align.Right,
 });
 
 /**
@@ -51,8 +53,8 @@ const totalColumnAccessor = () => ({
   accessor: 'cells[1].value',
   className: 'total',
   width: 140,
-  align: 'right',
   textOverview: true,
+  align: Align.Right,
 });
 
 /**

src/containers/FinancialStatements/VendorsTransactions/components.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+
 import { If } from 'components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getColumnWidth, getForceWidth } from 'utils';
+import { getColumnWidth } from 'utils';
 
 /**
  * Retrieve vendors transactions columns.
@@ -17,19 +18,8 @@ export const useVendorsTransactionsColumns = () => {
     () => [
       {
         Header: intl.get('vendor_name'),
-        accessor: ({ cells }) => {
-          return (
-            <span
-              className={'force-width'}
-              style={{ minWidth: getForceWidth(cells[0].value) }}
-            >
-              {cells[0].value}
-            </span>
-          );
-        },
+        accessor: 'cells[0].value',
         className: 'vendor_name',
-        // textOverview: true,
-        // width: 240,
       },
       {
         Header: intl.get('account_name'),

src/containers/Subscriptions/BillingPaymentMethod.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { T } from 'components';
+import { PaymentMethodTabs } from './SubscriptionTabs';
+
+export default ({ formik, title, description }) => {
+  return (
+    <section class="billing-plans__section">
+      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
+      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
+
+      <PaymentMethodTabs formik={formik} />
+    </section>
+  );
+};

src/containers/Subscriptions/BillingPlansForm.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import * as R from 'ramda';
 
 import 'style/pages/Subscription/BillingPlans.scss';
 
 import BillingPlansInput from './BillingPlansInput';
 import BillingPeriodsInput from './BillingPeriodsInput';
-// import BillingPaymentMethod from './BillingPaymentMethod';
+import BillingPaymentMethod from './BillingPaymentMethod';
+
+import withSubscriptions from './withSubscriptions';
 
 /**
  * Billing plans form.
@@ -14,7 +17,24 @@ export default function BillingPlansForm() {
     <div class="billing-plans">
       <BillingPlansInput />
       <BillingPeriodsInput />
-      {/* <BillingPaymentMethod /> */}
+      <BillingPaymentMethodWhenSubscriptionInactive />
     </div>
   );
 }
+
+/**
+ * Billing payment methods when subscription is inactive.
+ * @returns {JSX.Element}
+ */
+function BillingPaymentMethodWhenSubscriptionInactiveJSX({
+  // # withSubscriptions
+  isSubscriptionActive,
+
+  ...props
+}) {
+  return !isSubscriptionActive ? <BillingPaymentMethod {...props} /> : null;
+}
+
+const BillingPaymentMethodWhenSubscriptionInactive = R.compose(
+  withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })),
+)(BillingPaymentMethodWhenSubscriptionInactiveJSX);