GREG-195: Adding confirm dialog for end role button

frontend/public/locales/en/common.json

@@ -39,6 +39,10 @@
     "modifyEnd": "Change end date",
     "endNow": "End role"
   },
+  "endRoleDialog": {
+    "title": "End role",
+    "text": "Ending the role will cause the guest to loose access if there no other active roles registered. Are you sure you want to end the role?"
+  },
   "guestInfo": {
     "contactInfo": "Contact information",
     "contactInfoBody": "A guest is only considered active if at least one identification number has been verified.",

frontend/public/locales/nb/common.json

@@ -39,6 +39,10 @@
     "modifyEnd": "Endre sluttdato",
     "endNow": "Avslutt rolle"
   },
+  "endRoleDialog": {
+    "title": "Avslutt rolle",
+    "text": "Dersom du avslutter rollen vil gjesten miste tilgang om det ikke eksisterer andre aktive roller. Vil du avslutte rollen?"
+  },
   "guestInfo": {
     "contactInfo": "Kontaktinformasjon",
     "contactInfoBody": "For at en gjest skal regnes som aktiv må minst ett identifikasjonsnummer være godkjent.",

frontend/public/locales/nn/common.json

@@ -39,6 +39,10 @@
     "modifyEnd": "Endre sluttdato",
     "endNow": "Avslutt rolle"
   },
+  "endRoleDialog": {
+    "title": "Avslutt rolle",
+    "text": "Dersom du avsluttar rolla vil gjesten miste tilgang om det ikkje eksisterer andre aktive roller. Vil du avslutte rolla?"
+  },
   "guestInfo": {
     "contactInfo": "Kontaktinformasjon",
     "contactInfoBody": "For at ein gjest skal reknast som aktiv må minst ett identifikasjonsnummer vere godkjend.",

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

@@ -11,12 +11,13 @@ import TableCellMui from '@mui/material/TableCell'
 import Page from 'components/page'
 import { Guest, Role } from 'interfaces'
 import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { DatePicker } from '@mui/lab'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { getRoleName, getRoleOuName, submitJsonOpts } from 'utils'
 import { useFeatureContext } from 'contexts/featureContext'
+import ConfirmDialog from '../../../../components/confirmDialog'
 
 interface GuestRoleInfoProps {
   guest: Guest
@@ -97,6 +98,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
   const [t] = useTranslation('common')
   const { displayContactAtUnit, displayComment } = useFeatureContext()
+  const history = useHistory()
   const [role, setRole] = useState<Role>({
     id: '',
     name_nb: '',
@@ -114,9 +116,15 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   const todayPlusMaxDays = addDays(role.max_days)(today)
 
   // Make a function for use with onClick of the end role button
-  const endPeriod = () => () => {
-    role.end_date = today
-    endPeriodPost(id, { end_date: today })
+  const endPeriod = () => {
+    // Set the role to have ended yesterday so that the change is immediate.
+    // If the role was set to end today, the change will not be active
+    // until the next date since the end date is inclusive
+    const newEndDate = addDays(-1)(today)
+    role.end_date = newEndDate
+    endPeriodPost(id, { end_date: newEndDate })
+    // Go back to guest overview page
+    history.push(`/sponsor/guest/${guest.pid}`)
   }
 
   // Submit function for the save button
@@ -151,6 +159,8 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
     formState: { isDirty, isValid },
   } = useForm<RoleFormData>({ mode: 'onChange' })
   const onSubmit = handleSubmit(submit)
+  const [showEndRoleConfirmationDialog, setShowEndRoleConfirmationDialog] =
+    useState(false)
 
   // Find the role info relevant for this page
   const getRoleInfo = () => {
@@ -268,9 +278,23 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
         >
           {t('button.save')}
         </Button>{' '}
-        <Button color="primary" onClick={endPeriod()}>
+        {/* If the role has already expired the role end button is disabled */}
+        <Button
+          aria-label={t('sponsor.endNow')}
+          color="primary"
+          disabled={role.end_date < today}
+          onClick={() => setShowEndRoleConfirmationDialog(true)}
+        >
           {t('sponsor.endNow')}
         </Button>
+        <ConfirmDialog
+          title={t('endRoleDialog.title')}
+          open={showEndRoleConfirmationDialog}
+          setOpen={setShowEndRoleConfirmationDialog}
+          onConfirm={endPeriod}
+        >
+          {t('endRoleDialog.text')}
+        </ConfirmDialog>
       </form>
     </Page>
   )