Delivery Issues: Show simpler message when displayed in a group

_locales/en/messages.json

@@ -1150,7 +1150,17 @@
   },
   "DeliveryIssue--summary": {
     "message": "A message, sticker, reaction, read receipt or media couldn’t be delivered to you from $sender$. They may have tried sending it to you directly, or in a group.",
-    "description": "Shown on explainer dialog available from delivery issue timeline events",
+    "description": "Shown on explainer dialog available from delivery issue timeline events in 1:1 conversations",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
+  },
+  "DeliveryIssue--summary--group": {
+    "message": "A message, sticker, reaction, read receipt or media couldn’t be delivered to you from $sender$ in this chat.",
+    "description": "Shown on explainer dialog available from delivery issue timeline events in groups",
     "placeholders": {
       "name": {
         "content": "$1",

ts/components/conversation/DeliveryIssueDialog.stories.tsx

@@ -20,6 +20,21 @@ storiesOf('Components/Conversation/DeliveryIssueDialog', module).add(
       <DeliveryIssueDialog
         i18n={i18n}
         sender={sender}
+        inGroup={false}
+        onClose={action('onClose')}
+      />
+    );
+  }
+);
+
+storiesOf('Components/Conversation/DeliveryIssueDialog', module).add(
+  'In Group',
+  () => {
+    return (
+      <DeliveryIssueDialog
+        i18n={i18n}
+        sender={sender}
+        inGroup
         onClose={action('onClose')}
       />
     );

ts/components/conversation/DeliveryIssueDialog.tsx

@@ -13,11 +13,16 @@ import { LocalizerType } from '../../types/Util';
 export type PropsType = {
   i18n: LocalizerType;
   sender: ConversationType;
+  inGroup: boolean;
   onClose: () => unknown;
 };
 
 export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
-  const { i18n, sender, onClose } = props;
+  const { i18n, inGroup, sender, onClose } = props;
+
+  const key = inGroup
+    ? 'DeliveryIssue--summary--group'
+    : 'DeliveryIssue--summary';
 
   return (
     <Modal hasXButton={false} i18n={i18n}>
@@ -35,7 +40,7 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
         </div>
         <div className="module-delivery-issue-dialog__description">
           <Intl
-            id="DeliveryIssue--summary"
+            id={key}
             components={{
               sender: <Emojify text={sender.title} />,
             }}

ts/components/conversation/DeliveryIssueNotification.stories.tsx

@@ -18,6 +18,15 @@ const sender = getDefaultConversation();
 storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
   'Default',
   () => {
-    return <DeliveryIssueNotification i18n={i18n} sender={sender} />;
+    return (
+      <DeliveryIssueNotification i18n={i18n} inGroup={false} sender={sender} />
+    );
+  }
+);
+
+storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
+  'In Group',
+  () => {
+    return <DeliveryIssueNotification i18n={i18n} inGroup sender={sender} />;
   }
 );

ts/components/conversation/DeliveryIssueNotification.tsx

@@ -12,6 +12,7 @@ import { DeliveryIssueDialog } from './DeliveryIssueDialog';
 
 export type PropsDataType = {
   sender?: ConversationType;
+  inGroup: boolean;
 };
 
 type PropsHousekeepingType = {
@@ -23,7 +24,7 @@ export type PropsType = PropsDataType & PropsHousekeepingType;
 export function DeliveryIssueNotification(
   props: PropsType
 ): ReactElement | null {
-  const { i18n, sender } = props;
+  const { i18n, inGroup, sender } = props;
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
 
   const openDialog = useCallback(() => {
@@ -59,6 +60,7 @@ export function DeliveryIssueNotification(
       {isDialogOpen ? (
         <DeliveryIssueDialog
           i18n={i18n}
+          inGroup={inGroup}
           sender={sender}
           onClose={closeDialog}
         />

ts/state/selectors/message.ts

@@ -857,9 +857,11 @@ function getPropsForDeliveryIssue(
   conversationSelector: GetConversationByIdType
 ): DeliveryIssuePropsType {
   const sender = conversationSelector(message.sourceUuid);
+  const conversation = conversationSelector(message.conversationId);
 
   return {
     sender,
+    inGroup: conversation.type === 'group',
   };
 }