First time My Stories post experience

2022-08-23 13:24:55 -04:00 · 2022-08-23 13:24:55 -04:00 · f611256afc
commit f611256afc
parent c18fa35354
11 changed files with 392 additions and 102 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -7393,6 +7393,10 @@
    "message": "Story settings",
    "description": "Button label to get to story settings"
  },
+  "SendStoryModal__choose-who-can-view": {
+    "message": "Choose who can view your story",
+    "description": "Shown during the first time posting a story"
+  },
  "SendStoryModal__title": {
    "message": "Send to",
    "description": "Title for the send story modal"
@ -7425,6 +7429,20 @@
    "message": "Choose groups",
    "description": "Modal title when choosing groups"
  },
+  "SendStoryModal__my-stories-privacy": {
+    "message": "My stories privacy",
+    "description": "Modal title for setting privacy for My Stories"
+  },
+  "SendStoryModal__privacy-disclaimer": {
+    "message": "Choose which Signal connections can view your story. You can always change this in privacy settings. $learnMore$",
+    "description": "Disclaimer on how changes to story settings work",
+    "placeholders": {
+      "learnMore": {
+        "content": "$1",
+        "example": "<a>Learn more</a>"
+      }
+    }
+  },
  "Stories__settings-toggle--title": {
    "message": "Share & View Stories",
    "description": "Select box title for the stories on/off toggle"
--- a/ts/components/SendStoryModal.stories.tsx
+++ b/ts/components/SendStoryModal.stories.tsx
@ -36,6 +36,9 @@ export default {
    groupStories: {
      defaultValue: Array.from(Array(2), getDefaultGroup),
    },
+    hasFirstStoryPostExperience: {
+      defaultValue: false,
+    },
    i18n: {
      defaultValue: i18n,
    },
@ -44,11 +47,15 @@ export default {
    },
    onClose: { action: true },
    onDistributionListCreated: { action: true },
+    onHideMyStoriesFrom: { action: true },
    onSend: { action: true },
+    onViewersUpdated: { action: true },
+    setMyStoriesToAllSignalConnections: { action: true },
    signalConnections: {
      defaultValue: Array.from(Array(42), getDefaultConversation),
    },
    tagGroupsAsNewGroupStory: { action: true },
+    toggleSignalConnectionsModal: { action: true },
  },
 } as Meta;

@ -58,3 +65,10 @@ export const Modal = Template.bind({});
 Modal.args = {
  distributionLists: getFakeDistributionLists(),
 };
+
+export const FirstTime = Template.bind({});
+FirstTime.args = {
+  distributionLists: [getMyStories()],
+  groupStories: [],
+  hasFirstStoryPostExperience: true,
+};
--- a/ts/components/SendStoryModal.tsx
+++ b/ts/components/SendStoryModal.tsx
@ -9,13 +9,16 @@ import { filterAndSortConversationsByRecent } from '../util/filterAndSortConvers
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { PropsType as StoriesSettingsModalPropsType } from './StoriesSettingsModal';
 import type { StoryDistributionListDataType } from '../state/ducks/storyDistributionLists';
 import type { UUIDStringType } from '../types/UUID';
 import { Avatar, AvatarSize } from './Avatar';
+import { Button, ButtonVariant } from './Button';
 import { Checkbox } from './Checkbox';
 import { ContextMenu } from './ContextMenu';
 import {
  EditDistributionList,
+  EditMyStoriesPrivacy,
  Page as StoriesSettingsPage,
 } from './StoriesSettingsModal';
 import { MY_STORIES_ID, getStoryDistributionListName } from '../types/Stories';
@ -30,6 +33,7 @@ export type PropsType = {
  getPreferredBadge: PreferredBadgeSelectorType;
  groupConversations: Array<ConversationType>;
  groupStories: Array<ConversationType>;
+  hasFirstStoryPostExperience: boolean;
  i18n: LocalizerType;
  me: ConversationType;
  onClose: () => unknown;
@ -44,11 +48,24 @@ export type PropsType = {
  ) => unknown;
  signalConnections: Array<ConversationType>;
  tagGroupsAsNewGroupStory: (cids: Array<string>) => unknown;
-};
+} & Pick<
+  StoriesSettingsModalPropsType,
+  | 'onHideMyStoriesFrom'
+  | 'onViewersUpdated'
+  | 'setMyStoriesToAllSignalConnections'
+  | 'toggleSignalConnectionsModal'
+>;
+
+enum MyStoriesPrivacy {
+  AllSignalConnections = 'AllSignalConnections',
+  Exclude = 'Exclude',
+  OnlyShareWith = 'OnlyShareWith',
+}

 enum SendStoryPage {
-  SendStory = 'SendStory',
  ChooseGroups = 'ChooseGroups',
+  SendStory = 'SendStory',
+  SetMyStoriesPrivacy = 'SetMyStoriesPrivacy',
 }

 const Page = {
@ -97,14 +114,19 @@ export const SendStoryModal = ({
  getPreferredBadge,
  groupConversations,
  groupStories,
+  hasFirstStoryPostExperience,
  i18n,
  me,
  onClose,
  onDistributionListCreated,
+  onHideMyStoriesFrom,
  onSend,
  onSelectedStoryList,
+  onViewersUpdated,
+  setMyStoriesToAllSignalConnections,
  signalConnections,
  tagGroupsAsNewGroupStory,
+  toggleSignalConnectionsModal,
 }: PropsType): JSX.Element => {
  const [page, setPage] = useState<PageType>(Page.SendStory);

@ -170,8 +192,63 @@ export const SendStoryModal = ({
    Array<ConversationType>
  >([]);

+  const [myStoriesPrivacy, setMyStoriesPrivacy] = useState<MyStoriesPrivacy>(
+    MyStoriesPrivacy.AllSignalConnections
+  );
+  const [myStoriesPrivacyUuids, setMyStoriesPrivacyUuids] = useState<
+    Set<UUIDStringType>
+  >(new Set());
+
+  const myStories = useMemo(() => {
+    return {
+      allowsReplies: true,
+      id: MY_STORIES_ID,
+      name: MY_STORIES_ID,
+      isBlockList: myStoriesPrivacy !== MyStoriesPrivacy.OnlyShareWith,
+      members:
+        myStoriesPrivacy === MyStoriesPrivacy.AllSignalConnections
+          ? []
+          : candidateConversations.filter(
+              convo => convo.uuid && myStoriesPrivacyUuids.has(convo.uuid)
+            ),
+    };
+  }, [candidateConversations, myStoriesPrivacy, myStoriesPrivacyUuids]);
+
  let content: JSX.Element;
-  if (page === Page.ChooseViewers || page === Page.NameStory) {
+  if (page === Page.SetMyStoriesPrivacy) {
+    content = (
+      <EditMyStoriesPrivacy
+        hasDisclaimerAbove
+        i18n={i18n}
+        learnMore="SendStoryModal__privacy-disclaimer"
+        myStories={myStories}
+        onClickExclude={() => {
+          setMyStoriesPrivacy(MyStoriesPrivacy.Exclude);
+          setMyStoriesPrivacyUuids(new Set());
+          setSelectedContacts([]);
+          setPage(Page.HideStoryFrom);
+        }}
+        onClickOnlyShareWith={() => {
+          setMyStoriesPrivacy(MyStoriesPrivacy.OnlyShareWith);
+          setMyStoriesPrivacyUuids(new Set());
+          setSelectedContacts([]);
+          setPage(Page.AddViewer);
+        }}
+        setSelectedContacts={setSelectedContacts}
+        setMyStoriesToAllSignalConnections={() => {
+          setMyStoriesPrivacy(MyStoriesPrivacy.AllSignalConnections);
+          setMyStoriesPrivacyUuids(new Set());
+          setSelectedContacts([]);
+        }}
+        toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+      />
+    );
+  } else if (
+    page === Page.ChooseViewers ||
+    page === Page.NameStory ||
+    page === Page.AddViewer ||
+    page === Page.HideStoryFrom
+  ) {
    content = (
      <EditDistributionList
        candidateConversations={candidateConversations}
@ -181,9 +258,12 @@ export const SendStoryModal = ({
          onDistributionListCreated(name, uuids);
          setPage(Page.SendStory);
        }}
-        onViewersUpdated={() => {
+        onViewersUpdated={uuids => {
          if (page === Page.ChooseViewers) {
            setPage(Page.NameStory);
+          } else if (page === Page.HideStoryFrom || page === Page.AddViewer) {
+            setMyStoriesPrivacyUuids(new Set(uuids));
+            setPage(Page.SetMyStoriesPrivacy);
          } else {
            setPage(Page.SendStory);
          }
@ -310,6 +390,15 @@ export const SendStoryModal = ({
            moduleClassName="SendStoryModal__distribution-list"
            name="SendStoryModal__distribution-list"
            onChange={(value: boolean) => {
+              if (
+                list.id === MY_STORIES_ID &&
+                hasFirstStoryPostExperience &&
+                value
+              ) {
+                setPage(Page.SetMyStoriesPrivacy);
+                return;
+              }
+
              setSelectedListIds(listIds => {
                if (value) {
                  listIds.add(list.id);
@ -358,7 +447,9 @@ export const SendStoryModal = ({
                    </div>

                    <div className="SendStoryModal__distribution-list__description">
-                      {getListViewers(list, i18n, signalConnections)}
+                      {hasFirstStoryPostExperience && list.id === MY_STORIES_ID
+                        ? i18n('SendStoryModal__choose-who-can-view')
+                        : getListViewers(list, i18n, signalConnections)}
                    </div>
                  </div>
                </label>
@ -435,11 +526,15 @@ export const SendStoryModal = ({
  }

  let modalTitle: string;
-  if (page === Page.ChooseGroups) {
+  if (page === Page.SetMyStoriesPrivacy) {
+    modalTitle = i18n('SendStoryModal__my-stories-privacy');
+  } else if (page === Page.HideStoryFrom) {
+    modalTitle = i18n('StoriesSettings__hide-story');
+  } else if (page === Page.ChooseGroups) {
    modalTitle = i18n('SendStoryModal__choose-groups');
  } else if (page === Page.NameStory) {
    modalTitle = i18n('StoriesSettings__name-story');
-  } else if (page === Page.ChooseViewers) {
+  } else if (page === Page.ChooseViewers || page === Page.AddViewer) {
    modalTitle = i18n('StoriesSettings__choose-viewers');
  } else {
    modalTitle = i18n('SendStoryModal__title');
@ -457,10 +552,16 @@ export const SendStoryModal = ({
  const hasBackButton = page !== Page.SendStory;

  let modalFooter: JSX.Element | undefined;
-  if (page === Page.SendStory || page === Page.ChooseGroups) {
+  if (
+    page === Page.SendStory ||
+    page === Page.ChooseGroups ||
+    page === Page.SetMyStoriesPrivacy
+  ) {
    modalFooter = (
      <Modal.ButtonFooter moduleClassName="SendStoryModal">
-        <div className="SendStoryModal__selected-lists">{selectedNames}</div>
+        {page !== Page.SetMyStoriesPrivacy && (
+          <div className="SendStoryModal__selected-lists">{selectedNames}</div>
+        )}
        {page === Page.ChooseGroups && (
          <button
            aria-label="SendStoryModal__ok"
@ -485,6 +586,43 @@ export const SendStoryModal = ({
            type="button"
          />
        )}
+        {page === Page.SetMyStoriesPrivacy && (
+          <>
+            <div />
+            <div>
+              <Button
+                onClick={() => setPage(Page.SendStory)}
+                variant={ButtonVariant.Secondary}
+              >
+                {i18n('cancel')}
+              </Button>
+              <Button
+                onClick={() => {
+                  if (
+                    myStoriesPrivacy === MyStoriesPrivacy.AllSignalConnections
+                  ) {
+                    setMyStoriesToAllSignalConnections();
+                  } else if (myStoriesPrivacy === MyStoriesPrivacy.Exclude) {
+                    onHideMyStoriesFrom(Array.from(myStoriesPrivacyUuids));
+                  } else if (
+                    myStoriesPrivacy === MyStoriesPrivacy.OnlyShareWith
+                  ) {
+                    onViewersUpdated(
+                      MY_STORIES_ID,
+                      Array.from(myStoriesPrivacyUuids)
+                    );
+                  }
+                  setMyStoriesPrivacyUuids(new Set());
+                  setSelectedContacts([]);
+                  setPage(Page.SendStory);
+                }}
+                variant={ButtonVariant.Primary}
+              >
+                {i18n('save')}
+              </Button>
+            </div>
+          </>
+        )}
      </Modal.ButtonFooter>
    );
  }
@ -498,7 +636,19 @@ export const SendStoryModal = ({
      onBackButtonClick={
        hasBackButton
          ? () => {
-              if (page === Page.ChooseGroups) {
+              if (page === Page.SetMyStoriesPrivacy) {
+                setSelectedContacts([]);
+                setMyStoriesPrivacyUuids(new Set());
+                setMyStoriesPrivacy(MyStoriesPrivacy.AllSignalConnections);
+                setPage(Page.SendStory);
+              } else if (
+                page === Page.HideStoryFrom ||
+                page === Page.AddViewer
+              ) {
+                setSelectedContacts([]);
+                setMyStoriesPrivacyUuids(new Set());
+                setPage(Page.SetMyStoriesPrivacy);
+              } else if (page === Page.ChooseGroups) {
                setChosenGroupIds(new Set());
                setPage(Page.SendStory);
              } else if (page === Page.ChooseViewers) {
--- a/ts/components/StoriesSettingsModal.tsx
+++ b/ts/components/StoriesSettingsModal.tsx
@ -187,79 +187,22 @@ export const StoriesSettingsModal = ({
        </div>

        {isMyStories && (
-          <>
-            <Checkbox
-              checked={!listToEdit.members.length}
-              description={i18n('StoriesSettings__mine__all--description')}
-              isRadio
-              label={i18n('StoriesSettings__mine__all--label')}
-              moduleClassName="StoriesSettingsModal__checkbox"
-              name="share"
-              onChange={() => {
-                setMyStoriesToAllSignalConnections();
-              }}
-            />
-
-            <Checkbox
-              checked={listToEdit.isBlockList && listToEdit.members.length > 0}
-              description={i18n('StoriesSettings__mine__exclude--description', [
-                listToEdit.isBlockList
-                  ? String(listToEdit.members.length)
-                  : '0',
-              ])}
-              isRadio
-              label={i18n('StoriesSettings__mine__exclude--label')}
-              moduleClassName="StoriesSettingsModal__checkbox"
-              name="share"
-              onChange={noop}
-              onClick={() => {
-                if (listToEdit.isBlockList) {
-                  setSelectedContacts(listToEdit.members);
-                }
-                setPage(Page.HideStoryFrom);
-              }}
-            />
-
-            <Checkbox
-              checked={!listToEdit.isBlockList && listToEdit.members.length > 0}
-              description={
-                !listToEdit.isBlockList && listToEdit.members.length
-                  ? i18n('StoriesSettings__mine__only--description--people', [
-                      String(listToEdit.members.length),
-                    ])
-                  : i18n('StoriesSettings__mine__only--description')
-              }
-              isRadio
-              label={i18n('StoriesSettings__mine__only--label')}
-              moduleClassName="StoriesSettingsModal__checkbox"
-              name="share"
-              onChange={noop}
-              onClick={() => {
-                if (!listToEdit.isBlockList) {
-                  setSelectedContacts(listToEdit.members);
-                }
-                setPage(Page.AddViewer);
-              }}
-            />
-
-            <div className="StoriesSettingsModal__disclaimer">
-              <Intl
-                components={{
-                  learnMore: (
-                    <button
-                      className="StoriesSettingsModal__disclaimer__learn-more"
-                      onClick={toggleSignalConnectionsModal}
-                      type="button"
-                    >
-                      {i18n('StoriesSettings__mine__disclaimer--learn-more')}
-                    </button>
-                  ),
-                }}
-                i18n={i18n}
-                id="StoriesSettings__mine__disclaimer"
-              />
-            </div>
-          </>
+          <EditMyStoriesPrivacy
+            i18n={i18n}
+            learnMore="StoriesSettings__mine_disclaimer"
+            myStories={listToEdit}
+            onClickExclude={() => {
+              setPage(Page.HideStoryFrom);
+            }}
+            onClickOnlyShareWith={() => {
+              setPage(Page.AddViewer);
+            }}
+            setSelectedContacts={setSelectedContacts}
+            setMyStoriesToAllSignalConnections={
+              setMyStoriesToAllSignalConnections
+            }
+            toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+          />
        )}

        {!isMyStories && (
@ -532,6 +475,111 @@ export const StoriesSettingsModal = ({
  );
 };

+type EditMyStoriesPrivacyPropsType = {
+  hasDisclaimerAbove?: boolean;
+  i18n: LocalizerType;
+  learnMore: string;
+  myStories: StoryDistributionListWithMembersDataType;
+  onClickExclude: () => unknown;
+  onClickOnlyShareWith: () => unknown;
+  setSelectedContacts: (contacts: Array<ConversationType>) => unknown;
+} & Pick<
+  PropsType,
+  'setMyStoriesToAllSignalConnections' | 'toggleSignalConnectionsModal'
+>;
+
+export const EditMyStoriesPrivacy = ({
+  hasDisclaimerAbove,
+  i18n,
+  learnMore,
+  myStories,
+  onClickExclude,
+  onClickOnlyShareWith,
+  setSelectedContacts,
+  setMyStoriesToAllSignalConnections,
+  toggleSignalConnectionsModal,
+}: EditMyStoriesPrivacyPropsType): JSX.Element => {
+  const disclaimerElement = (
+    <div className="StoriesSettingsModal__disclaimer">
+      <Intl
+        components={{
+          learnMore: (
+            <button
+              className="StoriesSettingsModal__disclaimer__learn-more"
+              onClick={toggleSignalConnectionsModal}
+              type="button"
+            >
+              {i18n('StoriesSettings__mine__disclaimer--learn-more')}
+            </button>
+          ),
+        }}
+        i18n={i18n}
+        id={learnMore}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      {hasDisclaimerAbove && disclaimerElement}
+
+      <Checkbox
+        checked={!myStories.members.length}
+        description={i18n('StoriesSettings__mine__all--description')}
+        isRadio
+        label={i18n('StoriesSettings__mine__all--label')}
+        moduleClassName="StoriesSettingsModal__checkbox"
+        name="share"
+        onChange={() => {
+          setMyStoriesToAllSignalConnections();
+        }}
+      />
+
+      <Checkbox
+        checked={myStories.isBlockList && myStories.members.length > 0}
+        description={i18n('StoriesSettings__mine__exclude--description', [
+          myStories.isBlockList ? String(myStories.members.length) : '0',
+        ])}
+        isRadio
+        label={i18n('StoriesSettings__mine__exclude--label')}
+        moduleClassName="StoriesSettingsModal__checkbox"
+        name="share"
+        onChange={noop}
+        onClick={() => {
+          if (myStories.isBlockList) {
+            setSelectedContacts(myStories.members);
+          }
+          onClickExclude();
+        }}
+      />
+
+      <Checkbox
+        checked={!myStories.isBlockList && myStories.members.length > 0}
+        description={
+          !myStories.isBlockList && myStories.members.length
+            ? i18n('StoriesSettings__mine__only--description--people', [
+                String(myStories.members.length),
+              ])
+            : i18n('StoriesSettings__mine__only--description')
+        }
+        isRadio
+        label={i18n('StoriesSettings__mine__only--label')}
+        moduleClassName="StoriesSettingsModal__checkbox"
+        name="share"
+        onChange={noop}
+        onClick={() => {
+          if (!myStories.isBlockList) {
+            setSelectedContacts(myStories.members);
+          }
+          onClickOnlyShareWith();
+        }}
+      />
+
+      {!hasDisclaimerAbove && disclaimerElement}
+    </>
+  );
+};
+
 type EditDistributionListPropsType = {
  onDone: (name: string, viewerUuids: Array<UUIDStringType>) => unknown;
  onViewersUpdated: (viewerUuids: Array<UUIDStringType>) => unknown;
--- a/ts/components/StoryCreator.stories.tsx
+++ b/ts/components/StoryCreator.stories.tsx
@ -33,6 +33,9 @@ export default {
    groupStories: {
      defaultValue: Array.from(Array(4), getDefaultGroup),
    },
+    hasFirstStoryPostExperience: {
+      defaultValue: false,
+    },
    i18n: { defaultValue: i18n },
    installedPacks: {
      defaultValue: [],
@ -45,14 +48,18 @@ export default {
    },
    onClose: { action: true },
    onDistributionListCreated: { action: true },
+    onHideMyStoriesFrom: { action: true },
    onSend: { action: true },
+    onViewersUpdated: { action: true },
    processAttachment: { action: true },
    recentStickers: {
      defaultValue: [],
    },
+    setMyStoriesToAllSignalConnections: { action: true },
    signalConnections: {
      defaultValue: Array.from(Array(42), getDefaultConversation),
    },
+    toggleSignalConnectionsModal: { action: true },
  },
 } as Meta;

@ -78,3 +85,11 @@ LinkPreview.args = {
 LinkPreview.story = {
  name: 'with Link Preview ready to be applied',
 };
+
+export const FirstTime = Template.bind({});
+FirstTime.args = {
+  hasFirstStoryPostExperience: true,
+};
+FirstTime.story = {
+  name: 'First time posting a story',
+};
--- a/ts/components/StoryCreator.tsx
+++ b/ts/components/StoryCreator.tsx
@ -8,13 +8,11 @@ import type {
  AttachmentType,
  InMemoryAttachmentDraftType,
 } from '../types/Attachment';
-import type { ConversationType } from '../state/ducks/conversations';
 import type { LinkPreviewSourceType } from '../types/LinkPreview';
 import type { LinkPreviewType } from '../types/message/LinkPreviews';
 import type { LocalizerType } from '../types/Util';
-import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { Props as StickerButtonProps } from './stickers/StickerButton';
-import type { StoryDistributionListDataType } from '../state/ducks/storyDistributionLists';
+import type { PropsType as SendStoryModalPropsType } from './SendStoryModal';
 import type { UUIDStringType } from '../types/UUID';

 import { IMAGE_JPEG, TEXT_ATTACHMENT } from '../types/MIME';
@ -25,24 +23,14 @@ import { MediaEditor } from './MediaEditor';
 import { TextStoryCreator } from './TextStoryCreator';

 export type PropsType = {
-  candidateConversations: Array<ConversationType>;
  debouncedMaybeGrabLinkPreview: (
    message: string,
    source: LinkPreviewSourceType
  ) => unknown;
-  distributionLists: Array<StoryDistributionListDataType>;
  file?: File;
-  getPreferredBadge: PreferredBadgeSelectorType;
-  groupConversations: Array<ConversationType>;
-  groupStories: Array<ConversationType>;
  i18n: LocalizerType;
  linkPreview?: LinkPreviewType;
-  me: ConversationType;
  onClose: () => unknown;
-  onDistributionListCreated: (
-    name: string,
-    viewerUuids: Array<UUIDStringType>
-  ) => unknown;
  onSelectedStoryList: (memberUuids: Array<string>) => unknown;
  onSend: (
    listIds: Array<UUIDStringType>,
@ -53,9 +41,24 @@ export type PropsType = {
    file: File
  ) => Promise<void | InMemoryAttachmentDraftType>;
  sendStoryModalOpenStateChanged: (isOpen: boolean) => unknown;
-  signalConnections: Array<ConversationType>;
-  tagGroupsAsNewGroupStory: (cids: Array<string>) => unknown;
-} & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'>;
+} & Pick<StickerButtonProps, 'installedPacks' | 'recentStickers'> &
+  Pick<
+    SendStoryModalPropsType,
+    | 'candidateConversations'
+    | 'distributionLists'
+    | 'getPreferredBadge'
+    | 'groupConversations'
+    | 'groupStories'
+    | 'hasFirstStoryPostExperience'
+    | 'me'
+    | 'onDistributionListCreated'
+    | 'onHideMyStoriesFrom'
+    | 'onViewersUpdated'
+    | 'setMyStoriesToAllSignalConnections'
+    | 'signalConnections'
+    | 'tagGroupsAsNewGroupStory'
+    | 'toggleSignalConnectionsModal'
+  >;

 export const StoryCreator = ({
  candidateConversations,
@ -65,19 +68,24 @@ export const StoryCreator = ({
  getPreferredBadge,
  groupConversations,
  groupStories,
+  hasFirstStoryPostExperience,
  i18n,
  installedPacks,
  linkPreview,
  me,
  onClose,
  onDistributionListCreated,
+  onHideMyStoriesFrom,
  onSelectedStoryList,
  onSend,
+  onViewersUpdated,
  processAttachment,
  recentStickers,
  sendStoryModalOpenStateChanged,
+  setMyStoriesToAllSignalConnections,
  signalConnections,
  tagGroupsAsNewGroupStory,
+  toggleSignalConnectionsModal,
 }: PropsType): JSX.Element => {
  const [draftAttachment, setDraftAttachment] = useState<
    AttachmentType | undefined
@ -129,18 +137,25 @@ export const StoryCreator = ({
          getPreferredBadge={getPreferredBadge}
          groupConversations={groupConversations}
          groupStories={groupStories}
+          hasFirstStoryPostExperience={hasFirstStoryPostExperience}
          i18n={i18n}
          me={me}
          onClose={() => setDraftAttachment(undefined)}
          onDistributionListCreated={onDistributionListCreated}
+          onHideMyStoriesFrom={onHideMyStoriesFrom}
          onSelectedStoryList={onSelectedStoryList}
          onSend={(listIds, groupIds) => {
            onSend(listIds, groupIds, draftAttachment);
            setDraftAttachment(undefined);
            onClose();
          }}
+          onViewersUpdated={onViewersUpdated}
+          setMyStoriesToAllSignalConnections={
+            setMyStoriesToAllSignalConnections
+          }
          signalConnections={signalConnections}
          tagGroupsAsNewGroupStory={tagGroupsAsNewGroupStory}
+          toggleSignalConnectionsModal={toggleSignalConnectionsModal}
        />
      )}
      {attachmentUrl && (
--- a/ts/state/ducks/storyDistributionLists.ts
+++ b/ts/state/ducks/storyDistributionLists.ts
@ -282,6 +282,8 @@ function hideMyStoriesFrom(

    storageServiceUploadJob();

+    window.storage.put('hasSetMyStoriesPrivacy', true);
+
    dispatch({
      type: HIDE_MY_STORIES_FROM,
      payload: memberUuids,
@ -378,6 +380,8 @@ function setMyStoriesToAllSignalConnections(): ThunkAction<
      storageServiceUploadJob();
    }

+    window.storage.put('hasSetMyStoriesPrivacy', true);
+
    dispatch({
      type: RESET_MY_STORIES,
    });
@ -432,6 +436,10 @@ function updateStoryViewers(

    storageServiceUploadJob();

+    if (listId === MY_STORIES_ID) {
+      window.storage.put('hasSetMyStoriesPrivacy', true);
+    }
+
    dispatch({
      type: VIEWERS_CHANGED,
      payload: {
@ -599,7 +607,7 @@ export function reducer(
      state.distributionLists,
      MY_STORIES_ID,
      () => ({
-        isBlockList: false,
+        isBlockList: true,
        memberUuids: [],
      })
    );
--- a/ts/state/selectors/items.ts
+++ b/ts/state/selectors/items.ts
@ -125,3 +125,8 @@ export const getHideMenuBar = createSelector(
  getItems,
  (state: ItemsStateType): boolean => Boolean(state['hide-menu-bar'])
 );
+
+export const getHasSetMyStoriesPrivacy = createSelector(
+  getItems,
+  (state: ItemsStateType): boolean => Boolean(state.hasSetMyStoriesPrivacy)
+);
--- a/ts/state/smart/StoryCreator.tsx
+++ b/ts/state/smart/StoryCreator.tsx
@ -21,10 +21,12 @@ import {
  getInstalledStickerPacks,
  getRecentStickers,
 } from '../selectors/stickers';
+import { getHasSetMyStoriesPrivacy } from '../selectors/items';
 import { getLinkPreview } from '../selectors/linkPreviews';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { processAttachment } from '../../util/processAttachment';
 import { useConversationsActions } from '../ducks/conversations';
+import { useGlobalModalActions } from '../ducks/globalModals';
 import { useLinkPreviewActions } from '../ducks/linkPreviews';
 import { useStoriesActions } from '../ducks/stories';
 import { useStoryDistributionListsActions } from '../ducks/storyDistributionLists';
@ -45,13 +47,20 @@ export function SmartStoryCreator({
    verifyStoryListMembers,
  } = useStoriesActions();
  const { tagGroupsAsNewGroupStory } = useConversationsActions();
-  const { createDistributionList } = useStoryDistributionListsActions();
+  const {
+    createDistributionList,
+    hideMyStoriesFrom,
+    setMyStoriesToAllSignalConnections,
+    updateStoryViewers,
+  } = useStoryDistributionListsActions();
+  const { toggleSignalConnectionsModal } = useGlobalModalActions();

  const candidateConversations = useSelector(getCandidateContactsForNewGroup);
  const distributionLists = useSelector(getDistributionLists);
  const getPreferredBadge = useSelector(getPreferredBadgeSelector);
  const groupConversations = useSelector(getNonGroupStories);
  const groupStories = useSelector(getGroupStories);
+  const hasSetMyStoriesPrivacy = useSelector(getHasSetMyStoriesPrivacy);
  const i18n = useSelector<StateType, LocalizerType>(getIntl);
  const installedPacks = useSelector(getInstalledStickerPacks);
  const linkPreviewForSource = useSelector(getLinkPreview);
@ -68,19 +77,24 @@ export function SmartStoryCreator({
      getPreferredBadge={getPreferredBadge}
      groupConversations={groupConversations}
      groupStories={groupStories}
+      hasFirstStoryPostExperience={!hasSetMyStoriesPrivacy}
      i18n={i18n}
      installedPacks={installedPacks}
      linkPreview={linkPreviewForSource(LinkPreviewSourceType.StoryCreator)}
      me={me}
      onClose={onClose}
      onDistributionListCreated={createDistributionList}
+      onHideMyStoriesFrom={hideMyStoriesFrom}
      onSelectedStoryList={verifyStoryListMembers}
      onSend={sendStoryMessage}
+      onViewersUpdated={updateStoryViewers}
      processAttachment={processAttachment}
      recentStickers={recentStickers}
      sendStoryModalOpenStateChanged={sendStoryModalOpenStateChanged}
+      setMyStoriesToAllSignalConnections={setMyStoriesToAllSignalConnections}
      signalConnections={signalConnections}
      tagGroupsAsNewGroupStory={tagGroupsAsNewGroupStory}
+      toggleSignalConnectionsModal={toggleSignalConnectionsModal}
    />
  );
 }
--- a/ts/types/Storage.d.ts
+++ b/ts/types/Storage.d.ts
@ -65,6 +65,7 @@ export type StorageAccessType = {
  customColors: CustomColorsItemType;
  device_name: string;
  hasRegisterSupportForUnauthenticatedDelivery: boolean;
+  hasSetMyStoriesPrivacy: boolean;
  hasStoriesEnabled: boolean;
  identityKeyMap: IdentityKeyMap;
  lastHeartbeat: number;
--- a/ts/types/Stories.ts
+++ b/ts/types/Stories.ts
@ -8,6 +8,7 @@ import type { LocalizerType } from './Util';
 import type { ReadStatus } from '../messages/MessageReadStatus';
 import type { SendStatus } from '../messages/MessageSendState';
 import type { StoryDistributionListDataType } from '../state/ducks/storyDistributionLists';
+import type { UUIDStringType } from './UUID';

 export type ReplyType = {
  author: Pick<
@ -97,7 +98,8 @@ export type MyStoryType = {
  stories: Array<StoryViewType>;
 };

-export const MY_STORIES_ID = '00000000-0000-0000-0000-000000000000';
+export const MY_STORIES_ID: UUIDStringType =
+  '00000000-0000-0000-0000-000000000000';

 export enum StoryViewDirectionType {
  Next = 'Next',