DeliveryIssueDialog: Add learn more button linking to support

This commit is contained in:
Scott Nonnenberg 2021-07-30 13:30:59 -07:00 committed by GitHub
parent d0bf9f929b
commit bf7da5ca2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 515 additions and 89 deletions

View file

@ -8,24 +8,30 @@ import { Modal } from '../Modal';
import { Intl } from '../Intl';
import { Emojify } from './Emojify';
import { useRestoreFocus } from '../../util/hooks';
import { LocalizerType } from '../../types/Util';
export type PropsType = {
i18n: LocalizerType;
sender: ConversationType;
inGroup: boolean;
learnMoreAboutDeliveryIssue: () => unknown;
onClose: () => unknown;
};
export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
const { i18n, inGroup, sender, onClose } = props;
const { i18n, inGroup, learnMoreAboutDeliveryIssue, sender, onClose } = props;
const key = inGroup
? 'DeliveryIssue--summary--group'
: 'DeliveryIssue--summary';
// Focus first button after initial render, restore focus on teardown
const [focusRef] = useRestoreFocus();
return (
<Modal hasXButton={false} i18n={i18n}>
<Modal hasXButton={false} onClose={onClose} i18n={i18n}>
<div className="module-delivery-issue-dialog">
<div className="module-delivery-issue-dialog__image">
<img
@ -48,10 +54,18 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
/>
</div>
<div className="module-delivery-issue-dialog__buttons">
<button
type="button"
onClick={learnMoreAboutDeliveryIssue}
className="module-delivery-issue-dialog__learn-more-button"
>
{i18n('DeliveryIssue--learnMore')}
</button>
<button
type="button"
onClick={onClose}
className="module-delivery-issue-dialog__button"
ref={focusRef}
className="module-delivery-issue-dialog__close-button"
>
{i18n('Confirmation--confirm')}
</button>