98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import React, { memo } from '../../../../lib/teact/teact';
|
|
import { getActions } from '../../../../global';
|
|
|
|
import type {
|
|
ApiStarsSubscription,
|
|
} from '../../../../api/types';
|
|
import type { GlobalState } from '../../../../global/types';
|
|
|
|
import { getPeerTitle } from '../../../../global/helpers';
|
|
import { selectPeer } from '../../../../global/selectors';
|
|
import { formatDateToString } from '../../../../util/dates/dateFormat';
|
|
import { formatInteger } from '../../../../util/textFormat';
|
|
import renderText from '../../../common/helpers/renderText';
|
|
|
|
import useSelector from '../../../../hooks/data/useSelector';
|
|
import useLastCallback from '../../../../hooks/useLastCallback';
|
|
import useOldLang from '../../../../hooks/useOldLang';
|
|
|
|
import Avatar from '../../../common/Avatar';
|
|
import StarIcon from '../../../common/icons/StarIcon';
|
|
|
|
import styles from './StarsSubscriptionItem.module.scss';
|
|
|
|
type OwnProps = {
|
|
subscription: ApiStarsSubscription;
|
|
};
|
|
|
|
function selectProvidedPeer(peerId: string) {
|
|
return (global: GlobalState) => (
|
|
selectPeer(global, peerId)
|
|
);
|
|
}
|
|
|
|
const StarsSubscriptionItem = ({ subscription }: OwnProps) => {
|
|
const { openStarsSubscriptionModal } = getActions();
|
|
const {
|
|
peerId, pricing, until, isCancelled, title, photo,
|
|
} = subscription;
|
|
const lang = useOldLang();
|
|
|
|
const peer = useSelector(selectProvidedPeer(peerId))!;
|
|
|
|
const handleClick = useLastCallback(() => {
|
|
openStarsSubscriptionModal({ subscription });
|
|
});
|
|
|
|
if (!peer) {
|
|
return undefined;
|
|
}
|
|
|
|
const hasExpired = until < Date.now() / 1000;
|
|
const formattedDate = formatDateToString(until * 1000, lang.code, true, 'long');
|
|
|
|
return (
|
|
<div className={styles.root} onClick={handleClick}>
|
|
<div className={styles.preview}>
|
|
<Avatar size="medium" peer={peer} />
|
|
<StarIcon className={styles.subscriptionStar} type="gold" size="small" />
|
|
</div>
|
|
<div className={styles.info}>
|
|
<h3 className={styles.title}>{renderText(getPeerTitle(lang, peer) || '')}</h3>
|
|
{title && (
|
|
<p className={styles.subtitle}>
|
|
{photo && <Avatar webPhoto={photo} size="micro" />}
|
|
{renderText(title)}
|
|
</p>
|
|
)}
|
|
<p className={styles.description}>
|
|
{lang(
|
|
hasExpired ? 'StarsSubscriptionExpired'
|
|
: isCancelled ? 'StarsSubscriptionExpires' : 'StarsSubscriptionRenews',
|
|
formattedDate,
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className={styles.status}>
|
|
{(isCancelled || hasExpired) ? (
|
|
<div className={styles.statusEnded}>
|
|
{lang(hasExpired ? 'StarsSubscriptionStatusExpired' : 'StarsSubscriptionStatusCancelled')}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className={styles.statusPricing}>
|
|
<StarIcon className={styles.star} type="gold" size="adaptive" />
|
|
<span className={styles.amount}>
|
|
{formatInteger(pricing.amount)}
|
|
</span>
|
|
</div>
|
|
<div className={styles.statusPeriod}>{lang('StarsParticipantSubscriptionPerMonth')}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(StarsSubscriptionItem);
|