136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
import React, { memo, useEffect, useState } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { ApiStealthMode } from '../../api/types';
|
|
|
|
import { selectIsCurrentUserPremium, selectTabState } from '../../global/selectors';
|
|
import buildClassName from '../../util/buildClassName';
|
|
import { getServerTime } from '../../util/serverTime';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import useLastCallback from '../../hooks/useLastCallback';
|
|
|
|
import Button from '../ui/Button';
|
|
import ListItem from '../ui/ListItem';
|
|
import Modal from '../ui/Modal';
|
|
import TextTimer from '../ui/TextTimer';
|
|
|
|
import styles from './StealthModeModal.module.scss';
|
|
|
|
type StateProps = {
|
|
isOpen?: boolean;
|
|
stealthMode?: ApiStealthMode;
|
|
isCurrentUserPremium?: boolean;
|
|
};
|
|
|
|
const StealthModeModal = ({ isOpen, stealthMode, isCurrentUserPremium } : StateProps) => {
|
|
const {
|
|
toggleStealthModal,
|
|
activateStealthMode,
|
|
showNotification,
|
|
openPremiumModal,
|
|
} = getActions();
|
|
const [isOnCooldown, setIsOnCooldown] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!stealthMode) return;
|
|
const serverTime = getServerTime();
|
|
if (stealthMode.cooldownUntil && stealthMode.cooldownUntil > serverTime) {
|
|
setIsOnCooldown(true);
|
|
}
|
|
}, [stealthMode, isOpen]);
|
|
|
|
const lang = useLang();
|
|
|
|
const handleTimerEnds = useLastCallback(() => {
|
|
setIsOnCooldown(false);
|
|
});
|
|
|
|
const handleClose = useLastCallback(() => {
|
|
toggleStealthModal({ isOpen: false });
|
|
});
|
|
|
|
const handleActivate = useLastCallback(() => {
|
|
if (!isCurrentUserPremium) {
|
|
openPremiumModal({ initialSection: 'stories' });
|
|
return;
|
|
}
|
|
|
|
activateStealthMode();
|
|
showNotification({
|
|
title: lang('StealthModeOn'),
|
|
message: lang('StealthModeOnHint'),
|
|
});
|
|
toggleStealthModal({ isOpen: false });
|
|
});
|
|
|
|
return (
|
|
<Modal
|
|
className="component-theme-dark"
|
|
contentClassName={styles.root}
|
|
isOpen={isOpen}
|
|
isSlim
|
|
onClose={handleClose}
|
|
>
|
|
<Button
|
|
round
|
|
color="translucent"
|
|
size="smaller"
|
|
className={styles.close}
|
|
ariaLabel={lang('Close')}
|
|
onClick={handleClose}
|
|
>
|
|
<i className="icon icon-close" />
|
|
</Button>
|
|
<div className={styles.stealthIcon}>
|
|
<i className="icon icon-eye-closed-outline" />
|
|
</div>
|
|
<div className={styles.title}>{lang('StealthMode')}</div>
|
|
<div className={styles.description}>
|
|
{lang(isCurrentUserPremium ? 'StealthModeHint' : 'StealthModePremiumHint')}
|
|
</div>
|
|
<ListItem
|
|
className={buildClassName(styles.listItem, 'smaller-icon')}
|
|
multiline
|
|
inactive
|
|
leftElement={<i className={buildClassName('icon icon-stealth-past', styles.icon)} />}
|
|
>
|
|
<span className="title">{lang('HideRecentViews')}</span>
|
|
<span className={buildClassName('subtitle', styles.subtitle)}>{lang('HideRecentViewsDescription')}</span>
|
|
</ListItem>
|
|
<ListItem
|
|
className={buildClassName(styles.listItem, 'smaller-icon')}
|
|
multiline
|
|
inactive
|
|
leftElement={<i className={buildClassName('icon icon-stealth-future', styles.icon)} aria-hidden />}
|
|
>
|
|
<span className="title">{lang('HideNextViews')}</span>
|
|
<span className={buildClassName('subtitle', styles.subtitle)}>{lang('HideNextViewsDescription')}</span>
|
|
</ListItem>
|
|
<Button
|
|
className={styles.button}
|
|
size="smaller"
|
|
disabled={isOnCooldown}
|
|
isShiny={!isCurrentUserPremium}
|
|
withPremiumGradient={!isCurrentUserPremium}
|
|
onClick={handleActivate}
|
|
>
|
|
{!isCurrentUserPremium ? lang('UnlockStealthMode')
|
|
: isOnCooldown
|
|
? (<TextTimer langKey="AvailableIn" endsAt={stealthMode!.cooldownUntil!} onEnd={handleTimerEnds} />)
|
|
: lang('EnableStealthMode')}
|
|
</Button>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal((global): StateProps => {
|
|
const tabState = selectTabState(global);
|
|
|
|
return {
|
|
isOpen: tabState.storyViewer?.isStealthModalOpen,
|
|
stealthMode: global.stories.stealthMode,
|
|
isCurrentUserPremium: selectIsCurrentUserPremium(global),
|
|
};
|
|
})(StealthModeModal));
|