BIG-344: add branch to manual journal & expense.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js

@@ -1,6 +1,9 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { useExpense } from 'hooks/query';
-import { DrawerLoading } from 'components';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const ExpenseDrawerDrawerContext = React.createContext();
 
@@ -8,6 +11,9 @@ const ExpenseDrawerDrawerContext = React.createContext();
  * Expense drawer provider.
  */
 function ExpenseDrawerProvider({ expenseId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Fetch the expense details.
   const {
     data: expense,
@@ -28,6 +34,17 @@ function ExpenseDrawerProvider({ expenseId, ...props }) {
 
   return (
     <DrawerLoading loading={isExpenseLoading}>
+      <DrawerHeaderContent
+        name="expense-drawer"
+        title={intl.get('expense.drawer.title')}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('expense.drawer.subtitle', {
+                value: expense.branch?.name,
+              })
+            : null
+        }
+      />
       <ExpenseDrawerDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>
   );

src/containers/Drawers/ExpenseDrawer/index.js

@@ -1,6 +1,4 @@
 import React, { lazy } from 'react';
-import intl from 'react-intl-universal';
-
 import { Drawer, DrawerSuspense } from 'components';
 import withDrawers from 'containers/Drawer/withDrawers';
 
@@ -22,7 +20,6 @@ function ExpenseDrawer({
     <Drawer
       isOpen={isOpen}
       name={name}
-      title={intl.get('expense.drawer.title')}
       size={'65%'}
       style={{ minWidth: '700px', maxWidth: '900px' }}
     >

src/containers/Drawers/ManualJournalDrawer/utils.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core';
 
 import { T, Choose, FormatNumberCell, If, Icon } from '../../../components';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 /**
  * Note column accessor.
@@ -46,8 +48,9 @@ export function ManualJournalDetailsStatus({ manualJournal }) {
 /**
  * Retrieve read-only manual journal entries columns.
  */
-export const useManualJournalEntriesColumns = () =>
-  React.useMemo(
+export const useManualJournalEntriesColumns = () => {
+  const { featureCan } = useFeatureCan();
+  return React.useMemo(
     () => [
       {
         Header: intl.get('account_name'),
@@ -70,6 +73,17 @@ export const useManualJournalEntriesColumns = () =>
         disableSortBy: true,
         className: 'note',
       },
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('branch'),
+              width: 130,
+              accessor: 'branch.name',
+              disableSortBy: true,
+              className: 'branch',
+            },
+          ]
+        : []),
       {
         Header: intl.get('credit'),
         accessor: 'credit',
@@ -93,5 +107,6 @@ export const useManualJournalEntriesColumns = () =>
         align: 'right',
       },
     ],
-    [],
+    [featureCan],
   );
+};