signal-desktop/ts/components/DonationVerificationModal.tsx

73 lines
2 KiB
TypeScript

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect, useState } from 'react';
import type { LocalizerType } from '../types/Util.js';
import { Modal } from './Modal.js';
import { Button, ButtonVariant } from './Button.js';
import { DAY } from '../util/durations/index.js';
export type PropsType = {
// Test-only
_timeout?: number;
i18n: LocalizerType;
onCancelDonation: () => unknown;
onOpenBrowser: () => unknown;
onTimedOut: () => unknown;
};
export function DonationVerificationModal(props: PropsType): JSX.Element {
const { _timeout, i18n, onCancelDonation, onOpenBrowser, onTimedOut } = props;
const [hasOpenedBrowser, setHasOpenedBrowser] = useState(false);
const titleText = hasOpenedBrowser
? i18n('icu:Donations__3dsValidationNeeded--waiting')
: i18n('icu:Donations__3dsValidationNeeded');
const openBrowserText = hasOpenedBrowser
? i18n('icu:Donations__3dsValidationNeeded__OpenBrowser--opened')
: i18n('icu:Donations__3dsValidationNeeded__OpenBrowser');
const footer = (
<>
<Button variant={ButtonVariant.Secondary} onClick={onCancelDonation}>
{i18n('icu:Donations__3dsValidationNeeded__CancelDonation')}
</Button>
<Button
onClick={() => {
setHasOpenedBrowser(true);
onOpenBrowser();
}}
>
{openBrowserText}
</Button>
</>
);
useEffect(() => {
let timeout: NodeJS.Timeout | undefined = setTimeout(() => {
timeout = undefined;
onTimedOut();
}, _timeout ?? DAY);
return () => {
if (timeout) {
clearTimeout(timeout);
}
};
}, [_timeout, onTimedOut]);
return (
<Modal
i18n={i18n}
modalFooter={footer}
moduleClassName="DonationVerificationModal"
modalName="DonationVerificationModal"
noMouseClose
onClose={onCancelDonation}
title={titleText}
>
{i18n('icu:Donations__3dsValidationNeeded__Description')}
</Modal>
);
}