From 922ff2884aed3f22428a8bb84efb2c93b733184e Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Wed, 20 Oct 2021 15:37:53 +0200
Subject: [PATCH] GREG-85: Adding passport nationality field
---
frontend/public/locales/en/common.json | 3 +-
frontend/public/locales/nb/common.json | 3 +-
frontend/public/locales/nn/common.json | 3 +-
.../routes/guest/register/guestDataForm.ts | 1 +
frontend/src/routes/guest/register/index.tsx | 50 +++++++++++--------
.../routes/guest/register/registerPage.tsx | 44 ++++++++++++----
6 files changed, 72 insertions(+), 32 deletions(-)
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 2a0162f9..26c3f0a8 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -21,7 +21,8 @@
"fullName": "Full name",
"mobilePhone": "Mobile phone",
"passportNumber": "Passport number",
- "passportNationality": "Passport nationality"
+ "passportNationality": "Passport nationality",
+ "countryCallingCode": "Country code"
},
"sponsor": {
"contactInfo": "Contact information",
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 7a29b865..fe54d8b1 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -21,7 +21,8 @@
"fullName": "Fullt navn",
"mobilePhone": "Mobilnummer",
"passportNumber": "Passnummer",
- "passportNationality": "Passnasjonalitet"
+ "passportNationality": "Passnasjonalitet",
+ "countryCallingCode": "Landkode"
},
"sponsor": {
"contactInfo": "Kontaktinformasjon",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index a288d819..d6a2d116 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -23,7 +23,8 @@
"mobilePhone": "Mobilnummer",
"passportNumber": "Passnummer",
"passportNationality": "Passnasjonalitet",
- "mobilePhoneRequired": "Mobilnummer er obligaorisk"
+ "mobilePhoneRequired": "Mobilnummer er obligaorisk",
+ "countryCallingCode": "Landkode"
},
"sponsor": {
"contactInfo": "Kontaktinformasjon",
diff --git a/frontend/src/routes/guest/register/guestDataForm.ts b/frontend/src/routes/guest/register/guestDataForm.ts
index 44ab9823..cb52a87b 100644
--- a/frontend/src/routes/guest/register/guestDataForm.ts
+++ b/frontend/src/routes/guest/register/guestDataForm.ts
@@ -21,6 +21,7 @@ export type ContactInformationBySponsor = {
mobile_phone?: string
fnr?: string
passport?: string
+ passportNationality?: string
authentication_method: AuthenticationMethod
}
diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx
index 2d9ea27d..c0f75c28 100644
--- a/frontend/src/routes/guest/register/index.tsx
+++ b/frontend/src/routes/guest/register/index.tsx
@@ -51,6 +51,7 @@ export default function GuestRegister() {
mobile_phone: '',
fnr: '',
passport: '',
+ passportNationality: '',
authentication_method: AuthenticationMethod.Invite,
})
@@ -84,6 +85,8 @@ export default function GuestRegister() {
mobile_phone: jsonResponse.person.mobile_phone,
fnr: jsonResponse.fnr,
passport: jsonResponse.passport,
+ // TODO Separate out nationality based on what is in the server response
+ passportNationality: '',
authentication_method: authenticationMethod,
})
@@ -114,27 +117,34 @@ 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
+ const payload: any = {}
+ payload.person = {}
+ payload.person.mobile_phone = updateFormData.mobilePhone
+
+ if (updateFormData.passportNumber && updateFormData.passportNationality) {
+ // The user has entered some passport information, check that both nationality and number are present
+ 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('')
+ payload.person.passport = `${updateFormData.passportNationality}-${updateFormData.passportNumber}`
}
- setErrorState('')
-
- const passIdentity = `${updateFormData.passportNationality}-${updateFormData.passportNumber}`
- const payload = {
- person: {
- mobile_phone: updateFormData.mobilePhone,
- fnr: updateFormData.nationalIdNumber,
- passport: passIdentity,
- },
+
+ if (updateFormData.nationalIdNumber) {
+ payload.person.fnr = updateFormData.nationalIdNumber
}
+ // TODO Remove after development
+ console.log(`Payload: ${JSON.stringify(payload)}`)
+
fetch('/api/ui/v1/invited/', submitJsonOpts('POST', payload))
.then((response) => {
if (response.ok) {
@@ -145,8 +155,8 @@ export default function GuestRegister() {
}
})
.catch((error) => {
- console.error(error)
setSubmitState(SubmitState.SubmittedError)
+ console.error(error)
})
}
@@ -193,7 +203,7 @@ export default function GuestRegister() {
<Button onClick={handleSave}>{t('button.save')}</Button>
</Box>
- {/*TODO Give better feedback to user*/}
+ {/* TODO Give better feedback to user */}
{errorState && <h2>{errorState}</h2>}
</Page>
)
diff --git a/frontend/src/routes/guest/register/registerPage.tsx b/frontend/src/routes/guest/register/registerPage.tsx
index b7728a7a..a8f05d5e 100644
--- a/frontend/src/routes/guest/register/registerPage.tsx
+++ b/frontend/src/routes/guest/register/registerPage.tsx
@@ -12,6 +12,7 @@ import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
CountryCallingCode,
+ CountryCode,
getCountries,
getCountryCallingCode,
} from 'libphonenumber-js'
@@ -65,7 +66,7 @@ const GuestRegisterStep = forwardRef(
setValue,
trigger,
formState: { errors },
- } = useForm()
+ } = useForm<EnteredGuestData>()
const onSubmit = handleSubmit<EnteredGuestData>(submit)
function doSubmit() {
@@ -112,7 +113,7 @@ const GuestRegisterStep = forwardRef(
<TextField
id="email"
label={t('input.email')}
- value={guestData.email}
+ value={!guestData.email ? '' : guestData.email}
disabled
/>
@@ -120,7 +121,6 @@ const GuestRegisterStep = forwardRef(
sx={{
display: 'flex',
flexDirection: 'row',
- paddingBottom: '2rem',
}}
>
<Select
@@ -131,12 +131,26 @@ const GuestRegisterStep = forwardRef(
}}
labelId="phone-number-select"
id="phone-number-select"
+ displayEmpty
+ defaultValue=""
onChange={handleCountryCodeChange}
+ renderValue={(selected: any) => {
+ if (selected.length === 0 || selected === '') {
+ return t('input.countryCallingCode')
+ }
+ return `${getName(
+ selected,
+ i18n.language
+ )} (${getCountryCallingCode(selected as CountryCode)})`
+ }}
>
+ <MenuItem disabled value="">
+ {t('input.countryCallingCode')}
+ </MenuItem>
{getCountries().map((country) => (
<MenuItem key={country} value={country}>
- {getName(country, i18n.language)} +
- {getCountryCallingCode(country)}
+ {getName(country, i18n.language)} (
+ {getCountryCallingCode(country)})
</MenuItem>
))}
</Select>
@@ -167,7 +181,7 @@ const GuestRegisterStep = forwardRef(
<TextField
id="national_id_number"
label={t('input.nationalIdNumber')}
- error={!!errors.national_id_number}
+ error={!!errors.nationalIdNumber}
helperText={
errors.nationalIdNumber && errors.nationalIdNumber.message
}
@@ -182,21 +196,33 @@ const GuestRegisterStep = forwardRef(
id="passport-number-id"
data-testid="passport_number_input"
label={t('input.passportNumber')}
- {...(register('passportNumber'),
- {
+ {...register('passportNumber', {
required: false,
})}
/>
<Select
+ sx={{
+ maxHeight: '2.5rem',
+ }}
id="passport-nationality-id"
labelId="passport-nationality-label"
label={t('input.passportNationality')}
- value=""
+ displayEmpty
+ defaultValue=""
{...register('passportNationality', {
required: false,
})}
+ renderValue={(selected: any) => {
+ if (!selected || selected.length === 0) {
+ return t('input.passportNationality')
+ }
+ return getName(selected, i18n.language)
+ }}
>
+ <MenuItem disabled value="">
+ {t('input.passportNationality')}
+ </MenuItem>
{Object.keys(getAlpha2Codes()).map((countryAlpha2Code) => (
<MenuItem
key={countryAlpha2Code}
--
GitLab