feat: CellForceWidth component.

package.json

@@ -103,6 +103,7 @@
     "sass-loader": "8.0.2",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
+    "styled-components": "^5.3.1",
     "terser-webpack-plugin": "2.3.4",
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",

src/components/Button/ButtonLink.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Button } from '@blueprintjs/core';
+
+export const ButtonLink = styled(Button)`
+  line-height: inherit;
+
+  &.bp3-small {
+    min-height: auto;
+    min-width: auto;
+    padding: 0;
+  }
+  &:not([class*='bp3-intent-']) {
+    &,
+    &:hover {
+      color: #0052cc;
+      background: transparent;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;

src/components/Button/index.js

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

src/components/Datatable/CellForceWidth.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { get } from 'lodash';
+
+import { getForceWidth } from 'utils';
+
+export function CellForceWidth({
+  value,
+  column: { forceWidthAccess },
+  row: { original },
+}) {
+  const forceWidthValue = forceWidthAccess
+    ? get(original, forceWidthAccess)
+    : value;
+
+  return <ForceWidth forceValue={forceWidthValue}>{value}</ForceWidth>;
+}
+
+export function ForceWidth({ children, forceValue }) {
+  const forceWidthValue = forceValue || children;
+
+  return (
+    <span
+      className={'force-width'}
+      style={{ minWidth: getForceWidth(forceWidthValue) }}
+    >
+      {children}
+    </span>
+  );
+}

src/components/Datatable/index.js

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

src/components/FormattedMessage.js

@@ -1,7 +1,7 @@
 import intl from 'react-intl-universal';
 
-export function FormattedMessage({ id }) {
-  return intl.get(id);
+export function FormattedMessage({ id, values }) {
+  return intl.get(id, values);
 }
 
 export function FormattedHTMLMessage({ ...args }) {

src/components/index.js

@@ -83,6 +83,8 @@ export * from './Utils/FormatNumber';
 export * from './Utils/FormatDate';
 export * from './BankAccounts';
 export * from './IntersectionObserver'
+export * from './Datatable/CellForceWidth';
+export * from './Button';
 
 const Hint = FieldHint;
 

src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

@@ -22,13 +22,13 @@ export const usePaymentMadeEntriesColumns = () =>
     },
     {
       Header: intl.get('bill_amount'),
-      accessor: 'amount',
+      accessor: 'bill.amount',
       Cell: FormatNumberCell,
       align: 'right',
     },
     {
       Header: intl.get('due_amount'),
-      accessor: 'due_amount',
+      accessor: 'bill.due_amount',
       Cell: FormatNumberCell,
       width: 100,
       disableSortBy: true,