Delivery Issues: Show simpler message when displayed in a group

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}
         />