Modern profile sharing in 1:1 and GroupV1 groups

ts/components/CompositionArea.tsx

@@ -16,12 +16,15 @@ import {
   MessageRequestActions,
   Props as MessageRequestActionsProps,
 } from './conversation/MessageRequestActions';
+import { MandatoryProfileSharingActions } from './conversation/MandatoryProfileSharingActions';
 import { countStickers } from './stickers/lib';
 import { LocalizerType } from '../types/Util';
 import { EmojiPickDataType } from './emoji/EmojiPicker';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
+  readonly groupVersion?: 1 | 2;
+  readonly isMissingMandatoryProfileSharing?: boolean;
   readonly messageRequestsEnabled?: boolean;
   readonly acceptedMessageRequest?: boolean;
   readonly compositionApi?: React.MutableRefObject<{
@@ -113,7 +116,9 @@ export const CompositionArea = ({
   // Message Requests
   acceptedMessageRequest,
   conversationType,
+  groupVersion,
   isBlocked,
+  isMissingMandatoryProfileSharing,
   messageRequestsEnabled,
   name,
   onAccept,
@@ -326,7 +331,7 @@ export const CompositionArea = ({
     };
   }, [setLarge]);
 
-  if ((!acceptedMessageRequest || isBlocked) && messageRequestsEnabled) {
+  if (messageRequestsEnabled && (!acceptedMessageRequest || isBlocked)) {
     return (
       <MessageRequestActions
         i18n={i18n}
@@ -345,6 +350,28 @@ export const CompositionArea = ({
     );
   }
 
+  // If no message request, but we haven't shared profile yet, we show profile-sharing UI
+  if (
+    (conversationType === 'direct' ||
+      (conversationType === 'group' && groupVersion === 1)) &&
+    isMissingMandatoryProfileSharing
+  ) {
+    return (
+      <MandatoryProfileSharingActions
+        i18n={i18n}
+        conversationType={conversationType}
+        onBlock={onBlock}
+        onBlockAndDelete={onBlockAndDelete}
+        onDelete={onDelete}
+        onAccept={onAccept}
+        name={name}
+        profileName={profileName}
+        phoneNumber={phoneNumber}
+        title={title}
+      />
+    );
+  }
+
   return (
     <div className="module-composition-area">
       <div className="module-composition-area__toggle-large">