fix(ui): format phone number with country calling code (#1551)

format phone number with country calling code

packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx

@@ -7,6 +7,7 @@ import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import useApi from '@/hooks/use-api';
 import usePlatform from '@/hooks/use-platform';
 import { UserFlow } from '@/types';
+import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code';
 
 type Props = {
   className?: string;
@@ -56,7 +57,7 @@ const PasswordlessConfirmModal = ({ className, isOpen, type, method, value, onCl
           : 'description.sign_in_id_does_not_exists',
         {
           type: t(`description.${method === 'email' ? 'email' : 'phone_number'}`),
-          value: `${method === 'sms' ? '+' : ''}${value}`,
+          value: method === 'sms' ? formatPhoneNumberWithCountryCallingCode(value) : value,
         }
       )}
     </ConfirmModal>

packages/ui/src/hooks/use-phone-number.ts

@@ -6,13 +6,16 @@
 import {
   parsePhoneNumberWithError,
   CountryCallingCode,
-  E164Number,
   ParseError,
   CountryCode,
 } from 'libphonenumber-js/mobile';
 import { useState } from 'react';
 
-import { getDefaultCountryCallingCode, getCountryList } from '@/utils/country-code';
+import {
+  getDefaultCountryCallingCode,
+  getCountryList,
+  parseE164Number,
+} from '@/utils/country-code';
 
 export type { CountryCallingCode } from 'libphonenumber-js/mobile';
 
@@ -26,14 +29,6 @@ type PhoneNumberData = {
   nationalNumber: string;
 };
 
-const parseE164Number = (value: string): E164Number | '' => {
-  if (!value || value.startsWith('+')) {
-    return value;
-  }
-
-  return `+${value}`;
-};
-
 const isValidPhoneNumber = (value: string): boolean => {
   try {
     const phoneNumber = parsePhoneNumberWithError(parseE164Number(value));

packages/ui/src/utils/country-code.test.ts

@@ -5,6 +5,7 @@ import {
   getDefaultCountryCode,
   getDefaultCountryCallingCode,
   getCountryList,
+  formatPhoneNumberWithCountryCallingCode,
 } from './country-code';
 
 describe('country-code', () => {
@@ -76,4 +77,9 @@ describe('country-code', () => {
     );
     expect(countryList[0]?.countryCallingCode).toEqual('86');
   });
+
+  it('formatPhoneNumberWithCountryCallingCode', async () => {
+    expect(formatPhoneNumberWithCountryCallingCode('18888888888')).toBe('+1 8888888888');
+    expect(formatPhoneNumberWithCountryCallingCode('8618888888888')).toBe('+86 18888888888');
+  });
 });

packages/ui/src/utils/country-code.ts

@@ -3,7 +3,9 @@ import {
   getCountries,
   CountryCode,
   CountryCallingCode,
+  E164Number,
   getCountryCallingCode,
+  parsePhoneNumberWithError,
 } from 'libphonenumber-js/mobile';
 
 export const fallbackCountryCode = 'US';
@@ -78,3 +80,21 @@ export const getCountryList = (): CountryMetaData[] => {
     ...countryList,
   ];
 };
+
+export const parseE164Number = (value: string): E164Number | '' => {
+  if (!value || value.startsWith('+')) {
+    return value;
+  }
+
+  return `+${value}`;
+};
+
+export const formatPhoneNumberWithCountryCallingCode = (number: string) => {
+  try {
+    const phoneNumber = parsePhoneNumberWithError(parseE164Number(number));
+
+    return `+${phoneNumber.countryCallingCode} ${phoneNumber.nationalNumber}`;
+  } catch {
+    return number;
+  }
+};