i18n interpolation and plurals support (#83)

* Add string interpolation and support for plurals to i18n module

* Add installmentOptions translation

* Use arrow function in language replaceTranslationValues

src/components/Card/components/CardInput/components/Installments/Installments.tsx

@@ -43,7 +43,9 @@ function Installments(props: InstallmentsProps) {
 
     const installmentItemsMapper = (value: number): InstallmentsItem => ({
         id: value,
-        name: amount.value ? `${value}x ${getPartialAmount(value)}` : `${value}`
+        name: amount.value
+            ? i18n.get('installmentOption', { count: value, values: { times: value, partialValue: getPartialAmount(value) } })
+            : `${value}`
     });
 
     useEffect(() => {

src/language/Language.ts

@@ -24,10 +24,11 @@ export class Language {
     /**
      * Returns a translated string from a key in the current {@link Language.locale}
      * @param key - Translation key
+     * @param options - Translation options
      * @returns Translated string
      */
-    get(key: string): string {
-        const translation = getTranslation(this.translations, key);
+    get(key: string, options?): string {
+        const translation = getTranslation(this.translations, key, options);
         if (translation !== null) {
             return translation;
         }

src/language/locales/en-US.json

@@ -25,6 +25,7 @@
     "creditCard.cvcField.placeholder.4digits": "4 digits",
     "creditCard.cvcField.placeholder.3digits": "3 digits",
     "installments": "Number of installments",
+    "installmentOption": "%{times}x %{partialValue}",
     "sepaDirectDebit.ibanField.invalid": "Invalid account number",
     "sepaDirectDebit.nameField.placeholder": "J. Smith",
     "sepa.ownerName": "Holder Name",

src/language/utils.test.ts

@@ -82,13 +82,39 @@ describe('formatLocale()', () => {
 });
 
 describe('getTranslation()', () => {
-    const translations = {
-        myTranslation: 'My translation'
-    };
+    const translations = { myTranslation: 'My translation', myTranslation__plural: 'My translations', myTranslation__2: 'My two translations' };
 
     test('should get a translation with a matching key', () => {
         expect(getTranslation(translations, 'myTranslation')).toBe('My translation');
     });
+
+    test('should get a translation with values', () => {
+        expect(getTranslation({ myTranslation: 'My %{type} translation' }, 'myTranslation', { values: { type: 'custom' } })).toBe(
+            'My custom translation'
+        );
+    });
+
+    test('should get a translation with empty values', () => {
+        expect(getTranslation({ myTranslation: 'My %{type} translation' }, 'myTranslation')).toBe('My  translation');
+    });
+
+    test('should get a plural translation if available', () => {
+        expect(getTranslation(translations, 'myTranslation', { count: 3 })).toBe('My translations');
+    });
+
+    test('should get a specific count translation if available', () => {
+        expect(getTranslation(translations, 'myTranslation', { count: 2 })).toBe('My two translations');
+    });
+
+    test('should get the default translation if count is not greater than 1', () => {
+        expect(getTranslation(translations, 'myTranslation', { count: 1 })).toBe('My translation');
+        expect(getTranslation(translations, 'myTranslation', { count: 0 })).toBe('My translation');
+        expect(getTranslation(translations, 'myTranslation', { count: -1 })).toBe('My translation');
+    });
+
+    test('should get the default translation if count is not provided', () => {
+        expect(getTranslation(translations, 'myTranslation')).toBe('My translation');
+    });
 });
 
 describe('formatCustomTranslations()', () => {

src/language/utils.ts

@@ -82,16 +82,31 @@ export function formatCustomTranslations(customTranslations: object = {}, suppor
     }, {});
 }
 
+const replaceTranslationValues = (translation, values) => {
+    return translation.replace(/%{(\w+)}/g, (_, k) => values[k] || '');
+};
+
 /**
  * Returns a translation string by key
  * @param translations -
  * @param key -
+ * @param options -
  *
  * @internal
  */
-export const getTranslation = (translations: object, key: string): string => {
-    if (Object.prototype.hasOwnProperty.call(translations, key)) {
-        return translations[key];
+export const getTranslation = (translations: object, key: string, options: { [key: string]: any } = { values: {}, count: 0 }): string => {
+    const keyPlural = `${key}__plural`;
+    const keyForCount = count => `${key}__${count}`;
+
+    if (Object.prototype.hasOwnProperty.call(translations, keyForCount(options.count))) {
+        // Find key__count translation key
+        return replaceTranslationValues(translations[keyForCount(options.count)], options.values);
+    } else if (Object.prototype.hasOwnProperty.call(translations, keyPlural) && options.count > 1) {
+        // Find key__plural translation key, if count greater than 1 (e.g. myTranslation__plural)
+        return replaceTranslationValues(translations[keyPlural], options.values);
+    } else if (Object.prototype.hasOwnProperty.call(translations, key)) {
+        // Find key translation key (e.g. myTranslation)
+        return replaceTranslationValues(translations[key], options.values);
     }
 
     return null;