Paid Messages: Follow up (#5823)

src/components/common/Composer.scss

@@ -691,6 +691,8 @@
 
   .placeholder-star-icon {
     line-height: 1;
+    margin-inline-end: 0.0625rem;
+    margin-inline-start: 0.25rem;
   }
   .forced-placeholder,
   .placeholder-text {

src/components/left/settings/PrivacyLockedOption.module.scss

@@ -12,7 +12,5 @@
 }
 
 .checked .lock-icon {
-  left: 1.25rem;
-  font-size: 1rem;
   color: var(--color-primary);
 }

src/components/left/settings/PrivacyMessages.tsx

@@ -24,6 +24,7 @@ import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
+import Icon from '../../common/icons/Icon';
 import ListItem from '../../ui/ListItem';
 import RadioGroup from '../../ui/RadioGroup';
 import RangeSlider from '../../ui/RangeSlider';
@@ -130,8 +131,13 @@ function PrivacyMessages({
   }, [setChargeForMessages, updateGlobalPrivacySettingsWithDebounced]);
 
   const renderValueForStarsRange = useCallback((value: number) => {
-    return formatStarsAsText(lang, value);
+    return (
-  }, [lang]);
+      <span className="settings-range-value">
+        {!canChangeChargeForMessages && (<Icon name="lock-badge" />)}
+        {formatStarsAsText(lang, value)}
+      </span>
+    );
+  }, [lang, canChangeChargeForMessages]);
 
   function renderSectionStarsAmountForPaidMessages() {
     return (
@@ -146,6 +152,7 @@ function PrivacyMessages({
           value={chargeForMessages}
           onChange={handleChargeForMessagesChange}
           renderValue={renderValueForStarsRange}
+          readOnly={!canChangeChargeForMessages}
         />
         <p className="settings-item-description-larger" dir={oldLang.isRtl ? 'rtl' : undefined}>
           {lang('SectionDescriptionStarsForForMessages', {
@@ -219,8 +226,7 @@ function PrivacyMessages({
           {privacyDescription}
         </p>
       </div>
-      {canChangeChargeForMessages
+      {selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()}
-       && selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()}
       {canChangeChargeForMessages && selectedValue === 'charge_for_messages' && renderSectionNoPaidMessagesForUsers()}
       {!isCurrentUserPremium && <PremiumStatusItem premiumSection="message_privacy" />}
     </>

src/components/left/settings/Settings.scss

@@ -121,6 +121,12 @@
   }
 }
 
+.settings-range-value {
+  color: var(--color-primary);
+  display: inline-flex;
+  align-items: center;
+}
+
 .settings-item-simple,
 .settings-item {
   text-align: initial;

src/components/middle/MessageList.tsx

@@ -226,6 +226,10 @@ const MessageList: FC<OwnProps & StateProps> = ({
 
   const areMessagesLoaded = Boolean(messageIds);
 
+  const isPrivate = isUserId(chatId);
+  const withUsers = Boolean((!isPrivate && !isChannelChat)
+    || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars);
+
   useSyncEffect(() => {
     // We only need it first time when message list appears
     if (areMessagesLoaded) {
@@ -329,9 +333,13 @@ const MessageList: FC<OwnProps & StateProps> = ({
         memoUnreadDividerBeforeIdRef.current,
         !isForum ? Number(threadId) : undefined,
         isChatWithSelf,
+        withUsers,
       )
       : undefined;
-  }, [messageIds, messagesById, type, isServiceNotificationsChat, isForum, threadId, isChatWithSelf, channelJoinInfo]);
+  }, [withUsers,
+    messageIds, messagesById, type,
+    isServiceNotificationsChat, isForum,
+    threadId, isChatWithSelf, channelJoinInfo]);
 
   useInterval(() => {
     if (!messageIds || !messagesById || type === 'scheduled') return;
@@ -635,9 +643,6 @@ const MessageList: FC<OwnProps & StateProps> = ({
     }
   }, [isSelectModeActive]);
 
-  const isPrivate = isUserId(chatId);
-  const withUsers = Boolean((!isPrivate && !isChannelChat)
-    || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars);
   const noAvatars = Boolean(!withUsers || (isChannelChat && !isChannelWithAvatars));
   const shouldRenderGreeting = isUserId(chatId) && !isChatWithSelf && !isBot && !isAnonymousForwards
     && type === 'thread'

src/components/middle/helpers/groupMessages.ts

@@ -19,7 +19,7 @@ export function isAlbum(messageOrAlbum: ApiMessage | IAlbum): messageOrAlbum is
 }
 
 export function groupMessages(
-  messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean,
+  messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean, withUsers?: boolean,
 ) {
   const initDateGroup: MessageDateGroup = {
     originalDate: messages[0].date,
@@ -90,7 +90,7 @@ export function groupMessages(
       } else if (
         nextMessage.id === firstUnreadId
         || message.senderId !== nextMessage.senderId
-        || message.paidMessageStars
+        || (!withUsers && message.paidMessageStars)
         || message.isOutgoing !== nextMessage.isOutgoing
         || message.postAuthorTitle !== nextMessage.postAuthorTitle
         || (isActionMessage(message) && message.content.action?.type !== 'phoneCall')

src/components/ui/RangeSlider.scss

@@ -25,6 +25,10 @@
     --slider-color: var(--color-text-secondary);
   }
 
+  &.readOnly {
+    pointer-events: none;
+  }
+
   .slider-top-row {
     display: flex;
     justify-content: space-between;

src/components/ui/RangeSlider.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react';
-import type { FC } from '../../lib/teact/teact';
+import type { FC, TeactNode } from '../../lib/teact/teact';
 import React, { memo, useCallback, useMemo } from '../../lib/teact/teact';
 
 import buildClassName from '../../util/buildClassName';
@@ -16,9 +16,10 @@ type OwnProps = {
   label?: string;
   value: number;
   disabled?: boolean;
+  readOnly?: boolean;
   bold?: boolean;
   className?: string;
-  renderValue?: (value: number) => string;
+  renderValue?: (value: number) => TeactNode;
   onChange: (value: number) => void;
   isCenteredLayout?: boolean;
 };
@@ -31,6 +32,7 @@ const RangeSlider: FC<OwnProps> = ({
   label,
   value,
   disabled,
+  readOnly,
   bold,
   className,
   renderValue,
@@ -46,6 +48,7 @@ const RangeSlider: FC<OwnProps> = ({
     className,
     'RangeSlider',
     disabled && 'disabled',
+    readOnly && 'readOnly',
     bold && 'bold',
   );