Sending/Failed state for stories

_locales/en/messages.json

@@ -5543,6 +5543,14 @@
     "message": "Send failed",
     "description": "Error text for story failed to send in list view"
   },
+  "Stories__list--partially-sent": {
+    "message": "Partially sent",
+    "description": "Error text for story failed partially to send"
+  },
+  "Stories__list--retry-send": {
+    "message": "Click to retry",
+    "description": "Actionable link to retry a send"
+  },
   "Stories__placeholder--text": {
     "message": "Click to view a story",
     "description": "Placeholder label for the story view"
@@ -5563,6 +5571,10 @@
     "message": "This story has no sound",
     "description": "Toast message"
   },
+  "Stories__failed-send": {
+    "message": "This story could not be sent to some people. Check your connection and try again.",
+    "description": "Alert error message when unable to send a story"
+  },
   "StoriesSettings__title": {
     "message": "Story privacy",
     "description": "Title for the story settings modal"
@@ -5867,6 +5879,18 @@
     "message": "Views off",
     "description": "(deleted 2022/10/13) When the user has read receipts turned off"
   },
+  "StoryViewer__sending": {
+    "message": "Sending...",
+    "description": "Label for when a story is sending"
+  },
+  "StoryViewer__failed": {
+    "message": "Send failed. Click to retry",
+    "description": "Label for when a send failed"
+  },
+  "StoryViewer__partial-fail": {
+    "message": "Partially sent. Click to retry",
+    "description": "Label for when a send partially failed"
+  },
   "StoryDetailsModal__sent-time": {
     "message": "Sent $time$",
     "description": "Sent timestamp"

stylesheets/components/MyStories.scss

@@ -37,6 +37,29 @@
       flex-direction: column;
       flex: 1;
       margin-left: 12px;
+
+      &__failed {
+        align-items: center;
+        display: flex;
+
+        &::before {
+          content: '';
+          display: block;
+          height: 12px;
+          margin-right: 12px;
+          width: 12px;
+          @include color-svg(
+            '../images/icons/v2/error-outline-24.svg',
+            $color-accent-red
+          );
+        }
+
+        &__button {
+          @include button-reset;
+          @include font-subtitle;
+          color: $color-gray-25;
+        }
+      }
     }
 
     &__timestamp {

stylesheets/components/StoryViewer.scss

@@ -141,6 +141,26 @@
     display: flex;
     justify-content: center;
     min-height: 60px;
+
+    &__failed {
+      @include button-reset;
+      @include font-body-1;
+      align-items: center;
+      color: $color-white;
+      display: flex;
+
+      &::before {
+        content: '';
+        display: block;
+        height: 18px;
+        margin-right: 12px;
+        width: 18px;
+        @include color-svg(
+          '../images/icons/v2/error-outline-24.svg',
+          $color-accent-red
+        );
+      }
+    }
   }
 
   &__reply {
@@ -358,4 +378,14 @@
       height: 256px;
     }
   }
+
+  &__sending {
+    align-items: center;
+    display: flex;
+
+    &__spinner__container {
+      margin-left: 0;
+      margin-right: 12px;
+    }
+  }
 }

ts/components/MyStories.stories.tsx

@@ -12,6 +12,7 @@ import type { PropsType } from './MyStories';
 import enMessages from '../../_locales/en/messages.json';
 import { MY_STORY_ID } from '../types/Stories';
 import { MyStories } from './MyStories';
+import { SendStatus } from '../messages/MessageSendState';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { getFakeMyStory } from '../test-both/helpers/getFakeStory';
 import { setupI18n } from '../util/setupI18n';
@@ -48,7 +49,7 @@ export default {
     queueStoryDownload: {
       action: true,
     },
-    renderStoryViewer: {
+    retrySend: {
       action: true,
     },
     viewStory: { action: true },
@@ -108,3 +109,30 @@ MultiListStories.play = interactionTest;
 MultiListStories.story = {
   name: 'Multiple distribution lists',
 };
+
+export const FailedSentStory = Template.bind({});
+{
+  const myStory = getFakeMyStory(MY_STORY_ID);
+  FailedSentStory.args = {
+    myStories: [
+      {
+        ...myStory,
+        stories: myStory.stories.map((story, index) => {
+          if (index === 0) {
+            return {
+              ...story,
+              sendState: [
+                {
+                  recipient: getDefaultConversation(),
+                  status: SendStatus.Failed,
+                },
+              ],
+            };
+          }
+          return story;
+        }),
+      },
+      getFakeMyStory(uuid(), 'Cool Peeps'),
+    ],
+  };
+}