From 2db32b8ee85769da6d92a92fe58e8b39f307c646 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 30 Mar 2022 17:17:23 +0200
Subject: [PATCH] BIG-141: add inactive status to item details.

---
 .../ItemDetailDrawerProvider.js               |  6 ++++-
 .../Drawers/ItemDetailDrawer/utlis.js         | 27 +++++++++++++++++++
 src/lang/ar/index.json                        |  3 ++-
 src/lang/en/index.json                        |  3 ++-
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/utlis.js

diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
index c748e559b..fa811cf1d 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useItem } from 'hooks/query';
+import { inactiveStatus } from './utlis';
 
 const ItemDetailDrawerContext = React.createContext();
 
@@ -27,7 +28,10 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
 
   return (
     <DrawerLoading loading={isItemLoading}>
-      <DrawerHeaderContent name="item-detail-drawer" title={item?.name} />
+      <DrawerHeaderContent
+        name="item-detail-drawer"
+        title={inactiveStatus(item)}
+      />
       <ItemDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
   );
diff --git a/src/containers/Drawers/ItemDetailDrawer/utlis.js b/src/containers/Drawers/ItemDetailDrawer/utlis.js
new file mode 100644
index 000000000..72b46fe3d
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/utlis.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Intent, Tag } from '@blueprintjs/core';
+import { Choose, FormattedMessage as T } from '../../../components';
+
+/**
+ * items inactive status.
+ * @returns {React.JSX}
+ */
+export function inactiveStatus(item) {
+  return (
+    <Choose>
+      <Choose.When condition={!item.active}>
+        {item.name}
+        <StatusTag intent={Intent.NONE} minimal={true} round={true}>
+          <T id={'item.details.inactive'} />
+        </StatusTag>
+      </Choose.When>
+      <Choose.Otherwise>{item.name}</Choose.Otherwise>
+    </Choose>
+  );
+}
+
+const StatusTag = styled(Tag)`
+  font-size: 11px;
+  margin-left: 10px;
+`;
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 9d09a3bff..2e870609f 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -2013,5 +2013,6 @@
   "estimate.validation.expiration_date": "يجب أن يكون حقل {path} في وقت لاحق من {min}",
   "make_journal.entries.remove_row": "حذف الصف",
   "expense.entries.remove_row": "حذف الصف",
-  "warehouse_transfer.entries.remove_row": "حذف الصف"
+  "warehouse_transfer.entries.remove_row": "حذف الصف",
+  "item.details.inactive": "غير نشط"
 }
\ No newline at end of file
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index dbd9b1e32..664036468 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -2013,5 +2013,6 @@
   "estimate.validation.expiration_date": "{path} field must be later than {min}",
   "make_journal.entries.remove_row": "Remove line",
   "expense.entries.remove_row": "Remove line",
-  "warehouse_transfer.entries.remove_row": "Remove line"
+  "warehouse_transfer.entries.remove_row": "Remove line",
+  "item.details.inactive": "Inactive"
 }
\ No newline at end of file