From cc457e1e4368dfcd12f20688bd397501270bd308 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 9 Apr 2022 00:42:34 +0200
Subject: [PATCH] feat: estimate tooltip.

---
 .../Drawers/EstimateDetailDrawer/utils.js     | 109 +++++++++++-------
 1 file changed, 68 insertions(+), 41 deletions(-)

diff --git a/src/containers/Drawers/EstimateDetailDrawer/utils.js b/src/containers/Drawers/EstimateDetailDrawer/utils.js
index 830c256d6..95ed29fe3 100644
--- a/src/containers/Drawers/EstimateDetailDrawer/utils.js
+++ b/src/containers/Drawers/EstimateDetailDrawer/utils.js
@@ -1,47 +1,74 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { getColumnWidth } from 'utils';
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**
  * Retrieve table columns of estimate readonly entries details.
  */
-export const useEstimateReadonlyEntriesColumns = () =>
-  React.useMemo(() => [
-    {
-      Header: intl.get('product_and_service'),
-      accessor: 'item.name',
-      width: 150,
-      className: 'name',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('description'),
-      accessor: 'description',
-      className: 'description',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('quantity'),
-      accessor: 'quantity',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('rate'),
-      accessor: 'rate',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      Cell: FormatNumberCell,
-      width: 100,
-      align: 'right',
-      disableSortBy: true,
-    },
-  ], []);
+export const useEstimateReadonlyEntriesColumns = () => {
+  // estimate details drawer context.
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('product_and_service'),
+        accessor: 'item.name',
+        Cell: TextOverviewTooltipCell,
+        width: 150,
+        className: 'name',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        Cell: TextOverviewTooltipCell,
+        className: 'description',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+        disableSortBy: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};