signal-desktop/ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import type { ReactNode } from 'react';
import React from 'react';

import type { LocalizerType, ThemeType } from '../types/Util';
import type { ConversationType } from '../state/ducks/conversations';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import { Intl } from './Intl';
import { ContactName } from './conversation/ContactName';
import { GroupDialog } from './GroupDialog';
import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser';

type PropsType = {
  contacts: Array<ConversationType>;
  getPreferredBadge: PreferredBadgeSelectorType;
  i18n: LocalizerType;
  onClose: () => void;
  theme: ThemeType;
};

export function NewlyCreatedGroupInvitedContactsDialog({
  contacts,
  getPreferredBadge,
  i18n,
  onClose,
  theme,
}: PropsType): JSX.Element {
  let body: ReactNode;
  if (contacts.length === 1) {
    const contact = contacts[0];

    body = (
      <>
        <GroupDialog.Paragraph>
          <Intl
            i18n={i18n}
            id="icu:NewlyCreatedGroupInvitedContactsDialog--body--user-paragraph--one"
            components={{ name: <ContactName title={contact.title} /> }}
          />
        </GroupDialog.Paragraph>
        <GroupDialog.Paragraph>
          {i18n(
            'icu:NewlyCreatedGroupInvitedContactsDialog--body--info-paragraph'
          )}
        </GroupDialog.Paragraph>
      </>
    );
  } else {
    body = (
      <>
        <GroupDialog.Paragraph>
          {i18n(
            'icu:NewlyCreatedGroupInvitedContactsDialog--body--user-paragraph--many'
          )}
        </GroupDialog.Paragraph>
        <GroupDialog.Paragraph>
          {i18n(
            'icu:NewlyCreatedGroupInvitedContactsDialog--body--info-paragraph'
          )}
        </GroupDialog.Paragraph>
        <GroupDialog.Contacts
          contacts={contacts}
          getPreferredBadge={getPreferredBadge}
          i18n={i18n}
          theme={theme}
        />
      </>
    );
  }

  return (
    <GroupDialog
      i18n={i18n}
      onClickPrimaryButton={onClose}
      primaryButtonText={i18n('icu:Confirmation--confirm')}
      secondaryButtonText={i18n(
        'icu:NewlyCreatedGroupInvitedContactsDialog--body--learn-more'
      )}
      onClickSecondaryButton={() => {
        openLinkInWebBrowser(
          'https://support.signal.org/hc/articles/360007319331-Group-chats'
        );
      }}
      onClose={onClose}
      title={i18n('icu:NewlyCreatedGroupInvitedContactsDialog--title', {
        count: contacts.length,
      })}
    >
      {body}
    </GroupDialog>
  );
}