Support for creating New Groups

ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx

@@ -0,0 +1,80 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { FunctionComponent, ReactNode } from 'react';
+
+import { LocalizerType } from '../types/Util';
+import { ConversationType } from '../state/ducks/conversations';
+import { Intl } from './Intl';
+import { ContactName } from './conversation/ContactName';
+import { GroupDialog } from './GroupDialog';
+
+type PropsType = {
+  contacts: Array<ConversationType>;
+  i18n: LocalizerType;
+  onClose: () => void;
+};
+
+export const NewlyCreatedGroupInvitedContactsDialog: FunctionComponent<PropsType> = ({
+  contacts,
+  i18n,
+  onClose,
+}) => {
+  let title: string;
+  let body: ReactNode;
+  if (contacts.length === 1) {
+    const contact = contacts[0];
+
+    title = i18n('NewlyCreatedGroupInvitedContactsDialog--title--one');
+    body = (
+      <>
+        <GroupDialog.Paragraph>
+          <Intl
+            i18n={i18n}
+            id="NewlyCreatedGroupInvitedContactsDialog--body--user-paragraph--one"
+            components={[<ContactName i18n={i18n} title={contact.title} />]}
+          />
+        </GroupDialog.Paragraph>
+        <GroupDialog.Paragraph>
+          {i18n('NewlyCreatedGroupInvitedContactsDialog--body--info-paragraph')}
+        </GroupDialog.Paragraph>
+      </>
+    );
+  } else {
+    title = i18n('NewlyCreatedGroupInvitedContactsDialog--title--many', [
+      contacts.length.toString(),
+    ]);
+    body = (
+      <>
+        <GroupDialog.Paragraph>
+          {i18n(
+            'NewlyCreatedGroupInvitedContactsDialog--body--user-paragraph--many'
+          )}
+        </GroupDialog.Paragraph>
+        <GroupDialog.Paragraph>
+          {i18n('NewlyCreatedGroupInvitedContactsDialog--body--info-paragraph')}
+        </GroupDialog.Paragraph>
+        <GroupDialog.Contacts contacts={contacts} i18n={i18n} />
+      </>
+    );
+  }
+
+  return (
+    <GroupDialog
+      i18n={i18n}
+      onClickPrimaryButton={onClose}
+      primaryButtonText={i18n('Confirmation--confirm')}
+      secondaryButtonText={i18n(
+        'NewlyCreatedGroupInvitedContactsDialog--body--learn-more'
+      )}
+      onClickSecondaryButton={() => {
+        window.location.href =
+          'https://support.signal.org/hc/articles/360007319331-Group-chats';
+      }}
+      onClose={onClose}
+      title={title}
+    >
+      {body}
+    </GroupDialog>
+  );
+};