feat( S&P ): add branch name to details.

src/components/Drawer/DrawerHeaderContent.js

@@ -34,7 +34,7 @@ function DrawerHeaderContent(props) {
       <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
       <H4>
         {title}
-        <Subtitle>{subTitle}</Subtitle>
+        <SubTitle>{subTitle}</SubTitle>
       </H4>
 
       <Button
@@ -50,7 +50,19 @@ function DrawerHeaderContent(props) {
 
 export default compose(withDrawerActions)(DrawerHeaderContent);
 
-const Subtitle = styled.div`
+/**
+ * SubTitle Drawer header.
+ * @returns {React.JSX}
+ */
+function SubTitle({ children }) {
+  if (children == null) {
+    return null;
+  }
+
+  return <SubTitleHead>{children}</SubTitleHead>;
+}
+
+const SubTitleHead = styled.div`
   color: #666;
   font-size: 12px;
   font-weight: 400;

src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useBill, useBillLocatedLandedCost } from 'hooks/query';
+import { useFeatureCan } from 'hooks/state';
+import { Features } from 'common';
 
 const BillDrawerContext = React.createContext();
 
@@ -9,6 +11,9 @@ const BillDrawerContext = React.createContext();
  * Bill drawer provider.
  */
 function BillDrawerProvider({ billId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
@@ -36,6 +41,13 @@ function BillDrawerProvider({ billId, ...props }) {
         title={intl.get('bill.drawer.title', {
           number: bill.bill_number ? `(${bill.bill_number})` : null,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('bill.drawer.subtitle', {
+                value: bill.branch?.name,
+              })
+            : null
+        }
       />
       <BillDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -7,6 +7,8 @@ import {
   useReconcileCreditNotes,
 } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const CreditNoteDetailDrawerContext = React.createContext();
 
@@ -14,6 +16,9 @@ const CreditNoteDetailDrawerContext = React.createContext();
  * Credit note detail drawer provider.
  */
 function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  
   // Handle fetch vendor credit details.
   const { data: creditNote, isLoading: isCreditNoteLoading } = useCreditNote(
     creditNoteId,
@@ -70,6 +75,13 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
         title={intl.get('credit_note.drawer.title', {
           number: creditNote.credit_note_number,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('credit_note.drawer.subtitle', {
+                value: creditNote.branch?.name,
+              })
+            : null
+        }
       />
       <CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js

@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { useEstimate } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const EstimateDetailDrawerContext = React.createContext();
 
@@ -9,6 +11,9 @@ const EstimateDetailDrawerContext = React.createContext();
  * Estimate detail provider.
  */
 function EstimateDetailDrawerProvider({ estimateId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Fetches the estimate by the given id.
   const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
     estimateId,
@@ -27,6 +32,13 @@ function EstimateDetailDrawerProvider({ estimateId, ...props }) {
         title={intl.get('estimate.drawer.title', {
           number: estimate.estimate_number,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('estimate.drawer.subtitle', {
+                value: estimate.branch?.name,
+              })
+            : null
+        }
       />
       <EstimateDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -18,8 +18,6 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     enabled: !!invoiceId,
   });
 
-  // const isFeatureCan = featureCan(Features.Branches);
-
   // Provider.
   const provider = {
     invoiceId,

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
-import {
+import { usePaymentMade } from 'hooks/query';
-  useTransactionsByReference,
+import { useFeatureCan } from 'hooks/state';
-  usePaymentMade,
+import { Features } from 'common';
-  usePaymentMadeEditPage,
-} from 'hooks/query';
 
 const PaymentMadeDetailContext = React.createContext();
 
@@ -13,6 +11,9 @@ const PaymentMadeDetailContext = React.createContext();
  * Payment made detail provider.
  */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Handle fetch specific payment made details.
   const { data: paymentMade, isLoading: isPaymentMadeLoading } = usePaymentMade(
     paymentMadeId,
@@ -37,6 +38,13 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
             ? `(${paymentMade.payment_number})`
             : '',
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('payment_made.drawer.subtitle', {
+                value: paymentMade.branch?.name,
+              })
+            : null
+        }
       />
       <PaymentMadeDetailContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js

@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { usePaymentReceive } from 'hooks/query';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const PaymentReceiveDetailContext = React.createContext();
 
@@ -9,6 +11,9 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Fetches specific payment receive details.
   const {
     data: paymentReceive,
@@ -32,6 +37,13 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
         title={intl.get('payment_receive.drawer.title', {
           number: paymentReceive.payment_receive_no,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('payment_receive.drawer.subtitle', {
+                value: paymentReceive.branch?.name,
+              })
+            : null
+        }
       />
       <PaymentReceiveDetailContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js

@@ -2,6 +2,8 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 import { useReceipt } from 'hooks/query';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 // useTransactionsByReference
 const ReceiptDetailDrawerContext = React.createContext();
@@ -10,6 +12,9 @@ const ReceiptDetailDrawerContext = React.createContext();
  * Receipt detail provider.
  */
 function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Fetch sale receipt details.
   const { data: receipt, isFetching: isReceiptLoading } = useReceipt(
     receiptId,
@@ -31,6 +36,13 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
         title={intl.get('receipt.drawer.title', {
           number: receipt.receipt_number,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('receipt.drawer.subtitle', {
+                value: receipt.branch?.name,
+              })
+            : null
+        }
       />
       <ReceiptDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js

@@ -6,6 +6,8 @@ import {
   useReconcileVendorCredits,
 } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useFeatureCan } from 'hooks/state';
+import { Features } from 'common';
 
 const VendorCreditDetailDrawerContext = React.createContext();
 
@@ -13,6 +15,9 @@ const VendorCreditDetailDrawerContext = React.createContext();
  * Vendor credit drawer provider.
  */
 function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
   // Handle fetch vendor credit details.
   const { data: vendorCredit, isLoading: isVendorCreditLoading } =
     useVendorCredit(vendorCreditId, {
@@ -59,6 +64,13 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
         title={intl.get('vendor_credit.drawer_vendor_credit_detail', {
           vendorNumber: vendorCredit.vendor_credit_number,
         })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('vendor_credit.drawer.subtitle', {
+                value: vendorCredit.branch?.name,
+              })
+            : null
+        }
       />
       <VendorCreditDetailDrawerContext.Provider value={provider} {...props} />
     </DrawerLoading>

src/lang/en/index.json

@@ -915,7 +915,6 @@
   "due_amount": "Due Amount",
   "invoice_details.drawer.title": "Invoice details ({invoiceNumber})",
   "invoice_details.drawer.subtitle": "Branch: {value}",
-
   "setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
   "setting_your_auto_generated_journal_number": "Setting your auto-generated journal number",
   "setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",
@@ -1226,6 +1225,7 @@
   "invoice.details.invoice_no": "Invoice #",
   "invoice.details.exchange_rate": "Exchange rate",
   "bill.drawer.title": "Bill details {number}",
+  "bill.drawer.subtitle": "Branch: {value}",
   "bill.details.reference": "Reference #",
   "bill.details.bill_number": "Bill #",
   "bill.details.created_at": "Created at",
@@ -1562,6 +1562,7 @@
   "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
   "vendor_credit.label": "Vendor credits",
   "vendor_credit.drawer_vendor_credit_detail": "Vendor Credit details",
+  "vendor_credit.drawer.subtitle": "Branch: {value}",
   "vendor_credit.drawer.label_vendor_credit_no": "Vendor Credit #",
   "vendor_credit.drawer.label_vendor_credit_date": "Vendor Credit Date",
   "vendor_credit.drawer.label_credits_remaining": "Credits Remaining",
@@ -1733,10 +1734,15 @@
   "refund_credit.drawer.label.reference_no": "Reference number",
   "refund_credit.drawer.label.description": "Description",
   "estimate.drawer.title": "Estimate details ({number})",
+  "estimate.drawer.subtitle": "Branch: {value}",
   "receipt.drawer.title": "Receipt details ({number})",
+  "receipt.drawer.subtitle": "Branch: {value}",
   "credit_note.drawer.title": "Credit Note details ({number})",
+  "credit_note.drawer.subtitle": "Branch: {value}",
   "payment_receive.drawer.title": "Payment receive details ({number})",
+  "payment_receive.drawer.subtitle": "Branch: {value}",
   "payment_made.drawer.title": "Payment made details {number}",
+  "payment_made.drawer.subtitle": "Branch: {value}",
   "manual_journal.drawer.title": "Manual journal details ({number})",
   "expense.drawer.title": "Expense details",
   "global_error.you_dont_have_permissions": "You do not have permissions to access this page.",