fix: remove TermsOfServicePrivacyDialog from convo state

we are moving it to a separate onboarding store

ts/components/conversation/right-panel/RightPanel.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { useRightOverlayMode } from '../../../hooks/useUI';
 import { isRtlBody } from '../../../util/i18n';
 import { Flex } from '../../basic/Flex';
-import { OverlayRightPanelSettings } from './overlay/OverlayRightPanelSettings';
+import { OverlayRightPanelSettings2 } from './overlay/OverlayRightPanelSettings2';
 import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages';
 import { OverlayMessageInfo } from './overlay/message-info/OverlayMessageInfo';
 
@@ -107,7 +107,8 @@ const ClosableOverlay = () => {
     case 'message_info':
       return <OverlayMessageInfo />;
     default:
-      return <OverlayRightPanelSettings />;
+      // TODO[epic=ses-50] revert to proper right panel settings later
+      return <OverlayRightPanelSettings2 />;
   }
 };
 

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+
+import { MAX_USERNAME_BYTES } from '../../../../session/constants';
+import { ToastUtils } from '../../../../session/utils';
+import { sanitizeSessionUsername } from '../../../../session/utils/String';
+import { useSelectedConversationKey } from '../../../../state/selectors/selectedConversation';
+import { Flex } from '../../../basic/Flex';
+import { SessionButton } from '../../../basic/SessionButton';
+import { SpacerLG, SpacerXL } from '../../../basic/Text';
+import { SessionInput2 } from '../../../inputs';
+import { SessionProgressBar } from '../../../loading';
+import { StyledScrollContainer } from './components';
+
+export const OverlayRightPanelSettings2 = () => {
+  const selectedConvoKey = useSelectedConversationKey();
+
+  // TODO[epic=ses-50] move this into already have an account screen
+  // #region for testing
+  const [progress, setProgress] = useState(0);
+  const [inputValue, setInputValue] = useState('');
+  const [inputError, setInputError] = useState<string | undefined>(undefined);
+
+  function sanitizeDisplayNameOrToast(
+    displayName: string,
+    setDisplayName: (sanitized: string) => void,
+    setDisplayNameError: (error: string | undefined) => void
+  ) {
+    try {
+      const sanitizedName = sanitizeSessionUsername(displayName);
+      const trimName = sanitizedName.trim();
+      setDisplayName(sanitizedName);
+      setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+    } catch (e) {
+      setDisplayName(displayName);
+      setDisplayNameError(window.i18n('displayNameTooLong'));
+      ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong'));
+    }
+  }
+
+  const handleInputChanged = (name: string) => {
+    sanitizeDisplayNameOrToast(name, setInputValue, setInputError);
+    if (name.length > 8) {
+      setInputError(window.i18n('displayNameTooLong'));
+    }
+  };
+
+  const handleEnterPressed = (name: string) => {
+    if (name) {
+      sanitizeDisplayNameOrToast(name, setInputValue, setInputError);
+      ToastUtils.pushToastSuccess('success', window.i18n('done'));
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(oldProgress => {
+        if (oldProgress === 100) {
+          clearInterval(interval);
+          return 100;
+        }
+        return Math.min(oldProgress + 10, 100);
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+  // #endregion
+
+  if (!selectedConvoKey) {
+    return null;
+  }
+
+  return (
+    <StyledScrollContainer>
+      <Flex container={true} flexDirection={'column'} alignItems={'center'}>
+        <SessionProgressBar
+          progress={progress}
+          width={'320px'}
+          margin={'var(--margins-lg) auto'}
+          title={window.i18n('waitOneMoment')}
+          subtitle={window.i18n('loadAccountProgressMessage')}
+          showPercentage={true}
+        />
+        <SpacerLG />
+        <SessionInput2
+          placeholder={window.i18n('enterDisplayName')}
+          value={inputValue}
+          error={inputError}
+          maxLength={MAX_USERNAME_BYTES}
+          onValueChanged={handleInputChanged}
+          onEnterPressed={handleEnterPressed}
+          ctaButton={
+            <SessionButton
+              onClick={() => {
+                window.log.debug(
+                  `WIP: [OverlayRightPanelSettings] clicked continuing your session! `
+                );
+              }}
+              text={window.i18n('continueYourSession')}
+            />
+          }
+        />
+        <SpacerLG />
+        <SpacerXL />
+      </Flex>
+    </StyledScrollContainer>
+  );
+};

ts/components/dialog/ModalContainer.tsx

@@ -14,7 +14,6 @@ import {
   getRecoveryPhraseDialog,
   getRemoveModeratorsModal,
   getSessionPasswordDialog,
-  getTermsOfServicePrivacyModalState,
   getUpdateGroupMembersModal,
   getUpdateGroupNameModal,
   getUserDetailsModal,
@@ -33,7 +32,6 @@ import { SessionConfirm } from './SessionConfirm';
 import { SessionNicknameDialog } from './SessionNicknameDialog';
 import { SessionPasswordDialog } from './SessionPasswordDialog';
 import { SessionSeedModal } from './SessionSeedModal';
-import { TermsOfServicePrivacyDialog } from './TermsOfServicePrivacyDialog';
 import { UpdateGroupMembersDialog } from './UpdateGroupMembersDialog';
 import { UpdateGroupNameDialog } from './UpdateGroupNameDialog';
 import { UserDetailsDialog } from './UserDetailsDialog';
@@ -56,7 +54,6 @@ export const ModalContainer = () => {
   const reactListModalState = useSelector(getReactListDialog);
   const reactClearAllModalState = useSelector(getReactClearAllDialog);
   const editProfilePictureModalState = useSelector(getEditProfilePictureModalState);
-  const termsOfServicePrivacyModalState = useSelector(getTermsOfServicePrivacyModalState);
 
   return (
     <>
@@ -81,9 +78,6 @@ export const ModalContainer = () => {
       {editProfilePictureModalState && (
         <EditProfilePictureModal {...editProfilePictureModalState} />
       )}
-      {termsOfServicePrivacyModalState && (
-        <TermsOfServicePrivacyDialog {...termsOfServicePrivacyModalState} />
-      )}
     </>
   );
 };

ts/state/ducks/modalDialog.tsx

@@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { EditProfilePictureModalProps } from '../../components/dialog/EditProfilePictureModal';
 import { SessionConfirmDialogProps } from '../../components/dialog/SessionConfirm';
 import { PasswordAction } from '../../components/dialog/SessionPasswordDialog';
-import { TermsOfServicePrivacyDialogProps } from '../../components/dialog/TermsOfServicePrivacyDialog';
 import { Noop } from '../../types/Util';
 
 export type BanType = 'ban' | 'unban';
@@ -39,8 +38,6 @@ export type ReactModalsState = {
 
 export type EditProfilePictureModalState = EditProfilePictureModalProps | null;
 
-export type TermsOfServicePrivacyModalState = TermsOfServicePrivacyDialogProps | null;
-
 export type ModalState = {
   confirmModal: ConfirmModalState;
   inviteContactModal: InviteContactModalState;
@@ -59,7 +56,6 @@ export type ModalState = {
   reactListModalState: ReactModalsState;
   reactClearAllModalState: ReactModalsState;
   editProfilePictureModalState: EditProfilePictureModalState;
-  termsOfServicePrivacyModalState: TermsOfServicePrivacyModalState;
 };
 
 export const initialModalState: ModalState = {
@@ -80,7 +76,6 @@ export const initialModalState: ModalState = {
   reactListModalState: null,
   reactClearAllModalState: null,
   editProfilePictureModalState: null,
-  termsOfServicePrivacyModalState: null,
 };
 
 const ModalSlice = createSlice({
@@ -138,12 +133,6 @@ const ModalSlice = createSlice({
     updateEditProfilePictureModel(state, action: PayloadAction<EditProfilePictureModalState>) {
       return { ...state, editProfilePictureModalState: action.payload };
     },
-    updateTermsOfServicePrivacyModal(
-      state,
-      action: PayloadAction<TermsOfServicePrivacyModalState>
-    ) {
-      return { ...state, termsOfServicePrivacyModalState: action.payload };
-    },
   },
 });
 
@@ -166,6 +155,5 @@ export const {
   updateReactListModal,
   updateReactClearAllModal,
   updateEditProfilePictureModel,
-  updateTermsOfServicePrivacyModal,
 } = actions;
 export const modalReducer = reducer;

ts/state/selectors/modal.ts

@@ -15,7 +15,6 @@ import {
   RecoveryPhraseModalState,
   RemoveModeratorsModalState,
   SessionPasswordModalState,
-  TermsOfServicePrivacyModalState,
   UpdateGroupMembersModalState,
   UpdateGroupNameModalState,
   UserDetailsModalState,
@@ -110,8 +109,3 @@ export const getEditProfilePictureModalState = createSelector(
   getModal,
   (state: ModalState): EditProfilePictureModalState => state.editProfilePictureModalState
 );
-
-export const getTermsOfServicePrivacyModalState = createSelector(
-  getModal,
-  (state: ModalState): TermsOfServicePrivacyModalState => state.termsOfServicePrivacyModalState
-);