From f8143742798be6bad6a04b29f72ef2a4fc1ed5e4 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Wed, 2 Mar 2022 14:23:28 +0200
Subject: [PATCH] feat(invoicedetail ): Add branch name to detial.

---
 src/components/Drawer/DrawerHeaderContent.js  | 21 +++++++++++++++++--
 .../InvoiceDetailDrawerProvider.js            |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Drawer/DrawerHeaderContent.js b/src/components/Drawer/DrawerHeaderContent.js
index ff506c267..634e8786b 100644
--- a/src/components/Drawer/DrawerHeaderContent.js
+++ b/src/components/Drawer/DrawerHeaderContent.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { FeatureCan, FormattedMessage as T } from 'components';
 import { Classes, Icon, H4, Button } from '@blueprintjs/core';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import styled from 'styled-components';
+import { Features } from 'common';
 import { compose } from 'utils';
 
 /**
@@ -13,6 +15,7 @@ function DrawerHeaderContent(props) {
   const {
     icon,
     title = <T id={'view_paper'} />,
+    subTitle,
     onClose,
     name,
     closeDrawer,
@@ -30,7 +33,12 @@ function DrawerHeaderContent(props) {
   return (
     <div className={Classes.DRAWER_HEADER}>
       <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
-      <H4>{title}</H4>
+      <H4>
+        {title}
+        <FeatureCan feature={Features.Branches}>
+          <Subtitle>{subTitle}</Subtitle>
+        </FeatureCan>
+      </H4>
 
       <Button
         aria-label="Close"
@@ -44,3 +52,12 @@ function DrawerHeaderContent(props) {
 }
 
 export default compose(withDrawerActions)(DrawerHeaderContent);
+
+const Subtitle = styled.div`
+  color: #666;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  padding: 2px 0px;
+  margin: 2px 0px;
+`;
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index fa5a342d9..9e6e7631d 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -25,6 +25,7 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
         title={intl.get('invoice_details.drawer.title', {
           invoiceNumber: invoice.invoice_no,
         })}
+        subTitle={`Branch: ${invoice.branch?.name}`}
       />
       <InvoiceDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>