Story view receipts setting

_locales/en/messages.json

@@ -5623,6 +5623,14 @@
     "message": "Story settings",
     "description": "Button label to get to story settings"
   },
+  "StoriesSettings__view-receipts--label": {
+    "message": "View Receipts",
+    "description": "Label of view receipts checkbox in story settings"
+  },
+  "StoriesSettings__view-receipts--description": {
+    "message": "To change this setting, open the Signal app on your mobile device and navigate to Settings -> Stories",
+    "description": "Description of how view receipts can be changed in story settings"
+  },
   "SendStoryModal__choose-who-can-view": {
     "message": "Choose who can view your story",
     "description": "Shown during the first time posting a story"
@@ -5732,7 +5740,7 @@
     "description": "Context menu item to help debugging"
   },
   "StoryViewsNRepliesModal__read-receipts-off": {
-    "message": "Enable read receipts to see who's viewed your stories. Open the Signal app on your mobile device and navigate to Settings > Privacy.",
+    "message": "Enable view receipts to see who’s viewed your stories. Open the Signal app on your mobile device and navigate to Settings > Stories.",
     "description": "Instructions on how to enable read receipts"
   },
   "StoryViewsNRepliesModal__no-replies": {

protos/SignalStorage.proto

@@ -6,6 +6,12 @@ package signalservice;
 option java_package         = "org.whispersystems.signalservice.internal.storage";
 option java_outer_classname = "SignalStorageProtos";
 
+enum OptionalBool {
+  UNSET = 0;
+  ENABLED = 1;
+  DISABLED = 2;
+}
+
 message StorageManifest  {
   optional uint64 version = 1;
   optional bytes  value   = 2;
@@ -166,6 +172,7 @@ message AccountRecord {
   reserved /* hasViewedOnboardingStory */ 27;
   reserved 28; // deprecatedStoriesDisabled
   optional bool storiesDisabled = 29;
+  optional OptionalBool storyViewReceiptsEnabled = 30;
 }
 
 message StoryDistributionListRecord {

ts/background.ts

@@ -3698,7 +3698,7 @@ export async function startApp(): Promise<void> {
 
     event.confirm();
 
-    if (!window.storage.get('read-receipt-setting') || !sourceConversation) {
+    if (!sourceConversation) {
       return;
     }
 

ts/components/MyStories.stories.tsx

@@ -41,6 +41,10 @@ export default {
     ourConversationId: {
       defaultValue: getDefaultConversation().id,
     },
+    hasViewReceiptSetting: {
+      control: 'boolean',
+      defaultValue: false,
+    },
     queueStoryDownload: {
       action: true,
     },

ts/components/MyStories.tsx

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

ts/components/Stories.tsx

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

ts/components/StoriesSettingsModal.stories.tsx

@@ -34,6 +34,7 @@ export default {
     me: {
       defaultValue: getDefaultConversation(),
     },
+    storyViewReceiptsEnabled: { control: 'boolean' },
     onDeleteList: { action: true },
     onDistributionListCreated: { action: true },
     onHideMyStoriesFrom: { action: true },

ts/components/StoriesSettingsModal.tsx

@@ -60,6 +60,7 @@ export type PropsType = {
     viewerUuids: Array<UUIDStringType>
   ) => unknown;
   setMyStoriesToAllSignalConnections: () => unknown;
+  storyViewReceiptsEnabled: boolean;
   toggleSignalConnectionsModal: () => unknown;
 };
 
@@ -102,6 +103,7 @@ export const StoriesSettingsModal = ({
   onRepliesNReactionsChanged,
   onViewersUpdated,
   setMyStoriesToAllSignalConnections,
+  storyViewReceiptsEnabled,
   toggleSignalConnectionsModal,
 }: PropsType): JSX.Element => {
   const [confirmDiscardModal, confirmDiscardIf] = useConfirmDiscard(i18n);
@@ -239,8 +241,6 @@ export const StoriesSettingsModal = ({
           <span className="StoriesSettingsModal__list__viewers" />
         </button>
 
-        <hr className="StoriesSettingsModal__divider" />
-
         <button
           className="StoriesSettingsModal__list"
           onClick={() => {
@@ -280,6 +280,18 @@ export const StoriesSettingsModal = ({
             </span>
           </button>
         ))}
+
+        <hr className="StoriesSettingsModal__divider" />
+
+        <Checkbox
+          disabled
+          checked={storyViewReceiptsEnabled}
+          description={i18n('StoriesSettings__view-receipts--description')}
+          label={i18n('StoriesSettings__view-receipts--label')}
+          moduleClassName="StoriesSettingsModal__checkbox"
+          name="view-receipts"
+          onChange={noop}
+        />
       </ModalPage>
     );
   }

ts/components/StoryViewer.stories.tsx

@@ -29,9 +29,11 @@ export default {
       defaultValue: undefined,
     },
     hasAllStoriesMuted: {
+      control: 'boolean',
       defaultValue: false,
     },
-    hasReadReceiptSetting: {
+    hasViewReceiptSetting: {
+      control: 'boolean',
       defaultValue: true,
     },
     i18n: {
@@ -194,7 +196,7 @@ export const ReadReceiptsOff = Template.bind({});
     '/fixtures/nathan-anderson-316188-unsplash.jpg'
   );
   ReadReceiptsOff.args = {
-    hasReadReceiptSetting: false,
+    hasViewReceiptSetting: false,
     story: {
       ...storyView,
       sender: {

ts/components/StoryViewer.tsx

@@ -67,7 +67,7 @@ export type PropsType = {
   >;
   hasActiveCall?: boolean;
   hasAllStoriesMuted: boolean;
-  hasReadReceiptSetting: boolean;
+  hasViewReceiptSetting: boolean;
   i18n: LocalizerType;
   loadStoryReplies: (conversationId: string, messageId: string) => unknown;
   markStoryRead: (mId: string) => unknown;
@@ -117,7 +117,7 @@ export const StoryViewer = ({
   group,
   hasActiveCall,
   hasAllStoriesMuted,
-  hasReadReceiptSetting,
+  hasViewReceiptSetting,
   i18n,
   loadStoryReplies,
   markStoryRead,
@@ -722,11 +722,11 @@ export const StoryViewer = ({
                   <>
                     {isSent || replyCount > 0 ? (
                       <span className="StoryViewer__reply__chevron">
-                        {isSent && !hasReadReceiptSetting && !replyCount && (
+                        {isSent && !hasViewReceiptSetting && !replyCount && (
                           <>{i18n('StoryViewer__views-off')}</>
                         )}
                         {isSent &&
-                          hasReadReceiptSetting &&
+                          hasViewReceiptSetting &&
                           (viewCount === 1 ? (
                             <Intl
                               i18n={i18n}
@@ -795,7 +795,7 @@ export const StoryViewer = ({
             authorTitle={firstName || title}
             canReply={Boolean(canReply)}
             getPreferredBadge={getPreferredBadge}
-            hasReadReceiptSetting={hasReadReceiptSetting}
+            hasViewReceiptSetting={hasViewReceiptSetting}
             hasViewsCapability={isSent}
             i18n={i18n}
             group={group}

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -30,10 +30,12 @@ export default {
       defaultValue: true,
     },
     getPreferredBadge: { action: true },
-    hasReadReceiptSetting: {
+    hasViewReceiptSetting: {
+      control: 'boolean',
       defaultValue: true,
     },
     hasViewsCapability: {
+      control: 'boolean',
       defaultValue: false,
     },
     i18n: {
@@ -243,7 +245,7 @@ InAGroupCantReply.storyName = "In a group (can't reply)";
 export const ReadReceiptsTurnedOff = Template.bind({});
 ReadReceiptsTurnedOff.args = {
   canReply: false,
-  hasReadReceiptSetting: false,
+  hasViewReceiptSetting: false,
   hasViewsCapability: true,
   views: getViewsAndReplies().views,
 };
@@ -263,7 +265,7 @@ export const GroupReadReceiptsOff = Template.bind({});
 {
   const { views, replies } = getViewsAndReplies();
   GroupReadReceiptsOff.args = {
-    hasReadReceiptSetting: false,
+    hasViewReceiptSetting: false,
     hasViewsCapability: true,
     group: {},
     replies,

ts/components/StoryViewsNRepliesModal.tsx

@@ -94,7 +94,7 @@ export type PropsType = {
   authorTitle: string;
   canReply: boolean;
   getPreferredBadge: PreferredBadgeSelectorType;
-  hasReadReceiptSetting: boolean;
+  hasViewReceiptSetting: boolean;
   hasViewsCapability: boolean;
   i18n: LocalizerType;
   group: Pick<ConversationType, 'left'> | undefined;
@@ -124,7 +124,7 @@ export const StoryViewsNRepliesModal = ({
   authorTitle,
   canReply,
   getPreferredBadge,
-  hasReadReceiptSetting,
+  hasViewReceiptSetting,
   hasViewsCapability,
   i18n,
   group,
@@ -396,7 +396,7 @@ export const StoryViewsNRepliesModal = ({
   }
 
   let viewsElement: JSX.Element | undefined;
-  if (hasViewsCapability && !hasReadReceiptSetting) {
+  if (hasViewsCapability && !hasViewReceiptSetting) {
     viewsElement = (
       <div className="StoryViewsNRepliesModal__read-receipts-off">
         {i18n('StoryViewsNRepliesModal__read-receipts-off')}

ts/messageModifiers/MessageReceipts.ts

@@ -118,6 +118,26 @@ const wasDeliveredWithSealedSender = (
       conversationId
   );
 
+const shouldDropReceipt = (
+  receipt: MessageReceiptModel,
+  message: MessageModel
+): boolean => {
+  const type = receipt.get('type');
+  switch (type) {
+    case MessageReceiptType.Delivery:
+      return false;
+    case MessageReceiptType.Read:
+      return !window.storage.get('read-receipt-setting');
+    case MessageReceiptType.View:
+      if (isStory(message.attributes)) {
+        return !window.Events.getStoryViewReceiptsEnabled();
+      }
+      return !window.storage.get('read-receipt-setting');
+    default:
+      throw missingCaseError(type);
+  }
+};
+
 export class MessageReceipts extends Collection<MessageReceiptModel> {
   static getSingleton(): MessageReceipts {
     if (!singleton) {
@@ -140,16 +160,27 @@ export class MessageReceipts extends Collection<MessageReceiptModel> {
     } else {
       ids = conversation.getMemberIds();
     }
+    const sentAt = message.get('sent_at');
     const receipts = this.filter(
       receipt =>
-        receipt.get('messageSentAt') === message.get('sent_at') &&
+        receipt.get('messageSentAt') === sentAt &&
         ids.includes(receipt.get('sourceConversationId'))
     );
     if (receipts.length) {
-      log.info('Found early receipts for message');
+      log.info(`MessageReceipts: found early receipts for message ${sentAt}`);
       this.remove(receipts);
     }
-    return receipts;
+    return receipts.filter(receipt => {
+      if (shouldDropReceipt(receipt, message)) {
+        log.info(
+          `MessageReceipts: Dropping an early receipt ${receipt.get('type')} ` +
+            `for message ${sentAt}`
+        );
+        return false;
+      }
+
+      return true;
+    });
   }
 
   private async updateMessageSendState(
@@ -157,6 +188,15 @@ export class MessageReceipts extends Collection<MessageReceiptModel> {
     message: MessageModel
   ): Promise<void> {
     const messageSentAt = receipt.get('messageSentAt');
+
+    if (shouldDropReceipt(receipt, message)) {
+      log.info(
+        `MessageReceipts: Dropping a receipt ${receipt.get('type')} ` +
+          `for message ${messageSentAt}`
+      );
+      return;
+    }
+
     const receiptTimestamp = receipt.get('receiptTimestamp');
     const sourceConversationId = receipt.get('sourceConversationId');
     const type = receipt.get('type');
@@ -272,7 +312,7 @@ export class MessageReceipts extends Collection<MessageReceiptModel> {
         // Nope, no target message was found
         if (!targetMessages.length) {
           log.info(
-            'No message for receipt',
+            'MessageReceipts: No message for receipt',
             type,
             sourceConversationId,
             sourceUuid,

ts/services/storageRecordOps.ts

@@ -362,6 +362,17 @@ export function toAccountRecord(
   const hasStoriesDisabled = window.storage.get('hasStoriesDisabled');
   accountRecord.storiesDisabled = hasStoriesDisabled === true;
 
+  const storyViewReceiptsEnabled = window.storage.get(
+    'storyViewReceiptsEnabled'
+  );
+  if (storyViewReceiptsEnabled !== undefined) {
+    accountRecord.storyViewReceiptsEnabled = storyViewReceiptsEnabled
+      ? Proto.OptionalBool.ENABLED
+      : Proto.OptionalBool.DISABLED;
+  } else {
+    accountRecord.storyViewReceiptsEnabled = Proto.OptionalBool.UNSET;
+  }
+
   applyUnknownFields(accountRecord, conversation);
 
   return accountRecord;
@@ -1093,6 +1104,7 @@ export async function mergeAccountRecord(
     keepMutedChatsArchived,
     hasSetMyStoriesPrivacy,
     storiesDisabled,
+    storyViewReceiptsEnabled,
   } = accountRecord;
 
   const updatedConversations = new Array<ConversationModel>();
@@ -1292,6 +1304,19 @@ export async function mergeAccountRecord(
     window.textsecure.server?.onHasStoriesDisabledChange(hasStoriesDisabled);
   }
 
+  switch (storyViewReceiptsEnabled) {
+    case Proto.OptionalBool.ENABLED:
+      window.storage.put('storyViewReceiptsEnabled', true);
+      break;
+    case Proto.OptionalBool.DISABLED:
+      window.storage.put('storyViewReceiptsEnabled', false);
+      break;
+    case Proto.OptionalBool.UNSET:
+    default:
+      // Do nothing
+      break;
+  }
+
   const ourID = window.ConversationController.getOurConversationId();
 
   if (!ourID) {

ts/state/ducks/stories.ts

@@ -320,7 +320,9 @@ function markStoryRead(
       viewSyncJobQueue.add({ viewSyncs });
     }
 
-    viewedReceiptsJobQueue.add({ viewedReceipt });
+    if (window.Events.getStoryViewReceiptsEnabled()) {
+      viewedReceiptsJobQueue.add({ viewedReceipt });
+    }
 
     await dataInterface.addNewStoryRead({
       authorId: message.attributes.sourceUuid,

ts/state/selectors/items.ts

@@ -177,3 +177,11 @@ export const getHasReadReceiptSetting = createSelector(
   getItems,
   (state: ItemsStateType): boolean => Boolean(state['read-receipt-setting'])
 );
+
+export const getHasStoryViewReceiptSetting = createSelector(
+  getItems,
+  (state: ItemsStateType): boolean =>
+    Boolean(
+      state.storyViewReceiptsEnabled ?? state['read-receipt-setting'] ?? false
+    )
+);

ts/state/smart/Stories.tsx

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

ts/state/smart/StoriesSettingsModal.tsx

@@ -14,6 +14,7 @@ import {
 import { getDistributionListsWithMembers } from '../selectors/storyDistributionLists';
 import { getIntl } from '../selectors/user';
 import { getPreferredBadgeSelector } from '../selectors/badges';
+import { getHasStoryViewReceiptSetting } from '../selectors/items';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useStoryDistributionListsActions } from '../ducks/storyDistributionLists';
 
@@ -31,6 +32,7 @@ export function SmartStoriesSettingsModal(): JSX.Element | null {
   } = useStoryDistributionListsActions();
 
   const getPreferredBadge = useSelector(getPreferredBadgeSelector);
+  const storyViewReceiptsEnabled = useSelector(getHasStoryViewReceiptSetting);
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const me = useSelector(getMe);
 
@@ -52,6 +54,7 @@ export function SmartStoriesSettingsModal(): JSX.Element | null {
       onRepliesNReactionsChanged={allowsRepliesChanged}
       onViewersUpdated={updateStoryViewers}
       setMyStoriesToAllSignalConnections={setMyStoriesToAllSignalConnections}
+      storyViewReceiptsEnabled={storyViewReceiptsEnabled}
       toggleSignalConnectionsModal={toggleSignalConnectionsModal}
     />
   );

ts/state/smart/StoryViewer.tsx

@@ -14,7 +14,7 @@ import { getConversationSelector } from '../selectors/conversations';
 import {
   getEmojiSkinTone,
   getHasAllStoriesMuted,
-  getHasReadReceiptSetting,
+  getHasStoryViewReceiptSetting,
   getPreferredReactionEmoji,
 } from '../selectors/items';
 import { getIntl } from '../selectors/user';
@@ -67,8 +67,8 @@ export function SmartStoryViewer(): JSX.Element | null {
   );
 
   const hasActiveCall = useSelector(isInFullScreenCall);
-  const hasReadReceiptSetting = useSelector<StateType, boolean>(
-    getHasReadReceiptSetting
+  const hasViewReceiptSetting = useSelector<StateType, boolean>(
+    getHasStoryViewReceiptSetting
   );
 
   const storyInfo = getStoryById(
@@ -90,7 +90,7 @@ export function SmartStoryViewer(): JSX.Element | null {
       group={conversationStory.group}
       hasActiveCall={hasActiveCall}
       hasAllStoriesMuted={hasAllStoriesMuted}
-      hasReadReceiptSetting={hasReadReceiptSetting}
+      hasViewReceiptSetting={hasViewReceiptSetting}
       i18n={i18n}
       numStories={selectedStoryData.numStories}
       onHideStory={toggleHideStories}

ts/types/Storage.d.ts

@@ -68,6 +68,7 @@ export type StorageAccessType = {
   hasRegisterSupportForUnauthenticatedDelivery: boolean;
   hasSetMyStoriesPrivacy: boolean;
   hasStoriesDisabled: boolean;
+  storyViewReceiptsEnabled: boolean;
   identityKeyMap: IdentityKeyMap;
   lastHeartbeat: number;
   lastStartup: number;

ts/util/createIPCEvents.tsx

@@ -68,6 +68,7 @@ export type IPCEventsValuesType = {
   themeSetting: ThemeType;
   universalExpireTimer: number;
   zoomFactor: ZoomFactorType;
+  storyViewReceiptsEnabled: boolean;
 
   // Optional
   mediaPermissions: boolean;
@@ -193,6 +194,16 @@ export function createIPCEvents(
       account.captureChange('hasStoriesDisabled');
       window.textsecure.server?.onHasStoriesDisabledChange(value);
     },
+    getStoryViewReceiptsEnabled: () => {
+      return (
+        window.storage.get('storyViewReceiptsEnabled') ??
+        window.storage.get('read-receipt-setting') ??
+        false
+      );
+    },
+    setStoryViewReceiptsEnabled: async (value: boolean) => {
+      await window.storage.put('storyViewReceiptsEnabled', value);
+    },
 
     getPreferredAudioInputDevice: () =>
       window.storage.get('preferred-audio-input-device'),