Some adjustments to AboutContactModal

_locales/en/messages.json

@@ -1394,6 +1394,22 @@
     "messageformat": "About",
     "description": "Title of About modal"
   },
+  "icu:AboutContactModal__verified": {
+    "messageformat": "Verified",
+    "description": "Text of a button on About modal leading to a safety number modal"
+  },
+  "icu:AboutContactModal__blocked": {
+    "messageformat": "{name} is blocked",
+    "description": "Text of a row on About modal when user is blocked"
+  },
+  "icu:AboutContactModal__message-request": {
+    "messageformat": "Pending message request",
+    "description": "Text of a row on About modal when user is in message request state"
+  },
+  "icu:AboutContactModal__no-dms": {
+    "messageformat": "No direct messages with {name}",
+    "description": "Text of a row on About modal when there are no direct messages with a user"
+  },
   "icu:AboutContactModal__signal-connection": {
     "messageformat": "Signal Connection",
     "description": "Text of a button on About modal leading to an education modal"

images/icons/v3/chat/chat-badge.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.375 12C20.375 11.1546 20.2498 10.3385 20.0168 9.56923C20.5984 9.39893 21.1312 9.11435 21.5892 8.74144C21.9366 9.76399 22.125 10.86 22.125 12C22.125 17.5919 17.5919 22.125 12 22.125C10.3289 22.125 8.75002 21.7195 7.35884 21.0008L3.29608 22.4634C2.20141 22.8575 1.14254 21.7986 1.53662 20.7039L2.99921 16.6412C2.28054 15.25 1.875 13.6711 1.875 12C1.875 6.40812 6.40812 1.875 12 1.875C13.14 1.875 14.236 2.06341 15.2586 2.41078C14.8857 2.8688 14.6011 3.40159 14.4308 3.9832C13.6615 3.75025 12.8454 3.625 12 3.625C7.37462 3.625 3.625 7.37462 3.625 12C3.625 13.4316 3.9835 14.7769 4.61489 15.9536C4.79571 16.2906 4.83796 16.7001 4.70054 17.0818L3.45309 20.5469L6.91823 19.2995C7.29994 19.1621 7.70942 19.2043 8.04639 19.3851C9.22307 20.0165 10.5684 20.375 12 20.375C16.6254 20.375 20.375 16.6254 20.375 12Z" fill="black"/>
+<path d="M15.75 5.25C15.75 3.59315 17.0932 2.25 18.75 2.25C20.4069 2.25 21.75 3.59315 21.75 5.25C21.75 6.90685 20.4069 8.25 18.75 8.25C17.0932 8.25 15.75 6.90685 15.75 5.25Z" fill="black"/>
+</svg>

images/icons/v3/chat/chat-x.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.88 6.88a.73.73 0 0 1 1.031 0L10 8.97l2.089-2.089a.73.73 0 0 1 1.03 1.031L11.032 10l2.089 2.089a.73.73 0 0 1-1.031 1.03L10 11.032 7.911 13.12a.73.73 0 0 1-1.03-1.031L8.968 10 6.88 7.911a.73.73 0 0 1 0-1.03Z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1.563 10a8.437 8.437 0 1 1 4.57 7.5l-3.386 1.22c-.912.328-1.795-.554-1.466-1.467l1.218-3.385A8.404 8.404 0 0 1 1.563 10ZM10 3.02a6.98 6.98 0 0 0-6.154 10.275c.15.28.186.622.071.94l-1.04 2.887 2.888-1.04c.318-.114.66-.078.94.072A6.98 6.98 0 1 0 10 3.021Z" fill="#000"/></svg>

stylesheets/components/AboutContactModal.scss

@@ -53,12 +53,32 @@
       @include about-modal-icon('../images/icons/v3/person/person-compact.svg');
     }
 
+    &--verified {
+      @include about-modal-icon('../images/icons/v3/check/check.svg');
+    }
+
+    &--blocked {
+      @include about-modal-icon('../images/icons/v3/block/block.svg');
+    }
+
+    &--message-request {
+      @include about-modal-icon('../images/icons/v3/chat/chat-badge.svg');
+    }
+
+    &--no-dms {
+      @include about-modal-icon('../images/icons/v3/chat/chat-x.svg');
+    }
+
     &--connections {
       @include about-modal-icon(
         '../images/icons/v3/connections/connections.svg'
       );
     }
 
+    &--chat-x {
+      @include about-modal-icon('../images/icons/v3/chat/chat-x.svg');
+    }
+
     &--person {
       @include about-modal-icon(
         '../images/icons/v3/person/person-circle-compact.svg'
@@ -98,4 +118,9 @@
       );
     }
   }
+
+  &__verified {
+    @include button-reset();
+    cursor: pointer;
+  }
 }

ts/components/GlobalModalContainer.tsx

@@ -256,6 +256,10 @@ export function GlobalModalContainer({
     );
   }
 
+  if (safetyNumberModalContactId) {
+    return renderSafetyNumber();
+  }
+
   if (aboutContactModalProps) {
     return (
       <AboutContactModal
@@ -282,10 +286,6 @@ export function GlobalModalContainer({
     return renderUsernameOnboarding();
   }
 
-  if (safetyNumberModalContactId) {
-    return renderSafetyNumber();
-  }
-
   if (stickerPackPreviewId) {
     return renderStickerPreviewModal();
   }

ts/components/conversation/AboutContactModal.stories.tsx

@@ -12,13 +12,37 @@ import enMessages from '../../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
-const conversation = getDefaultConversation();
+const conversation = getDefaultConversation({
+  acceptedMessageRequest: true,
+  hasMessages: true,
+});
+const verifiedConversation = getDefaultConversation({
+  acceptedMessageRequest: true,
+  isVerified: true,
+  hasMessages: true,
+});
+const blockedConversation = getDefaultConversation({
+  acceptedMessageRequest: true,
+  isBlocked: true,
+  hasMessages: true,
+});
+const pendingConversation = getDefaultConversation({
+  acceptedMessageRequest: false,
+  hasMessages: true,
+});
+const noMessages = getDefaultConversation({
+  hasMessages: false,
+});
 const conversationWithAbout = getDefaultConversation({
+  acceptedMessageRequest: true,
   aboutText: '😀 About Me',
+  hasMessages: true,
 });
 const systemContact = getDefaultConversation({
+  acceptedMessageRequest: true,
   systemGivenName: 'Alice',
   phoneNumber: '+1 555 123-4567',
+  hasMessages: true,
 });
 
 export default {
@@ -31,7 +55,9 @@ export default {
     i18n,
     onClose: action('onClose'),
     toggleSignalConnectionsModal: action('toggleSignalConnections'),
+    toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
     updateSharedGroups: action('updateSharedGroups'),
+    unblurAvatar: action('unblurAvatar'),
     conversation,
     isSignalConnection: false,
   },
@@ -41,6 +67,22 @@ export function Defaults(args: PropsType): JSX.Element {
   return <AboutContactModal {...args} />;
 }
 
+export function Verified(args: PropsType): JSX.Element {
+  return <AboutContactModal {...args} conversation={verifiedConversation} />;
+}
+
+export function Blocked(args: PropsType): JSX.Element {
+  return <AboutContactModal {...args} conversation={blockedConversation} />;
+}
+
+export function Pending(args: PropsType): JSX.Element {
+  return <AboutContactModal {...args} conversation={pendingConversation} />;
+}
+
+export function NoMessages(args: PropsType): JSX.Element {
+  return <AboutContactModal {...args} conversation={noMessages} />;
+}
+
 export function WithAbout(args: PropsType): JSX.Element {
   return <AboutContactModal {...args} conversation={conversationWithAbout} />;
 }

ts/components/conversation/AboutContactModal.tsx

@@ -5,7 +5,8 @@ import React, { useCallback, useEffect } from 'react';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { LocalizerType } from '../../types/Util';
 import { isInSystemContacts } from '../../util/isInSystemContacts';
-import { Avatar, AvatarSize } from '../Avatar';
+import { shouldBlurAvatar } from '../../util/shouldBlurAvatar';
+import { Avatar, AvatarBlur, AvatarSize } from '../Avatar';
 import { Modal } from '../Modal';
 import { UserText } from '../UserText';
 import { SharedGroupNames } from '../SharedGroupNames';
@@ -21,7 +22,9 @@ export type ExternalPropsType = Readonly<{
   conversation: ConversationType;
   isSignalConnection: boolean;
   toggleSignalConnectionsModal: () => void;
+  toggleSafetyNumberModal: (id: string) => void;
   updateSharedGroups: (id: string) => void;
+  unblurAvatar: (conversationId: string) => void;
 }>;
 
 export function AboutContactModal({
@@ -29,7 +32,9 @@ export function AboutContactModal({
   conversation,
   isSignalConnection,
   toggleSignalConnectionsModal,
+  toggleSafetyNumberModal,
   updateSharedGroups,
+  unblurAvatar,
   onClose,
 }: PropsType): JSX.Element {
   useEffect(() => {
@@ -37,6 +42,16 @@ export function AboutContactModal({
     updateSharedGroups(conversation.id);
   }, [conversation.id, updateSharedGroups]);
 
+  const avatarBlur = shouldBlurAvatar(conversation)
+    ? AvatarBlur.BlurPictureWithClickToView
+    : AvatarBlur.NoBlur;
+
+  const onAvatarClick = useCallback(() => {
+    if (avatarBlur === AvatarBlur.BlurPictureWithClickToView) {
+      unblurAvatar(conversation.id);
+    }
+  }, [avatarBlur, unblurAvatar, conversation.id]);
+
   const onSignalConnectionClick = useCallback(
     (ev: React.MouseEvent) => {
       ev.preventDefault();
@@ -45,6 +60,43 @@ export function AboutContactModal({
     [toggleSignalConnectionsModal]
   );
 
+  const onVerifiedClick = useCallback(
+    (ev: React.MouseEvent) => {
+      ev.preventDefault();
+      toggleSafetyNumberModal(conversation.id);
+    },
+    [toggleSafetyNumberModal, conversation.id]
+  );
+
+  let statusRow: JSX.Element | undefined;
+
+  if (conversation.isBlocked) {
+    statusRow = (
+      <div className="AboutContactModal__row">
+        <i className="AboutContactModal__row__icon AboutContactModal__row__icon--blocked" />
+        {i18n('icu:AboutContactModal__blocked', {
+          name: conversation.title,
+        })}
+      </div>
+    );
+  } else if (!conversation.acceptedMessageRequest) {
+    statusRow = (
+      <div className="AboutContactModal__row">
+        <i className="AboutContactModal__row__icon AboutContactModal__row__icon--message-request" />
+        {i18n('icu:AboutContactModal__message-request')}
+      </div>
+    );
+  } else if (!conversation.hasMessages && !conversation.profileSharing) {
+    statusRow = (
+      <div className="AboutContactModal__row">
+        <i className="AboutContactModal__row__icon AboutContactModal__row__icon--no-dms" />
+        {i18n('icu:AboutContactModal__no-dms', {
+          name: conversation.title,
+        })}
+      </div>
+    );
+  }
+
   return (
     <Modal
       key="main"
@@ -58,6 +110,8 @@ export function AboutContactModal({
         <Avatar
           acceptedMessageRequest={conversation.acceptedMessageRequest}
           avatarPath={conversation.avatarPath}
+          blur={avatarBlur}
+          onClick={avatarBlur === AvatarBlur.NoBlur ? undefined : onAvatarClick}
           badge={undefined}
           color={conversation.color}
           conversationType="direct"
@@ -82,6 +136,19 @@ export function AboutContactModal({
         <UserText text={conversation.title} />
       </div>
 
+      {conversation.isVerified ? (
+        <div className="AboutContactModal__row">
+          <i className="AboutContactModal__row__icon AboutContactModal__row__icon--verified" />
+          <button
+            type="button"
+            className="AboutContactModal__verified"
+            onClick={onVerifiedClick}
+          >
+            {i18n('icu:AboutContactModal__verified')}
+          </button>
+        </div>
+      ) : null}
+
       {conversation.about ? (
         <div className="AboutContactModal__row">
           <i className="AboutContactModal__row__icon AboutContactModal__row__icon--about" />
@@ -130,6 +197,8 @@ export function AboutContactModal({
           />
         </div>
       </div>
+
+      {statusRow}
     </Modal>
   );
 }

ts/state/smart/GlobalModalContainer.tsx

@@ -110,9 +110,10 @@ export function SmartGlobalModalContainer(): JSX.Element {
     showSendEditWarningModal,
     toggleAboutContactModal,
     toggleSignalConnectionsModal,
+    toggleSafetyNumberModal,
   } = useGlobalModalActions();
 
-  const { updateSharedGroups } = useConversationsActions();
+  const { updateSharedGroups, unblurAvatar } = useConversationsActions();
 
   let aboutContactModalProps: AboutContactModalPropsType | undefined;
   if (aboutContactModalRawProps) {
@@ -122,7 +123,9 @@ export function SmartGlobalModalContainer(): JSX.Element {
       conversation,
       isSignalConnection: isSignalConnection(conversation),
       toggleSignalConnectionsModal,
+      toggleSafetyNumberModal,
       updateSharedGroups,
+      unblurAvatar,
     };
   }