fix: merge conflict quick create list field.

src/components/AccountsSelectList.js

@@ -1,13 +1,55 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { MenuItemNestedText, FormattedMessage as T } from 'components';
+import * as R from 'ramda';
 import classNames from 'classnames';
+
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 import { CLASSES } from 'common/classes';
 
-export default function AccountsSelectList({
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts select list.
+ */
+function AccountsSelectList({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -21,6 +63,8 @@ export default function AccountsSelectList({
   filterByNormal,
   filterByRootTypes,
 
+  allowCreate,
+
   buttonProps = {},
 }) {
   const flattenAccounts = useMemo(
@@ -51,6 +95,7 @@ export default function AccountsSelectList({
     [initialAccountId, filteredAccounts],
   );
 
+  // Select account item.
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null,
   );
@@ -76,31 +121,25 @@ export default function AccountsSelectList({
     );
   }, []);
 
-  const onAccountSelect = useCallback(
+  // Handle the account item select.
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
-    },
-    [setSelectedAccount, onAccountSelected],
-  );
-
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
       } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
+        openDialog('account-form');
       }
     },
-    [],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Select
       items={filteredAccounts}
@@ -113,11 +152,13 @@ export default function AccountsSelectList({
         inline: popoverFill,
       }}
       filterable={true}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       disabled={disabled}
       className={classNames('form-group--select-list', {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
     >
       <Button
         disabled={disabled}
@@ -127,3 +168,5 @@ export default function AccountsSelectList({
     </Select>
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSelectList);

src/components/AccountsSuggestField.js

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
@@ -10,10 +11,55 @@ import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 import { nestedArrayToflatten } from 'utils';
 
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
 /**
  * Accounts suggest field.
  */
-export default function AccountsSuggestField({
+function AccountsSuggestField({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
   accounts,
   initialAccountId,
   selectedAccountId,
@@ -26,6 +72,8 @@ export default function AccountsSuggestField({
   filterByNormal,
   filterByRootTypes = [],
 
+  allowCreate,
+
   ...suggestProps
 }) {
   const flattenAccounts = useMemo(
@@ -69,23 +117,6 @@ export default function AccountsSuggestField({
     }
   }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
 
-  // Filters accounts items.
-  const filterAccountsPredicater = useCallback(
-    (query, account, _index, exactMatch) => {
-      const normalizedTitle = account.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return (
-          `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
-        );
-      }
-    },
-    [],
-  );
-
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
@@ -98,28 +129,31 @@ export default function AccountsSuggestField({
     );
   }, []);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
-
-  const onAccountSelect = useCallback(
+  const handleAccountSelect = useCallback(
     (account) => {
-      setSelectedAccount({ ...account });
-      onAccountSelected && onAccountSelected(account);
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog('account-form');
+      }
     },
-    [setSelectedAccount, onAccountSelected],
+    [setSelectedAccount, onAccountSelected, openDialog],
   );
 
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
     <Suggest
       items={filteredAccounts}
       noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
-      onItemSelect={onAccountSelect}
+      onItemSelect={handleAccountSelect}
       selectedItem={selectedAccount}
       inputProps={{ placeholder: defaultSelectText }}
       resetOnClose={true}
@@ -129,7 +163,11 @@ export default function AccountsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDialogActions)(AccountsSuggestField);

src/components/ContactSelecetList.js

@@ -11,12 +11,14 @@ export default function ContactSelecetList({
   contactsList,
   initialContactId,
   selectedContactId,
-  selectedContactType,
+  createNewItemFrom,
   defaultSelectText = <T id={'select_contact'} />,
   onContactSelected,
   popoverFill = false,
   disabled = false,
   buttonProps,
+
+  ...restProps
 }) {
   const contacts = useMemo(
     () =>
@@ -65,7 +67,7 @@ export default function ContactSelecetList({
   );
 
   // Filter Contact List
-  const filterContacts = (query, contact, index, exactMatch) => {
+  const itemPredicate = (query, contact, index, exactMatch) => {
     const normalizedTitle = contact.display_name.toLowerCase();
     const normalizedQuery = query.toLowerCase();
     if (exactMatch) {
@@ -83,7 +85,7 @@ export default function ContactSelecetList({
       items={contacts}
       noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
       itemRenderer={handleContactRenderer}
-      itemPredicate={filterContacts}
+      itemPredicate={itemPredicate}
       filterable={true}
       disabled={disabled}
       onItemSelect={onContactSelect}
@@ -92,8 +94,9 @@ export default function ContactSelecetList({
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
       inputProps={{
-        placeholder: intl.get('filter_')
+        placeholder: intl.get('filter_'),
       }}
+      {...restProps}
     >
       <Button
         disabled={disabled}

src/components/Contacts/ContactSelectField.js

@@ -0,0 +1,86 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import { itemPredicate, handleContactRenderer } from './utils';
+
+export default function ContactSelectField({
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}

src/components/Contacts/CustomerSelectField.js

@@ -0,0 +1,116 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemRenderer,
+  createNewItemFromQuery,
+} from './utils';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function CustomerSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(CustomerSelectField);

src/components/Contacts/VendorSelectField.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import * as R from 'ramda';
+
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import {
+  itemPredicate,
+  handleContactRenderer,
+  createNewItemFromQuery,
+  createNewItemRenderer,
+} from './utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+function VendorSelectField({
+  // #withDrawerActions
+  openDrawer,
+
+  // #ownProps
+  contacts,
+  initialContactId,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  allowCreate,
+  buttonProps,
+
+  ...restProps
+}) {
+  const localContacts = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const account = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(account);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const handleContactSelect = useCallback(
+    (contact) => {
+      if (contact.id) {
+        setSelectedContact({ ...contact });
+        onContactSelected && onContactSelected(contact);
+      } else {
+        openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
+      }
+    },
+    [setSelectedContact, onContactSelected, openDrawer],
+  );
+
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={localContacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={handleContactSelect}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      inputProps={{
+        placeholder: intl.get('filter_'),
+      }}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
+      {...restProps}
+    >
+      <Button
+        disabled={disabled}
+        text={
+          selecetedContact ? selecetedContact.display_name : defaultSelectText
+        }
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export default R.compose(withDrawerActions)(VendorSelectField);

src/components/Contacts/index.js

@@ -0,0 +1,5 @@
+import ContactSelectField from './ContactSelectField';
+import CustomerSelectField from './CustomerSelectField';
+import VendorSelectField from './VendorSelectField';
+
+export { ContactSelectField, CustomerSelectField, VendorSelectField };

src/components/Contacts/utils.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+
+// Filter Contact List
+export const itemPredicate = (query, contact, index, exactMatch) => {
+  const normalizedTitle = contact.display_name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+export const handleContactRenderer = (contact, { handleClick }) => (
+  <MenuItem
+    key={contact.id}
+    text={contact.display_name}
+    onClick={handleClick}
+  />
+);
+
+// Creates a new item from query.
+export const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+export const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};

src/components/Dashboard/DashboardContent.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 import DashboardContentRoutes from 'components/Dashboard/DashboardContentRoute';
-import DashboardFooter from 'components/Dashboard/DashboardFooter';
 import DashboardErrorBoundary from './DashboardErrorBoundary';
 
 export default React.forwardRef(({}, ref) => {
@@ -11,7 +10,6 @@ export default React.forwardRef(({}, ref) => {
       <div className="dashboard-content" id="dashboard" ref={ref}>
         <DashboardTopbar />
         <DashboardContentRoutes />
-        <DashboardFooter />
       </div>
     </ErrorBoundary>
   );

src/components/DataTableCells/AccountsListFieldCell.js

@@ -17,6 +17,8 @@ export default function AccountCellRenderer({
     accountsDataProp,
     filterAccountsByRootTypes,
     filterAccountsByTypes,
+    fieldProps,
+    formGroupProps,
   },
   row: { index, original },
   cell: { value: initialValue },
@@ -53,6 +55,7 @@ export default function AccountCellRenderer({
         'form-group--account',
         Classes.FILL,
       )}
+      {...formGroupProps}
     >
       <AccountsSuggestField
         accounts={accounts}
@@ -66,6 +69,7 @@ export default function AccountCellRenderer({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );

src/components/DataTableCells/ItemsListCell.js

@@ -1,15 +1,17 @@
 import React, { useCallback, useRef } from 'react';
-// import ItemsListField from 'components/ItemsListField';
-import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
-
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import ItemsSuggestField from 'components/ItemsSuggestField';
+
 import { useCellAutoFocus } from 'hooks';
 
+/**
+ * Items list cell.
+ */
 export default function ItemsListCell({
-  column: { id, filterSellable, filterPurchasable },
+  column: { id, filterSellable, filterPurchasable, fieldProps, formGroupProps },
   row: { index },
   cell: { value: initialValue },
   payload: { items, updateData, errors, autoFocus },
@@ -19,6 +21,7 @@ export default function ItemsListCell({
   // Auto-focus the items list input field.
   useCellAutoFocus(fieldRef, autoFocus, id, index);
 
+  // Handle the item selected.
   const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
@@ -32,6 +35,7 @@ export default function ItemsListCell({
     <FormGroup
       intent={error ? Intent.DANGER : null}
       className={classNames('form-group--select-list', Classes.FILL)}
+      {...formGroupProps}
     >
       <ItemsSuggestField
         items={items}
@@ -45,6 +49,7 @@ export default function ItemsListCell({
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}
+        {...fieldProps}
       />
     </FormGroup>
   );

src/components/Drawer/Drawer.js

@@ -3,6 +3,7 @@ import { Position, Drawer } from '@blueprintjs/core';
 
 import 'style/components/Drawer.scss';
 
+import { DrawerProvider } from './DrawerProvider';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { compose } from 'utils';
 
@@ -27,7 +28,7 @@ function DrawerComponent(props) {
       portalClassName={'drawer-portal'}
       {...props}
     >
-      {children}
+      <DrawerProvider {...props}>{children}</DrawerProvider>
     </Drawer>
   );
 }

src/components/Drawer/DrawerProvider.js

@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from 'react';
+
+const DrawerContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function DrawerProvider({ ...props }) {
+  const provider = { ...props };
+
+  return <DrawerContext.Provider value={provider} {...props} />;
+}
+
+const useDrawerContext = () => useContext(DrawerContext);
+
+export { DrawerProvider, useDrawerContext };

src/components/DrawersContainer.js

@@ -14,6 +14,9 @@ import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
 import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
+import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
+import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
+import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -38,7 +41,12 @@ export default function DrawersContainer() {
       <InventoryAdjustmentDetailDrawer
         name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
       />
-      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER} />
+      <CashflowTransactionDetailDrawer
+        name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER}
+      />
+      <QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
+      <QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
+      <QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
     </div>
   );
 }

src/components/ItemsSuggestField.js

@@ -1,13 +1,68 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
 import { Suggest } from '@blueprintjs/select';
+import classNames from 'classnames';
+import * as R from 'ramda';
+
+import { CLASSES } from 'common/classes';
 
 import { FormattedMessage as T } from 'components';
 
-export default function ItemsSuggestField({
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { DRAWERS } from 'common/drawers';
+
+// Creates a new item from query.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle quick create new customer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={`Create "${query}"`}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Item renderer.
+const itemRenderer = (item, { modifiers, handleClick }) => (
+  <MenuItem
+    key={item.id}
+    text={item.name}
+    label={item.code}
+    onClick={handleClick}
+  />
+);
+
+// Filters items.
+const filterItemsPredicater = (query, item, _index, exactMatch) => {
+  const normalizedTitle = item.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+function ItemsSuggestField({
   items,
   initialItemId,
   selectedItemId,
@@ -18,6 +73,10 @@ export default function ItemsSuggestField({
   sellable = false,
   purchasable = false,
   popoverFill = false,
+
+  allowCreate = true,
+
+  openDrawer,
   ...suggestProps
 }) {
   // Filters items based on filter props.
@@ -36,28 +95,23 @@ export default function ItemsSuggestField({
   // Find initial item object.
   const initialItem = useMemo(
     () => filteredItems.some((a) => a.id === initialItemId),
-    [initialItemId],
+    [initialItemId, filteredItems],
   );
 
   const [selectedItem, setSelectedItem] = useState(initialItem || null);
 
   const onItemSelect = useCallback(
     (item) => {
-      setSelectedItem({ ...item });
-      onItemSelected && onItemSelected(item);
+      if (item.id) {
+        setSelectedItem({ ...item });
+        onItemSelected && onItemSelected(item);
+      } else {
+        openDrawer(DRAWERS.QUICK_CREATE_ITEM);
+      }
     },
-    [setSelectedItem, onItemSelected],
+    [setSelectedItem, onItemSelected, openDrawer],
   );
 
-  const itemRenderer = useCallback((item, { modifiers, handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.code}
-      onClick={handleClick}
-    />
-  ));
-
   useEffect(() => {
     if (typeof selectedItemId !== 'undefined') {
       const item = selectedItemId
@@ -67,27 +121,12 @@ export default function ItemsSuggestField({
     }
   }, [selectedItemId, filteredItems, setSelectedItem]);
 
-  const handleInputValueRenderer = (inputValue) => {
-    if (inputValue) {
-      return inputValue.name.toString();
-    }
-    return '';
-  };
+  // Maybe inject create new item props to suggest component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
-  // Filters items.
-  const filterItemsPredicater = useCallback(
-    (query, item, _index, exactMatch) => {
-      const normalizedTitle = item.name.toLowerCase();
-      const normalizedQuery = query.toLowerCase();
-
-      if (exactMatch) {
-        return normalizedTitle === normalizedQuery;
-      } else {
-        return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
-      }
-    },
-    [],
-  );
   return (
     <Suggest
       items={filteredItems}
@@ -104,7 +143,12 @@ export default function ItemsSuggestField({
       className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
         [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
       })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      createNewItemPosition={'top'}
       {...suggestProps}
     />
   );
 }
+
+export default R.compose(withDrawerActions)(ItemsSuggestField);

src/components/index.js

@@ -86,6 +86,7 @@ export * from './Datatable/CellForceWidth';
 export * from './Button';
 export * from './IntersectionObserver';
 export * from './SMSPreview';
+export * from './Contacts';
 
 const Hint = FieldHint;