diff --git a/src/assets/localization/fallback.strings b/src/assets/localization/fallback.strings index 5e44b030b..110abf7f9 100644 --- a/src/assets/localization/fallback.strings +++ b/src/assets/localization/fallback.strings @@ -1931,6 +1931,7 @@ "DescriptionRestrictedMedia" = "Posting media content is not allowed in this group."; "DescriptionScheduledPaidMediaNotAllowed" = "Posting scheduled paid media content is not allowed"; "DescriptionScheduledPaidMessagesNotAllowed" = "Scheduled paid messages is not allowed"; +"UnlockButtonTitle" = "Unlock with Telegram Premium"; "FrozenAccountModalTitle" = "Your Account is Frozen"; "FrozenAccountViolationTitle" = "Violation of Terms"; "FrozenAccountViolationSubtitle" = "Your account was frozen for breaking Telegram's Terms and Conditions"; diff --git a/src/components/left/settings/PrivacyMessages.tsx b/src/components/left/settings/PrivacyMessages.tsx index 8c94490dc..bc90e7b06 100644 --- a/src/components/left/settings/PrivacyMessages.tsx +++ b/src/components/left/settings/PrivacyMessages.tsx @@ -25,6 +25,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import Icon from '../../common/icons/Icon'; +import Button from '../../ui/Button'; import ListItem from '../../ui/ListItem'; import RadioGroup from '../../ui/RadioGroup'; import RangeSlider from '../../ui/RangeSlider'; @@ -65,7 +66,7 @@ function PrivacyMessages({ onReset, onScreenSelect, }: OwnProps & StateProps) { - const { updateGlobalPrivacySettings } = getActions(); + const { updateGlobalPrivacySettings, openPremiumModal } = getActions(); const oldLang = useOldLang(); const lang = useLang(); @@ -139,9 +140,13 @@ function PrivacyMessages({ ); }, [lang, canChangeChargeForMessages]); + const handleUnlockWithPremium = useLastCallback(() => { + openPremiumModal({ initialSection: 'message_privacy' }); + }); + function renderSectionStarsAmountForPaidMessages() { return ( -
+

{lang('SectionTitleStarsForForMessages')}

@@ -154,19 +159,36 @@ function PrivacyMessages({ renderValue={renderValueForStarsRange} readOnly={!canChangeChargeForMessages} /> -

- {lang('SectionDescriptionStarsForForMessages', { - percent: starsPaidMessageCommissionPermille * 100, - amount: formatCurrencyAsString( - chargeForMessages * starsUsdWithdrawRate * starsPaidMessageCommissionPermille, - 'USD', - lang.code, + {!isCurrentUserPremium && ( + + )} + {isCurrentUserPremium && ( +

+ {lang('SectionDescriptionStarsForForMessages', { + percent: starsPaidMessageCommissionPermille * 100, + amount: formatCurrencyAsString( + chargeForMessages * starsUsdWithdrawRate * starsPaidMessageCommissionPermille, + 'USD', + lang.code, + ), + }, { + withNodes: true, + })} +

+ )}
); } @@ -228,7 +250,8 @@ function PrivacyMessages({
{selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()} {canChangeChargeForMessages && selectedValue === 'charge_for_messages' && renderSectionNoPaidMessagesForUsers()} - {!isCurrentUserPremium && } + {!isCurrentUserPremium && selectedValue !== 'charge_for_messages' + && } ); } diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index b05ba3a2a..89f2ef4bf 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -136,6 +136,25 @@ @include mixins.side-panel-section; } +.settings-unlock-button { + margin-inline: 1rem; + margin-top: 1rem; +} + +.fluid-container { + display: flex; + flex-direction: column; +} + +.settings-unlock-button-title { + align-items: center; + display: flex; +} + +.settings-unlock-button-icon { + margin-inline-start: 0.25rem; +} + .settings-item { &.no-border { margin-bottom: 0; diff --git a/src/types/language.d.ts b/src/types/language.d.ts index 5cdbe58ef..077aa826e 100644 --- a/src/types/language.d.ts +++ b/src/types/language.d.ts @@ -1475,6 +1475,7 @@ export interface LangPair { 'DescriptionRestrictedMedia': undefined; 'DescriptionScheduledPaidMediaNotAllowed': undefined; 'DescriptionScheduledPaidMessagesNotAllowed': undefined; + 'UnlockButtonTitle': undefined; 'PrivacySubscribeToTelegramPremium': undefined; 'PrivacyDisableLimitedEditionStarGifts': undefined; 'PrivacyEnableLimitedEditionStarGifts': undefined;