95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import { memo } from '../../../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../../../global';
|
|
|
|
import type { ApiMessage, ApiPeer } from '../../../../api/types';
|
|
import type { ApiMessageActionSuggestedPostApproval } from '../../../../api/types/messageActions';
|
|
|
|
import { STARS_CURRENCY_CODE, TON_CURRENCY_CODE } from '../../../../config';
|
|
import { getPeerFullTitle } from '../../../../global/helpers/peers';
|
|
import { selectChatMessage, selectSender } from '../../../../global/selectors';
|
|
import buildClassName from '../../../../util/buildClassName';
|
|
import { renderPeerLink } from '../helpers/messageActions';
|
|
|
|
import useLang from '../../../../hooks/useLang';
|
|
import useLastCallback from '../../../../hooks/useLastCallback';
|
|
|
|
import Sparkles from '../../../common/Sparkles';
|
|
|
|
import styles from '../ActionMessage.module.scss';
|
|
|
|
type OwnProps = {
|
|
message: ApiMessage;
|
|
action: ApiMessageActionSuggestedPostApproval;
|
|
onClick?: NoneToVoidFunction;
|
|
};
|
|
|
|
type StateProps = {
|
|
sender?: ApiPeer;
|
|
replyMessageSender?: ApiPeer;
|
|
replyMessage?: ApiMessage;
|
|
};
|
|
|
|
const SuggestedPostBalanceTooLow = ({
|
|
onClick,
|
|
message,
|
|
sender,
|
|
replyMessageSender,
|
|
replyMessage,
|
|
}: OwnProps & StateProps) => {
|
|
const { openStarsBalanceModal } = getActions();
|
|
const lang = useLang();
|
|
|
|
const handleGetMoreStars = useLastCallback((e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
openStarsBalanceModal({});
|
|
});
|
|
|
|
const targetPeer = replyMessageSender || sender;
|
|
const peerTitle = targetPeer && getPeerFullTitle(lang, targetPeer);
|
|
const peerLink = renderPeerLink(targetPeer?.id, peerTitle || lang('ActionFallbackUser'));
|
|
|
|
const currency = replyMessage?.suggestedPostInfo?.price?.currency || STARS_CURRENCY_CODE;
|
|
const currencyName = currency === TON_CURRENCY_CODE ? lang('CurrencyTon') : lang('CurrencyStars');
|
|
const buyButtonText = currency === TON_CURRENCY_CODE ? lang('ButtonTopUpViaFragment') : lang('ButtonBuyStars');
|
|
|
|
return (
|
|
<div
|
|
className={buildClassName(styles.contentBox, styles.suggestedPostBalanceTooLowBox)}
|
|
onClick={onClick}
|
|
>
|
|
<div className={styles.suggestedPostBalanceTooLowTitle}>
|
|
{lang('SuggestedPostBalanceTooLow', {
|
|
peer: peerLink,
|
|
currency: currencyName,
|
|
}, { withNodes: true, withMarkdown: true })}
|
|
</div>
|
|
|
|
{!message.isOutgoing && (
|
|
<div className={styles.actionButton} onClick={handleGetMoreStars}>
|
|
<Sparkles preset="button" />
|
|
{buyButtonText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { message }): StateProps => {
|
|
const sender = selectSender(global, message);
|
|
|
|
const replyMessage = message.replyInfo?.type === 'message' && message.replyInfo.replyToMsgId
|
|
? selectChatMessage(global, message.chatId, message.replyInfo.replyToMsgId)
|
|
: undefined;
|
|
|
|
const replyMessageSender = replyMessage ? selectSender(global, replyMessage) : undefined;
|
|
|
|
return {
|
|
sender,
|
|
replyMessageSender,
|
|
replyMessage,
|
|
};
|
|
},
|
|
)(SuggestedPostBalanceTooLow));
|