fixed japanese and korean name formatting

.changeset/wet-hotels-shake.md

@@ -0,0 +1,5 @@
+---
+'@shopify/name': patch
+---
+
+Fixed japanese and korean name formatting.

packages/name/src/constants.ts

@@ -8,15 +8,14 @@ export enum UnicodeCharacterSet {
   Thai = '[\u0E01-\u0E3A\u0E40-\u0E5B]',
 }
 
-export const FAMILY_NAME_GIVEN_NAME_ORDERING = new Map([
+export const FAMILY_NAME_GIVEN_NAME_ORDERING_INDEXED_BY_LANGUAGE = new Map([
   ['ko', defaultFamilyNameGivenNameOrderingFormatter],
   [
     'ja',
     (givenName: string, familyName: string, full: boolean) =>
       full ? `${familyName}${givenName}` : `${familyName}様`,
   ],
-  ['zh-CN', defaultFamilyNameGivenNameOrderingFormatter],
-  ['zh-TW', defaultFamilyNameGivenNameOrderingFormatter],
+  ['zh', defaultFamilyNameGivenNameOrderingFormatter],
 ]);
 
 function defaultFamilyNameGivenNameOrderingFormatter(

packages/name/src/formatName.ts

@@ -1,4 +1,5 @@
-import {FAMILY_NAME_GIVEN_NAME_ORDERING} from './constants';
+import {FAMILY_NAME_GIVEN_NAME_ORDERING_INDEXED_BY_LANGUAGE} from './constants';
+import {languageFromLocale} from './utilities';
 
 // Note: A similar Ruby implementation of this function also exists at https://github.com/Shopify/shopify-i18n/blob/main/lib/shopify-i18n/name_formatter.rb.
 export function formatName({
@@ -19,7 +20,10 @@ export function formatName({
 
   const isFullName = Boolean(options && options.full);
 
-  const customNameFormatter = FAMILY_NAME_GIVEN_NAME_ORDERING.get(locale);
+  const customNameFormatter =
+    FAMILY_NAME_GIVEN_NAME_ORDERING_INDEXED_BY_LANGUAGE.get(
+      languageFromLocale(locale),
+    );
 
   if (customNameFormatter) {
     return customNameFormatter(name.givenName, name.familyName, isFullName);

packages/name/src/hasFamilyNameGivenNameOrdering.ts

@@ -1,7 +1,10 @@
-import {FAMILY_NAME_GIVEN_NAME_ORDERING} from './constants';
+import {FAMILY_NAME_GIVEN_NAME_ORDERING_INDEXED_BY_LANGUAGE} from './constants';
+import {languageFromLocale} from './utilities';
 
 export function hasFamilyNameGivenNameOrdering(locale: string) {
   const familyNameGivenNameOrdering =
-    FAMILY_NAME_GIVEN_NAME_ORDERING.get(locale);
+    FAMILY_NAME_GIVEN_NAME_ORDERING_INDEXED_BY_LANGUAGE.get(
+      languageFromLocale(locale),
+    );
   return Boolean(familyNameGivenNameOrdering);
 }

packages/name/src/tests/formatName.test.ts

@@ -3,13 +3,13 @@ import {formatName} from '../formatName';
 describe('#formatName()', () => {
   it('returns an empty string when nothing is defined', () => {
     const name = {givenName: undefined, familyName: undefined};
-    const locale = 'en';
+    const locale = 'en-CA';
     expect(formatName({name, locale})).toBe('');
   });
 
   it('returns only the givenName when familyName is missing', () => {
     const name = {givenName: 'first'};
-    const locale = 'en';
+    const locale = 'en-CA';
     expect(
       formatName({
         name,
@@ -20,7 +20,7 @@ describe('#formatName()', () => {
 
   it('returns only the familyName when givenName is missing', () => {
     const name = {familyName: 'last'};
-    const locale = 'en';
+    const locale = 'en-CA';
     expect(
       formatName({
         name,
@@ -53,7 +53,7 @@ describe('#formatName()', () => {
 
   it('returns givenName for English', () => {
     const name = {givenName: 'first', familyName: 'last'};
-    const locale = 'en';
+    const locale = 'en-CA';
     expect(
       formatName({
         name,
@@ -64,7 +64,7 @@ describe('#formatName()', () => {
 
   it('returns custom name for Japanese', () => {
     const name = {givenName: 'first', familyName: 'last'};
-    const locale = 'ja';
+    const locale = 'ja-JP';
     expect(
       formatName({
         name,
@@ -96,7 +96,7 @@ describe('#formatName()', () => {
   });
 
   it('returns only the givenName when familyName is missing using full', () => {
-    const locale = 'en';
+    const locale = 'en-CA';
     const options = {full: true};
 
     let name: {givenName?: string; familyName?: string} = {
@@ -123,7 +123,7 @@ describe('#formatName()', () => {
 
   it('returns only the familyName when givenName is missing using full', () => {
     const name = {givenName: '', familyName: 'last'};
-    const locale = 'en';
+    const locale = 'en-CA';
     const options = {full: true};
 
     expect(
@@ -137,7 +137,7 @@ describe('#formatName()', () => {
 
   it('returns a string when familyName is undefined using full', () => {
     const name = {givenName: '', familyName: undefined};
-    const locale = 'en';
+    const locale = 'en-CA';
     const options = {full: true};
 
     expect(
@@ -151,7 +151,7 @@ describe('#formatName()', () => {
 
   it('returns a string when givenName and familyName are missing using full', () => {
     const name = {givenName: undefined, familyName: undefined};
-    const locale = 'en';
+    const locale = 'en-CA';
     const options = {full: true};
 
     expect(
@@ -193,7 +193,7 @@ describe('#formatName()', () => {
 
   it('returns givenName first for English using full', () => {
     const name = {givenName: 'first', familyName: 'last'};
-    const locale = 'en';
+    const locale = 'en-CA';
     const options = {full: true};
 
     expect(
@@ -207,7 +207,7 @@ describe('#formatName()', () => {
 
   it('returns familyName first and no space for Japanese', () => {
     const name = {givenName: 'first', familyName: 'last'};
-    const locale = 'ja';
+    const locale = 'ja-JP';
     const options = {full: true};
 
     expect(
@@ -221,7 +221,7 @@ describe('#formatName()', () => {
 
   it('returns familyName first and no space for Korean', () => {
     const name = {givenName: 'first', familyName: 'last'};
-    const locale = 'ko';
+    const locale = 'ko-KR';
     const options = {full: true};
 
     expect(
@@ -260,4 +260,18 @@ describe('#formatName()', () => {
       }),
     ).toBe('lastfirst');
   });
+
+  it('behaves similarly if we pass language instead of locale', () => {
+    const name = {givenName: 'first', familyName: 'last'};
+    const locale = 'zh';
+    const options = {full: true};
+
+    expect(
+      formatName({
+        name,
+        locale,
+        options,
+      }),
+    ).toBe('lastfirst');
+  });
 });

packages/name/src/tests/hasFamilyNameGivenNameOrdering.test.ts

@@ -2,10 +2,14 @@ import {hasFamilyNameGivenNameOrdering} from '../hasFamilyNameGivenNameOrdering'
 
 describe('#hasFamilyNameGivenNameOrdering()', () => {
   it('returns true if defaultFamilyNameGivenNameOrderingFormatter exists', () => {
-    expect(hasFamilyNameGivenNameOrdering('ja')).toBe(true);
+    expect(hasFamilyNameGivenNameOrdering('ja-JP')).toBe(true);
   });
 
   it('returns false if defaultFamilyNameGivenNameOrderingFormatter does not exist', () => {
-    expect(hasFamilyNameGivenNameOrdering('en')).toBe(false);
+    expect(hasFamilyNameGivenNameOrdering('en-CA')).toBe(false);
+  });
+
+  it('behaves similarly if we pass language instead of locale', () => {
+    expect(hasFamilyNameGivenNameOrdering('ja')).toBe(true);
   });
 });

packages/name/src/utilities/index.ts

@@ -1,2 +1,3 @@
 export {getGraphemes} from './getGraphemes';
 export {identifyScripts} from './identifyScripts';
+export {languageFromLocale} from './languageFromLocale';

packages/name/src/utilities/languageFromLocale.ts

@@ -0,0 +1,3 @@
+export function languageFromLocale(locale: string) {
+  return locale.split('-')[0].toLowerCase();
+}