Discriminator in username

ts/components/ProfileEditor.stories.tsx

@@ -2,14 +2,19 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { Meta, Story } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import React, { useState } from 'react';
 import casual from 'casual';
 
 import type { PropsType } from './ProfileEditor';
 import enMessages from '../../_locales/en/messages.json';
 import { ProfileEditor } from './ProfileEditor';
+import { EditUsernameModalBody } from './EditUsernameModalBody';
+import {
+  UsernameEditState,
+  UsernameReservationState,
+} from '../state/ducks/usernameEnums';
 import { UUID } from '../types/UUID';
-import { UsernameSaveState } from '../state/ducks/conversationsEnums';
 import { getRandomColor } from '../test-both/helpers/getRandomColor';
 import { setupI18n } from '../util/setupI18n';
 
@@ -28,7 +33,6 @@ export default {
     profileAvatarPath: {
       defaultValue: undefined,
     },
-    clearUsernameSave: { action: true },
     conversationId: {
       defaultValue: UUID.generate().toString(),
     },
@@ -49,15 +53,27 @@ export default {
       control: { type: 'checkbox' },
       defaultValue: false,
     },
+    usernameEditState: {
+      control: { type: 'radio' },
+      defaultValue: UsernameEditState.Editing,
+      options: {
+        Editing: UsernameEditState.Editing,
+        ConfirmingDelete: UsernameEditState.ConfirmingDelete,
+        Deleting: UsernameEditState.Deleting,
+      },
+    },
     onEditStateChanged: { action: true },
     onProfileChanged: { action: true },
     onSetSkinTone: { action: true },
+    showToast: { action: true },
     recentEmojis: {
       defaultValue: [],
     },
     replaceAvatar: { action: true },
     saveAvatarToDisk: { action: true },
-    saveUsername: { action: true },
+    openUsernameReservationModal: { action: true },
+    setUsernameEditState: { action: true },
+    deleteUsername: { action: true },
     skinTone: {
       defaultValue: 0,
     },
@@ -65,29 +81,37 @@ export default {
       defaultValue: [],
     },
     username: {
-      defaultValue: casual.username,
-    },
-    usernameSaveState: {
-      control: { type: 'radio' },
-      defaultValue: UsernameSaveState.None,
-      options: {
-        None: UsernameSaveState.None,
-        Saving: UsernameSaveState.Saving,
-        UsernameTakenError: UsernameSaveState.UsernameTakenError,
-        UsernameMalformedError: UsernameSaveState.UsernameMalformedError,
-        GeneralError: UsernameSaveState.GeneralError,
-        DeleteFailed: UsernameSaveState.DeleteFailed,
-        Success: UsernameSaveState.Success,
-      },
+      defaultValue: undefined,
     },
   },
 } as Meta;
 
+function renderEditUsernameModalBody(props: {
+  onClose: () => void;
+}): JSX.Element {
+  return (
+    <EditUsernameModalBody
+      i18n={i18n}
+      state={UsernameReservationState.Open}
+      error={undefined}
+      setUsernameReservationError={action('setUsernameReservationError')}
+      reserveUsername={action('reserveUsername')}
+      confirmUsername={action('confirmUsername')}
+      {...props}
+    />
+  );
+}
+
 const Template: Story<PropsType> = args => {
   const [skinTone, setSkinTone] = useState(0);
 
   return (
-    <ProfileEditor {...args} skinTone={skinTone} onSetSkinTone={setSkinTone} />
+    <ProfileEditor
+      {...args}
+      skinTone={skinTone}
+      onSetSkinTone={setSkinTone}
+      renderEditUsernameModalBody={renderEditUsernameModalBody}
+    />
   );
 };
 
@@ -128,48 +152,22 @@ WithUsernameFlagEnabled.story = {
 export const WithUsernameFlagEnabledAndUsername = Template.bind({});
 WithUsernameFlagEnabledAndUsername.args = {
   isUsernameFlagEnabled: true,
-  username: casual.username,
+  username: 'signaluser.123',
 };
 WithUsernameFlagEnabledAndUsername.story = {
   name: 'with Username flag enabled and username',
 };
 
-export const UsernameEditingSaving = Template.bind({});
-UsernameEditingSaving.args = {
+export const DeletingUsername = Template.bind({});
+DeletingUsername.args = {
   isUsernameFlagEnabled: true,
-  usernameSaveState: UsernameSaveState.Saving,
-  username: casual.username,
-};
-UsernameEditingSaving.story = {
-  name: 'Username editing, saving',
+  username: 'signaluser.123',
+  usernameEditState: UsernameEditState.Deleting,
 };
 
-export const UsernameEditingUsernameTaken = Template.bind({});
-UsernameEditingUsernameTaken.args = {
+export const ConfirmingDelete = Template.bind({});
+ConfirmingDelete.args = {
   isUsernameFlagEnabled: true,
-  usernameSaveState: UsernameSaveState.UsernameTakenError,
-  username: casual.username,
-};
-UsernameEditingUsernameTaken.story = {
-  name: 'Username editing, username taken',
-};
-
-export const UsernameEditingUsernameMalformed = Template.bind({});
-UsernameEditingUsernameMalformed.args = {
-  isUsernameFlagEnabled: true,
-  usernameSaveState: UsernameSaveState.UsernameMalformedError,
-  username: casual.username,
-};
-UsernameEditingUsernameMalformed.story = {
-  name: 'Username editing, username malformed',
-};
-
-export const UsernameEditingGeneralError = Template.bind({});
-UsernameEditingGeneralError.args = {
-  isUsernameFlagEnabled: true,
-  usernameSaveState: UsernameSaveState.GeneralError,
-  username: casual.username,
-};
-UsernameEditingGeneralError.story = {
-  name: 'Username editing, general error',
+  username: 'signaluser.123',
+  usernameEditState: UsernameEditState.ConfirmingDelete,
 };