diff --git a/package-lock.json b/package-lock.json index 841824e9..ba010bc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,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", @@ -5002,7 +5002,6 @@ "version": "22.7.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.5.tgz", "integrity": "sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==", - "dev": true, "dependencies": { "undici-types": "~6.19.2" } @@ -7736,11 +7735,6 @@ "typescript": ">=4" } }, - "node_modules/country-flag-icons": { - "version": "1.5.13", - "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.13.tgz", - "integrity": "sha512-4JwHNqaKZ19doQoNcBjsoYA+I7NqCH/mC/6f5cBWvdKzcK5TMmzLpq3Z/syVHMHJuDGFwJ+rPpGizvrqJybJow==" - }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -15315,6 +15309,11 @@ "node": ">= 0.8.0" } }, + "node_modules/libphonenumber-js": { + "version": "1.11.14", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.14.tgz", + "integrity": "sha512-sexvAfwcW1Lqws4zFp8heAtAEXbEDnvkYCEGzvOoMgZR7JhXo/IkE9MkkGACgBed5fWqh3ShBGnJBdDnU9N8EQ==" + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -15419,7 +15418,8 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true }, "node_modules/lodash.camelcase": { "version": "4.3.0", @@ -15584,25 +15584,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/material-ui-phone-number": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/material-ui-phone-number/-/material-ui-phone-number-3.0.0.tgz", - "integrity": "sha512-wZX1PYv990nJUBko93AQxIfvFARHfMtnV/UT1/hVnbJP5x/K7MDuT5T2/ckIG6xyqTZ/wCcHdEK1P60uTOORwA==", - "dependencies": { - "country-flag-icons": "^1.4.10", - "lodash": "^4.17.21" - }, - "peerDependencies": { - "@emotion/react": "^11.4.1", - "@emotion/styled": "^11.3.0", - "@mui/material": "^5.0.0", - "@mui/styles": "^5.0.0", - "clsx": "^1.1.1", - "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2" - } - }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -15895,6 +15876,28 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, + "node_modules/mui-tel-input": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/mui-tel-input/-/mui-tel-input-6.0.1.tgz", + "integrity": "sha512-pMZCFb4UwEBE4h7HfOTQQ/3OO9/I67zHivTGi5ffbwHAroMCTE7+cdJwnGjx0QLUYKCdhb9FV48iV66PIyu4zw==", + "dependencies": { + "@types/node": "^22.5.5", + "libphonenumber-js": "^1.11.8" + }, + "peerDependencies": { + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@mui/material": "^5.0.0 || ^6.0.0", + "@types/react": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/multicast-dns": { "version": "7.2.5", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz", @@ -20254,8 +20257,7 @@ "node_modules/undici-types": { "version": "6.19.8", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" }, "node_modules/union": { "version": "0.5.0", diff --git a/package.json b/package.json index d0078036..89854998 100644 --- a/package.json +++ b/package.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", diff --git a/packages/react-sdk-components/src/components/field/Phone/Phone.tsx b/packages/react-sdk-components/src/components/field/Phone/Phone.tsx index 1cac710a..7186443c 100644 --- a/packages/react-sdk-components/src/components/field/Phone/Phone.tsx +++ b/packages/react-sdk-components/src/components/field/Phone/Phone.tsx @@ -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 (
- { 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();