feat: outdated banner now shows specific messaging for synced messages

ts/components/SessionInboxView.tsx

@@ -71,6 +71,7 @@ function createSessionInboxStore() {
       conversationLookup: makeLookup(conversations, 'id'),
     },
     user: {
+      ourDisplayNameInProfile: UserUtils.getOurProfile()?.displayName || '',
       ourNumber: UserUtils.getOurPubKeyStrFromCache(),
     },
     section: initialSectionState,

ts/components/conversation/SessionConversation.tsx

@@ -69,6 +69,7 @@ export interface LightBoxOptions {
 }
 
 interface Props {
+  ourDisplayNameInProfile: string;
   ourNumber: string;
   selectedConversationKey: string;
   selectedConversation?: ReduxConversationType;
@@ -235,6 +236,7 @@ export class SessionConversation extends React.Component<Props, State> {
     const { isDraggingFile } = this.state;
 
     const {
+      ourDisplayNameInProfile,
       selectedConversation,
       messagesProps,
       showMessageDetails,
@@ -251,6 +253,12 @@ export class SessionConversation extends React.Component<Props, State> {
     // TODOLATER break showMessageDetails & selectionMode into it's own container component so we can use hooks to fetch relevant state from the store
     const selectionMode = selectedMessages.length > 0;
 
+    const bannerText =
+      selectedConversation.hasOutdatedClient &&
+      selectedConversation.hasOutdatedClient !== ourDisplayNameInProfile
+        ? window.i18n('disappearingMessagesModeOutdated', [selectedConversation.hasOutdatedClient])
+        : window.i18n('someOfYourDeviceUseOutdatedVersion');
+
     return (
       <SessionTheme>
         <div className="conversation-header">
@@ -258,9 +266,7 @@ export class SessionConversation extends React.Component<Props, State> {
           {selectedConversation?.hasOutdatedClient &&
             selectedConversation.hasOutdatedClient.length > 0 && (
               <NoticeBanner
-                text={window.i18n('disappearingMessagesModeOutdated', [
-                  selectedConversation.hasOutdatedClient,
-                ])}
+                text={bannerText}
                 dismissCallback={() => {
                   const conversation = getConversationController().get(selectedConversation.id);
                   conversation.set({ hasOutdatedClient: undefined });

ts/state/ducks/user.ts

@@ -1,6 +1,7 @@
 // State
 
 export type UserStateType = {
+  ourDisplayNameInProfile: string;
   ourNumber: string;
 };
 
@@ -9,6 +10,7 @@ export type UserStateType = {
 type UserChangedActionType = {
   type: 'USER_CHANGED';
   payload: {
+    ourDisplayNameInProfile: string;
     ourNumber: string;
     ourPrimary: string;
   };
@@ -22,7 +24,11 @@ export const actions = {
   userChanged,
 };
 
-function userChanged(attributes: { ourNumber: string; ourPrimary: string }): UserChangedActionType {
+function userChanged(attributes: {
+  ourDisplayNameInProfile: string;
+  ourNumber: string;
+  ourPrimary: string;
+}): UserChangedActionType {
   return {
     type: 'USER_CHANGED',
     payload: attributes,
@@ -33,6 +39,7 @@ function userChanged(attributes: { ourNumber: string; ourPrimary: string }): Use
 
 function getEmptyState(): UserStateType {
   return {
+    ourDisplayNameInProfile: '',
     ourNumber: 'missing',
   };
 }

ts/state/selectors/user.ts

@@ -12,4 +12,9 @@ export const getOurNumber = createSelector(
   (state: UserStateType): string => state.ourNumber
 );
 
+export const getOurDisplayNameInProfile = createSelector(
+  getUser,
+  (state: UserStateType): string => state.ourDisplayNameInProfile
+);
+
 export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);

ts/state/smart/SessionConversation.ts

@@ -15,7 +15,7 @@ import {
 import { getSelectedConversationKey } from '../selectors/selectedConversation';
 import { getStagedAttachmentsForCurrentConversation } from '../selectors/stagedAttachments';
 import { getTheme } from '../selectors/theme';
-import { getOurNumber } from '../selectors/user';
+import { getOurDisplayNameInProfile, getOurNumber } from '../selectors/user';
 import { HTMLDirection } from '../../util/i18n';
 
 type SmartSessionConversationOwnProps = {
@@ -28,6 +28,7 @@ const mapStateToProps = (state: StateType, ownProps: SmartSessionConversationOwn
     selectedConversationKey: getSelectedConversationKey(state),
     theme: getTheme(state),
     messagesProps: getSortedMessagesOfSelectedConversation(state),
+    ourDisplayNameInProfile: getOurDisplayNameInProfile(state),
     ourNumber: getOurNumber(state),
     showMessageDetails: isMessageDetailView(state),
     isRightPanelShowing: isRightPanelShowing(state),

ts/util/accountManager.ts

@@ -207,6 +207,7 @@ async function registrationDone(ourPubkey: string, displayName: string) {
   await conversation.commit();
 
   const user = {
+    ourDisplayNameInProfile: displayName,
     ourNumber: getOurPubKeyStrFromCache(),
     ourPrimary: ourPubkey,
   };