From bfe9cf9f3843a7900032909d2855cd5d9782bfc4 Mon Sep 17 00:00:00 2001
From: Alvaro <110414366+alvaro-signal@users.noreply.github.com>
Date: Fri, 14 Oct 2022 14:49:46 -0600
Subject: [PATCH] Show 'Views off' when read receipts are off

---
 _locales/en/messages.json   | 12 ++++++++++--
 ts/components/MyStories.tsx | 14 +++++++-------
 ts/components/Stories.tsx   |  3 +++
 ts/state/smart/Stories.tsx  |  8 +++++++-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 4f8f91e347..a4447b9ffa 100644
--- a/_locales/en/messages.json
+++ b/_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$",
diff --git a/ts/components/MyStories.tsx b/ts/components/MyStories.tsx
index ff35f69d56..98759a7b5c 100644
--- a/ts/components/MyStories.tsx
+++ b/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
diff --git a/ts/components/Stories.tsx b/ts/components/Stories.tsx
index e9bb707ecd..3d7764a01f 100644
--- a/ts/components/Stories.tsx
+++ b/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
diff --git a/ts/state/smart/Stories.tsx b/ts/state/smart/Stories.tsx
index 327933253c..004adc5f24 100644
--- a/ts/state/smart/Stories.tsx
+++ b/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}
     />
   );