116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import {
|
|
memo,
|
|
} from '../../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../../global';
|
|
|
|
import {
|
|
DEFAULT_MAXIMUM_CHARGE_FOR_MESSAGES,
|
|
MINIMUM_CHARGE_FOR_MESSAGES,
|
|
} from '../../../config';
|
|
import { formatCurrencyAsString } from '../../../util/formatCurrency';
|
|
import { formatPercent } from '../../../util/textFormat';
|
|
|
|
import useLang from '../../../hooks/useLang';
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
|
|
import Button from '../../ui/Button';
|
|
import Icon from '../icons/Icon';
|
|
import PaidMessageSlider from './PaidMessageSlider';
|
|
|
|
type OwnProps = {
|
|
chargeForMessages: number;
|
|
canChangeChargeForMessages?: boolean;
|
|
isGroupChat?: boolean;
|
|
onChange: (value: number) => void;
|
|
};
|
|
|
|
type StateProps = {
|
|
starsUsdWithdrawRate: number;
|
|
starsPaidMessageAmountMax: number;
|
|
starsPaidMessageCommissionPermille: number;
|
|
};
|
|
|
|
function PaidMessagePrice({
|
|
starsUsdWithdrawRate,
|
|
starsPaidMessageAmountMax,
|
|
starsPaidMessageCommissionPermille,
|
|
canChangeChargeForMessages,
|
|
isGroupChat,
|
|
chargeForMessages,
|
|
onChange,
|
|
}: OwnProps & StateProps) {
|
|
const { openPremiumModal } = getActions();
|
|
|
|
const lang = useLang();
|
|
|
|
const handleChargeForMessagesChange = useLastCallback((value: number) => {
|
|
onChange?.(value);
|
|
});
|
|
|
|
const handleUnlockWithPremium = useLastCallback(() => {
|
|
openPremiumModal({ initialSection: 'message_privacy' });
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{lang('SectionTitleStarsForForMessages')}
|
|
</h4>
|
|
<PaidMessageSlider
|
|
defaultValue={chargeForMessages}
|
|
min={MINIMUM_CHARGE_FOR_MESSAGES}
|
|
max={starsPaidMessageAmountMax}
|
|
value={chargeForMessages}
|
|
onChange={handleChargeForMessagesChange}
|
|
canChangeChargeForMessages={canChangeChargeForMessages}
|
|
readOnly={!canChangeChargeForMessages}
|
|
/>
|
|
{!canChangeChargeForMessages && (
|
|
<Button
|
|
color="primary"
|
|
fluid
|
|
size="smaller"
|
|
noForcedUpperCase
|
|
className="settings-unlock-button"
|
|
onClick={handleUnlockWithPremium}
|
|
>
|
|
<span className="settings-unlock-button-title">
|
|
{lang('UnlockButtonTitle')}
|
|
<Icon name="lock-badge" className="settings-unlock-button-icon" />
|
|
</span>
|
|
</Button>
|
|
)}
|
|
{canChangeChargeForMessages && (
|
|
<p className="settings-item-description-larger" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
{lang(isGroupChat ? 'SetPriceGroupDescription' : 'SectionDescriptionStarsForForMessages', {
|
|
percent: formatPercent(starsPaidMessageCommissionPermille * 100),
|
|
amount: formatCurrencyAsString(
|
|
chargeForMessages * starsUsdWithdrawRate * starsPaidMessageCommissionPermille,
|
|
'USD',
|
|
lang.code,
|
|
),
|
|
}, {
|
|
withNodes: true,
|
|
})}
|
|
</p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global): StateProps => {
|
|
const starsUsdWithdrawRateX1000 = global.appConfig.starsUsdWithdrawRateX1000;
|
|
const starsUsdWithdrawRate = starsUsdWithdrawRateX1000 ? starsUsdWithdrawRateX1000 / 1000 : 1;
|
|
const configStarsPaidMessageCommissionPermille = global.appConfig.starsPaidMessageCommissionPermille;
|
|
const starsPaidMessageCommissionPermille = configStarsPaidMessageCommissionPermille
|
|
? configStarsPaidMessageCommissionPermille / 1000 : 100;
|
|
|
|
return {
|
|
starsPaidMessageCommissionPermille,
|
|
starsUsdWithdrawRate,
|
|
starsPaidMessageAmountMax: global.appConfig.starsPaidMessageAmountMax || DEFAULT_MAXIMUM_CHARGE_FOR_MESSAGES,
|
|
};
|
|
},
|
|
)(PaidMessagePrice));
|