114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
import { memo } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { ApiPeer } from '../../api/types';
|
|
|
|
import { getPeerTitle, isApiPeerUser } from '../../global/helpers/peers';
|
|
import { selectPeer, selectTheme, selectThemeValues } from '../../global/selectors';
|
|
import { formatStarsAsIcon } from '../../util/localization/format';
|
|
import { LOCAL_TGS_URLS } from '../common/helpers/animatedAssets';
|
|
import renderText from '../common/helpers/renderText';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import useLastCallback from '../../hooks/useLastCallback';
|
|
import useOldLang from '../../hooks/useOldLang';
|
|
|
|
import AnimatedIconWithPreview from '../common/AnimatedIconWithPreview';
|
|
import Icon from '../common/icons/Icon';
|
|
import Sparkles from '../common/Sparkles';
|
|
import Button from '../ui/Button';
|
|
|
|
import styles from './RequirementToContactMessage.module.scss';
|
|
|
|
type OwnProps = {
|
|
peerId: string;
|
|
paidMessagesStars?: number;
|
|
};
|
|
|
|
type StateProps = {
|
|
patternColor?: string;
|
|
peer?: ApiPeer;
|
|
};
|
|
|
|
function RequirementToContactMessage({
|
|
patternColor, peer, paidMessagesStars,
|
|
}: OwnProps & StateProps) {
|
|
const oldLang = useOldLang();
|
|
const lang = useLang();
|
|
const { openPremiumModal, openStarsBalanceModal } = getActions();
|
|
|
|
const handleOpenPremiumModal = useLastCallback(() => openPremiumModal());
|
|
|
|
const handleGetMoreStars = useLastCallback(() => {
|
|
openStarsBalanceModal({});
|
|
});
|
|
|
|
if (!peer) return undefined;
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<div className={styles.inner}>
|
|
<div className={styles.iconsContainer}>
|
|
<AnimatedIconWithPreview
|
|
tgsUrl={LOCAL_TGS_URLS.Unlock}
|
|
size={54}
|
|
color={patternColor}
|
|
className={styles.animatedUnlock}
|
|
/>
|
|
<Icon name="comments-sticker" className={styles.commentsIcon} />
|
|
</div>
|
|
<span className={styles.description}>
|
|
{
|
|
paidMessagesStars
|
|
? lang(isApiPeerUser(peer) ? 'MessagesPlaceholderPaidUser' : 'MessagesPlaceholderPaidChannel', {
|
|
peer: getPeerTitle(lang, peer),
|
|
amount: formatStarsAsIcon(lang,
|
|
paidMessagesStars,
|
|
{
|
|
asFont: true,
|
|
className: styles.starIcon,
|
|
containerClassName: styles.starIconContainer,
|
|
}),
|
|
}, {
|
|
withNodes: true,
|
|
withMarkdown: true,
|
|
})
|
|
: renderText(oldLang('MessageLockedPremium', getPeerTitle(lang, peer)), ['simple_markdown'])
|
|
}
|
|
</span>
|
|
<Button
|
|
color="translucent-black"
|
|
size="default"
|
|
pill
|
|
onClick={paidMessagesStars ? handleGetMoreStars : handleOpenPremiumModal}
|
|
className={styles.button}
|
|
>
|
|
{
|
|
paidMessagesStars
|
|
? (
|
|
<>
|
|
{lang('ButtonBuyStars')}
|
|
<Sparkles preset="button" />
|
|
</>
|
|
)
|
|
: oldLang('MessagePremiumUnlock')
|
|
}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(
|
|
withGlobal<OwnProps>((global, { peerId: userId }): Complete<StateProps> => {
|
|
const theme = selectTheme(global);
|
|
const { patternColor } = selectThemeValues(global, theme) || {};
|
|
const peer = selectPeer(global, userId);
|
|
|
|
return {
|
|
patternColor,
|
|
peer,
|
|
};
|
|
})(RequirementToContactMessage),
|
|
);
|