diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx
index e83324832..eff9b25dc 100644
--- a/ts/components/conversation/right-panel/RightPanel.tsx
+++ b/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 ;
default:
- return ;
+ // TODO[epic=ses-50] revert to proper right panel settings later
+ return ;
}
};
diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx
new file mode 100644
index 000000000..28ee7af39
--- /dev/null
+++ b/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(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 (
+
+
+
+
+ {
+ window.log.debug(
+ `WIP: [OverlayRightPanelSettings] clicked continuing your session! `
+ );
+ }}
+ text={window.i18n('continueYourSession')}
+ />
+ }
+ />
+
+
+
+
+ );
+};
diff --git a/ts/components/dialog/ModalContainer.tsx b/ts/components/dialog/ModalContainer.tsx
index 952ba1ca8..7092ffd90 100644
--- a/ts/components/dialog/ModalContainer.tsx
+++ b/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 && (
)}
- {termsOfServicePrivacyModalState && (
-
- )}
>
);
};
diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx
index 5a715d0b7..187d5fe2b 100644
--- a/ts/state/ducks/modalDialog.tsx
+++ b/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) {
return { ...state, editProfilePictureModalState: action.payload };
},
- updateTermsOfServicePrivacyModal(
- state,
- action: PayloadAction
- ) {
- return { ...state, termsOfServicePrivacyModalState: action.payload };
- },
},
});
@@ -166,6 +155,5 @@ export const {
updateReactListModal,
updateReactClearAllModal,
updateEditProfilePictureModel,
- updateTermsOfServicePrivacyModal,
} = actions;
export const modalReducer = reducer;
diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts
index 5f001cc04..beaa1ce41 100644
--- a/ts/state/selectors/modal.ts
+++ b/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
-);