GREG-85: Work on setting up passport fields

frontend/public/locales/en/common.json

@@ -20,7 +20,8 @@
     "email": "E-mail",
     "fullName": "Full name",
     "mobilePhone": "Mobile phone",
-    "passportNumber": "Passport number"
+    "passportNumber": "Passport number",
+    "passportNationality": "Passport nationality"
   },
   "sponsor": {
     "contactInfo": "Contact information",
@@ -64,7 +65,8 @@
     "emailRequired": "E-mail is required",
     "invalidMobilePhoneNumber": "Invalid phone number",
     "invalidEmail": "Invalid e-mail address",
-    "passportNumberRequired": "Passport number required"
+    "passportNumberRequired": "Passport number required",
+    "mobilePhoneRequired": "Mobile phone is required"
   },
   "button": {
     "back": "Back",

frontend/public/locales/nb/common.json

@@ -20,7 +20,8 @@
     "email": "E-post",
     "fullName": "Fullt navn",
     "mobilePhone": "Mobilnummer",
-    "passportNumber": "Passport number"
+    "passportNumber": "Passnummer",
+    "passportNationality": "Passnasjonalitet"
   },
   "sponsor": {
     "contactInfo": "Kontaktinformasjon",
@@ -63,7 +64,8 @@
     "emailRequired": "E-post er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",
     "invalidEmail": "Ugyldig e-postadresse",
-    "passportNumberRequired": "Passnummer er obligatorisk"
+    "passportNumberRequired": "Passnummer er obligatorisk",
+    "mobilePhoneRequired": "Mobilnummer er obligaorisk"
   },
   "button": {
     "back": "Tilbake",

frontend/public/locales/nn/common.json

@@ -21,7 +21,9 @@
     "email": "E-post",
     "fullName": "Fullt namn",
     "mobilePhone": "Mobilnummer",
-    "passportNumber": "Passport number"
+    "passportNumber": "Passnummer",
+    "passportNationality": "Passnasjonalitet",
+    "mobilePhoneRequired": "Mobilnummer er obligaorisk"
   },
   "sponsor": {
     "contactInfo": "Kontaktinformasjon",

frontend/src/routes/guest/register/enteredGuestData.ts

@@ -7,4 +7,5 @@ export type EnteredGuestData = {
   mobilePhone: string
   nationalIdNumber?: string
   passportNumber?: string
+  passportNationality?: string
 }

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

@@ -11,7 +11,7 @@ import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods'
 import { EnteredGuestData } from './enteredGuestData'
 import { ContactInformationBySponsor } from './guestDataForm'
 import AuthenticationMethod from './authenticationMethod'
-import { postJsonOpts } from '../../../utils'
+import { submitJsonOpts } from '../../../utils'
 
 enum SubmitState {
   NotSubmitted,
@@ -54,6 +54,8 @@ export default function GuestRegister() {
       authentication_method: AuthenticationMethod.Invite,
     })
 
+  const [errorState, setErrorState] = useState<string>('')
+
   const guestContactInfo = async () => {
     try {
       const response = await fetch('/api/ui/v1/invited')
@@ -112,15 +114,28 @@ export default function GuestRegister() {
   const handleForwardFromRegister = (
     updateFormData: EnteredGuestData
   ): void => {
+    if (
+      (updateFormData.passportNumber && !updateFormData.passportNationality) ||
+      (!updateFormData.passportNumber && updateFormData.passportNationality)
+    ) {
+      // TODO Make better text and use translation
+      setErrorState(
+        'Both passport nationality and passport number need to be set'
+      )
+      return
+    }
+    setErrorState('')
+
+    const passIdentity = `${updateFormData.passportNationality}-${updateFormData.passportNumber}`
     const payload = {
       person: {
         mobile_phone: updateFormData.mobilePhone,
         fnr: updateFormData.nationalIdNumber,
-        passport: updateFormData.passportNumber,
+        passport: passIdentity,
       },
     }
 
-    fetch('/api/ui/v1/invited/', postJsonOpts(payload))
+    fetch('/api/ui/v1/invited/', submitJsonOpts('POST', payload))
       .then((response) => {
         if (response.ok) {
           setSubmitState(SubmitState.Submitted)
@@ -177,6 +192,9 @@ export default function GuestRegister() {
         {/* TODO This button is only for testing while developing */}
         <Button onClick={handleSave}>{t('button.save')}</Button>
       </Box>
+
+      {/*TODO Give better feedback to user*/}
+      {errorState && <h2>{errorState}</h2>}
     </Page>
   )
 }

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

@@ -15,7 +15,7 @@ import {
   getCountries,
   getCountryCallingCode,
 } from 'libphonenumber-js'
-import { getName } from 'i18n-iso-countries'
+import { getAlpha2Codes, getName } from 'i18n-iso-countries'
 import { ContactInformationBySponsor } from './guestDataForm'
 import { EnteredGuestData } from './enteredGuestData'
 import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods'
@@ -73,7 +73,7 @@ const GuestRegisterStep = forwardRef(
     }
 
     register('mobilePhone', {
-      required: t<string>('validation.roleTypeRequired'),
+      required: t<string>('validation.mobilePhoneRequired'),
       validate: isValidMobilePhoneNumber,
     })
 
@@ -160,19 +160,10 @@ const GuestRegisterStep = forwardRef(
                   }}
                 />
               </Box>
-
               {guestData.authentication_method ===
                 AuthenticationMethod.Invite && (
                 <>
-                  <TextField
-                    id="passport"
-                    data-testid="passport_number_input"
-                    label={t('input.passportNumber')}
-                    {...register('passportNumber', {
-                      required: t<string>('validation.passportNumberRequired'),
-                    })}
-                  />
-
+                  {/* The guest should fill in one of national ID number or passport number */}
                   <TextField
                     id="national_id_number"
                     label={t('input.nationalIdNumber')}
@@ -181,9 +172,40 @@ const GuestRegisterStep = forwardRef(
                       errors.nationalIdNumber && errors.nationalIdNumber.message
                     }
                     {...register('nationalIdNumber', {
-                      validate: isValidFnr,
+                      // It is not required that the national ID number be filled in, the guest may not have
+                      // one, so allow empty values for the validation to pass
+                      validate: (value) => isValidFnr(value, true),
                     })}
                   />
+
+                  <TextField
+                    id="passport-number-id"
+                    data-testid="passport_number_input"
+                    label={t('input.passportNumber')}
+                    {...(register('passportNumber'),
+                    {
+                      required: false,
+                    })}
+                  />
+
+                  <Select
+                    id="passport-nationality-id"
+                    labelId="passport-nationality-label"
+                    label={t('input.passportNationality')}
+                    value=""
+                    {...register('passportNationality', {
+                      required: false,
+                    })}
+                  >
+                    {Object.keys(getAlpha2Codes()).map((countryAlpha2Code) => (
+                      <MenuItem
+                        key={countryAlpha2Code}
+                        value={countryAlpha2Code}
+                      >
+                        {getName(countryAlpha2Code, i18n.language)}
+                      </MenuItem>
+                    ))}
+                  </Select>
                 </>
               )}