From 24bd754c72e74704b55c6641783273971fea4d57 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 1 Nov 2021 09:34:58 +0200
Subject: [PATCH] feat: CellForceWidth component.

---
 package.json                                  |  1 +
 src/components/Button/ButtonLink.js           | 23 +++++++++++++++
 src/components/Button/index.js                |  3 ++
 src/components/Datatable/CellForceWidth.js    | 29 +++++++++++++++++++
 src/components/Datatable/index.js             |  4 +++
 src/components/FormattedMessage.js            |  4 +--
 src/components/index.js                       |  2 ++
 .../Drawers/PaymentMadeDetailDrawer/utils.js  |  4 +--
 8 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Button/ButtonLink.js
 create mode 100644 src/components/Button/index.js
 create mode 100644 src/components/Datatable/CellForceWidth.js
 create mode 100644 src/components/Datatable/index.js

diff --git a/package.json b/package.json
index c2664c173..bd109512b 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Button/ButtonLink.js b/src/components/Button/ButtonLink.js
new file mode 100644
index 000000000..9b9cb7b5b
--- /dev/null
+++ b/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;
+    }
+  }
+`;
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 000000000..f7960939a
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1,3 @@
+
+
+export * from './ButtonLink';
\ No newline at end of file
diff --git a/src/components/Datatable/CellForceWidth.js b/src/components/Datatable/CellForceWidth.js
new file mode 100644
index 000000000..966157234
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Datatable/index.js b/src/components/Datatable/index.js
new file mode 100644
index 000000000..b09d8bb8f
--- /dev/null
+++ b/src/components/Datatable/index.js
@@ -0,0 +1,4 @@
+
+
+
+export * from './CellForceWidth';
\ No newline at end of file
diff --git a/src/components/FormattedMessage.js b/src/components/FormattedMessage.js
index 1c181c832..6c3238952 100644
--- a/src/components/FormattedMessage.js
+++ b/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 }) {
diff --git a/src/components/index.js b/src/components/index.js
index 6d78330e3..34388e246 100644
--- a/src/components/index.js
+++ b/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;
 
diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js b/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
index f0bdab8a2..4698f1ead 100644
--- a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
+++ b/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,