114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import { memo } from '../../../lib/teact/teact';
|
|
import { withGlobal } from '../../../global';
|
|
|
|
import type {
|
|
ApiPremiumGiftCodeOption,
|
|
ApiSticker,
|
|
} from '../../../api/types';
|
|
|
|
import {
|
|
selectCanPlayAnimatedEmojis,
|
|
selectGiftStickerForDuration,
|
|
} from '../../../global/selectors';
|
|
import { formatCurrencyAsString } from '../../../util/formatCurrency';
|
|
import { formatStarsAsIcon } from '../../../util/localization/format';
|
|
|
|
import useLang from '../../../hooks/useLang';
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
|
|
import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
|
|
import GiftRibbon from '../../common/gift/GiftRibbon';
|
|
import Button from '../../ui/Button';
|
|
|
|
import styles from './GiftItem.module.scss';
|
|
|
|
export type OwnProps = {
|
|
option: ApiPremiumGiftCodeOption;
|
|
optionByStars?: ApiPremiumGiftCodeOption;
|
|
baseMonthAmount?: number;
|
|
onClick: (gift: ApiPremiumGiftCodeOption) => void;
|
|
};
|
|
|
|
export type StateProps = {
|
|
sticker?: ApiSticker;
|
|
canPlayAnimatedEmojis?: boolean;
|
|
};
|
|
|
|
const GIFT_STICKER_SIZE = 86;
|
|
|
|
function GiftItemPremium({
|
|
sticker, canPlayAnimatedEmojis, baseMonthAmount, option, optionByStars, onClick,
|
|
}: OwnProps & StateProps) {
|
|
const {
|
|
months, amount, currency,
|
|
} = option;
|
|
const lang = useLang();
|
|
|
|
const handleGiftClick = useLastCallback(() => {
|
|
onClick(option);
|
|
});
|
|
|
|
const perMonth = Math.floor(amount / months);
|
|
const discount = baseMonthAmount && baseMonthAmount > perMonth
|
|
? Math.ceil(100 - perMonth / (baseMonthAmount / 100))
|
|
: undefined;
|
|
|
|
function renderMonths() {
|
|
const caption = months === 12
|
|
? lang('Years', { count: 1 }, { pluralValue: 1 })
|
|
: lang('Months', { count: months }, { pluralValue: months });
|
|
return (
|
|
<div className={styles.monthsDescription}>
|
|
{caption}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={styles.container}
|
|
tabIndex={0}
|
|
role="button"
|
|
onClick={handleGiftClick}
|
|
>
|
|
<AnimatedIconFromSticker
|
|
sticker={sticker}
|
|
play={canPlayAnimatedEmojis}
|
|
noLoop
|
|
nonInteractive
|
|
size={GIFT_STICKER_SIZE}
|
|
/>
|
|
|
|
{renderMonths()}
|
|
<div className={styles.description}>
|
|
{lang('PremiumGiftDescription')}
|
|
</div>
|
|
<Button className={styles.buy} color="adaptive" nonInteractive size="tiny" pill fluid>
|
|
{formatCurrencyAsString(amount, currency)}
|
|
</Button>
|
|
{optionByStars && (
|
|
<div className={styles.starsPriceBlock}>
|
|
{lang('GiftPremiumStarsPrice', {
|
|
stars: (formatStarsAsIcon(lang, optionByStars.amount)),
|
|
}, { withNodes: true, withMarkdown: true })}
|
|
</div>
|
|
)}
|
|
{Boolean(discount) && (
|
|
<GiftRibbon color="purple" text={lang('GiftDiscount', { percent: discount })} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { option }): Complete<StateProps> => {
|
|
const sticker = selectGiftStickerForDuration(global, option.months);
|
|
const canPlayAnimatedEmojis = selectCanPlayAnimatedEmojis(global);
|
|
|
|
return {
|
|
sticker,
|
|
canPlayAnimatedEmojis,
|
|
};
|
|
},
|
|
)(GiftItemPremium));
|