re-structure to monorepo.

packages/webapp/src/components/Contacts/ContactSelecetList.tsx

@@ -0,0 +1,111 @@
+// @ts-nocheck
+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 '@/constants/classes';
+
+export function ContactSelecetList({
+  contactsList,
+  initialContactId,
+  selectedContactId,
+  createNewItemFrom,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  popoverFill = false,
+  disabled = false,
+  buttonProps,
+
+  ...restProps
+}) {
+  const contacts = useMemo(
+    () =>
+      contactsList.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contactsList],
+  );
+
+  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 handleContactRenderer = useCallback(
+    (contact, { handleClick }) => (
+      <MenuItem
+        key={contact.id}
+        text={contact.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  // Filter Contact List
+  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
+      );
+    }
+  };
+
+  return (
+    <Select
+      items={contacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={handleContactRenderer}
+      itemPredicate={itemPredicate}
+      filterable={true}
+      disabled={disabled}
+      onItemSelect={onContactSelect}
+      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>
+  );
+}

packages/webapp/src/components/Contacts/ContactSelectField.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+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 '@/constants/classes';
+
+import { itemPredicate, handleContactRenderer } from './utils';
+
+export 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>
+  );
+}

packages/webapp/src/components/Contacts/ContactsMultiSelect.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import { MultiSelect } from '../MultiSelectTaggable';
+
+/**
+ * Contacts multi-select component.
+ */
+export function ContactsMultiSelect({ ...multiSelectProps }) {
+  // Filters accounts items.
+  const filterContactsPredicater = useCallback(
+    (query, contact, _index, exactMatch) => {
+      const normalizedTitle = contact.display_name.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return normalizedTitle.indexOf(normalizedQuery) >= 0;
+      }
+    },
+    [],
+  );
+
+  return (
+    <MultiSelect
+      itemRenderer={(contact, { selected, active, handleClick }) => (
+        <MenuItem
+          active={active}
+          icon={selected ? 'tick' : 'blank'}
+          text={contact.display_name}
+          key={contact.id}
+          onClick={handleClick}
+        />
+      )}
+      popoverProps={{ minimal: true }}
+      fill={true}
+      itemPredicate={filterContactsPredicater}
+      tagRenderer={(item) => item.display_name}
+      {...multiSelectProps}
+    />
+  );
+}

packages/webapp/src/components/Contacts/ContactsSuggestField.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import { Suggest } from '@blueprintjs/select';
+
+import { FormattedMessage as T } from '@/components';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import intl from 'react-intl-universal';
+
+export function ContactsSuggestField({
+  contactsList,
+  initialContactId,
+  selectedContactId,
+  defaultTextSelect = intl.get('select_contact'),
+  onContactSelected,
+
+  selectedContactType = [],
+  popoverFill = false,
+
+  ...suggestProps
+}) {
+  // filteredContacts
+  const contacts = useMemo(
+    () =>
+      contactsList.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contactsList],
+  );
+
+  const initialContact = useMemo(
+    () => contacts.find((a) => a.id === initialContactId),
+    [initialContactId, contacts],
+  );
+
+  const [selecetedContact, setSelectedContact] = useState(
+    initialContact || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedContactId !== 'undefined') {
+      const contact = selectedContactId
+        ? contacts.find((a) => a.id === selectedContactId)
+        : null;
+      setSelectedContact(contact);
+    }
+  }, [selectedContactId, contacts, setSelectedContact]);
+
+  const contactRenderer = useCallback(
+    (contact, { handleClick }) => (
+      <MenuItem
+        key={contact.id}
+        text={contact.display_name}
+        label={contact.formatted_contact_service}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  const handleInputValueRenderer = (inputValue) => {
+    if (inputValue) {
+      return inputValue.display_name.toString();
+    }
+  };
+
+  const filterContacts = (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
+      );
+    }
+  };
+
+  return (
+    <Suggest
+      items={contacts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
+      itemRenderer={contactRenderer}
+      itemPredicate={filterContacts}
+      onItemSelect={onContactSelect}
+      selectedItem={selecetedContact}
+      inputProps={{ placeholder: defaultTextSelect }}
+      resetOnClose={true}
+      popoverProps={{ minimal: true, boundary: 'window' }}
+      inputValueRenderer={handleInputValueRenderer}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...suggestProps}
+    />
+  );
+}

packages/webapp/src/components/Contacts/index.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+export * from './ContactSelectField';
+export * from './ContactsSuggestField';
+export * from './ContactSelecetList';
+export * from './ContactsMultiSelect';

packages/webapp/src/components/Contacts/utils.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+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={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      shouldDismissPopover={false}
+      onClick={handleClick}
+    />
+  );
+};