From c6384bed84340909aaa41f10abaea26b5195e6a5 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 15 Jul 2022 14:08:59 +0800
Subject: [PATCH] fix(ui): format phone number with country calling code
 (#1551)

format phone number with country calling code
---
 .../Passwordless/PasswordlessConfirmModal.tsx |  3 ++-
 packages/ui/src/hooks/use-phone-number.ts     | 15 +++++---------
 packages/ui/src/utils/country-code.test.ts    |  6 ++++++
 packages/ui/src/utils/country-code.ts         | 20 +++++++++++++++++++
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx b/packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
index 7c3d38e80..a62e6e1a2 100644
--- a/packages/ui/src/containers/Passwordless/PasswordlessConfirmModal.tsx
+++ b/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>
diff --git a/packages/ui/src/hooks/use-phone-number.ts b/packages/ui/src/hooks/use-phone-number.ts
index 7686eeb5c..275c04414 100644
--- a/packages/ui/src/hooks/use-phone-number.ts
+++ b/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));
diff --git a/packages/ui/src/utils/country-code.test.ts b/packages/ui/src/utils/country-code.test.ts
index eb14098af..16e528d94 100644
--- a/packages/ui/src/utils/country-code.test.ts
+++ b/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');
+  });
 });
diff --git a/packages/ui/src/utils/country-code.ts b/packages/ui/src/utils/country-code.ts
index d19633166..12a048ecd 100644
--- a/packages/ui/src/utils/country-code.ts
+++ b/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;
+  }
+};