Replace the existing Phone comp with mui-tel-input (#415)

Co-authored-by: Vishal <[email protected]>
Co-authored-by: tumms2021389 <[email protected]>

Author: 3 people

package-lock.json

@@ -62,7 +62,7 @@
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.difference": "^4.5.0",
-    "material-ui-phone-number": "^3.0.0",
+    "mui-tel-input": "^6.0.1",
     "react": "^17.0.2",
     "react-datepicker": "^4.25.0",
     "react-dom": "^17.0.2",

package.json

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '../../../types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
-          defaultCountry='us'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}

packages/react-sdk-components/src/components/field/Phone/Phone.tsx

@@ -99,14 +99,16 @@ test.describe('E2E test', () => {
     const validationMsg = 'Enter a valid phone number';
     await editablePhoneInput.clear();
     await countrySelector.click();
-    await page.locator('text=United States+1 >> nth=0').click();
+    await page.locator('text=United Kingdom+44 >> nth=0').click();
     /** Entering an invalid Phone number */
     await common.enterPhoneNumber(editablePhone, '61');
     await editablePhoneInput.blur();
     /** Expecting an error for Invalid phone number */
+
     await expect(page.locator(`p:has-text("${validationMsg}")`)).toBeVisible();
 
     /** Entering a valid Phone number */
+    await editablePhoneInput.click();
     await editablePhoneInput.clear();
     await countrySelector.click();
     await page.locator('text=United States+1 >> nth=0').click();