Privacy Paid Messages: Add unlock premium button (#5849)

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";

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 (
-      <div className="settings-item">
+      <div className="settings-item fluid-container">
         <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
           {lang('SectionTitleStarsForForMessages')}
         </h4>
@@ -154,19 +159,36 @@ function PrivacyMessages({
           renderValue={renderValueForStarsRange}
           readOnly={!canChangeChargeForMessages}
         />
-        <p className="settings-item-description-larger" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        {!isCurrentUserPremium && (
-          {lang('SectionDescriptionStarsForForMessages', {
+          <Button
-            percent: starsPaidMessageCommissionPermille * 100,
+            color="primary"
-            amount: formatCurrencyAsString(
+            fluid
-              chargeForMessages * starsUsdWithdrawRate * starsPaidMessageCommissionPermille,
+            size="smaller"
-              'USD',
+            noForcedUpperCase
-              lang.code,
+            className="settings-unlock-button"
+            onClick={handleUnlockWithPremium}
+          >
 
-            ),
+            <span className="settings-unlock-button-title">
-          }, {
+              {lang('UnlockButtonTitle')}
-            withNodes: true,
+              <Icon name="lock-badge" className="settings-unlock-button-icon" />
-          })}
+            </span>
-        </p>
+          </Button>
+        )}
+        {isCurrentUserPremium && (
+          <p className="settings-item-description-larger" dir={oldLang.isRtl ? 'rtl' : undefined}>
+            {lang('SectionDescriptionStarsForForMessages', {
+              percent: starsPaidMessageCommissionPermille * 100,
+              amount: formatCurrencyAsString(
+                chargeForMessages * starsUsdWithdrawRate * starsPaidMessageCommissionPermille,
+                'USD',
+                lang.code,
+              ),
+            }, {
+              withNodes: true,
+            })}
+          </p>
+        )}
       </div>
     );
   }
@@ -228,7 +250,8 @@ function PrivacyMessages({
       </div>
       {selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()}
       {canChangeChargeForMessages && selectedValue === 'charge_for_messages' && renderSectionNoPaidMessagesForUsers()}
-      {!isCurrentUserPremium && <PremiumStatusItem premiumSection="message_privacy" />}
+      {!isCurrentUserPremium && selectedValue !== 'charge_for_messages'
+      && <PremiumStatusItem premiumSection="message_privacy" />}
     </>
   );
 }

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;

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;