From a456b9d9420ba676cf1bd1ebf3c5fde8c61833da Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Tue, 21 Dec 2021 18:10:58 +0200
Subject: [PATCH] feat: optimize expense and manual journal details status.

---
 .../Accounting/JournalsLanding/components.js  |  4 +-
 .../ExpenseDrawer/ExpenseDrawerHeader.js      | 13 +++++++
 .../Drawers/ExpenseDrawer/components.js       | 20 ++++++++++
 .../ManualJournalDrawerHeader.js              | 37 +++++++++++--------
 .../Drawers/ManualJournalDrawer/utils.js      | 25 ++++++++++++-
 5 files changed, 79 insertions(+), 20 deletions(-)
 create mode 100644 src/containers/Drawers/ExpenseDrawer/components.js

diff --git a/src/containers/Accounting/JournalsLanding/components.js b/src/containers/Accounting/JournalsLanding/components.js
index fab711e72..79207ca15 100644
--- a/src/containers/Accounting/JournalsLanding/components.js
+++ b/src/containers/Accounting/JournalsLanding/components.js
@@ -101,13 +101,13 @@ export const StatusAccessor = (row) => {
   return (
     <Choose>
       <Choose.When condition={!!row.is_published}>
-        <Tag minimal={true}>
+        <Tag minimal={true} round={true}>
           <T id={'published'} />
         </Tag>
       </Choose.When>
 
       <Choose.Otherwise>
-        <Tag minimal={true} intent={Intent.WARNING}>
+        <Tag minimal={true} intent={Intent.WARNING} round={true}>
           <T id={'draft'} />
         </Tag>
       </Choose.Otherwise>
diff --git a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index dac4c099c..e73f60261 100644
--- a/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { defaultTo } from 'lodash';
+import styled from 'styled-components';
 
 import {
   CommercialDocHeader,
@@ -13,6 +14,7 @@ import {
   FormattedMessage as T,
 } from 'components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+import { ExpenseDetailsStatus } from './components';
 
 /**
  * Expense drawer content.
@@ -32,6 +34,10 @@ export default function ExpenseDrawerHeader() {
               />
             </h3>
           </DetailItem>
+
+          <StatusDetailItem>
+            <ExpenseDetailsStatus expense={expense} />
+          </StatusDetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
 
@@ -68,3 +74,10 @@ export default function ExpenseDrawerHeader() {
     </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
diff --git a/src/containers/Drawers/ExpenseDrawer/components.js b/src/containers/Drawers/ExpenseDrawer/components.js
new file mode 100644
index 000000000..be4e2738f
--- /dev/null
+++ b/src/containers/Drawers/ExpenseDrawer/components.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tag, Intent } from '@blueprintjs/core';
+
+import { T } from 'components';
+
+/**
+ * Expense details status.
+ * @returns {React.JSX}
+ */
+export function ExpenseDetailsStatus({ expense }) {
+  return expense.is_published ? (
+    <Tag round={true} minimal={true}>
+      <T id={'published'} />
+    </Tag>
+  ) : (
+    <Tag round={true} intent={Intent.WARNING}>
+      <T id={'draft'} />
+    </Tag>
+  );
+}
diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
index f4415d331..c31873726 100644
--- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import { defaultTo } from 'lodash';
+import styled from 'styled-components';
+
 import {
   Row,
   Col,
@@ -9,30 +11,26 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
+import { ManualJournalDetailsStatus } from './utils';
 import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
 
 /**
  * Manual journal details header.
  */
 export default function ManualJournalDrawerHeader() {
-  const {
-    manualJournal: {
-      formatted_amount,
-      journal_type,
-      journal_number,
-      reference,
-      currency_code,
-      description,
-    },
-  } = useManualJournalDrawerContext();
+  const { manualJournal } = useManualJournalDrawerContext();
 
   return (
     <CommercialDocHeader>
       <CommercialDocTopHeader>
         <DetailsMenu>
           <DetailItem name={'total'} label={<T id={'total'} />}>
-            <h3 class="big-number">{formatted_amount}</h3>
+            <h3 class="big-number">{manualJournal.formatted_amount}</h3>
           </DetailItem>
+
+          <StatusDetailItem>
+            <ManualJournalDetailsStatus manualJournal={manualJournal} />
+          </StatusDetailItem>
         </DetailsMenu>
       </CommercialDocTopHeader>
 
@@ -40,23 +38,23 @@ export default function ManualJournalDrawerHeader() {
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
             <DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
-              {journal_type}
+              {manualJournal.journal_type}
             </DetailItem>
 
             <DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
-              {journal_number}
+              {manualJournal.journal_number}
             </DetailItem>
 
             <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
-              {defaultTo(reference, '-')}
+              {defaultTo(manualJournal.reference, '-')}
             </DetailItem>
 
             <DetailItem name={'currency'} label={<T id={'currency'} />}>
-              {currency_code}
+              {manualJournal.currency_code}
             </DetailItem>
 
             <DetailItem label={<T id={'description'} />}>
-              {defaultTo(description, '—')}
+              {defaultTo(manualJournal.description, '—')}
             </DetailItem>
           </DetailsMenu>
         </Col>
@@ -64,3 +62,10 @@ export default function ManualJournalDrawerHeader() {
     </CommercialDocHeader>
   );
 }
+
+const StatusDetailItem = styled(DetailItem)`
+  width: 50%;
+  text-align: right;
+  position: relative;
+  top: -5px;
+`;
diff --git a/src/containers/Drawers/ManualJournalDrawer/utils.js b/src/containers/Drawers/ManualJournalDrawer/utils.js
index 1d2a1f5c1..944c4f784 100644
--- a/src/containers/Drawers/ManualJournalDrawer/utils.js
+++ b/src/containers/Drawers/ManualJournalDrawer/utils.js
@@ -1,8 +1,8 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
+import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import { FormatNumberCell, If, Icon } from '../../../components';
+import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
 
 /**
  * Note column accessor.
@@ -22,6 +22,27 @@ export function NoteAccessor(row) {
   );
 }
 
+/**
+ * Publish column accessor.
+ */
+export function ManualJournalDetailsStatus({ manualJournal }) {
+  return (
+    <Choose>
+      <Choose.When condition={!!manualJournal.is_published}>
+        <Tag minimal={true} round={true}>
+          <T id={'published'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag intent={Intent.WARNING} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
 /**
  * Retrieve read-only manual journal entries columns.
  */