chore: updated contact validation message with regex

Author: Usmanfee

package.json

@@ -54,8 +54,7 @@
     "lodash.uniq": "^4.5.0",
     "nanoid": "^5.0.9",
     "papaparse": "^5.4.1",
-    "phone": "^3.1.57",
-    "qs": "^6.13.1",
+    "qs": "^6.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.10",

src/assets/locales/de/main.json

@@ -1281,8 +1281,7 @@
         "providerPhoneContact": "Provider Phone Contact",
         "pleaseEnterValidHomePageURL": "Please enter a valid url - eg: https://catena-x.net",
         "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail",
-        "pleaseEnterValidPhone": "Bitte geben Sie eine gültige Kundenkontakt Telefonnummer ein",
-        "pleaseEnterValidContact": "Bitte fügen Sie eine gültige Telefonnummer im folgenden Format hinzu: „+ xx xxxx xxxxxx“, „+ xxx xxxx-xxxx“, „+xx xxxxxxxxxx“. Hinweis: Es sind weitere Formate zulässig. Die genannten Formate sind die am häufigsten verwendeten Formate.",
+        "pleaseEnterValidContact": "Bitte geben Sie eine gültige Telefonnummer in einem der folgenden Formate ein: '+xx xxxxxxxxxx' oder '+xxxxxxxxxx'. Hinweis: Vermeiden Sie bitte doppelte Leerzeichen und Sonderzeichen",
         "privacyInformation": "Privacy Information",
         "privacyInformationDescription": "The privacy information is used to display data types the app may collect on the app detail page. You may select several options OR select “none”.",
         "privacyInfoError": "Error - values couldn't get fetched. Please try it later again or contact your administrator.",

src/assets/locales/de/servicerelease.json

@@ -53,7 +53,7 @@
     "providerContactPhone": "Kundenkontakt Telefon",
     "pleaseEnterValidHomePageURL": "Bitte geben Sie eine gültige URL ein - eg: https://catena-x.net",
     "pleaseEnterValidEmail": "Bitte geben Sie eine gültige Email an",
-    "pleaseEnterValidPhone": "Bitte geben Sie eine gültige Kundenkontakt Telefonnummer ein"
+    "pleaseEnterValidContact": "Bitte geben Sie eine gültige Telefonnummer in einem der folgenden Formate ein: '+xx xxxxxxxxxx' oder '+xxxxxxxxxx'. Hinweis: Vermeiden Sie bitte doppelte Leerzeichen und Sonderzeichen"
   },
   "step3": {
     "headerTitle": "Agreements and Consent",

src/assets/locales/en/main.json

@@ -1278,11 +1278,10 @@
         "providerDetails": "Provider Details",
         "providerHomePage": "Provider Homepage",
         "providerContactEmail": "Contact (E-Mail)",
-        "providerPhoneContact": "Contac (Phone Number)",
+        "providerPhoneContact": "Contact (Phone Number)",
         "pleaseEnterValidHomePageURL": "Please enter a valid url - eg: https://catena-x.net",
         "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail",
-        "pleaseEnterValidPhone": "Please enter a valid Customer Contact Number",
-        "pleaseEnterValidContact": "Please add a valid phone number and in the following format: “+ xx xxxx xxxxxx”, “+ xxx xxxx-xxxx”, “+xx xxxxxxxxxx”. Note: more formats are allowed, mentioned formats are the most used formats.",
+        "pleaseEnterValidContact": "Please enter a valid phone number in one of the following formats: '+xx xxxxxxxxxx' or '+xxxxxxxxxx'. Note: Avoid double spaces or special characters.",
         "privacyInformation": "Privacy Information",
         "privacyInformationDescription": "The privacy information is used to display data types the app may collect on the app detail page. You may select several options OR select “none”.",
         "privacyInfoError": "Error - values couldn't get fetched. Please try it later again or contact your administrator.",

src/assets/locales/en/servicerelease.json

@@ -53,7 +53,7 @@
     "providerContactPhone": "Customer Contact Phone",
     "pleaseEnterValidHomePageURL": "Please enter a valid url - eg: https://catena-x.net",
     "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail",
-    "pleaseEnterValidPhone": "Please enter a valid Customer Contact Phone Number"
+    "pleaseEnterValidContact": "Please enter a valid phone number in one of the following formats: '+xx xxxxxxxxxx' or '+xxxxxxxxxx'. Note: Avoid double spaces or special characters."
   },
   "step3": {
     "headerTitle": "Agreements and Consent",

src/components/shared/basic/ReleaseProcess/AppPage/index.tsx

@@ -67,7 +67,6 @@ import {
 } from 'features/appManagement/types'
 import { ButtonLabelTypes } from '..'
 import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
-import { phone } from 'phone'
 import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { download } from 'utils/downloadUtils'
 import { extractFileData } from 'utils/fileUtils'
@@ -679,9 +678,10 @@ export default function AppPage() {
             }}
             name="providerPhoneContact"
             label={t('content.apprelease.appPage.providerPhoneContact')}
-            validate={(value: string) =>
-              value === '' || phone(value.replace(/^00/, '+')).isValid
-            }
+            pattern={Patterns.PHONE}
+            ruleMessage={t(
+              'content.apprelease.appPage.pleaseEnterValidContact'
+            )}
           />
           {errors.providerPhoneContact &&
             errors?.providerPhoneContact.type === 'validate' && (

src/components/shared/basic/ReleaseProcess/OfferPage/index.tsx

@@ -432,7 +432,7 @@ export default function OfferPage({
             name="providerPhoneContact"
             label={t('step2.providerContactPhone')}
             pattern={Patterns.PHONE}
-            ruleMessage={t('step2.pleaseEnterValidPhone')}
+            ruleMessage={t('step2.pleaseEnterValidContact')}
           />
         </div>
       </form>

src/types/Patterns.ts

@@ -41,7 +41,7 @@ export const Patterns = {
   LABEL: /^[a-z0-9-_ ]{1,80}$/i,
   BPN: /^BPNL[0-9A-Z]{12}$/i,
   MAIL: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*))@(([a-z0-9-]+\.)+[a-z]{2,})$/,
-  PHONE: /^(\+?\d{1,3})?\s?\(?\d{3}\)?[.\s-]?\d{3}[.\s-]?\d{4,7}$/,
+  PHONE: /^\+([1-9][0-9]{0,2})\s?[0-9]{6,14}$/,
   DOMAIN: new RegExp(`^${DOMAIN.source}$`, 'i'),
   PATH: new RegExp(`^${URLPATH.source}$`, 'i'),
   URL: urlPattern,