feat(service-portal): Signee view for parliamentary signature collection

libs/application/templates/signature-collection/parliamentary-list-creation/src/forms/Done.ts

@@ -62,7 +62,7 @@ export const Done: Form = buildForm({
             buildMessageWithLinkButtonField({
               id: 'done.goToServicePortal',
               title: '',
-              url: '/minarsidur/min-gogn/listar/medmaelasofnun',
+              url: '/minarsidur/min-gogn/listar/althingis-medmaelasofnun',
               buttonTitle: m.linkFieldButtonTitle,
               message: m.linkFieldMessage,
             }),

libs/application/templates/signature-collection/parliamentary-list-signing/src/forms/Done.ts

@@ -45,7 +45,7 @@ export const Done: Form = buildForm({
             buildMessageWithLinkButtonField({
               id: 'done.goToServicePortal',
               title: '',
-              url: '/minarsidur/min-gogn/listar/medmaelasofnun',
+              url: '/minarsidur/min-gogn/listar/althingis-medmaelasofnun',
               buttonTitle: m.linkFieldButtonTitle,
               message: m.linkFieldMessage,
             }),

libs/service-portal/signature-collection/src/lib/constants.ts

@@ -1,6 +1,6 @@
 export const CollectionType = {
   Presidential: 'Forsetakosningar',
-  Parliamentary: 'Alþingiskosningar',
+  Parliamentary: 'Alþingiskosning NÝTT TEST',
 }
 
 // will be fetched later on

libs/service-portal/signature-collection/src/screens/Parliamentary/OwnerView/ViewList/Signees.tsx

@@ -19,7 +19,10 @@ const Signees = () => {
   useNamespaces('sp.signatureCollection')
   const { formatMessage } = useLocale()
   const { pathname } = useLocation()
-  const listId = pathname.replace('/min-gogn/listar/medmaelasofnun/', '')
+  const listId = pathname.replace(
+    '/min-gogn/listar/althingis-medmaelasofnun/',
+    '',
+  )
 
   const [searchTerm, setSearchTerm] = useState('')
   const { listSignees, loadingSignees } = useGetListSignees(listId)

libs/service-portal/signature-collection/src/screens/Parliamentary/OwnerView/index.tsx

@@ -14,10 +14,27 @@ import { useLocale } from '@island.is/localization'
 import { m } from '../../../lib/messages'
 import AddConstituency from './modals/AddConstituency'
 import DeletePerson from './modals/DeletePerson'
+import {
+  useGetListsForOwner,
+  useGetListsForUser,
+  useIsOwner,
+} from '../../../hooks'
+import { useAuth } from '@island.is/auth/react'
+import { SignatureCollection } from '@island.is/api/schema'
 
-const OwnerView = () => {
+const OwnerView = ({
+  currentCollection,
+}: {
+  currentCollection: SignatureCollection
+}) => {
   const navigate = useNavigate()
   const { formatMessage } = useLocale()
+  const { userInfo: user } = useAuth()
+  const { listsForOwner, loadingOwnerLists } = useGetListsForOwner(
+    currentCollection?.id || '',
+  )
+
+  console.log(listsForOwner)
 
   return (
     <Stack space={8}>

libs/service-portal/signature-collection/src/screens/Parliamentary/SignedList/index.tsx

@@ -0,0 +1,146 @@
+import { ActionCard, Box, Button, Text, toast } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { m } from '../../../lib/messages'
+import { Modal } from '@island.is/service-portal/core'
+import { useState } from 'react'
+import { useGetSignedList } from '../../../hooks'
+import format from 'date-fns/format'
+import { useMutation } from '@apollo/client'
+import { unSignList } from '../../../hooks/graphql/mutations'
+import {
+  SignatureCollectionSignedList,
+  SignatureCollectionSuccess,
+} from '@island.is/api/schema'
+
+const SignedList = () => {
+  const { formatMessage } = useLocale()
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+
+  // SignedList is typically singular, although it may consist of multiple entries, which in that case will all be invalid
+  const { signedLists, loadingSignedLists, refetchSignedLists } =
+    useGetSignedList()
+
+  const [unSign, { loading }] = useMutation(unSignList, {
+    variables: {
+      input: {
+        listId:
+          signedLists && signedLists?.length === 1
+            ? signedLists[0].id
+            : undefined,
+      },
+    },
+  })
+
+  const onUnSignList = async () => {
+    try {
+      await unSign().then(({ data }) => {
+        if (
+          (
+            data as any as {
+              signatureCollectionUnsign: SignatureCollectionSuccess
+            }
+          ).signatureCollectionUnsign.success
+        ) {
+          toast.success(formatMessage(m.unSignSuccess))
+          setModalIsOpen(false)
+          refetchSignedLists()
+        } else {
+          setModalIsOpen(false)
+        }
+      })
+    } catch (e) {
+      toast.error(formatMessage(m.unSignError))
+    }
+  }
+
+  return (
+    <Box>
+      {!loadingSignedLists && !!signedLists?.length && (
+        <Box marginTop={[5, 7]}>
+          <Text marginBottom={2}>{formatMessage(m.mySigneeListsHeader)}</Text>
+          {signedLists?.map((list: SignatureCollectionSignedList) => {
+            return (
+              <Box marginBottom={3} key={list.id}>
+                <ActionCard
+                  heading={list.title}
+                  eyebrow={`${
+                    list.isDigital
+                      ? formatMessage(m.signedTime)
+                      : formatMessage(m.uploadedTime)
+                  } ${format(new Date(list.signedDate), 'dd.MM.yyyy')}`}
+                  text={formatMessage(m.collectionTitle)}
+                  cta={
+                    list.canUnsign
+                      ? {
+                          label: formatMessage(m.unSignList),
+                          buttonType: {
+                            variant: 'text',
+                            colorScheme: 'destructive',
+                          },
+                          onClick: () => setModalIsOpen(true),
+                          icon: undefined,
+                        }
+                      : undefined
+                  }
+                  tag={
+                    list.isValid && !list.active
+                      ? {
+                          label: formatMessage(m.collectionClosed),
+                          variant: 'red',
+                          outlined: true,
+                        }
+                      : list.isValid && !list.isDigital
+                      ? {
+                          label: formatMessage(m.paperUploadedSignature),
+                          variant: 'blue',
+                          outlined: true,
+                        }
+                      : !list.isValid
+                      ? {
+                          label: formatMessage(m.signatureIsInvalid),
+                          variant: 'red',
+                          outlined: false,
+                        }
+                      : undefined
+                  }
+                />
+                <Modal
+                  id="unSignList"
+                  isVisible={modalIsOpen}
+                  toggleClose={false}
+                  initialVisibility={false}
+                  onCloseModal={() => setModalIsOpen(false)}
+                >
+                  <Text variant="h2" marginTop={[5, 0]}>
+                    {formatMessage(m.unSignList)}
+                  </Text>
+                  <Text variant="default" marginTop={2}>
+                    {formatMessage(m.unSignModalMessage)}
+                  </Text>
+                  <Box
+                    marginTop={[7, 10]}
+                    marginBottom={5}
+                    display="flex"
+                    justifyContent="center"
+                  >
+                    <Button
+                      loading={loading}
+                      colorScheme="destructive"
+                      onClick={() => {
+                        onUnSignList()
+                      }}
+                    >
+                      {formatMessage(m.unSignModalConfirmButton)}
+                    </Button>
+                  </Box>
+                </Modal>
+              </Box>
+            )
+          })}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default SignedList

libs/service-portal/signature-collection/src/screens/Parliamentary/SigneeView/index.tsx

@@ -1,26 +1,118 @@
-import { ActionCard, Box, Text } from '@island.is/island-ui/core'
+import {
+  ActionCard,
+  AlertMessage,
+  Box,
+  Button,
+  Stack,
+  Text,
+} from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
+import { EmptyState } from '@island.is/service-portal/core'
+import { useGetListsForUser, useGetSignedList } from '../../../hooks'
+import format from 'date-fns/format'
+import { Skeleton } from '../../../skeletons'
+import { useAuth } from '@island.is/auth/react'
+import { sortAlpha } from '@island.is/shared/utils'
 import { m } from '../../../lib/messages'
+import SignedList from '../SignedList'
+import { SignatureCollection } from '../../../types/schema'
+
+const SigneeView = ({
+  currentCollection,
+}: {
+  currentCollection: SignatureCollection
+}) => {
+  const { userInfo: user } = useAuth()
 
-const SigneeView = () => {
   const { formatMessage } = useLocale()
+  const { signedLists, loadingSignedLists } = useGetSignedList()
+  const { listsForUser, loadingUserLists } = useGetListsForUser(
+    currentCollection?.id,
+  )
 
   return (
     <Box>
-      <Text marginBottom={3} variant="h4">
-        {formatMessage(m.mySigneeListsHeader)}
-      </Text>
-      <ActionCard
-        backgroundColor="white"
-        heading={'Listi A - Reykjavík norður'}
-        eyebrow={'Skrifað undir: 07.04.2024'}
-        text={formatMessage(m.parliamentaryElectionsTitle)}
-        tag={{
-          label: formatMessage(m.collectionClosed),
-          variant: 'red',
-          outlined: true,
-        }}
-      />
+      {!user?.profile.actor && !loadingSignedLists && !loadingUserLists ? (
+        <Box>
+          {listsForUser.length === 0 && signedLists.length === 0 && (
+            <Box marginTop={10}>
+              <EmptyState
+                title={m.noCollectionIsActive}
+                description={m.noCollectionIsActiveDescription}
+              />
+            </Box>
+          )}
+          <Box marginTop={[2, 7]}>
+            {/* Signed list */}
+            <SignedList />
+
+            {/* Other available lists */}
+            <Box marginTop={[5, 10]}>
+              {listsForUser.length > 0 && (
+                <Text marginBottom={2}>
+                  {formatMessage(m.mySigneeListsByAreaHeader)}
+                </Text>
+              )}
+
+              <Stack space={3}>
+                {[...listsForUser]?.sort(sortAlpha('title')).map((list) => {
+                  return (
+                    <ActionCard
+                      key={list.id}
+                      backgroundColor="white"
+                      heading={list.title}
+                      eyebrow={
+                        formatMessage(m.endTime) +
+                        ' ' +
+                        format(new Date(list.endTime), 'dd.MM.yyyy')
+                      }
+                      text={formatMessage(m.collectionTitle)}
+                      cta={
+                        new Date(list.endTime) > new Date() && !list.maxReached
+                          ? {
+                              label: formatMessage(m.signList),
+                              variant: 'text',
+                              icon: 'arrowForward',
+                              disabled: !!signedLists.length,
+                              onClick: () => {
+                                window.open(
+                                  `${document.location.origin}${list.slug}`,
+                                )
+                              },
+                            }
+                          : undefined
+                      }
+                      tag={
+                        new Date(list.endTime) < new Date()
+                          ? {
+                              label: formatMessage(m.collectionClosed),
+                              variant: 'red',
+                              outlined: true,
+                            }
+                          : list.maxReached
+                          ? {
+                              label: formatMessage(m.collectionMaxReached),
+                              variant: 'red',
+                              outlined: true,
+                            }
+                          : undefined
+                      }
+                    />
+                  )
+                })}
+              </Stack>
+            </Box>
+          </Box>
+        </Box>
+      ) : user?.profile.actor ? (
+        <AlertMessage
+          type="warning"
+          title={formatMessage(m.actorNoAccessTitle)}
+          message={m.actorNoAccessDescription.defaultMessage}
+        />
+      ) : (
+        <Skeleton />
+      )}
     </Box>
   )
 }

libs/service-portal/signature-collection/src/screens/Parliamentary/index.tsx

@@ -1,24 +1,36 @@
 import { Box } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
-import { IntroHeader, THJODSKRA_SLUG } from '@island.is/service-portal/core'
+import { IntroHeader } from '@island.is/service-portal/core'
 import { m } from '../../lib/messages'
 import OwnerView from './OwnerView'
 import SigneeView from './SigneeView'
+import { useGetCurrentCollection, useIsOwner } from '../../hooks'
+import { Skeleton } from '../../skeletons'
 
 const SignatureListsParliamentary = () => {
   const { formatMessage } = useLocale()
 
+  const { isOwner, loadingIsOwner } = useIsOwner()
+  const { currentCollection, loadingCurrentCollection } =
+    useGetCurrentCollection()
+
   return (
     <Box>
-      <Box display={'flex'}>
-        <IntroHeader
-          title={formatMessage(m.pageTitleParliamentary)}
-          intro={formatMessage(m.pageDescriptionParliamentary)}
-          serviceProviderTooltip={formatMessage(m.infoProviderTooltip)}
-          serviceProviderSlug={THJODSKRA_SLUG}
-        />
-      </Box>
-      <OwnerView />
+      <IntroHeader
+        title={formatMessage(m.pageTitle)}
+        intro={formatMessage(m.pageDescriptionSignee)}
+      />
+      {!loadingIsOwner && !loadingCurrentCollection ? (
+        <Box>
+          {isOwner.success ? (
+            <OwnerView currentCollection={currentCollection} />
+          ) : (
+            <SigneeView currentCollection={currentCollection} />
+          )}
+        </Box>
+      ) : (
+        <Skeleton />
+      )}
     </Box>
   )
 }