BIG-232 customer and vendor drawer link.

src/components/Customers/CustomerDrawerLink.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function CustomerDrawerLinkComponent({
+  // #ownProps
+  children,
+  customerId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleCustomerDrawer = () => {
+    openDrawer('customer-details-drawer', { customerId });
+  };
+
+  return <ButtonLink onClick={handleCustomerDrawer}>{children}</ButtonLink>;
+}
+
+export const CustomerDrawerLink = R.compose(withDrawerActions)(
+  CustomerDrawerLinkComponent,
+);

src/components/Customers/index.js

@@ -0,0 +1 @@
+export * from './CustomerDrawerLink';

src/components/Vendors/VendorDrawerLink.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { ButtonLink } from 'components';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+function VendorDrawerLinkComponent({
+  // #ownProps
+  children,
+  vendorId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Handle view customer drawer.
+  const handleVendorDrawer = () => {
+    openDrawer('vendor-details-drawer', { vendorId });
+  };
+
+  return <ButtonLink onClick={handleVendorDrawer}>{children}</ButtonLink>;
+}
+
+export const VendorDrawerLink = R.compose(withDrawerActions)(VendorDrawerLinkComponent);

src/components/Vendors/index.js

@@ -0,0 +1 @@
+export * from './VendorDrawerLink'

src/components/index.js

@@ -92,6 +92,8 @@ export * from './TextStatus';
 export * from './Tags';
 export * from './CommercialDoc';
 export * from './Card';
+export * from './Customers'
+export * from './Vendors'
 
 const Hint = FieldHint;
 

src/containers/Drawers/BillDrawer/BillDetailHeader.js

@@ -12,6 +12,7 @@ import {
   Col,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
@@ -45,7 +46,9 @@ export default function BillDetailHeader() {
               <FormatDate value={bill.due_date} />
             </DetailItem>
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{bill.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={bill.vendor_id}>
+                {bill.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem label={intl.get('bill.details.bill_number')}>
               {defaultTo(bill.bill_number, '-')}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
@@ -48,7 +49,9 @@ export default function CreditNoteDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={creditNote.customer_id}>
+                {creditNote.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js

@@ -13,6 +13,7 @@ import {
   Row,
   Col,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import { EstimateDetailsStatus } from './components';
@@ -46,7 +47,9 @@ export default function EstimateDetailHeader() {
             />
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{estimate.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={estimate.customer_id}>
+                {estimate.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js

@@ -12,6 +12,7 @@ import {
   FormatDate,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  CustomerDrawerLink,
 } from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 import { InvoiceDetailsStatus } from './utils';
@@ -50,9 +51,9 @@ export default function InvoiceDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink onClick={handleCustomerLinkClick}>
+              <CustomerDrawerLink customerId={invoice.customer_id}>
                 {invoice.customer?.display_name}
-              </ButtonLink>
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem label={intl.get('invoice.details.invoice_no')}>

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  VendorDrawerLink,
 } from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentMadeDetailHeader() {
               children={defaultTo(paymentMade.payment_number, '-')}
             />
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
+                {paymentMade.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('payment_account')}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js

@@ -11,6 +11,7 @@ import {
   CommercialDocHeader,
   CommercialDocTopHeader,
   ButtonLink,
+  CustomerDrawerLink,
 } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
@@ -38,7 +39,9 @@ export default function PaymentReceiveDetailHeader() {
               children={defaultTo(paymentReceive.payment_receive_no, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{paymentReceive.customer?.display_name}</ButtonLink>
+              <CustomerDrawerLink customerId={paymentReceive.customer_id}>
+                {paymentReceive.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
 
             <DetailItem

src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import {
   ButtonLink,
+  CustomerDrawerLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
 } from 'components';
@@ -41,7 +42,9 @@ export default function ReceiptDetailHeader() {
               children={defaultTo(receipt.receipt_number, '-')}
             />
             <DetailItem label={intl.get('customer_name')}>
-              <ButtonLink>{receipt.customer?.display_name} </ButtonLink>
+              <CustomerDrawerLink customerId={receipt.customer_id}>
+                {receipt.customer?.display_name}
+              </CustomerDrawerLink>
             </DetailItem>
             <DetailItem
               label={intl.get('receipt_date')}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -13,6 +13,7 @@ import {
   ButtonLink,
   CommercialDocHeader,
   CommercialDocTopHeader,
+  VendorDrawerLink,
 } from 'components';
 import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
 import { VendorCreditDetailsStatus } from './utils';
@@ -44,7 +45,9 @@ export default function VendorCreditDetailHeader() {
             </DetailItem>
 
             <DetailItem label={intl.get('vendor_name')}>
-              <ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
+              <VendorDrawerLink vendorId={vendorCredit.vendor_id}>
+                {vendorCredit.vendor?.display_name}
+              </VendorDrawerLink>
             </DetailItem>
 
             <DetailItem