Merge pull request #48229 from ZhenjaHorbach/pluralizing_localization-v2

Added count param to phrase param and return plural form accordingly

README.md

@@ -619,7 +619,30 @@ Some pointers:
   key to the translation file and use the arrow function version, like so:
   `nameOfTheKey: ({amount, dateTime}) => "User has sent " + amount + " to you on " + dateTime,`.
   This is because the order of the phrases might vary from one language to another.
-
+- When working with translations that involve plural forms, it's important to handle different cases correctly.
+
+  For example:
+  - zero: Used when there are no items **(optional)**. 
+  - one: Used when there's exactly one item.
+  - two: Used when there's two items. **(optional)**
+  - few: Used for a small number of items **(optional)**.
+  - many: Used for larger quantities **(optional)**.
+  - other: A catch-all case for other counts or variations.
+
+  Here’s an example of how to implement plural translations:
+
+  messages: () => ({
+      zero: 'No messages',
+      one: 'One message',
+      two: 'Two messages',
+      few: (count) => `${count} messages`,
+      many: (count) => `You have ${count} messages`,
+      other: (count) => `You have ${count} unread messages`,
+  })
+
+  In your code, you can use the translation like this:
+
+  `translate('common.messages', {count: 1});`
 ----
 
 # Deploying

src/components/AccountSwitcher.tsx

@@ -108,7 +108,7 @@ function AccountSwitcher() {
                 const error = ErrorUtils.getLatestErrorField({errorFields}, 'connect');
                 const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
                 return createBaseMenuItem(personalDetails, error, {
-                    badgeText: translate('delegate.role', role),
+                    badgeText: translate('delegate.role', {role}),
                     onPress: () => {
                         if (isOffline) {
                             Modal.close(() => setShouldShowOfflineModal(true));

src/components/AccountingConnectionConfirmationModal.tsx

@@ -14,11 +14,11 @@ function AccountingConnectionConfirmationModal({integrationToConnect, onCancel,
 
     return (
         <ConfirmModal
-            title={translate('workspace.accounting.connectTitle', integrationToConnect)}
+            title={translate('workspace.accounting.connectTitle', {connectionName: integrationToConnect})}
             isVisible
             onConfirm={onConfirm}
             onCancel={onCancel}
-            prompt={translate('workspace.accounting.connectPrompt', integrationToConnect)}
+            prompt={translate('workspace.accounting.connectPrompt', {connectionName: integrationToConnect})}
             confirmText={translate('workspace.accounting.setup')}
             cancelText={translate('common.cancel')}
             success

src/components/AddressForm.tsx

@@ -121,7 +121,7 @@ function AddressForm({
             if (countrySpecificZipRegex) {
                 if (!countrySpecificZipRegex.test(values.zipPostCode?.trim().toUpperCase())) {
                     if (ValidationUtils.isRequiredFulfilled(values.zipPostCode?.trim())) {
-                        errors.zipPostCode = translate('privatePersonalDetails.error.incorrectZipFormat', countryZipFormat);
+                        errors.zipPostCode = translate('privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat});
                     } else {
                         errors.zipPostCode = translate('common.error.fieldRequired');
                     }

src/components/HeaderWithBackButton/types.ts

@@ -3,7 +3,7 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type {Action} from '@hooks/useSingleExecution';
-import type {StepCounterParams} from '@src/languages/types';
+import type {StepCounterParams} from '@src/languages/params';
 import type {AnchorPosition} from '@src/styles';
 import type {Policy, Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';

src/components/ImportColumn.tsx

@@ -172,7 +172,7 @@ function ImportColumn({column, columnName, columnRoles, columnIndex}: ImportColu
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want this effect to run again
     }, []);
 
-    const columnHeader = containsHeader ? column[0] : translate('spreadsheet.column', columnName);
+    const columnHeader = containsHeader ? column[0] : translate('spreadsheet.column', {name: columnName});
 
     return (
         <View style={[styles.importColumnCard, styles.mt4]}>

src/components/LocaleContextProvider.tsx

@@ -8,7 +8,7 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as Localize from '@libs/Localize';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
+import type {TranslationParameters, TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {WithCurrentUserPersonalDetailsProps} from './withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from './withCurrentUserPersonalDetails';
@@ -28,7 +28,7 @@ type LocaleContextProviderProps = LocaleContextProviderOnyxProps &
 
 type LocaleContextProps = {
     /** Returns translated string for given locale and phrase */
-    translate: <TKey extends TranslationPaths>(phraseKey: TKey, ...phraseParameters: Localize.PhraseParameters<Localize.Phrase<TKey>>) => string;
+    translate: <TPath extends TranslationPaths>(path: TPath, ...parameters: TranslationParameters<TPath>) => string;
 
     /** Formats number formatted according to locale and options */
     numberFormat: (number: number, options?: Intl.NumberFormatOptions) => string;
@@ -79,8 +79,8 @@ function LocaleContextProvider({preferredLocale, currentUserPersonalDetails, chi
 
     const translate = useMemo<LocaleContextProps['translate']>(
         () =>
-            (phraseKey, ...phraseParameters) =>
-                Localize.translate(locale, phraseKey, ...phraseParameters),
+            (path, ...parameters) =>
+                Localize.translate(locale, path, ...parameters),
         [locale],
     );
 

src/components/ParentNavigationSubtitle.tsx

@@ -6,7 +6,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import CONST from '@src/CONST';
-import type {ParentNavigationSummaryParams} from '@src/languages/types';
+import type {ParentNavigationSummaryParams} from '@src/languages/params';
 import ROUTES from '@src/ROUTES';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';

src/components/ReceiptAudit.tsx

@@ -22,7 +22,7 @@ function ReceiptAudit({notes, shouldShowAuditResult}: ReceiptAuditProps) {
 
     let auditText = '';
     if (notes.length > 0 && shouldShowAuditResult) {
-        auditText = translate('iou.receiptIssuesFound', notes.length);
+        auditText = translate('iou.receiptIssuesFound', {count: notes.length});
     } else if (!notes.length && shouldShowAuditResult) {
         auditText = translate('common.verified');
     }

src/components/ReportActionItem/ExportWithDropdownMenu.tsx

@@ -59,7 +59,7 @@ function ExportWithDropdownMenu({
         const options = [
             {
                 value: CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION,
-                text: translate('workspace.common.exportIntegrationSelected', connectionName),
+                text: translate('workspace.common.exportIntegrationSelected', {connectionName}),
                 ...optionTemplate,
             },
             {
@@ -126,7 +126,7 @@ function ExportWithDropdownMenu({
                 title={translate('workspace.exportAgainModal.title')}
                 onConfirm={confirmExport}
                 onCancel={() => setModalStatus(null)}
-                prompt={translate('workspace.exportAgainModal.description', report?.reportName ?? '', connectionName)}
+                prompt={translate('workspace.exportAgainModal.description', {connectionName, reportName: report?.reportName ?? ''})}
                 confirmText={translate('workspace.exportAgainModal.confirmText')}
                 cancelText={translate('workspace.exportAgainModal.cancelText')}
                 isVisible={!!modalStatus}