Show confirmation or error box when changing role period

frontend/public/locales/en/common.json

@@ -50,6 +50,7 @@
     "consentInfoHead": "Consent information",
     "choiceDate": "Choice date",
     "consentName": "Consent type",
+    "periodChanged": "Period changed",
     "registeredInfo": "Registererd information on you",
     "registeredInfoExplanation": "Here is the contact information, roles and consent information that is registered on you.",
     "roleInfoHead": "Roles and periods",
@@ -196,6 +197,7 @@
   },
   "error": {
     "error": "Error",
+    "changePeriodFailed": "Failed to change period",
     "invitationCreationFailedHeader": "Failed to create invite",
     "errorStatusCode": "Status code: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "Message:<1>{{errorBodyText}}</1>",

frontend/public/locales/nb/common.json

@@ -50,6 +50,7 @@
     "consentInfoHead": "Samtykkeinformasjon",
     "choiceDate": "Valgdato",
     "consentName": "Samtykketype",
+    "periodChanged": "Rolleperiode endret",
     "registeredInfo": "Registrert informasjon om deg",
     "registeredInfoExplanation": "Her er en oversikt over kontaktinformasjon, roller og samtykker som er registrert om deg.",
     "roleInfoHead": "Roller og perioder",
@@ -196,6 +197,7 @@
   },
   "error": {
     "error": "Feil",
+    "changePeriodFailed": "Kunne ikke endre periode",
     "invitationCreationFailedHeader": "Kunne ikke opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",

frontend/public/locales/nn/common.json

@@ -50,6 +50,7 @@
     "consentInfoHead": "Samtykkeinformasjon",
     "choiceDate": "Valdato",
     "consentName": "Samtykketype",
+    "periodChanged": "Rolleperiode endra",
     "registeredInfo": "Registrert informasjon om deg",
     "registeredInfoExplanation": "Her er ei oversikt over kontaktinformasjon, roller og samtykke som er registrert om deg.",
     "roleInfoTableText": "Gjesteroller",
@@ -196,6 +197,7 @@
   },
   "error": {
     "error": "Feil",
+    "changePeriodFailed": "Kunne ikkje endre periode",
     "invitationCreationFailedHeader": "Kunne ikkje opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
     "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",

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

 import { useEffect, useState } from 'react'
 import format from 'date-fns/format'
 import { addDays } from 'date-fns/fp'
-import { Button, Table, TableBody, TextField, Typography } from '@mui/material'
+import {
+  Alert,
+  Button,
+  Table,
+  TableBody,
+  TextField,
+  Typography,
+} from '@mui/material'
 import TableHeadMui from '@mui/material/TableHead'
 import { styled } from '@mui/system'
 import TableContainerMui from '@mui/material/TableContainer'
@@ -106,6 +113,9 @@ export default function GuestRoleInfo({
   const [t] = useTranslation('common')
   const { displayContactAtUnit, displayComment } = useFeatureContext()
   const navigate = useNavigate()
+  const [showPeriodChange, setShowPeriodChange] = useState<Boolean>(false)
+  const [showPeriodChangeFailed, setShowPeriodChangeFailed] =
+    useState<Boolean>(false)
   const [role, setRole] = useState<Role>({
     id: '',
     name_nb: '',
@@ -168,6 +178,7 @@ export default function GuestRoleInfo({
       })
       .then((result) => {
         if (result !== null) {
+          setShowPeriodChange(true)
           console.log('result', result)
         }
         // Reload the guest so that the information on the overview page is updated
@@ -177,6 +188,7 @@ export default function GuestRoleInfo({
         reset(data)
       })
       .catch((error) => {
+        setShowPeriodChangeFailed(true)
         console.log('error', error)
       })
   }
@@ -218,6 +230,16 @@ export default function GuestRoleInfo({
           </Typography>
         </>
       )}
+      {showPeriodChange && (
+        <Alert severity="success" sx={{ marginBottom: '1rem' }}>
+          {t('guestInfo.periodChanged')}
+        </Alert>
+      )}
+      {showPeriodChangeFailed && (
+        <Alert severity="error" sx={{ marginBottom: '1rem' }}>
+          {t('error.changePeriodFailed')}
+        </Alert>
+      )}
       <form onSubmit={onSubmit}>
         <TableContainer>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">