Merge remote-tracking branch 'upstream/dev' into delete-msg-options-updated

Author: Bilb

dynamic_assets

@@ -11,6 +11,7 @@ import { MessageBody } from '../MessageBody';
 import { QuoteProps } from './Quote';
 import { tr } from '../../../../../localization/localeTools';
 import { MessageDeletedType } from '../../../../../models/messageType';
+import { collapseString } from '../../../../../shared/string_utils';
 
 const StyledQuoteText = styled.div<{ $isIncoming: boolean }>`
   display: -webkit-box;
@@ -73,12 +74,9 @@ export function getShortenedFilename(fileName: string) {
   if (!fileName) {
     return '';
   }
-  if (fileName?.length < 20) {
-    return fileName;
-  }
   const charsAround = 15;
 
-  return `${fileName.slice(0, charsAround)} … ${fileName.slice(-charsAround)}`;
+  return collapseString(fileName, charsAround, charsAround, true);
 }
 
 export const QuoteText = (

ts/components/conversation/message/message-content/quote/QuoteText.tsx

@@ -192,7 +192,13 @@ function ProInfoBlockDeviceLinked() {
   );
 }
 
-function ProInfoBlockWebsite({ textElement }: { textElement: ReactNode }) {
+function ProInfoBlockWebsite({
+  textElement,
+  titleType,
+}: {
+  textElement: ReactNode;
+  titleType: 'via' | 'onThe';
+}) {
   const { data } = useProBackendProDetailsLocal();
   const storeOrPlatform = useStoreOrPlatformFromProvider(data);
 
@@ -202,7 +208,7 @@ function ProInfoBlockWebsite({ textElement }: { textElement: ReactNode }) {
       textElement={
         <ProInfoBlockText>
           <strong>
-            {tr('viaStoreWebsite', {
+            {tr(titleType === 'via' ? 'viaStoreWebsite' : 'onPlatformWebsite', {
               platform: storeOrPlatform,
             })}
           </strong>
@@ -305,6 +311,7 @@ function ProInfoBlockUpdate() {
             }
           />
           <ProInfoBlockWebsite
+            titleType="via"
             textElement={
               <Localizer
                 token="viaStoreWebsiteDescription"
@@ -347,6 +354,7 @@ function ProInfoBlockRenew() {
         <>
           <ProInfoBlockDeviceLinked />
           <ProInfoBlockWebsite
+            titleType="onThe"
             textElement={
               <Localizer
                 token="proAccessRenewPlatformStoreWebsite"
@@ -363,6 +371,8 @@ function ProInfoBlockRenew() {
 
 function ProInfoBlockCancel() {
   const { data } = useProBackendProDetailsLocal();
+  const storeOrPlatform = useStoreOrPlatformFromProvider(data);
+
   return (
     <ProInfoBlockLayout
       titleElement={tr('proCancellation')}
@@ -387,10 +397,11 @@ function ProInfoBlockCancel() {
             }
           />
           <ProInfoBlockWebsite
+            titleType="onThe"
             textElement={
               <Localizer
                 token="cancelProPlatformStore"
-                platform_store={data.providerConstants.platform}
+                platform_store={storeOrPlatform}
                 platform_account={data.providerConstants.platform_account}
               />
             }
@@ -472,6 +483,7 @@ function ProInfoBlockRefundIOS() {
             }
           />
           <ProInfoBlockWebsite
+            titleType="onThe"
             textElement={
               <Localizer
                 token="requestRefundPlatformWebsite"

ts/components/dialog/user-settings/pages/user-pro/ProNonOriginatingPage.tsx

@@ -492,8 +492,6 @@ function ProSettings({ state }: SectionProps) {
     subText = { token: 'errorLoadingProAccess' };
   } else if (isLoading) {
     subText = { token: 'proAccessLoadingEllipsis' };
-  } else if (data.isProcessingRefund) {
-    subText = { token: 'processingRefundRequest', platform: data.providerConstants.platform };
   } else if (data.inGracePeriod) {
     subText = { token: 'proRenewalUnsuccessful' };
   } else if (data.autoRenew) {
@@ -509,6 +507,10 @@ function ProSettings({ state }: SectionProps) {
         {data.isProcessingRefund ? (
           <PanelIconButton
             text={{ token: 'proRequestedRefund' }}
+            subText={{
+              token: 'processingRefundRequest',
+              platform: data.providerConstants.platform,
+            }}
             dataTestId="update-access-settings-button"
             onClick={handleUpdateAccessClick}
             iconElement={<PanelIconLucideIcon unicode={LUCIDE_ICONS_UNICODE.CIRCLE_ALERT} />}

ts/components/dialog/user-settings/pages/user-pro/ProSettingsPage.tsx

@@ -1,3 +1,4 @@
+import type { SessionDataTestId } from 'react';
 import styled from 'styled-components';
 import type { SessionIconSize } from './Icons';
 import { IconSizeToPxStr } from './SessionIcon';
@@ -9,8 +10,10 @@ const MailWithUnreadContainer = styled.div`
 export function MailWithUnreadIcon({
   iconSize,
   style,
+  dataTestId,
 }: {
   iconSize: SessionIconSize;
+  dataTestId?: SessionDataTestId;
   style?: React.CSSProperties;
 }) {
   const sizePx = IconSizeToPxStr[iconSize];
@@ -22,6 +25,7 @@ export function MailWithUnreadIcon({
         height={sizePx}
         fill="none"
         viewBox="0 0 17 17"
+        data-testid={dataTestId}
       >
         <path
           fill="currentColor"

ts/components/icon/MailWithUnreadIcon.tsx

@@ -38,6 +38,7 @@ const NotificationSettingIcon = () => {
           iconColor="currentColor"
           iconSize="small"
           style={{ flexShrink: 0 }}
+          dataTestId="conversation-item-muted"
         />
       );
     case 'mentions_only':
@@ -46,6 +47,7 @@ const NotificationSettingIcon = () => {
           iconType="bell"
           iconColor="currentColor"
           iconSize="small"
+          dataTestId="conversation-item-mentions-only"
           style={{ flexShrink: 0 }}
         />
       );
@@ -72,6 +74,7 @@ const PinIcon = () => {
       iconColor="currentColor"
       iconSize="small"
       style={{ flexShrink: 0 }}
+      dataTestId="conversation-item-pinned"
     />
   ) : null;
 };
@@ -152,6 +155,7 @@ const AtSymbol = ({ conversationId }: WithConvoId) => {
       title="Open to latest mention"
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onMouseDown={async e => openConvoToLastMention(e, conversationId)}
+      data-testid="conversation-item-mentioned-us"
     >
       @
     </MentionAtSymbol>
@@ -185,14 +189,24 @@ const UnreadCount = ({ conversationId }: WithConvoId) => {
       : unreadMsgCount || ' ';
 
   if (forcedUnread) {
-    return <MailWithUnreadIcon iconSize="small" style={{ maxHeight: '100%' }} />;
+    return (
+      <MailWithUnreadIcon
+        iconSize="small"
+        style={{ maxHeight: '100%' }}
+        dataTestId="conversation-item-forced-unread"
+      />
+    );
   }
 
   if (unreadMsgCount <= 0) {
     return null;
   }
 
-  return <StyledUnreadCount>{unreadWithOverflow}</StyledUnreadCount>;
+  return (
+    <StyledUnreadCount data-testid="conversation-item-unread-count">
+      {unreadWithOverflow}
+    </StyledUnreadCount>
+  );
 };
 
 export const ConversationListItemHeaderItem = () => {

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -230,6 +230,14 @@ declare module 'react' {
     | 'name'
     | 'count';
 
+  type ConversationItemFlagsIds =
+    | 'conversation-item-muted'
+    | 'conversation-item-pinned'
+    | 'conversation-item-mentions-only'
+    | 'conversation-item-forced-unread'
+    | 'conversation-item-unread-count'
+    | 'conversation-item-mentioned-us';
+
   type SessionDataTestId =
     | 'group-member-status-text'
     | 'loading-spinner'
@@ -283,6 +291,9 @@ declare module 'react' {
     // Buttons
     | `${Buttons}-button`
 
+    // Conversation Item Flags
+    | ConversationItemFlagsIds
+
     // settings menu item types
     | `${MenuItems}-menu-item`
     | `${SettingsMenuItems}-settings-menu-item`

ts/localization

@@ -9,21 +9,24 @@ export function uniqFromListOfList<T extends string>(list: Array<Array<T>>): Arr
 
 /**
  * Collapses a string by replacing characters between the leading and trailing characters with a triple ellipsis unicode character (length 1).
- * The final length of the string will be the sum of the leading and trailing characters plus 1.
+ * The final length of the string will be the sum of the leading and trailing characters plus 1 (or 3 if spacesAroundEllipsis is true).
  * @param str - The input string to collapse.
  * @param leadingChars - The number of characters to keep at the beginning of the string.
  * @param trailingChars - The number of characters to keep at the end of the string.
+ * @param spacesAroundEllipsis - Whether to add spaces around the ellipsis.
  * @param separator - The separator to use between the leading and trailing characters.
  * @returns The collapsed string.
  */
 export const collapseString = (
   str: string,
   leadingChars = 6,
   trailingChars = 4,
+  spacesAroundEllipsis = false,
   separator = '…'
 ): string => {
-  if (str.length <= leadingChars + trailingChars + 3) {
+  if (str.length <= leadingChars + trailingChars + 1 + (spacesAroundEllipsis ? 2 : 0)) {
     return str;
   }
-  return `${str.slice(0, leadingChars)}${separator}${str.slice(-trailingChars)}`;
+  const ellipsis = spacesAroundEllipsis ? ` ${separator} ` : separator;
+  return `${str.slice(0, leadingChars)}${ellipsis}${str.slice(-trailingChars)}`;
 };