feat(VendorList): add note accessor & personal phone.

src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js

@@ -39,7 +39,7 @@ function VendorFormAfterPrimarySection() {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
+                placeholder={intl.get('personal')}
                 {...field}
               />
             )}
@@ -48,7 +48,7 @@ function VendorFormAfterPrimarySection() {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={intl.get('Mobile')}
+                placeholder={intl.get('work')}
                 {...field}
               />
             )}

src/containers/Vendors/VendorsLanding/components.js

@@ -6,7 +6,9 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tooltip,
   Intent,
+  Classes,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
@@ -114,6 +116,24 @@ export function BalanceAccessor({ closing_balance, currency_code }) {
   return <Money amount={closing_balance} currency={currency_code} />;
 }
 
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+  return (
+    <If condition={row.note}>
+      <Tooltip
+        className={Classes.TOOLTIP_INDICATOR}
+        content={row.note}
+        position={Position.LEFT_TOP}
+        hoverOpenDelay={50}
+      >
+        <Icon icon={'file-alt'} iconSize={16} />
+      </Tooltip>
+    </If>
+  );
+}
+
 /**
  * Retrieve the vendors table columns.
  */
@@ -148,12 +168,20 @@ export function useVendorsTableColumns() {
       },
       {
         id: 'work_phone',
-        Header: intl.get('work_phone'),
+        Header: intl.get('phone_number'),
         accessor: PhoneNumberAccessor,
         className: 'work_phone',
         width: 100,
         clickable: true,
       },
+      {
+        id: 'note',
+        Header: intl.get('note'),
+        accessor: NoteAccessor,
+        disableSortBy: true,
+        width: 85,
+        clickable: true,
+      },
       {
         id: 'balance',
         Header: intl.get('receivable_balance'),