Do not allow replies to self story

ts/components/StoryViewer.tsx

@@ -424,8 +424,10 @@ export const StoryViewer = ({
     muteClassName = 'StoryViewer__soundless';
   }
 
+  const isSent = Boolean(sendState);
+
   const contextMenuOptions: ReadonlyArray<ContextMenuOptionType<unknown>> =
-    sendState
+    isSent
       ? [
           {
             icon: 'StoryListItem__icon--info',
@@ -654,7 +656,7 @@ export const StoryViewer = ({
               ))}
             </div>
             <div className="StoryViewer__actions">
-              {(canReply || sendState) && (
+              {(canReply || isSent) && (
                 <button
                   className="StoryViewer__reply"
                   onClick={() => setHasStoryViewsNRepliesModal(true)}
@@ -662,12 +664,12 @@ export const StoryViewer = ({
                   type="button"
                 >
                   <>
-                    {sendState || replyCount > 0 ? (
+                    {isSent || replyCount > 0 ? (
                       <span className="StoryViewer__reply__chevron">
-                        {sendState && !hasReadReceiptSetting && !replyCount && (
+                        {isSent && !hasReadReceiptSetting && !replyCount && (
                           <>{i18n('StoryViewer__views-off')}</>
                         )}
-                        {sendState &&
+                        {isSent &&
                           hasReadReceiptSetting &&
                           (viewCount === 1 ? (
                             <Intl
@@ -682,7 +684,7 @@ export const StoryViewer = ({
                               components={[<strong>{viewCount}</strong>]}
                             />
                           ))}
-                        {(sendState || viewCount > 0) && replyCount > 0 && ' '}
+                        {(isSent || viewCount > 0) && replyCount > 0 && ' '}
                         {replyCount > 0 &&
                           (replyCount === 1 ? (
                             <Intl
@@ -699,7 +701,7 @@ export const StoryViewer = ({
                           ))}
                       </span>
                     ) : null}
-                    {!sendState && !replyCount && (
+                    {!isSent && !replyCount && (
                       <span className="StoryViewer__reply__arrow">
                         {isGroupStory
                           ? i18n('StoryViewer__reply-group')
@@ -758,6 +760,7 @@ export const StoryViewer = ({
             canReply={Boolean(canReply)}
             getPreferredBadge={getPreferredBadge}
             hasReadReceiptSetting={hasReadReceiptSetting}
+            hasViewsCapability={isSent}
             i18n={i18n}
             isGroupStory={isGroupStory}
             onClose={() => setHasStoryViewsNRepliesModal(false)}

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -31,6 +31,9 @@ export default {
     hasReadReceiptSetting: {
       defaultValue: true,
     },
+    hasViewsCapability: {
+      defaultValue: false,
+    },
     i18n: {
       defaultValue: i18n,
     },
@@ -168,10 +171,20 @@ CanReply.storyName = 'Can reply';
 
 export const ViewsOnly = Template.bind({});
 ViewsOnly.args = {
+  canReply: false,
+  hasViewsCapability: true,
   views: getViewsAndReplies().views,
 };
 ViewsOnly.storyName = 'Views only';
 
+export const NoViews = Template.bind({});
+NoViews.args = {
+  canReply: false,
+  hasViewsCapability: true,
+  views: [],
+};
+NoViews.storyName = 'No views';
+
 export const InAGroupNoReplies = Template.bind({});
 InAGroupNoReplies.args = {
   isGroupStory: true,
@@ -182,6 +195,7 @@ export const InAGroup = Template.bind({});
 {
   const { views, replies } = getViewsAndReplies();
   InAGroup.args = {
+    hasViewsCapability: true,
     isGroupStory: true,
     replies,
     views,
@@ -210,6 +224,7 @@ export const ReadReceiptsTurnedOff = Template.bind({});
 ReadReceiptsTurnedOff.args = {
   canReply: false,
   hasReadReceiptSetting: false,
+  hasViewsCapability: true,
   views: getViewsAndReplies().views,
 };
 ReadReceiptsTurnedOff.storyName = 'Read receipts turned off';
@@ -219,6 +234,7 @@ export const GroupReadReceiptsOff = Template.bind({});
   const { views, replies } = getViewsAndReplies();
   GroupReadReceiptsOff.args = {
     hasReadReceiptSetting: false,
+    hasViewsCapability: true,
     isGroupStory: true,
     replies,
     views,

ts/components/StoryViewsNRepliesModal.tsx

@@ -88,6 +88,7 @@ export type PropsType = {
   canReply: boolean;
   getPreferredBadge: PreferredBadgeSelectorType;
   hasReadReceiptSetting: boolean;
+  hasViewsCapability: boolean;
   i18n: LocalizerType;
   isGroupStory?: boolean;
   onClose: () => unknown;
@@ -115,6 +116,7 @@ export const StoryViewsNRepliesModal = ({
   canReply,
   getPreferredBadge,
   hasReadReceiptSetting,
+  hasViewsCapability,
   i18n,
   isGroupStory,
   onClose,
@@ -353,7 +355,7 @@ export const StoryViewsNRepliesModal = ({
   }
 
   let viewsElement: JSX.Element | undefined;
-  if (!hasReadReceiptSetting) {
+  if (hasViewsCapability && !hasReadReceiptSetting) {
     viewsElement = (
       <div className="StoryViewsNRepliesModal__read-receipts-off">
         {i18n('StoryViewsNRepliesModal__read-receipts-off')}
@@ -397,10 +399,16 @@ export const StoryViewsNRepliesModal = ({
         ))}
       </div>
     );
+  } else if (hasViewsCapability) {
+    viewsElement = (
+      <div className="StoryViewsNRepliesModal__replies--none">
+        {i18n('StoryViewsNRepliesModal__no-views')}
+      </div>
+    );
   }
 
   const tabsElement =
-    views.length && replies.length ? (
+    viewsElement && repliesElement ? (
       <Tabs
         initialSelectedTab={Tab.Views}
         moduleClassName="StoryViewsNRepliesModal__tabs"