Disabled story replies when no longer a member of the group

_locales/en/messages.json

@@ -5711,6 +5711,10 @@
     "message": "Reacted to the story",
     "description": "Description of someone reacting to a story"
   },
+  "icu:StoryViewsNRepliesModal__not-a-member": {
+    "messageformat": "You can’t reply to this story because you’re longer a member of this group.",
+    "description": "Shown in the composer area of the reply-to-story modal when a user can't make a reply because they are no longer a member"
+  },
   "StoryListItem__label": {
     "message": "Story",
     "description": "aria-label for the story list button"

stylesheets/components/StoryViewsNRepliesModal.scss

@@ -58,6 +58,13 @@
     }
   }
 
+  &__not-a-member {
+    margin: 24px 4px 8px 4px;
+    font-size: 12px;
+    text-align: center;
+    color: $color-gray-25;
+  }
+
   &__input {
     &__input {
       // For specificity because StoryViewsNRepliesModal is always in dark-theme

ts/components/StoryViewer.tsx

@@ -62,6 +62,7 @@ export type PropsType = {
     | 'sharedGroupNames'
     | 'sortedGroupMembers'
     | 'title'
+    | 'left'
   >;
   hasActiveCall?: boolean;
   hasAllStoriesMuted: boolean;
@@ -791,7 +792,7 @@ export const StoryViewer = ({
             hasReadReceiptSetting={hasReadReceiptSetting}
             hasViewsCapability={isSent}
             i18n={i18n}
-            isGroupStory={isGroupStory}
+            group={group}
             onClose={() => setCurrentViewTarget(null)}
             onReact={emoji => {
               onReactToStory(emoji, story);

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -207,7 +207,7 @@ NoViews.storyName = 'No views';
 
 export const InAGroupNoReplies = Template.bind({});
 InAGroupNoReplies.args = {
-  isGroupStory: true,
+  group: {},
 };
 InAGroupNoReplies.storyName = 'In a group (no replies)';
 
@@ -216,7 +216,7 @@ export const InAGroup = Template.bind({});
   const { views, replies } = getViewsAndReplies();
   InAGroup.args = {
     hasViewsCapability: true,
-    isGroupStory: true,
+    group: {},
     replies,
     views,
   };
@@ -233,7 +233,7 @@ export const InAGroupCantReply = Template.bind({});
   const { views, replies } = getViewsAndReplies();
   InAGroupCantReply.args = {
     canReply: false,
-    isGroupStory: true,
+    group: {},
     replies,
     views,
   };
@@ -249,13 +249,23 @@ ReadReceiptsTurnedOff.args = {
 };
 ReadReceiptsTurnedOff.storyName = 'Read receipts turned off';
 
+export const InAGroupButLeft = Template.bind({});
+{
+  const { replies } = getViewsAndReplies();
+  InAGroupButLeft.args = {
+    group: { left: true },
+    replies,
+  };
+}
+InAGroupButLeft.storyName = 'In a group (but left)';
+
 export const GroupReadReceiptsOff = Template.bind({});
 {
   const { views, replies } = getViewsAndReplies();
   GroupReadReceiptsOff.args = {
     hasReadReceiptSetting: false,
     hasViewsCapability: true,
-    isGroupStory: true,
+    group: {},
     replies,
     views,
   };

ts/components/StoryViewsNRepliesModal.tsx

@@ -97,7 +97,7 @@ export type PropsType = {
   hasReadReceiptSetting: boolean;
   hasViewsCapability: boolean;
   i18n: LocalizerType;
-  isGroupStory?: boolean;
+  group: Pick<ConversationType, 'left'> | undefined;
   onClose: () => unknown;
   onReact: (emoji: string) => unknown;
   onReply: (
@@ -127,7 +127,7 @@ export const StoryViewsNRepliesModal = ({
   hasReadReceiptSetting,
   hasViewsCapability,
   i18n,
-  isGroupStory,
+  group,
   onClose,
   onReact,
   onReply,
@@ -206,10 +206,16 @@ export const StoryViewsNRepliesModal = ({
     }
   }, [currentTab, replies.length]);
 
-  if (canReply) {
+  if (group && group.left) {
+    composerElement = (
+      <div className="StoryViewsNRepliesModal__not-a-member">
+        {i18n('icu:StoryViewsNRepliesModal__not-a-member')}
+      </div>
+    );
+  } else if (canReply) {
     composerElement = (
       <>
-        {!isGroupStory && (
+        {!group && (
           <Quote
             authorTitle={authorTitle}
             conversationColor="ultramarine"
@@ -243,7 +249,7 @@ export const StoryViewsNRepliesModal = ({
               }}
               onTextTooLong={onTextTooLong}
               placeholder={
-                isGroupStory
+                group
                   ? i18n('StoryViewer__reply-group')
                   : i18n('StoryViewer__reply')
               }
@@ -380,7 +386,7 @@ export const StoryViewsNRepliesModal = ({
         <div ref={bottomRef} />
       </div>
     );
-  } else if (isGroupStory) {
+  } else if (group) {
     repliesElement = (
       <div className="StoryViewsNRepliesModal__replies--none">
         {i18n('StoryViewsNRepliesModal__no-replies')}
@@ -486,7 +492,7 @@ export const StoryViewsNRepliesModal = ({
     >
       <div
         className={classNames({
-          'StoryViewsNRepliesModal--group': Boolean(isGroupStory),
+          'StoryViewsNRepliesModal--group': Boolean(group),
         })}
       >
         {tabsElement || (

ts/state/selectors/stories.ts

@@ -236,6 +236,7 @@ export function getConversationStory(
     'sharedGroupNames',
     'sortedGroupMembers',
     'title',
+    'left',
   ]);
 
   const storyView = getStoryView(

ts/types/Stories.ts

@@ -54,6 +54,7 @@ export type ConversationStoryType = {
     | 'sharedGroupNames'
     | 'sortedGroupMembers'
     | 'title'
+    | 'left'
   >;
   isHidden?: boolean;
   searchNames?: string; // This is just here to satisfy Fuse's types