Merge branch 'update_sponsor_page_properties' into 'master'

Adding section on sponsorpage

See merge request !119

frontend/public/locales/en/common.json

@@ -58,6 +58,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

@@ -57,6 +57,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

@@ -58,6 +58,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

@@ -6,6 +6,8 @@ export type Guest = {
   mobile: string
   fnr: string
   active: boolean
+  registered: boolean
+  verified: boolean
   roles: Role[]
 }
 
@@ -17,6 +19,8 @@ export interface FetchedGuest {
   mobile: string
   fnr: string
   active: boolean
+  registered: boolean
+  verified: boolean
   roles: FetchedRole[]
 }
 

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

@@ -24,12 +24,14 @@ import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 interface GuestProps {
   persons: Guest[]
 }
+
 interface PersonLineProps {
   person: Guest
   role: Role
+  showStatusColumn?: boolean
 }
 
-const PersonLine = ({ person, role }: PersonLineProps) => {
+const PersonLine = ({ person, role, showStatusColumn }: PersonLineProps) => {
   const [t, i18n] = useTranslation(['common'])
 
   return (
@@ -43,6 +45,18 @@ const PersonLine = ({ person, role }: PersonLineProps) => {
       <TableCell align="left">
         {i18n.language === 'en' ? role.name_en : role.name_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">
         {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
         {format(role.end_date, 'yyyy-MM-dd')}
@@ -63,13 +77,78 @@ const PersonLine = ({ person, role }: 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.length > 0 ? (
+                guests.map((person) =>
+                  person.roles ? (
+                    person.roles.map((role) => (
+                      <PersonLine role={role} 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 (
@@ -90,6 +169,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>
@@ -100,7 +182,11 @@ const ActiveGuests = ({ persons }: GuestProps) => {
                 guests.map((person) =>
                   person.roles ? (
                     person.roles.map((role) => (
-                      <PersonLine role={role} person={person} />
+                      <PersonLine
+                        role={role}
+                        person={person}
+                        showStatusColumn
+                      />
                     ))
                   ) : (
                     <></>
@@ -126,10 +212,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'])
 
@@ -193,6 +279,7 @@ function FrontPage({ guests }: FrontPageProps) {
   return (
     <Page>
       <SponsorGuestButtons yourGuestsActive />
+      <WaitingForGuestRegistration persons={guests} />
       <WaitingGuests persons={guests} />
       <ActiveGuests persons={guests} />
     </Page>

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

@@ -67,6 +67,8 @@ export default function GuestInfo() {
     fnr: '',
     mobile: '',
     active: false,
+    registered: false,
+    verified: false,
     roles: [],
   })
   const [roles, setRoles] = useState<Role[]>([])
@@ -84,6 +86,8 @@ export default function GuestInfo() {
           mobile: rjson.mobile,
           fnr: rjson.fnr,
           active: rjson.active,
+          registered: rjson.registered,
+          verified: rjson.verified,
           roles: rjson.roles,
         })
         setRoles(rjson.roles.map((role: FetchedRole) => parseRole(role)))

frontend/src/routes/sponsor/index.tsx

@@ -27,6 +27,8 @@ function Sponsor() {
               fnr: person.fnr,
               active: person.active,
               roles: person.roles.map((role) => parseRole(role)),
+              registered: person.registered,
+              verified: person.verified,
             })
           )
         )

gregui/views.py

@@ -106,6 +106,8 @@ class GuestInfoView(APIView):
                         "mobile": person.private_mobile and person.private_mobile.value,
                         "fnr": person.fnr and "".join((person.fnr.value[:-5], "*****")),
                         "active": person.is_registered and person.is_verified,
+                        "registered": person.is_registered,
+                        "verified": person.is_verified,
                         "roles": [
                             {
                                 "id": role.id,