Improve experience for contacts without signal accounts

ts/components/CompositionArea.stories.tsx

@@ -74,6 +74,9 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   onStartGroupMigration: action('onStartGroupMigration'),
   // GroupV2 Pending Approval Actions
   onCancelJoinRequest: action('onCancelJoinRequest'),
+  // SMS-only
+  isSMSOnly: overrideProps.isSMSOnly || false,
+  isFetchingUUID: overrideProps.isFetchingUUID || false,
 });
 
 story.add('Default', () => {
@@ -106,3 +109,20 @@ story.add('Message Request', () => {
 
   return <CompositionArea {...props} />;
 });
+
+story.add('SMS-only fetching UUID', () => {
+  const props = createProps({
+    isSMSOnly: true,
+    isFetchingUUID: true,
+  });
+
+  return <CompositionArea {...props} />;
+});
+
+story.add('SMS-only', () => {
+  const props = createProps({
+    isSMSOnly: true,
+  });
+
+  return <CompositionArea {...props} />;
+});

ts/components/CompositionArea.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { get, noop } from 'lodash';
 import classNames from 'classnames';
+import { Spinner } from './Spinner';
 import { EmojiButton, Props as EmojiButtonProps } from './emoji/EmojiButton';
 import {
   Props as StickerButtonProps,
@@ -38,6 +39,8 @@ export type OwnProps = {
   readonly groupVersion?: 1 | 2;
   readonly isGroupV1AndDisabled?: boolean;
   readonly isMissingMandatoryProfileSharing?: boolean;
+  readonly isSMSOnly?: boolean;
+  readonly isFetchingUUID?: boolean;
   readonly left?: boolean;
   readonly messageRequestsEnabled?: boolean;
   readonly acceptedMessageRequest?: boolean;
@@ -157,6 +160,9 @@ export const CompositionArea = ({
   onStartGroupMigration,
   // GroupV2 Pending Approval Actions
   onCancelJoinRequest,
+  // SMS-only contacts
+  isSMSOnly,
+  isFetchingUUID,
 }: Props): JSX.Element => {
   const [disabled, setDisabled] = React.useState(false);
   const [showMic, setShowMic] = React.useState(!draftText);
@@ -382,6 +388,36 @@ export const CompositionArea = ({
     );
   }
 
+  if (conversationType === 'direct' && isSMSOnly) {
+    return (
+      <div
+        className={classNames([
+          'module-composition-area',
+          'module-composition-area--sms-only',
+          isFetchingUUID ? 'module-composition-area--pending' : null,
+        ])}
+      >
+        {isFetchingUUID ? (
+          <Spinner
+            ariaLabel={i18n('CompositionArea--sms-only__spinner-label')}
+            role="presentation"
+            moduleClassName="module-image-spinner"
+            svgSize="small"
+          />
+        ) : (
+          <>
+            <h2 className="module-composition-area--sms-only__title">
+              {i18n('CompositionArea--sms-only__title')}
+            </h2>
+            <p className="module-composition-area--sms-only__body">
+              {i18n('CompositionArea--sms-only__body')}
+            </p>
+          </>
+        )}
+      </div>
+    );
+  }
+
   // If no message request, but we haven't shared profile yet, we show profile-sharing UI
   if (
     !left &&

ts/components/Spinner.tsx

@@ -20,17 +20,21 @@ export const SpinnerDirections = [
 export type SpinnerDirection = typeof SpinnerDirections[number];
 
 export type Props = {
-  moduleClassName?: string;
+  ariaLabel?: string;
   direction?: SpinnerDirection;
+  moduleClassName?: string;
+  role?: string;
   size?: string;
   svgSize: SpinnerSvgSize;
 };
 
 export const Spinner = ({
+  ariaLabel,
+  direction,
   moduleClassName,
+  role,
   size,
   svgSize,
-  direction,
 }: Props): JSX.Element => {
   const getClassName = getClassNamesFor('module-spinner', moduleClassName);
 
@@ -42,6 +46,8 @@ export const Spinner = ({
         getClassName(direction && `__container--${direction}`),
         getClassName(direction && `__container--${svgSize}-${direction}`)
       )}
+      role={role}
+      aria-label={ariaLabel}
       style={{
         height: size,
         width: size,