Changing sections on sponsorpage

frontend/public/locales/en/common.json

@@ -53,6 +53,12 @@
   "activeGuests": "Your active guests",
   "activeGuestsDescription": "Make changes to your existing guests",
   "noActiveGuests": "No active guests",
+  "sentInvitations": "Sent invitations",
+  "sentInvitationsDescription": "Invitations awaiting response from guest.",
+  "noInvitations": "No invitations",
+  "status": "Status",
+  "active": "Active",
+  "expired": "Expired",
   "details": "Details",
   "nationalIdNumber": "National ID number",
   "validation": {

frontend/public/locales/nb/common.json

@@ -52,6 +52,12 @@
   "activeGuests": "Dine aktive gjester",
   "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
   "noActiveGuests": "Ingen aktive gjester",
+  "sentInvitations": "Sendte invitasjoner",
+  "sentInvitationsDescription": "Invitasjoner som venter på at gjesten skal ferdigstille registreringen.",
+  "noInvitations": "Ingen invitasjoner",
+  "status": "Status",
+  "active": "Aktiv",
+  "expired": "Utgått",
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {

frontend/public/locales/nn/common.json

@@ -53,6 +53,12 @@
   "activeGuests": "Dine aktive gjester",
   "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
   "noActiveGuests": "Ingen aktive gjester",
+  "sentInvitations": "Sendte invitasjonar",
+  "sentInvitationsDescription": "Invitasjonar som venter på at gjesten skal ferdigstille registreringa.",
+  "noInvitations": "Ingen invitasjonar",
+  "status": "Status",
+  "active": "Aktiv",
+  "expired": "Utgått",
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {

frontend/src/interfaces/index.ts

@@ -13,6 +13,8 @@ export type Guest = {
   active: boolean
   ou_nb: string
   ou_en: string
+  registered: boolean
+  verified: boolean
 }
 
 export interface FetchedGuest {
@@ -31,4 +33,6 @@ export interface FetchedGuest {
   ou_nb: string
   ou_en: string
   active: boolean
+  registered: boolean
+  verified: boolean
 }

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -24,11 +24,13 @@ import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 interface GuestProps {
   persons: Guest[]
 }
+
 interface PersonLineProps {
   person: Guest
+  showStatusColumn?: boolean
 }
 
-const PersonLine = ({ person }: PersonLineProps) => {
+const PersonLine = ({ person, showStatusColumn }: PersonLineProps) => {
   const [t, i18n] = useTranslation(['common'])
 
   return (
@@ -42,6 +44,18 @@ const PersonLine = ({ person }: PersonLineProps) => {
       <TableCell align="left">
         {i18n.language === 'en' ? person.role_en : person.role_nb}
       </TableCell>
+
+      {showStatusColumn &&
+        (person.active ? (
+          <TableCell sx={{ color: 'green' }} align="left">
+            {t('common:active')}
+          </TableCell>
+        ) : (
+          <TableCell sx={{ color: 'red' }} align="left">
+            {t('common:expired')}
+          </TableCell>
+        ))}
+
       <TableCell align="left">
         {person.start_date ? format(person.start_date, 'yyyy-MM-dd') : null} -{' '}
         {format(person.end_date, 'yyyy-MM-dd')}
@@ -62,13 +76,68 @@ const PersonLine = ({ person }: PersonLineProps) => {
   )
 }
 
+PersonLine.defaultProps = {
+  showStatusColumn: false,
+}
+
+const WaitingForGuestRegistration = ({ persons }: GuestProps) => {
+  const [activeExpanded, setActiveExpanded] = useState(false)
+
+  // Show guests that have not responded to the invite yet
+  let guests = persons.length > 0 ? persons : []
+
+  if (guests.length > 0) {
+    guests = guests.filter((person) => !person.registered)
+  }
+  const [t] = useTranslation(['common'])
+  return (
+    <Accordion
+      expanded={activeExpanded}
+      onChange={() => {
+        setActiveExpanded(!activeExpanded)
+      }}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h4>{t('common:sentInvitations')}</h4>
+      </AccordionSummary>
+      <AccordionDetails>
+        <p>{t('common:sentInvitationsDescription')}</p>
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 650 }} aria-label="simple table">
+            <TableHead sx={{ backgroundColor: 'primary.light' }}>
+              <TableRow>
+                <TableCell>{t('common:name')}</TableCell>
+                <TableCell align="left">{t('common:role')}</TableCell>
+                <TableCell align="left">{t('common:period')}</TableCell>
+                <TableCell align="left">{t('common:ou')}</TableCell>
+                <TableCell align="left">{t('common:choice')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {guests.map((person) => (
+                <PersonLine person={person} />
+              ))}
+
+              <TableRow>
+                <TableCell>
+                  {guests.length > 0 ? '' : t('common:noActiveGuests')}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
 const ActiveGuests = ({ persons }: GuestProps) => {
   const [activeExpanded, setActiveExpanded] = useState(false)
 
-  // Only show active people
+  // Show all verified guests
   let guests = persons.length > 0 ? persons : []
   if (guests.length > 0) {
-    guests = guests.filter((person) => person.active)
+    guests = guests.filter((person) => person.verified)
   }
   const [t] = useTranslation(['common'])
   return (
@@ -89,6 +158,9 @@ const ActiveGuests = ({ persons }: GuestProps) => {
               <TableRow>
                 <TableCell>{t('common:name')}</TableCell>
                 <TableCell align="left">{t('common:role')}</TableCell>
+
+                <TableCell align="left">{t('common:status')}</TableCell>
+
                 <TableCell align="left">{t('common:period')}</TableCell>
                 <TableCell align="left">{t('common:ou')}</TableCell>
                 <TableCell align="left">{t('common:choice')}</TableCell>
@@ -96,9 +168,8 @@ const ActiveGuests = ({ persons }: GuestProps) => {
             </TableHead>
             <TableBody>
               {guests.map((person) => (
-                <PersonLine person={person} />
+                <PersonLine person={person} showStatusColumn />
               ))}
-
               <TableRow>
                 <TableCell>
                   {guests.length > 0 ? '' : t('common:noActiveGuests')}
@@ -115,10 +186,10 @@ const ActiveGuests = ({ persons }: GuestProps) => {
 const WaitingGuests = ({ persons }: GuestProps) => {
   const [waitingExpanded, setWaitingExpanded] = useState(false)
 
-  // Only show non-active people
+  // Show guests that have completed the registration but are not verified yet
   let guests = persons.length > 0 ? persons : []
   if (guests.length > 0) {
-    guests = guests.filter((person) => !person.active)
+    guests = guests.filter((person) => person.registered && !person.verified)
   }
   const [t] = useTranslation(['common'])
 
@@ -172,6 +243,7 @@ function FrontPage({ guests }: FrontPageProps) {
   return (
     <Page>
       <SponsorGuestButtons yourGuestsActive />
+      <WaitingForGuestRegistration persons={guests} />
       <WaitingGuests persons={guests} />
       <ActiveGuests persons={guests} />
     </Page>

frontend/src/routes/sponsor/index.tsx

@@ -31,6 +31,8 @@ function Sponsor() {
             active: person.active,
             ou_nb: person.ou_nb,
             ou_en: person.ou_en,
+            registered: person.registered,
+            verified: person.verified,
           }))
         )
       } else {

gregui/views.py

@@ -114,6 +114,8 @@ class GuestInfoView(APIView):
                         "ou_nb": i.orgunit_id.name_nb,
                         "ou_en": i.orgunit_id.name_en,
                         "active": i.person.is_registered and i.person.is_verified,
+                        "registered": i.person.is_registered,
+                        "verified": i.person.is_verified
                     }
                     for i in Role.objects.filter(sponsor_id=user.sponsor)
                 ]