GREG-341: Add access to edit comment and contact person

frontend/public/locales/en/common.json

@@ -51,7 +51,7 @@
     "consentInfoHead": "Consent information",
     "choiceDate": "Choice date",
     "consentName": "Consent type",
-    "periodChanged": "Period changed",
+    "roleChanged": "Role information changed",
     "invitationCancelled": "The invitation to {{name}} cancelled",
     "registeredInfo": "Registererd information on you",
     "registeredInfoExplanation": "Here is the contact information, roles and consent information that is registered on you.",
@@ -204,7 +204,7 @@
   },
   "error": {
     "error": "Error",
-    "changePeriodFailed": "Failed to change period",
+    "changeRoleFailed": "Failed to change role information",
     "invitationCancelFailed": "Failed to cancel invite",
     "invitationCreationFailedHeader": "Failed to create invite",
     "errorStatusCode": "Status code: {{statusCode}} (<3>{{statusText}}</3>)",

frontend/public/locales/nb/common.json

@@ -51,7 +51,7 @@
     "consentInfoHead": "Samtykkeinformasjon",
     "choiceDate": "Valgdato",
     "consentName": "Samtykketype",
-    "periodChanged": "Rolleperiode endret",
+    "roleChanged": "Rolleinformasjon endret",
     "invitationCancelled": "Invitasjonen til {{name}} kansellert",
     "registeredInfo": "Registrert informasjon om deg",
     "registeredInfoExplanation": "Her er en oversikt over kontaktinformasjon, roller og samtykker som er registrert om deg.",
@@ -204,7 +204,7 @@
   },
   "error": {
     "error": "Feil",
-    "changePeriodFailed": "Kunne ikke endre periode",
+    "changeRoleFailed": "Kunne ikke endre rolleinformasjon.",
     "invitationCancelFailed": "Kunne ikke kansellere invitasjon",
     "invitationCreationFailedHeader": "Kunne ikke opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",

frontend/public/locales/nn/common.json

@@ -51,7 +51,7 @@
     "consentInfoHead": "Samtykkeinformasjon",
     "choiceDate": "Valdato",
     "consentName": "Samtykketype",
-    "periodChanged": "Rolleperiode endra",
+    "roleChanged": "Rolleinformasjon endra",
     "invitationCancelled": "Invitasjonen til {{name}} kansellert",
     "registeredInfo": "Registrert informasjon om deg",
     "registeredInfoExplanation": "Her er ei oversikt over kontaktinformasjon, roller og samtykke som er registrert om deg.",
@@ -204,7 +204,7 @@
   },
   "error": {
     "error": "Feil",
-    "changePeriodFailed": "Kunne ikkje endre periode",
+    "changeRoleFailed": "Kunne ikkje endre rolleinformasjon",
     "invitationCancelFailed": "Kunne ikkje kansellere invitasjon",
     "invitationCreationFailedHeader": "Kunne ikkje opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",

frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx

@@ -69,6 +69,8 @@ type GuestRoleInfoParams = {
 type RoleFormData = {
   start_date: Date
   end_date: Date
+  comments: string
+  contact_person_unit: string
 }
 const TableHeadCell = styled(TableCellMui)({
   fontWeight: 'bold',
@@ -120,8 +122,8 @@ export default function GuestRoleInfo({
   const [t, i18n] = useTranslation('common')
   const { displayContactAtUnit, displayComment } = useFeatureContext()
   const navigate = useNavigate()
-  const [showPeriodChange, setShowPeriodChange] = useState<Boolean>(false)
-  const [showPeriodChangeFailed, setShowPeriodChangeFailed] =
+  const [showRoleChange, setShowRoleChange] = useState<Boolean>(false)
+  const [showRoleChangeFailed, setShowRoleChangeFailed] =
     useState<Boolean>(false)
   const [badEndDate, setBadEndDate] = useState<Boolean>(false)
   const [role, setRole] = useState<Role>({
@@ -150,8 +152,8 @@ export default function GuestRoleInfo({
     const newEndDate = addDays(-1)(today)
     if (role.start_date !== undefined && role.start_date > newEndDate) {
       setBadEndDate(true)
-      setShowPeriodChange(false)
-      setShowPeriodChangeFailed(false)
+      setShowRoleChange(false)
+      setShowRoleChangeFailed(false)
     } else {
       role.end_date = newEndDate
       endPeriodPost(role_id, { end_date: newEndDate }, reloadGuests)
@@ -166,6 +168,7 @@ export default function GuestRoleInfo({
   }
 
   const {
+    register,
     control,
     handleSubmit,
     setValue,
@@ -182,9 +185,16 @@ export default function GuestRoleInfo({
 
   // Submit function for the save button
   const submit: SubmitHandler<RoleFormData> = (data) => {
-    const payload: { start_date?: string; end_date: string } = {
+    const payload: {
+      start_date?: string
+      end_date: string
+      contact_person_unit?: string
+      comments?: string
+    } = {
       end_date: format(data.end_date as Date, 'yyyy-MM-dd'),
       start_date: format(data.start_date as Date, 'yyyy-MM-dd'),
+      contact_person_unit: data.contact_person_unit,
+      comments: data.comments,
     }
 
     console.log('submitting', JSON.stringify(payload))
@@ -197,13 +207,13 @@ export default function GuestRoleInfo({
       })
       .then((result) => {
         if (result !== null) {
-          setShowPeriodChange(true)
+          setShowRoleChange(true)
           setBadEndDate(false)
-          setShowPeriodChangeFailed(false)
+          setShowRoleChangeFailed(false)
           console.log('result', result)
         } else {
-          setShowPeriodChangeFailed(true)
-          setShowPeriodChange(false)
+          setShowRoleChangeFailed(true)
+          setShowRoleChange(false)
           setBadEndDate(false)
         }
         // Reload the guest so that the information on the overview page is updated
@@ -214,7 +224,7 @@ export default function GuestRoleInfo({
         reset(data)
       })
       .catch((error) => {
-        setShowPeriodChangeFailed(true)
+        setShowRoleChangeFailed(true)
         console.log('error', error)
       })
   }
@@ -256,14 +266,14 @@ export default function GuestRoleInfo({
           </Typography>
         </>
       )}
-      {showPeriodChange && (
+      {showRoleChange && (
         <Alert severity="success" sx={{ marginBottom: '1rem' }}>
-          {t('guestInfo.periodChanged')}
+          {t('guestInfo.roleChanged')}
         </Alert>
       )}
-      {showPeriodChangeFailed && (
+      {showRoleChangeFailed && (
         <Alert severity="error" sx={{ marginBottom: '1rem' }}>
-          {t('error.changePeriodFailed')}
+          {t('error.changeRoleFailed')}
         </Alert>
       )}
       {badEndDate && (
@@ -348,7 +358,39 @@ export default function GuestRoleInfo({
                 <TableCell align="left">{role.sponsor_name}</TableCell>
                 <TableCell align="left" />
               </TableRow>
-              {displayContactAtUnit && (
+              {allowEdit && displayContactAtUnit && (
+                <TableRow>
+                  <TableCell align="left" sx={{ fontWeight: 'bold' }}>
+                    {t('sponsor.contactPerson')}
+                  </TableCell>
+                  <TableCell>
+                    <TextField
+                      id="contact_person"
+                      defaultValue={role.contact_person_unit}
+                      label={`${t('input.contactPersonUnit')}`}
+                      {...register(`contact_person_unit`)}
+                    />
+                  </TableCell>
+                </TableRow>
+              )}
+              {allowEdit && displayComment && (
+                <TableRow>
+                  <TableCell align="left" sx={{ fontWeight: 'bold' }}>
+                    {t('input.comment')}
+                  </TableCell>
+                  <TableCell>
+                    <TextField
+                      id="comment"
+                      label={`${t('input.comment')}`}
+                      multiline
+                      rows={2}
+                      defaultValue={role.comments}
+                      {...register(`comments`)}
+                    />
+                  </TableCell>
+                </TableRow>
+              )}
+              {!allowEdit && displayContactAtUnit && (
                 <TableRow>
                   <TableCell align="left" sx={{ fontWeight: 'bold' }}>
                     {t('sponsor.contactPerson')}
@@ -357,7 +399,7 @@ export default function GuestRoleInfo({
                   <TableCell align="left" />
                 </TableRow>
               )}
-              {displayComment && (
+              {!allowEdit && displayComment && (
                 <TableRow>
                   <TableCell align="left" sx={{ fontWeight: 'bold' }}>
                     {t('input.comment')}