103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
import {
|
|
memo,
|
|
useState,
|
|
} from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { TabState } from '../../global/types';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
|
|
import useLang from '../../hooks/useLang';
|
|
import useLastCallback from '../../hooks/useLastCallback';
|
|
|
|
import Modal from '../ui/Modal';
|
|
import PasswordForm from './PasswordForm';
|
|
|
|
import styles from './VerificationMonetizationModal.module.scss';
|
|
|
|
export type OwnProps = {
|
|
modal: TabState['monetizationVerificationModal'];
|
|
};
|
|
|
|
type StateProps = {
|
|
passwordHint?: string;
|
|
};
|
|
|
|
const VerificationMonetizationModal = ({
|
|
modal,
|
|
passwordHint,
|
|
}: OwnProps & StateProps) => {
|
|
const {
|
|
closeMonetizationVerificationModal, clearMonetizationVerificationError, processMonetizationRevenueWithdrawalUrl,
|
|
} = getActions();
|
|
|
|
const isOpen = Boolean(modal);
|
|
|
|
const renderingModal = useCurrentOrPrev(modal);
|
|
|
|
const lang = useLang();
|
|
|
|
const [shouldShowPassword, setShouldShowPassword] = useState(false);
|
|
|
|
const handleSubmit = useLastCallback((password: string) => {
|
|
if (!renderingModal) return;
|
|
processMonetizationRevenueWithdrawalUrl({
|
|
peerId: renderingModal.chatId,
|
|
currentPassword: password,
|
|
});
|
|
});
|
|
|
|
const handleClearError = useLastCallback(() => {
|
|
clearMonetizationVerificationError();
|
|
});
|
|
|
|
const handleClose = useLastCallback(() => {
|
|
closeMonetizationVerificationModal();
|
|
});
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
hasCloseButton
|
|
title={lang('CheckPasswordTitle')}
|
|
className={styles.root}
|
|
contentClassName={styles.content}
|
|
onClose={handleClose}
|
|
>
|
|
<div className={buildClassName(styles.content, 'settings-content password-form custom-scroll')}>
|
|
<div className="settings-item pt-0">
|
|
<PasswordForm
|
|
shouldShowSubmit
|
|
placeholder={lang('CheckPasswordPlaceholder')}
|
|
error={renderingModal?.errorKey && lang.withRegular(renderingModal.errorKey)}
|
|
description={lang('CheckPasswordDescription')}
|
|
onClearError={handleClearError}
|
|
isLoading={renderingModal?.isLoading}
|
|
hint={passwordHint}
|
|
isPasswordVisible={shouldShowPassword}
|
|
shouldResetValue={isOpen}
|
|
onChangePasswordVisibility={setShouldShowPassword}
|
|
onSubmit={handleSubmit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal(
|
|
(global): Complete<StateProps> => {
|
|
const {
|
|
twoFaSettings: {
|
|
hint: passwordHint,
|
|
},
|
|
} = global;
|
|
|
|
return {
|
|
passwordHint,
|
|
};
|
|
},
|
|
)(VerificationMonetizationModal));
|