Show 'Views off' when read receipts are off

_locales/en/messages.json

@@ -5373,12 +5373,20 @@
   },
   "MyStories__views--singular": {
     "message": "$num$ view",
-    "description": "Number of views your story has"
+    "description": "(deleted 2022/10/13) Number of views your story has"
   },
   "MyStories__views--plural": {
     "message": "$num$ views",
+    "description": "(deleted 2022/10/13) Number of views your story has"
+  },
+  "icu:MyStories__views": {
+    "messageformat": "{views, plural, one {1 view} other {# views}}",
     "description": "Number of views your story has"
   },
+  "icu:MyStories__views-off": {
+    "messageformat": "Views off",
+    "description": "Shown next to the user's story when the user has read receipts turned off"
+  },
   "MyStories__replies--singular": {
     "message": "$num$ reply",
     "description": "Number of replies your story has"
@@ -5665,7 +5673,7 @@
   },
   "StoryViewer__views-off": {
     "message": "Views off",
-    "description": "When the user has read receipts turned off"
+    "description": "(deleted 2022/10/13) When the user has read receipts turned off"
   },
   "StoryDetailsModal__sent-time": {
     "message": "Sent $time$",

ts/components/MyStories.tsx

@@ -23,6 +23,7 @@ export type PropsType = {
   onSave: (story: StoryViewType) => unknown;
   queueStoryDownload: (storyId: string) => unknown;
   viewStory: ViewStoryActionCreatorType;
+  hasReadReceiptSetting: boolean;
 };
 
 export const MyStories = ({
@@ -34,6 +35,7 @@ export const MyStories = ({
   onSave,
   queueStoryDownload,
   viewStory,
+  hasReadReceiptSetting,
 }: PropsType): JSX.Element => {
   const [confirmDeleteStory, setConfirmDeleteStory] = useState<
     StoryViewType | undefined
@@ -105,13 +107,11 @@ export const MyStories = ({
                     />
                   </div>
                   <div className="MyStories__story__details">
-                    {story.views === 1
-                      ? i18n('MyStories__views--singular', [
-                          String(story.views),
-                        ])
-                      : i18n('MyStories__views--plural', [
-                          String(story.views || 0),
-                        ])}
+                    {hasReadReceiptSetting
+                      ? i18n('icu:MyStories__views', {
+                          views: story.views ?? 0,
+                        })
+                      : i18n('icu:MyStories__views-off')}
                     <MessageTimestamp
                       i18n={i18n}
                       isRelativeTime

ts/components/Stories.tsx

@@ -48,6 +48,7 @@ export type PropsType = {
   viewStory: ViewStoryActionCreatorType;
   isViewingStory: boolean;
   isStoriesSettingsVisible: boolean;
+  hasReadReceiptSetting: boolean;
 };
 
 type AddStoryType =
@@ -80,6 +81,7 @@ export const Stories = ({
   viewStory,
   isViewingStory,
   isStoriesSettingsVisible,
+  hasReadReceiptSetting,
 }: PropsType): JSX.Element => {
   const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
     requiresFullWidth: true,
@@ -116,6 +118,7 @@ export const Stories = ({
             onSave={onSaveStory}
             queueStoryDownload={queueStoryDownload}
             viewStory={viewStory}
+            hasReadReceiptSetting={hasReadReceiptSetting}
           />
         ) : (
           <StoriesPane

ts/state/smart/Stories.tsx

@@ -12,7 +12,10 @@ import { Stories } from '../../components/Stories';
 import { getMe } from '../selectors/conversations';
 import { getIntl } from '../selectors/user';
 import { getPreferredBadgeSelector } from '../selectors/badges';
-import { getPreferredLeftPaneWidth } from '../selectors/items';
+import {
+  getHasReadReceiptSetting,
+  getPreferredLeftPaneWidth,
+} from '../selectors/items';
 import {
   getSelectedStoryData,
   getStories,
@@ -59,6 +62,8 @@ export function SmartStories(): JSX.Element | null {
     (state: StateType) => state.globalModals.isStoriesSettingsVisible
   );
 
+  const hasReadReceiptSetting = useSelector(getHasReadReceiptSetting);
+
   if (!isShowingStoriesView) {
     return null;
   }
@@ -87,6 +92,7 @@ export function SmartStories(): JSX.Element | null {
       toggleHideStories={toggleHideStories}
       isViewingStory={selectedStoryData !== undefined}
       isStoriesSettingsVisible={isStoriesSettingsVisible}
+      hasReadReceiptSetting={hasReadReceiptSetting}
       {...storiesActions}
     />
   );