Merge branch 'GREG-233_guest_can_proceed_with_invalid_phone_number' into 'master'

GREG-233: Prohibiting user from continuing with invalid phone number

See merge request !304

frontend/src/routes/guest/register/steps/register.test.tsx

@@ -288,3 +288,111 @@ test('Gender not required to be set if gender field is not showing', async () =>
     }
   )
 })
+
+test('Guest not allowed to proceed in wizard if phone number is not valid', async () => {
+  const nextHandler = jest.fn()
+
+  const allFeaturesOn = {
+    displayContactAtUnit: true,
+    displayComment: true,
+    displayContactAtUnitGuestInput: true,
+    showGenderFieldForGuest: true,
+  }
+
+  const formData: GuestRegisterData = {
+    firstName: 'Test',
+    lastName: 'Test2',
+    mobilePhoneCountry: 'NO',
+    mobilePhone: '50',
+    nationalIdNumber: '',
+    passportNumber: '12345678',
+    passportNationality: 'NO',
+    dateOfBirth: addYears(-20)(new Date()),
+    gender: 'male',
+  }
+
+  const testData = getEmptyGuestData()
+  testData.gender = 'male'
+  const submitMock = jest.fn()
+
+  // Need this to be able to call on the submit-method on the form
+  const reference = {
+    current: {
+      doSubmit: submitMock,
+    },
+  }
+
+  render(
+    <FeatureContext.Provider value={allFeaturesOn}>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <GuestRegisterStep
+          nextHandler={nextHandler}
+          initialGuestData={testData}
+          registerData={formData}
+          ref={reference}
+        />
+      </LocalizationProvider>
+    </FeatureContext.Provider>
+  )
+
+  reference.current?.doSubmit()
+
+  // TODO It is stupid to wait like this, but I have not found a wait-for function in jest
+  await new Promise((r) => setTimeout(r, 500))
+
+  expect(nextHandler.mock.calls.length).toBe(0)
+})
+
+test('Guest allowed to proceed in wizard if data is valid', async () => {
+  const nextHandler = jest.fn()
+
+  const allFeaturesOn = {
+    displayContactAtUnit: true,
+    displayComment: true,
+    displayContactAtUnitGuestInput: true,
+    showGenderFieldForGuest: true,
+  }
+
+  const formData: GuestRegisterData = {
+    firstName: 'Test',
+    lastName: 'Test2',
+    mobilePhoneCountry: 'NO',
+    mobilePhone: '97543992',
+    nationalIdNumber: '',
+    passportNumber: '12345678',
+    passportNationality: 'NO',
+    dateOfBirth: addYears(-20)(new Date()),
+    gender: 'male',
+  }
+
+  const testData = getEmptyGuestData()
+  testData.gender = 'male'
+  const submitMock = jest.fn()
+
+  // Need this to be able to call on the submit-method on the form
+  const reference = {
+    current: {
+      doSubmit: submitMock,
+    },
+  }
+
+  render(
+    <FeatureContext.Provider value={allFeaturesOn}>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <GuestRegisterStep
+          nextHandler={nextHandler}
+          initialGuestData={testData}
+          registerData={formData}
+          ref={reference}
+        />
+      </LocalizationProvider>
+    </FeatureContext.Provider>
+  )
+
+  reference.current?.doSubmit()
+
+  // TODO It is stupid to wait like this, but I have not found a wait-for function in jest
+  await new Promise((r) => setTimeout(r, 500))
+
+  expect(nextHandler.mock.calls.length).toBe(1)
+})

frontend/src/routes/guest/register/steps/register.tsx

@@ -108,6 +108,16 @@ const GuestRegisterStep = forwardRef(
       }
     }
 
+    const validatePhoneNumber = (
+      countryCodeCallingCode: CountryCallingCode | undefined,
+      phoneNumberToValidate: string
+    ) => {
+      const phoneNumberWithCountryCode = `+${getCountryCallingCode(
+        countryCodeCallingCode as CountryCode
+      )}${phoneNumberToValidate}`
+      return isValidMobilePhoneNumber(phoneNumberWithCountryCode)
+    }
+
     const submit: SubmitHandler<GuestRegisterData> = async (data) => {
       console.log('submit data is', data)
       const result = await trigger()
@@ -122,6 +132,22 @@ const GuestRegisterStep = forwardRef(
       // Phone checks passed, clear error message
       setPhoneErrorState('')
 
+      // Because the phone number validation is handled outside the hook form validation
+      // it is necessary to do another pass here to make sure the phone number entered
+      // really is valid
+      const validationMessage = validatePhoneNumber(
+        countryCode,
+        data.mobilePhone
+      )
+
+      if (validationMessage !== true) {
+        setError('mobilePhone', {
+          type: 'manual',
+          message: validationMessage || undefined,
+        })
+        return
+      }
+
       if (
         !data.nationalIdNumber &&
         !data.passportNumber &&
@@ -196,12 +222,9 @@ const GuestRegisterStep = forwardRef(
         // The country code and the rest of the mobile number are in two fields, so cannot
         // register the field directly in form, but need to have extra logic defined
         // to combine the values before writing them to the form handling
-
-        const phoneNumberWithCountryCode = `+${getCountryCallingCode(
-          countryCode as CountryCode
-        )}${value.target.value}`
-        const isValidPhoneNumber = isValidMobilePhoneNumber(
-          phoneNumberWithCountryCode
+        const isValidPhoneNumber = validatePhoneNumber(
+          countryCode,
+          value.target.value
         )
 
         if (isValidPhoneNumber === true) {