78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import { memo, useMemo, useState } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { ApiPaymentCredentials } from '../../api/types';
|
|
import type { FormState } from '../../hooks/reducers/usePaymentReducer';
|
|
import type { RegularLangFnParameters } from '../../util/localization';
|
|
|
|
import { selectTabState } from '../../global/selectors';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import useOldLang from '../../hooks/useOldLang';
|
|
|
|
import PasswordForm from '../common/PasswordForm';
|
|
import PasswordMonkey from '../common/PasswordMonkey';
|
|
|
|
interface OwnProps {
|
|
isActive?: boolean;
|
|
state: FormState;
|
|
savedCredentials?: ApiPaymentCredentials[];
|
|
onPasswordChange: (password: string) => void;
|
|
}
|
|
|
|
interface StateProps {
|
|
errorKey?: RegularLangFnParameters;
|
|
passwordHint?: string;
|
|
savedCredentials?: ApiPaymentCredentials[];
|
|
}
|
|
|
|
const PasswordConfirm: FC<OwnProps & StateProps> = ({
|
|
isActive,
|
|
errorKey,
|
|
state,
|
|
savedCredentials,
|
|
passwordHint,
|
|
onPasswordChange,
|
|
}) => {
|
|
const { clearPaymentError } = getActions();
|
|
|
|
const oldLang = useOldLang();
|
|
const lang = useLang();
|
|
|
|
const [shouldShowPassword, setShouldShowPassword] = useState(false);
|
|
const cardName = useMemo(() => {
|
|
return savedCredentials?.length && state.savedCredentialId
|
|
? savedCredentials.find(({ id }) => id === state.savedCredentialId)?.title
|
|
: undefined;
|
|
}, [savedCredentials, state.savedCredentialId]);
|
|
|
|
return (
|
|
<div className="PaymentInfo">
|
|
<PasswordMonkey isBig isPasswordVisible={shouldShowPassword} />
|
|
|
|
<PasswordForm
|
|
error={errorKey && lang.withRegular(errorKey)}
|
|
hint={passwordHint}
|
|
description={oldLang('PaymentConfirmationMessage', cardName)}
|
|
placeholder={oldLang('Password')}
|
|
onClearError={clearPaymentError}
|
|
shouldShowSubmit={false}
|
|
shouldResetValue={isActive}
|
|
isPasswordVisible={shouldShowPassword}
|
|
onChangePasswordVisibility={setShouldShowPassword}
|
|
onInputChange={onPasswordChange}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>((global): StateProps => {
|
|
const { payment } = selectTabState(global);
|
|
return {
|
|
errorKey: payment.error?.messageKey,
|
|
passwordHint: global.twoFaSettings.hint,
|
|
savedCredentials: payment.form?.type === 'regular' ? payment.form.savedCredentials : undefined,
|
|
};
|
|
})(PasswordConfirm));
|