Allow adding to a group by phone number

ts/components/conversationList/BaseConversationListItem.tsx

@@ -29,6 +29,7 @@ export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
 const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
 export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
 const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
+const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`;
 
 type PropsType = {
   checked?: boolean;
@@ -113,7 +114,12 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
     let actionNode: ReactNode;
     if (shouldShowSpinner) {
       actionNode = (
-        <Spinner size="20px" svgSize="small" direction="on-progress-dialog" />
+        <Spinner
+          size="20px"
+          svgSize="small"
+          moduleClassName={SPINNER_CLASS_NAME}
+          direction="on-progress-dialog"
+        />
       );
     } else if (isCheckbox) {
       let ariaLabel: string;

ts/components/conversationList/ContactListItem.tsx

@@ -30,6 +30,7 @@ export type ContactListItemConversationType = Pick<
   | 'title'
   | 'type'
   | 'unblurredAvatarPath'
+  | 'e164'
 >;
 
 type PropsDataType = ContactListItemConversationType & {

ts/components/conversationList/PhoneNumberCheckbox.tsx

@@ -0,0 +1,112 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { FunctionComponent } from 'react';
+import React, { useState } from 'react';
+
+import { ButtonVariant } from '../Button';
+import { ConfirmationDialog } from '../ConfirmationDialog';
+import { BaseConversationListItem } from './BaseConversationListItem';
+import type { ParsedE164Type } from '../../util/libphonenumberInstance';
+import type { LocalizerType, ThemeType } from '../../types/Util';
+import { AvatarColors } from '../../types/Colors';
+import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
+
+export type PropsDataType = {
+  phoneNumber: ParsedE164Type;
+  isChecked: boolean;
+  isFetching: boolean;
+};
+
+type PropsHousekeepingType = {
+  i18n: LocalizerType;
+  theme: ThemeType;
+  toggleConversationInChooseMembers: (conversationId: string) => void;
+} & LookupConversationWithoutUuidActionsType;
+
+type PropsType = PropsDataType & PropsHousekeepingType;
+
+export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
+  function PhoneNumberCheckbox({
+    phoneNumber,
+    isChecked,
+    isFetching,
+    theme,
+    i18n,
+    lookupConversationWithoutUuid,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    toggleConversationInChooseMembers,
+  }) {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    const onClickItem = React.useCallback(async () => {
+      if (!phoneNumber.isValid) {
+        setIsModalVisible(true);
+        return;
+      }
+      if (isFetching) {
+        return;
+      }
+
+      const conversationId = await lookupConversationWithoutUuid({
+        showUserNotFoundModal,
+        setIsFetchingUUID,
+
+        type: 'e164',
+        e164: phoneNumber.e164,
+        phoneNumber: phoneNumber.userInput,
+      });
+
+      if (conversationId !== undefined) {
+        toggleConversationInChooseMembers(conversationId);
+      }
+    }, [
+      isFetching,
+      toggleConversationInChooseMembers,
+      lookupConversationWithoutUuid,
+      showUserNotFoundModal,
+      setIsFetchingUUID,
+      setIsModalVisible,
+      phoneNumber,
+    ]);
+
+    let modal: JSX.Element | undefined;
+    if (isModalVisible) {
+      modal = (
+        <ConfirmationDialog
+          cancelText={i18n('ok')}
+          cancelButtonVariant={ButtonVariant.Secondary}
+          i18n={i18n}
+          onClose={() => setIsModalVisible(false)}
+        >
+          {i18n('startConversation--phone-number-not-valid', {
+            phoneNumber: phoneNumber.userInput,
+          })}
+        </ConfirmationDialog>
+      );
+    }
+
+    return (
+      <>
+        <BaseConversationListItem
+          acceptedMessageRequest={false}
+          checked={isChecked}
+          color={AvatarColors[0]}
+          conversationType="direct"
+          headerName={phoneNumber.userInput}
+          i18n={i18n}
+          isMe={false}
+          isSelected={false}
+          onClick={onClickItem}
+          phoneNumber={phoneNumber.userInput}
+          shouldShowSpinner={isFetching}
+          theme={theme}
+          sharedGroupNames={[]}
+          title={phoneNumber.userInput}
+        />
+        {modal}
+      </>
+    );
+  }
+);

ts/components/conversationList/StartNewConversation.tsx

@@ -2,54 +2,105 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { FunctionComponent } from 'react';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import {
-  BaseConversationListItem,
-  MESSAGE_TEXT_CLASS_NAME,
-} from './BaseConversationListItem';
+import { ButtonVariant } from '../Button';
+import { ConfirmationDialog } from '../ConfirmationDialog';
+import { BaseConversationListItem } from './BaseConversationListItem';
 
+import type { ParsedE164Type } from '../../util/libphonenumberInstance';
+import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
 import type { LocalizerType } from '../../types/Util';
 import { AvatarColors } from '../../types/Colors';
 
-const TEXT_CLASS_NAME = `${MESSAGE_TEXT_CLASS_NAME}__start-new-conversation`;
-
 type PropsData = {
-  phoneNumber: string;
+  phoneNumber: ParsedE164Type;
+  isFetching: boolean;
 };
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
-  onClick: (phoneNumber: string) => void;
-};
+  showConversation: (conversationId: string) => void;
+} & LookupConversationWithoutUuidActionsType;
 
 export type Props = PropsData & PropsHousekeeping;
 
 export const StartNewConversation: FunctionComponent<Props> = React.memo(
-  function StartNewConversation({ i18n, onClick, phoneNumber }) {
-    const messageText = (
-      <div className={TEXT_CLASS_NAME}>{i18n('startConversation')}</div>
-    );
+  function StartNewConversation({
+    i18n,
+    phoneNumber,
+    isFetching,
+    lookupConversationWithoutUuid,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    showConversation,
+  }) {
+    const [isModalVisible, setIsModalVisible] = useState(false);
 
-    const boundOnClick = useCallback(() => {
-      onClick(phoneNumber);
-    }, [onClick, phoneNumber]);
+    const boundOnClick = useCallback(async () => {
+      if (!phoneNumber.isValid) {
+        setIsModalVisible(true);
+        return;
+      }
+      if (isFetching) {
+        return;
+      }
+      const conversationId = await lookupConversationWithoutUuid({
+        showUserNotFoundModal,
+        setIsFetchingUUID,
+
+        type: 'e164',
+        e164: phoneNumber.e164,
+        phoneNumber: phoneNumber.userInput,
+      });
+
+      if (conversationId !== undefined) {
+        showConversation(conversationId);
+      }
+    }, [
+      showConversation,
+      lookupConversationWithoutUuid,
+      showUserNotFoundModal,
+      setIsFetchingUUID,
+      setIsModalVisible,
+      phoneNumber,
+      isFetching,
+    ]);
+
+    let modal: JSX.Element | undefined;
+    if (isModalVisible) {
+      modal = (
+        <ConfirmationDialog
+          cancelText={i18n('ok')}
+          cancelButtonVariant={ButtonVariant.Secondary}
+          i18n={i18n}
+          onClose={() => setIsModalVisible(false)}
+        >
+          {i18n('startConversation--phone-number-not-valid', {
+            phoneNumber: phoneNumber.userInput,
+          })}
+        </ConfirmationDialog>
+      );
+    }
 
     return (
-      <BaseConversationListItem
-        acceptedMessageRequest={false}
-        color={AvatarColors[0]}
-        conversationType="direct"
-        headerName={phoneNumber}
-        i18n={i18n}
-        isMe={false}
-        isSelected={false}
-        messageText={messageText}
-        onClick={boundOnClick}
-        phoneNumber={phoneNumber}
-        sharedGroupNames={[]}
-        title={phoneNumber}
-      />
+      <>
+        <BaseConversationListItem
+          acceptedMessageRequest={false}
+          color={AvatarColors[0]}
+          conversationType="direct"
+          headerName={phoneNumber.userInput}
+          i18n={i18n}
+          isMe={false}
+          isSelected={false}
+          onClick={boundOnClick}
+          phoneNumber={phoneNumber.userInput}
+          shouldShowSpinner={isFetching}
+          sharedGroupNames={[]}
+          title={phoneNumber.userInput}
+        />
+        {modal}
+      </>
     );
   }
 );

ts/components/conversationList/UsernameSearchResultListItem.tsx

@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { FunctionComponent } from 'react';
-import React from 'react';
-import { noop } from 'lodash';
+import React, { useCallback } from 'react';
 
 import { BaseConversationListItem } from './BaseConversationListItem';
 
 import type { LocalizerType } from '../../types/Util';
+import { lookupConversationWithoutUuid } from '../../util/lookupConversationWithoutUuid';
+import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
 
 type PropsData = {
   username: string;
@@ -16,23 +17,42 @@ type PropsData = {
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
-  onClick: (username: string) => void;
-};
+  showConversation: (conversationId: string) => void;
+} & LookupConversationWithoutUuidActionsType;
 
 export type Props = PropsData & PropsHousekeeping;
 
 export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
   i18n,
   isFetchingUsername,
-  onClick,
   username,
+  showUserNotFoundModal,
+  setIsFetchingUUID,
+  showConversation,
 }) => {
   const usernameText = i18n('at-username', { username });
-  const boundOnClick = isFetchingUsername
-    ? noop
-    : () => {
-        onClick(username);
-      };
+  const boundOnClick = useCallback(async () => {
+    if (isFetchingUsername) {
+      return;
+    }
+    const conversationId = await lookupConversationWithoutUuid({
+      showUserNotFoundModal,
+      setIsFetchingUUID,
+
+      type: 'username',
+      username,
+    });
+
+    if (conversationId !== undefined) {
+      showConversation(conversationId);
+    }
+  }, [
+    username,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    showConversation,
+    isFetchingUsername,
+  ]);
 
   return (
     <BaseConversationListItem