Merge pull request #1503 from session-foundation/fix/localize_count_arg_in_plurals

fix: localize count number argument in localized plurals

Author: Bilb

ts/components/conversation/composition/CharacterCount.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { Constants } from '../../../session';
-import { Localizer } from '../../basic/Localizer';
 import { useFeatureFlag } from '../../../state/ducks/types/releasedFeaturesReduxTypes';
 import { SessionTooltip } from '../../SessionTooltip';
 import { SessionIcon } from '../../icon';
@@ -12,6 +11,7 @@ import {
 import { formatNumber } from '../../../util/i18n/formatting/generics';
 import { useHasPro } from '../../../hooks/useHasPro';
 import { useIsProAvailable } from '../../../hooks/useIsProAvailable';
+import { localize } from '../../../localization/localeTools';
 
 export type CharacterCountProps = {
   count: number;
@@ -68,13 +68,9 @@ export function CharacterCount({ count }: CharacterCountProps) {
       <SessionTooltip
         horizontalPosition="center"
         verticalPosition="bottom"
-        content={
-          pastLimit ? (
-            <Localizer token="remainingCharactersOverTooltip" args={{ count: remaining * -1 }} />
-          ) : (
-            <Localizer token="remainingCharactersTooltip" args={{ count: remaining }} />
-          )
-        }
+        content={localize(
+          pastLimit ? 'remainingCharactersOverTooltip' : 'remainingCharactersTooltip'
+        ).withArgs({ count: pastLimit ? remaining * -1 : remaining })}
         dataTestId="tooltip-character-count"
       >
         <StyledRemainingNumber pastLimit={pastLimit}>

ts/localization/localeTools.ts

@@ -350,6 +350,8 @@ function deSanitizeHtmlTags(str: string, identifier: string): string {
     .replace(new RegExp(`${identifier}>${identifier}`, 'g'), '>');
 }
 
+const pluralKey = 'count' as const;
+
 class LocalizedStringBuilder<T extends MergedLocalizerTokens> extends String {
   private readonly token: T;
   private args?: ArgsFromToken<T>;
@@ -437,8 +439,6 @@ class LocalizedStringBuilder<T extends MergedLocalizerTokens> extends String {
   }
 
   private resolvePluralString(): string {
-    const pluralKey = 'count' as const;
-
     let num: number | string | undefined = this.args?.[pluralKey as keyof ArgsFromToken<T>];
 
     if (num === undefined) {
@@ -494,17 +494,19 @@ class LocalizedStringBuilder<T extends MergedLocalizerTokens> extends String {
       }
     }
 
-    return pluralString.replaceAll('#', `${num}`);
+    return pluralString;
   }
 
   private formatStringWithArgs(str: string): string {
     /** Find and replace the dynamic variables in a localized string and substitute the variables with the provided values */
     return str.replace(/\{(\w+)\}/g, (match, arg: string) => {
-      const matchedArg = this.args
-        ? this.args[arg as keyof ArgsFromToken<T>]?.toString()
-        : undefined;
+      const matchedArg = this.args ? this.args[arg as keyof ArgsFromToken<T>] : undefined;
+
+      if (arg === pluralKey && typeof matchedArg === 'number' && Number.isFinite(matchedArg)) {
+        return new Intl.NumberFormat(this.crowdinLocale).format(matchedArg);
+      }
 
-      return matchedArg ?? match;
+      return matchedArg?.toString() ?? match;
     });
   }
 }