fix(ui): make Authenticator delivery message punctuation translation-owned (i18n) (#7055)

Author: ahmedhamouda78

.changeset/gentle-suns-hang.md

@@ -0,0 +1,17 @@
+---
+'@aws-amplify/ui': patch
+---
+
+fix(ui): render locale-correct punctuation in Authenticator delivery messages (i18n)
+
+`getDeliveryMessageText` joined the translated delivery-message fragments with a
+hardcoded ASCII period, producing incorrect punctuation for locales whose
+sentence terminator differs — e.g. Japanese and Chinese (which use the
+ideographic full stop `。`) and Thai (which uses none). The terminator is now
+derived from the script of the surrounding translated copy, so each locale
+renders its own punctuation.
+
+This is an internal change with no public API impact: no translation keys are
+added or changed, the `translate()` signature is unchanged, existing customer
+vocabulary overrides on the documented keys keep working, and English output is
+byte-identical. Fixes #6966.

packages/e2e/cypress/integration/ui/components/authenticator/i18n/i18n.steps.ts

@@ -53,3 +53,10 @@ Then(
     });
   }
 );
+
+When(
+  'I type {string} in the {string} input in {string}',
+  (value: string, label: string, language: string) => {
+    cy.findByLabelText(translations[language][label].trim()).type(value);
+  }
+);

packages/e2e/features/ui/components/authenticator/i18n.feature

@@ -24,3 +24,19 @@ Feature: Internationalization (I18n)
   @angular @react @vue @svelte
   Scenario: Authenticator reflects updated vocabularies for `I18n.setLanguage('ja')`
     Then I see "Sign In Custom"
+
+  # Regression test for #6966: delivery-message punctuation is owned by the
+  # translation, so a non-Latin locale (Japanese) renders its own terminal
+  # punctuation (the ideographic full stop 。) after the destination and at the
+  # end of the message, never a hardcoded ASCII period.
+  @angular @react @vue @svelte
+  Scenario: Confirm sign up delivery message uses locale punctuation, not a hardcoded ASCII period
+    Given I intercept '{ "headers": { "X-Amz-Target": "AWSCognitoIdentityProviderService.SignUp" } }' with fixture "sign-up-with-email"
+    When I type "e2e-user" in the "Username" input in "ja"
+    Then I type "e2e-user@example.com" in the "Email" input in "ja"
+    Then I type "TestPassword123!" in the "Password" input in "ja"
+    Then I type "TestPassword123!" in the "Confirm Password" input in "ja"
+    Then the "Create Account" button is in "ja" and I click it
+    Then I see "送信先: a***@e***.com。"
+    Then I see "到着するまでに 1 分かかることがあります。"
+    Then I don't see "a***@e***.com."

packages/ui/src/helpers/authenticator/__tests__/textUtil.test.ts

@@ -4,6 +4,8 @@ import {
 } from '../../../machines/authenticator/types';
 
 import { authenticatorTextUtil } from '../textUtil';
+import { I18n } from 'aws-amplify/utils';
+import { translations } from '../../../i18n';
 
 describe('authenticatorTextUtil', () => {
   describe('getChallengeText', () => {
@@ -192,3 +194,180 @@ describe('authenticatorTextUtil', () => {
     });
   });
 });
+
+describe('getDeliveryMessageText locale punctuation (#6966)', () => {
+  const emailDetails = {
+    DeliveryMedium: 'EMAIL' as V6AuthDeliveryMedium,
+    Destination: 'user@example.com',
+    AttributeName: '',
+  };
+  const smsDetails = {
+    DeliveryMedium: 'SMS' as V6AuthDeliveryMedium,
+    Destination: '+1234567890',
+    AttributeName: '',
+  };
+  const unknownDetails = {
+    DeliveryMedium: 'INVALID_MEDIUM' as V6AuthDeliveryMedium,
+    Destination: 'user@example.com',
+    AttributeName: '',
+  };
+
+  // CJK locales use the ideographic full stop; Thai uses no terminator; every
+  // other bundled locale (Latin/Cyrillic/Hangul) keeps the ASCII period.
+  const CJK_LOCALES = ['ja', 'zh'] as const;
+  const NO_ASCII_PERIOD_LOCALES = ['th'] as const;
+  const ASCII_PERIOD_LOCALES = [
+    'de',
+    'es',
+    'fr',
+    'hu',
+    'id',
+    'it',
+    'kr',
+    'nb',
+    'nl',
+    'pl',
+    'pt',
+    'ru',
+    'sv',
+    'tr',
+    'ua',
+  ] as const;
+
+  beforeEach(() => {
+    // Restore canonical vocabularies so an override from a prior test cannot leak.
+    I18n.putVocabularies(translations);
+    I18n.setLanguage('en');
+  });
+
+  afterAll(() => {
+    I18n.setLanguage('en');
+  });
+
+  it('renders Japanese email with the ideographic full stop after the destination and at the end, never an ASCII period', () => {
+    I18n.setLanguage('ja');
+    const result = authenticatorTextUtil.getDeliveryMessageText(emailDetails);
+
+    expect(result).toContain('user@example.com。');
+    expect(result).not.toContain('user@example.com. ');
+    expect(result.endsWith('。')).toBe(true);
+    expect(result.endsWith('.')).toBe(false);
+  });
+
+  it('renders Japanese SMS and unknown mediums terminated with the ideographic full stop', () => {
+    I18n.setLanguage('ja');
+
+    const sms = authenticatorTextUtil.getDeliveryMessageText(smsDetails);
+    expect(sms).toContain('+1234567890。');
+    expect(sms.endsWith('。')).toBe(true);
+
+    const unknown =
+      authenticatorTextUtil.getDeliveryMessageText(unknownDetails);
+    expect(unknown.endsWith('。')).toBe(true);
+    expect(unknown.endsWith('.')).toBe(false);
+  });
+
+  it.each(CJK_LOCALES)(
+    'locale "%s" terminates every medium with the ideographic full stop, never an ASCII period',
+    (locale) => {
+      I18n.setLanguage(locale);
+      for (const details of [emailDetails, smsDetails, unknownDetails]) {
+        const result = authenticatorTextUtil.getDeliveryMessageText(details);
+        expect(result.endsWith('。')).toBe(true);
+        expect(result.endsWith('.')).toBe(false);
+      }
+    }
+  );
+
+  it.each(NO_ASCII_PERIOD_LOCALES)(
+    'locale "%s" never terminates a delivery message with an ASCII period',
+    (locale) => {
+      I18n.setLanguage(locale);
+      for (const details of [emailDetails, smsDetails, unknownDetails]) {
+        const result = authenticatorTextUtil.getDeliveryMessageText(details);
+        expect(result.endsWith('.')).toBe(false);
+        expect(result.endsWith('。')).toBe(false);
+      }
+    }
+  );
+
+  it.each(ASCII_PERIOD_LOCALES)(
+    'locale "%s" keeps the ASCII period and does not use the ideographic full stop',
+    (locale) => {
+      I18n.setLanguage(locale);
+      for (const details of [emailDetails, smsDetails, unknownDetails]) {
+        const result = authenticatorTextUtil.getDeliveryMessageText(details);
+        expect(result.endsWith('.')).toBe(true);
+        expect(result.endsWith('。')).toBe(false);
+      }
+    }
+  );
+
+  it('keeps English output byte-identical to the pre-fix strings', () => {
+    I18n.setLanguage('en');
+    expect(authenticatorTextUtil.getDeliveryMessageText(emailDetails)).toBe(
+      'Your code is on the way. To log in, enter the code we emailed to user@example.com. It may take a minute to arrive.'
+    );
+    expect(authenticatorTextUtil.getDeliveryMessageText(smsDetails)).toBe(
+      'Your code is on the way. To log in, enter the code we texted to +1234567890. It may take a minute to arrive.'
+    );
+    expect(authenticatorTextUtil.getDeliveryMessageText(unknownDetails)).toBe(
+      'Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.'
+    );
+  });
+
+  it('honors customer vocabulary overrides on the documented keys (confirm-sign-up pattern)', () => {
+    I18n.putVocabulariesForLanguage('en', {
+      'Your code is on the way. To log in, enter the code we emailed to':
+        'Enter this code:',
+      'It may take a minute to arrive':
+        'It will take several minutes to arrive',
+    });
+
+    expect(authenticatorTextUtil.getDeliveryMessageText(emailDetails)).toBe(
+      'Enter this code: user@example.com. It will take several minutes to arrive.'
+    );
+  });
+
+  it('does not double terminal punctuation when an overridden fragment already ends with it', () => {
+    I18n.putVocabulariesForLanguage('en', {
+      'It may take a minute to arrive': 'Arrives soon.',
+    });
+
+    const result = authenticatorTextUtil.getDeliveryMessageText(emailDetails);
+    expect(result.endsWith('Arrives soon.')).toBe(true);
+    expect(result.endsWith('..')).toBe(false);
+  });
+
+  it('does not append a terminator when an override already ends with an ellipsis (no.2)', () => {
+    I18n.putVocabulariesForLanguage('en', {
+      'It may take a minute to arrive': 'Might take a minute or two…',
+    });
+
+    const result = authenticatorTextUtil.getDeliveryMessageText(emailDetails);
+    expect(result.endsWith('Might take a minute or two…')).toBe(true);
+    expect(result.endsWith('….')).toBe(false);
+  });
+
+  it('does not append a terminator when an override already ends with a colon (no.2)', () => {
+    I18n.putVocabulariesForLanguage('en', {
+      'It may take a minute to arrive': 'Enter this code:',
+    });
+
+    const result = authenticatorTextUtil.getDeliveryMessageText(emailDetails);
+    expect(result.endsWith('Enter this code:')).toBe(true);
+    expect(result.endsWith(':.')).toBe(false);
+  });
+
+  it('keeps the ASCII period when a Latin instruction override contains a CJK proper noun (no.1)', () => {
+    I18n.putVocabulariesForLanguage('en', {
+      'Your code is on the way. To log in, enter the code we emailed to':
+        'Enter the code sent by 東京 team to',
+    });
+
+    const result = authenticatorTextUtil.getDeliveryMessageText(emailDetails);
+    // Copy stays majority-Latin, so the ASCII period is kept, never `。`.
+    expect(result).toContain('user@example.com.');
+    expect(result).not.toContain('user@example.com。');
+  });
+});

packages/ui/src/helpers/authenticator/textUtil.ts

@@ -7,6 +7,10 @@ import type {
 import { translate, DefaultTexts } from '../../i18n';
 import type { AuthenticatorRoute } from './facade';
 import { defaultTexts } from '../../i18n/dictionaries';
+import {
+  getSentenceSpacer,
+  terminateSentence,
+} from '../../i18n/sentencePunctuation';
 
 /**
  * ConfirmSignIn
@@ -35,16 +39,22 @@ const getDeliveryMessageText = (
   const isTextMessage = DeliveryMedium === 'SMS';
 
   const arrivalMessage = translate(DefaultTexts.CODE_ARRIVAL);
+  const spacer = getSentenceSpacer(arrivalMessage);
 
   if (!(isEmailMessage || isTextMessage)) {
-    return `${translate(DefaultTexts.CODE_SENT)}. ${arrivalMessage}.`;
+    const sentMessage = translate(DefaultTexts.CODE_SENT);
+    return `${terminateSentence(sentMessage)}${spacer}${terminateSentence(
+      arrivalMessage
+    )}`;
   }
 
   const instructionMessage = isEmailMessage
     ? translate(DefaultTexts.CODE_EMAILED)
     : translate(DefaultTexts.CODE_TEXTED);
 
-  return `${instructionMessage} ${Destination}. ${arrivalMessage}.`;
+  return `${terminateSentence(
+    `${instructionMessage} ${Destination}`
+  )}${spacer}${terminateSentence(arrivalMessage)}`;
 };
 
 const getDeliveryMethodText = (

packages/ui/src/i18n/__tests__/sentencePunctuation.test.ts

@@ -0,0 +1,88 @@
+import { getSentenceSpacer, terminateSentence } from '../sentencePunctuation';
+
+describe('sentencePunctuation (#6966)', () => {
+  describe('terminateSentence', () => {
+    it('appends an ASCII period to Latin copy', () => {
+      expect(terminateSentence('It may take a minute to arrive')).toBe(
+        'It may take a minute to arrive.'
+      );
+    });
+
+    it('appends the ideographic full stop to majority-CJK copy (ja/zh)', () => {
+      // Japanese
+      expect(terminateSentence('コードを入力してください')).toBe(
+        'コードを入力してください。'
+      );
+      // Chinese
+      expect(terminateSentence('请输入验证码')).toBe('请输入验证码。');
+    });
+
+    it('leaves Thai copy without a terminator', () => {
+      const thai = 'อาจใช้เวลาสักครู่';
+      const result = terminateSentence(thai);
+
+      expect(result).toBe(thai);
+      expect(result.endsWith('.')).toBe(false);
+      expect(result.endsWith('。')).toBe(false);
+    });
+
+    it('keeps an ASCII period on a Latin sentence that contains a CJK proper noun (no.1 majority)', () => {
+      // "東京" is a lone CJK proper noun inside otherwise-Latin copy: the old
+      // "contains any CJK" test wrongly appended "。" here.
+      const result = terminateSentence('Enter the code for 東京');
+
+      expect(result).toBe('Enter the code for 東京.');
+      expect(result.endsWith('。')).toBe(false);
+    });
+
+    it('keeps an ASCII period on a majority-Hangul Korean phrase containing a CJK codepoint (no.1 majority)', () => {
+      // Korean copy can embed a stray CJK (Hanja) codepoint while remaining
+      // predominantly Hangul — it must still terminate with an ASCII period.
+      const result = terminateSentence('코드를 입력하세요 (中)');
+
+      expect(result).toBe('코드를 입력하세요 (中).');
+      expect(result.endsWith('。')).toBe(false);
+    });
+
+    it.each(['.', '!', '?', '。', '！', '？'])(
+      'does not append after existing terminal punctuation %s',
+      (punctuation) => {
+        const sentence = `Done${punctuation}`;
+        expect(terminateSentence(sentence)).toBe(sentence);
+      }
+    );
+
+    it.each(['…', '．', '｡', ':', '：'])(
+      'recognizes %s as terminal punctuation and appends nothing (no.2)',
+      (punctuation) => {
+        const sentence = `Might take a minute or two${punctuation}`;
+        const result = terminateSentence(sentence);
+
+        expect(result).toBe(sentence);
+        expect(result.endsWith('.')).toBe(false);
+      }
+    );
+
+    it('treats empty / whitespace-only input as Latin', () => {
+      expect(terminateSentence('')).toBe('.');
+      expect(terminateSentence('   ')).toBe('   .');
+    });
+  });
+
+  describe('getSentenceSpacer', () => {
+    it('returns no space for majority-CJK copy', () => {
+      expect(getSentenceSpacer('コードを入力してください')).toBe('');
+      expect(getSentenceSpacer('请输入验证码')).toBe('');
+    });
+
+    it('returns a single space for Latin, Thai and Hangul copy', () => {
+      expect(getSentenceSpacer('It may take a minute to arrive')).toBe(' ');
+      expect(getSentenceSpacer('อาจใช้เวลาสักครู่')).toBe(' ');
+      expect(getSentenceSpacer('코드를 입력하세요')).toBe(' ');
+    });
+
+    it('returns a single space for Latin copy containing a CJK proper noun', () => {
+      expect(getSentenceSpacer('Enter the code for 東京')).toBe(' ');
+    });
+  });
+});