From 9b98e20a8c6d6a8d0b4bce328ec919c25ac460d6 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:30:32 -0800
Subject: [PATCH] Control UI visibility in ProfileEditor

---
 _locales/en/messages.json               |  4 ++++
 ts/components/ProfileEditor.stories.tsx |  4 ++++
 ts/components/ProfileEditor.tsx         | 20 +++++++++++++++++++-
 ts/state/smart/ProfileEditorModal.tsx   |  2 ++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1077b1a30250..c3378ab7b6f7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -5683,6 +5683,10 @@
     "messageformat": "Delete",
     "description": "Shown in dialog button if user has saved an empty string to delete their username"
   },
+  "icu:ProfileEditor--username--delete-unavailable-notice": {
+    "messageformat": "To delete your username, open Signal on your phone and navigate to Settings > Profile.",
+    "description": "Shown in dialog body if user is trying to delete username, but it is only supported on mobile"
+  },
   "icu:ProfileEditor--username--context-menu": {
     "messageformat": "Copy or delete username",
     "description": "Shown as aria label for context menu next to username"
diff --git a/ts/components/ProfileEditor.stories.tsx b/ts/components/ProfileEditor.stories.tsx
index 5edcb60833d3..b5b3fb18c3c2 100644
--- a/ts/components/ProfileEditor.stories.tsx
+++ b/ts/components/ProfileEditor.stories.tsx
@@ -44,6 +44,9 @@ export default {
     usernameLinkCorrupted: {
       control: 'boolean',
     },
+    isUsernameDeletionEnabled: {
+      control: 'boolean',
+    },
   },
   args: {
     aboutEmoji: '',
@@ -60,6 +63,7 @@ export default {
     usernameLinkColor: Proto.AccountRecord.UsernameLink.Color.PURPLE,
     usernameEditState: UsernameEditState.Editing,
     usernameLinkState: UsernameLinkState.Ready,
+    isUsernameDeletionEnabled: true,
 
     recentEmojis: [],
     skinTone: 0,
diff --git a/ts/components/ProfileEditor.tsx b/ts/components/ProfileEditor.tsx
index 95d14bf1563d..e01c358eb4a7 100644
--- a/ts/components/ProfileEditor.tsx
+++ b/ts/components/ProfileEditor.tsx
@@ -88,6 +88,7 @@ export type PropsDataType = {
   usernameLinkColor?: number;
   usernameLink?: string;
   usernameLinkCorrupted: boolean;
+  isUsernameDeletionEnabled: boolean;
 } & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
 
 type PropsActionType = {
@@ -175,6 +176,7 @@ export function ProfileEditor({
   usernameLinkColor,
   usernameLink,
   usernameLinkCorrupted,
+  isUsernameDeletionEnabled,
 }: PropsType): JSX.Element {
   const focusInputRef = useRef<HTMLInputElement | null>(null);
   const [editState, setEditState] = useState<EditState>(initialEditState);
@@ -208,6 +210,7 @@ export function ProfileEditor({
     firstName,
   });
   const [isResettingUsername, setIsResettingUsername] = useState(false);
+  const [isUsernameNoticeVisible, setIsUsernameNoticeVisible] = useState(false);
   const [isResettingUsernameLink, setIsResettingUsernameLink] = useState(false);
 
   // Reset username edit state when leaving
@@ -567,7 +570,11 @@ export function ProfileEditor({
           icon: 'ProfileEditor__username-menu__trash-icon',
           label: i18n('icu:ProfileEditor--username--delete'),
           onClick: () => {
-            setUsernameEditState(UsernameEditState.ConfirmingDelete);
+            if (isUsernameDeletionEnabled) {
+              setUsernameEditState(UsernameEditState.ConfirmingDelete);
+            } else {
+              setIsUsernameNoticeVisible(true);
+            }
           },
         },
       ];
@@ -760,6 +767,17 @@ export function ProfileEditor({
         </ConfirmationDialog>
       )}
 
+      {isUsernameNoticeVisible && (
+        <ConfirmationDialog
+          dialogName="ProfileEditor.confirmDeleteUsername"
+          i18n={i18n}
+          onClose={() => setIsUsernameNoticeVisible(false)}
+          cancelText={i18n('icu:ok')}
+        >
+          {i18n('icu:ProfileEditor--username--delete-unavailable-notice')}
+        </ConfirmationDialog>
+      )}
+
       {confirmDiscardAction && (
         <ConfirmDiscardDialog
           i18n={i18n}
diff --git a/ts/state/smart/ProfileEditorModal.tsx b/ts/state/smart/ProfileEditorModal.tsx
index b2f25afec51b..b505cea54256 100644
--- a/ts/state/smart/ProfileEditorModal.tsx
+++ b/ts/state/smart/ProfileEditorModal.tsx
@@ -18,6 +18,7 @@ import {
   getUsernameLinkColor,
   getUsernameLink,
   getUsernameLinkCorrupted,
+  isInternalUser,
 } from '../selectors/items';
 import { getMe } from '../selectors/conversations';
 import { selectRecentEmojis } from '../selectors/emojis';
@@ -81,6 +82,7 @@ function mapStateToProps(
     usernameLinkColor,
     usernameLinkCorrupted,
     usernameLink,
+    isUsernameDeletionEnabled: isInternalUser(state),
 
     renderEditUsernameModalBody,
   };