GREG-135: Update register new guest UI

frontend/public/locales/en/common.json

@@ -23,7 +23,8 @@
     "passportNumber": "Passport number",
     "passportNationality": "Passport nationality",
     "countryCallingCode": "Country code",
-    "contactPersonUnit": "Contact at unit"
+    "contactPersonUnit": "Contact at unit",
+    "optional": "(optional)"
   },
   "sponsor": {
     "addRole": "Add role",
@@ -118,10 +119,10 @@
     "finishRegistration": "Finish registration"
   },
   "registerWizardText": {
-    "registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
+    "registerPage": "Enter the contact information for the guest below. These fields are mandatory.",
     "summaryPage": "Check that the values are correct before saving.",
     "registerContactInfo": "Register contact info",
-    "registerPeriod": "Register period",
+    "registerPeriod": "Register role and period",
     "registerPeriodText": "Enter role and duration.",
     "summaryContactInformation": "Summary contact information",
     "summaryPeriod": "Summary period",

frontend/public/locales/nb/common.json

@@ -23,7 +23,8 @@
     "passportNumber": "Passnummer",
     "passportNationality": "Passnasjonalitet",
     "countryCallingCode": "Landkode",
-    "contactPersonUnit": "Kontakt ved avdeling"
+    "contactPersonUnit": "Kontakt ved avdeling",
+    "optional": "(valgfritt)"
   },
   "sponsor": {
     "addRole": "Legg til rolle",
@@ -118,10 +119,10 @@
     "finishRegistration": "Fullfør registrering"
   },
   "registerWizardText": {
-    "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
+    "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Disse feltene er obligatoriske.",
     "summaryPage": "Sjekk at alt stemmer før lagring.",
-    "registerContactInfo": "Registrere kontaktinfo",
-    "registerPeriod": "Registrere periode",
+    "registerContactInfo": "Registrer kontaktinfo",
+    "registerPeriod": "Registrer rolle og periode",
     "registerPeriodText": "Fyll inn rolle og periode.",
     "summaryContactInformation": "Summary contact information",
     "summaryPeriod": "Summary period",

frontend/public/locales/nn/common.json

@@ -24,7 +24,8 @@
     "passportNumber": "Passnummer",
     "passportNationality": "Passnasjonalitet",
     "countryCallingCode": "Landkode",
-    "contactPersonUnit": "Kontakt ved avdeling"
+    "contactPersonUnit": "Kontakt ved avdeling",
+    "optional": "(valfritt)"
   },
   "sponsor": {
     "addRole": "Legg til role",
@@ -119,10 +120,10 @@
     "finishRegistration": "Fullfør registrering"
   },
   "registerWizardText": {
-    "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
+    "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Desse felta er obligatoriske.",
     "summaryPage": "Sjekk at alt stemmer før lagring.",
-    "registerContactInfo": "Registrere kontaktinfo",
-    "registerPeriod": "Registrere periode",
+    "registerContactInfo": "Registrer kontaktinfo",
+    "registerPeriod": "Registrer rolle og periode",
     "registerPeriodText": "Fyll inn rolle og periode.",
     "summaryContactInformation": "Summary contact information",
     "summaryPeriod": "Summary period",

frontend/src/routes/sponsor/register/stepPersonForm.tsx

 import {
   Box,
-  FormControl,
-  InputLabel,
+  Divider,
   MenuItem,
-  Select,
-  SelectChangeEvent,
   Stack,
   TextField,
   Typography,
@@ -76,7 +73,7 @@ const StepPersonForm = forwardRef(
       reset(formData)
     }, [])
 
-    const handleOuChange = (event: SelectChangeEvent) => {
+    const handleOuChange = (event: any) => {
       if (event.target.value) {
         setOuChoice(event.target.value)
         setValue('ou_id', parseInt(event.target.value, 10))
@@ -132,11 +129,18 @@ const StepPersonForm = forwardRef(
         >
           {t('registerWizardText.registerContactInfo')}
         </Typography>
-        <Typography sx={{ paddingBottom: '2rem' }}>
+        <Typography sx={{ paddingBottom: '0.5rem' }}>
           {t('registerWizardText.registerPage')}
         </Typography>
-        <Box sx={{ maxWidth: '30rem' }}>
-          <form onSubmit={onSubmit}>
+        <Divider />
+        <form onSubmit={onSubmit}>
+          <Box
+            sx={{
+              paddingTop: '1rem',
+              paddingBottom: '4rem',
+              maxWidth: '30rem',
+            }}
+          >
             <Stack spacing={2}>
               <TextField
                 id="firstName"
@@ -166,33 +170,24 @@ const StepPersonForm = forwardRef(
                   validate: isValidEmail,
                 })}
               />
+            </Stack>
+          </Box>
+          <Typography
+            variant="h5"
+            sx={{
+              paddingTop: '1rem',
+              paddingBottom: '1rem',
+            }}
+          >
+            {t('registerWizardText.registerPeriod')}
+          </Typography>
+          <Typography sx={{ paddingBottom: '0.5rem' }}>
+            {t('registerWizardText.registerPeriodText')}
+          </Typography>
+          <Divider />
 
-              <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
-                {t('registerWizardText.registerPeriod')}
-              </Typography>
-              <Typography sx={{ paddingBottom: '1rem' }}>
-                {t('registerWizardText.registerPeriodText')}
-              </Typography>
-              <FormControl fullWidth>
-                <InputLabel id="ou-select-label">{t('common:ou')}</InputLabel>
-                <Select
-                  labelId="ou-select-label"
-                  id="ou-select-label"
-                  value={ouChoice?.toString()}
-                  label={t('common:ou')}
-                  onChange={handleOuChange}
-                >
-                  {ous.length > 0 &&
-                    ous
-                      .sort(i18n.language === 'en' ? enSort : nbSort)
-                      .map((ou) => (
-                        <MenuItem key={ou.id.toString()} value={ou.id}>
-                          {i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
-                        </MenuItem>
-                      ))}
-                </Select>
-              </FormControl>
-
+          <Box sx={{ paddingTop: '1rem', maxWidth: '30rem' }}>
+            <Stack spacing={2}>
               <TextField
                 id="roletype-select"
                 select
@@ -210,6 +205,22 @@ const StepPersonForm = forwardRef(
                 ))}
               </TextField>
 
+              <TextField
+                id="ou-select-label"
+                select
+                value={ouChoice?.toString()}
+                label={t('common:ou')}
+                onChange={handleOuChange}
+              >
+                {ous
+                  .sort(i18n.language === 'en' ? enSort : nbSort)
+                  .map((ou) => (
+                    <MenuItem key={ou.id.toString()} value={ou.id}>
+                      {i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
+                    </MenuItem>
+                  ))}
+              </TextField>
+
               {/* There are no particular constraints on the date pickers. It should be allowed to add a role with a start date that is in the past for instance */}
               <Controller
                 name="role_start"
@@ -257,7 +268,9 @@ const StepPersonForm = forwardRef(
               {displayContactAtUnit && (
                 <TextField
                   id="contact_person"
-                  label={t('input.contactPersonUnit')}
+                  label={`${t('input.contactPersonUnit')} ${t(
+                    'input.optional'
+                  )}`}
                   {...register(`contact_person_unit`)}
                 />
               )}
@@ -265,15 +278,15 @@ const StepPersonForm = forwardRef(
               {displayComment && (
                 <TextField
                   id="comment"
-                  label={t('input.comment')}
+                  label={`${t('input.comment')} ${t('input.optional')}`}
                   multiline
                   rows={5}
                   {...register(`comment`)}
                 />
               )}
             </Stack>
-          </form>
-        </Box>
+          </Box>
+        </form>
       </>
     )
   }