feat: introduced field of customer contact in service

package.json

@@ -53,8 +53,7 @@
     "lodash.uniq": "^4.5.0",
     "nanoid": "^5.0.9",
     "papaparse": "^5.4.1",
-    "phone": "^3.1.59",
-    "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

@@ -1289,7 +1289,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",
-        "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 Kontaktnummer 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.",
@@ -1715,7 +1715,7 @@
         "appProvider": "App Provider",
         "website": "Website",
         "email": "Email",
-        "phone": "Phone"
+        "phone": "Telefon"
       }
     },
     "checklistOverlay": {

src/assets/locales/de/servicerelease.json

@@ -49,9 +49,11 @@
     "note": "Info:",
     "providerDetails": "Provider Details",
     "providerHomePage": "Provider Homepage",
-    "providerContactEmail": "Customer Contact E-Mail",
+    "providerContactEmail": "Kundenkontakt E-Mail",
+    "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"
+    "pleaseEnterValidEmail": "Bitte geben Sie eine gültige Email an",
+    "pleaseEnterValidContact": "Bitte geben Sie eine gültige Kontaktnummer in einem der folgenden Formate ein: '+xx xxxxxxxxxx' oder '+xxxxxxxxxx'. Hinweis: Vermeiden Sie bitte doppelte Leerzeichen und Sonderzeichen"
   },
   "step3": {
     "headerTitle": "Agreements and Consent",
@@ -78,7 +80,10 @@
     "longDescriptionTitleEN": "[Long Description - EN] ",
     "longDescriptionTitleDE": "[Long Description - DE] ",
     "conformityDocument": "Conformity Document",
-    "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "website": "Webseite",
+    "email": "E-Mail",
+    "phone": "Telefon"
   },
   "serviceReleaseForm": {
     "headerTitle": "Create Service",
@@ -259,7 +264,8 @@
       "heading": "Provider Information",
       "message": "If you have any question, want to get in contact or visit the provider website, you can find all necessary information below.",
       "homepage": "Homepage",
-      "email": "E-Mail"
+      "email": "E-Mail",
+      "phone": "Telefon"
     },
     "technicalUserSetup": {
       "heading": "Technical User Setup",

src/assets/locales/en/main.json

@@ -1286,10 +1286,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",
-        "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 contact 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

@@ -50,8 +50,10 @@
     "providerDetails": "Provider Details",
     "providerHomePage": "Provider Homepage",
     "providerContactEmail": "Customer Contact E-Mail",
+    "providerContactPhone": "Customer Contact Phone",
     "pleaseEnterValidHomePageURL": "Please enter a valid url - eg: https://catena-x.net",
-    "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail"
+    "pleaseEnterValidEmail": "Please enter a valid Customer Contact E-Mail",
+    "pleaseEnterValidContact": "Please enter a valid contact number in one of the following formats: '+xx xxxxxxxxxx' or '+xxxxxxxxxx'. Note: Avoid double spaces or special characters."
   },
   "step3": {
     "headerTitle": "Agreements and Consent",
@@ -78,7 +80,10 @@
     "longDescriptionTitleEN": "[Long Description - EN] ",
     "longDescriptionTitleDE": "[Long Description - DE] ",
     "conformityDocument": "Conformity Document",
-    "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    "conformityDocumentsDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "website": "Provider HomePage",
+    "email": "E-Mail",
+    "phone": "Phone"
   },
   "serviceReleaseForm": {
     "headerTitle": "Create service",
@@ -259,7 +264,8 @@
       "heading": "Provider Information",
       "message": "If you have any question, want to get in contact or visit the provider website, you can find all necessary information below.",
       "homepage": "Homepage",
-      "email": "E-Mail"
+      "email": "E-Mail",
+      "phone": "Phone"
     },
     "technicalUserSetup": {
       "heading": "Technical User Setup",

src/components/pages/ServiceAdminBoardDetail/index.tsx

@@ -266,6 +266,7 @@ export default function ServiceAdminBoardDetail() {
               head: [
                 t('adminboardDetail.provider.homepage'),
                 t('adminboardDetail.provider.email'),
+                t('adminboardDetail.provider.phone'),
               ],
               body: [
                 [
@@ -274,6 +275,8 @@ export default function ServiceAdminBoardDetail() {
                     : serviceData.providerUri,
                 ],
                 [serviceData?.contactEmail],
+                // TODO: contactNumber is null atm and causing build failure. Once BE resolve the issue then will un-comment this line
+                // [serviceData?.contactNumber],
               ],
             }}
             horizontal={true}

src/components/pages/ServiceReleaseProcess/ServiceOverview/ServiceDetails.tsx

@@ -282,10 +282,16 @@ export default function ServiceDetails() {
               </Typography>
               <StaticTable
                 data={{
-                  head: ['Homepage', 'E-Mail'],
+                  head: [
+                    t('step4.website'),
+                    t('step4.email'),
+                    t('step4.phone'),
+                  ],
                   body: [
                     [fetchServiceStatus?.providerUri],
                     [fetchServiceStatus?.contactEmail],
+                    // TODO: contactNumber is null atm and causing build failure. Once BE resolve the issue then will un-comment this line
+                    // [fetchServiceStatus?.contactNumber],
                   ],
                 }}
                 horizontal={true}

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

@@ -69,7 +69,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'
@@ -696,9 +695,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

@@ -69,6 +69,7 @@ type FormDataType = {
   images: []
   providerHomePage: string
   providerContactEmail: string
+  providerPhoneContact: string
 }
 
 export default function OfferPage({
@@ -129,6 +130,7 @@ export default function OfferPage({
       images: fetchServiceStatus?.documents?.ADDITIONAL_DETAILS ?? [],
       providerHomePage: fetchServiceStatus?.providerUri ?? '',
       providerContactEmail: fetchServiceStatus?.contactEmail ?? '',
+      providerPhoneContact: fetchServiceStatus?.contactNumber ?? '',
     }
   }, [fetchServiceStatus])
 
@@ -227,6 +229,7 @@ export default function OfferPage({
       'longDescriptionDE',
       'providerHomePage',
       'providerContactEmail',
+      'providerPhoneContact',
     ])
     if (validateFields) {
       setLoading(true)
@@ -261,6 +264,7 @@ export default function OfferPage({
       price: '',
       providerUri: data.providerHomePage ?? '',
       contactEmail: data.providerContactEmail ?? '',
+      contactNumber: data.providerPhoneContact ?? '',
       leadPictureUri: fetchServiceStatus?.leadPictureUri,
     }
 
@@ -434,6 +438,20 @@ export default function OfferPage({
             ruleMessage={t('step2.pleaseEnterValidEmail')}
           />
         </div>
+
+        <div className="form-field">
+          <ProviderConnectorField
+            {...{
+              control,
+              trigger,
+              errors,
+            }}
+            name="providerPhoneContact"
+            label={t('step2.providerContactPhone')}
+            pattern={Patterns.PHONE}
+            ruleMessage={t('step2.pleaseEnterValidContact')}
+          />
+        </div>
       </form>
       <SnackbarNotificationWithButtons
         pageNotification={appPageNotification}

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

@@ -55,10 +55,11 @@ export default function OfferValidateAndPublish({
       conformityDocumentsDescription: t('step4.conformityDocumentsDescription'),
       documentsDescription: t('defaultValues.documentsDescription'),
       providerTableData: {
-        head: ['Homepage', 'E-Mail'],
+        head: [t('step4.website'), t('step4.email'), t('step4.phone')],
         body: [
           [fetchServiceStatus?.providerUri],
           [fetchServiceStatus?.contactEmail],
+          [fetchServiceStatus?.contactNumber],
         ],
       },
     }

src/types/Patterns.test.ts

@@ -32,6 +32,7 @@ import {
   isSearchUserEmail,
   isValidAppOverviewSearch,
   isValidIDPName,
+  isValidPhone,
 } from './Patterns'
 
 const TESTDATA = {
@@ -88,6 +89,27 @@ const TESTDATA = {
       '@mickey.mouse',
     ],
   },
+  PHONE: {
+    valid: [
+      '+1 123456789',
+      '+44 1234567890',
+      '+11234567890',
+      '+491746734234',
+      '+49 1746734234',
+      '+49 3012345678',
+      '+81312345678',
+      '+82212345678',
+      '+447123456789',
+    ],
+    invalid: [
+      '123456789324324324332',
+      '+1 (12345) 7890',
+      '+0 123 456',
+      '+12345678abc',
+      '+81 31234-5678',
+      '+447123456789 ',
+    ],
+  },
   DOMAIN: {
     valid: [
       'www.bmw.de',
@@ -393,4 +415,28 @@ describe('Input Pattern Tests', () => {
       expect(isValidIDPName(expr)).toBe(false)
     })
   })
+  it('validate phone number', () => {
+    TESTDATA.PHONE.valid.forEach((expr) => {
+      expect(isValidPhone(expr)).toBe(true)
+    })
+    TESTDATA.CLIENTID.invalid.forEach((expr) => {
+      expect(isValidPhone(expr)).toBe(false)
+    })
+  })
+  it('validate appoverview search', () => {
+    TESTDATA.appOverview.valid.forEach((expr) => {
+      expect(isValidAppOverviewSearch(expr)).toBe(true)
+    })
+    TESTDATA.appOverview.invalid.forEach((expr) => {
+      expect(isValidAppOverviewSearch(expr)).toBe(false)
+    })
+  })
+  it('validate phone number', () => {
+    TESTDATA.PHONE.valid.forEach((expr) => {
+      expect(isValidPhone(expr)).toBe(true)
+    })
+    TESTDATA.CLIENTID.invalid.forEach((expr) => {
+      expect(isValidPhone(expr)).toBe(false)
+    })
+  })
 })

src/types/Patterns.ts

@@ -41,6 +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: /^\+([1-9]\d{0,2})\s?\d{6,17}$/,
   DOMAIN: new RegExp(`^${DOMAIN.source}$`, 'i'),
   PATH: new RegExp(`^${URLPATH.source}$`, 'i'),
   URL: urlPattern,
@@ -210,6 +211,7 @@ export const isCompanyVies = (expr: string) =>
   Patterns.companyData.VIES.test(expr)
 export const isPostalCode = (expr: string) =>
   Patterns.companyData.POSTAL_CODE.test(expr)
+export const isValidPhone = (expr: string) => Patterns.PHONE.test(expr)
 export const isSearchUserEmail = (expr: string) =>
   Patterns.EMAIL_SEARCH.test(expr)
 export const isValidAppOverviewSearch = (expr: string) =>