feat(j-s): Service announcement for defenders

apps/judicial-system/web/src/components/index.ts

@@ -63,6 +63,7 @@ export { default as RulingAccordionItem } from './AccordionItems/RulingAccordion
 export { default as RulingInput } from './RulingInput/RulingInput'
 export { default as SectionHeading } from './SectionHeading/SectionHeading'
 export { default as ServiceAnnouncement } from './ServiceAnnouncement/ServiceAnnouncement'
+export { strings as serviceAnnouncementStrings } from './ServiceAnnouncement/ServiceAnnouncement.strings'
 export { default as ServiceInterruptionBanner } from './ServiceInterruptionBanner/ServiceInterruptionBanner'
 export { default as SignedDocument } from './SignedDocument/SignedDocument'
 export { default as OverviewHeader } from './OverviewHeader/OverviewHeader'

apps/judicial-system/web/src/routes/Shared/IndictmentOverview/IndictmentOverview.tsx

@@ -2,13 +2,17 @@ import { FC, useCallback, useContext, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { useRouter } from 'next/router'
 
-import { Accordion, Box, Button } from '@island.is/island-ui/core'
+import { Accordion, AlertMessage, Box, Button } from '@island.is/island-ui/core'
 import * as constants from '@island.is/judicial-system/consts'
-import { normalizeAndFormatNationalId } from '@island.is/judicial-system/formatters'
+import {
+  formatDate,
+  normalizeAndFormatNationalId,
+} from '@island.is/judicial-system/formatters'
 import {
   isCompletedCase,
   isDefenceUser,
   isProsecutionUser,
+  isSuccessfulServiceStatus,
 } from '@island.is/judicial-system/types'
 import { titles } from '@island.is/judicial-system-web/messages'
 import {
@@ -27,24 +31,63 @@ import {
   PageTitle,
   useIndictmentsLawsBroken,
   UserContext,
+  serviceAnnouncementStrings,
 } from '@island.is/judicial-system-web/src/components'
 import {
   CaseIndictmentRulingDecision,
   CaseState,
+  Defendant,
   IndictmentDecision,
+  ServiceStatus,
+  Subpoena,
   UserRole,
 } from '@island.is/judicial-system-web/src/graphql/schema'
 
 import { ReviewDecision } from '../../PublicProsecutor/components/ReviewDecision/ReviewDecision'
 import { strings } from './IndictmentOverview.strings'
 
+interface ServiceAnnouncementProps {
+  defendant: Defendant
+  subpoena: Subpoena
+}
+
+const ServiceAnnouncement: FC<ServiceAnnouncementProps> = (props) => {
+  const { defendant, subpoena } = props
+  const { formatMessage } = useIntl()
+
+  const getTitle = (defendantName?: string | null): string => {
+    const successMessage = formatMessage(
+      serviceAnnouncementStrings.serviceStatusSuccess,
+    )
+
+    return defendantName
+      ? `${successMessage} - ${defendantName}`
+      : successMessage
+  }
+
+  const getMessage = (
+    servedBy?: string | null,
+    serviceDate?: string | null,
+  ): string => {
+    return [servedBy, formatDate(serviceDate, 'Pp')].filter(Boolean).join(', ')
+  }
+
+  return (
+    <AlertMessage
+      type="success"
+      title={getTitle(defendant.name)}
+      message={getMessage(subpoena.servedBy, subpoena.serviceDate)}
+    />
+  )
+}
+
 const IndictmentOverview: FC = () => {
-  const router = useRouter()
   const { workingCase, isLoadingWorkingCase, caseNotFound } =
     useContext(FormContext)
-  const { user } = useContext(UserContext)
 
+  const { user } = useContext(UserContext)
   const { formatMessage } = useIntl()
+  const router = useRouter()
   const lawsBroken = useIndictmentsLawsBroken(workingCase)
   const caseHasBeenReceivedByCourt = workingCase.state === CaseState.RECEIVED
   const latestDate = workingCase.courtDate ?? workingCase.arraignmentDate
@@ -53,10 +96,16 @@ const IndictmentOverview: FC = () => {
   const [modalVisible, setModalVisible] = useState<boolean>(false)
   const [isReviewDecisionSelected, setIsReviewDecisionSelected] =
     useState(false)
+
+  const hasLawsBroken = lawsBroken.size > 0
+  const hasMergeCases =
+    workingCase.mergedCases && workingCase.mergedCases.length > 0
+
   const shouldDisplayReviewDecision =
     isCompletedCase(workingCase.state) &&
     workingCase.indictmentReviewer?.id === user?.id &&
     Boolean(!workingCase.indictmentReviewDecision)
+
   const canAddFiles =
     !isCompletedCase(workingCase.state) &&
     isDefenceUser(user) &&
@@ -69,6 +118,7 @@ const IndictmentOverview: FC = () => {
     ) &&
     workingCase.indictmentDecision !==
       IndictmentDecision.POSTPONING_UNTIL_VERDICT
+
   const shouldDisplayGeneratedPdfFiles =
     isProsecutionUser(user) ||
     workingCase.defendants?.some(
@@ -96,10 +146,6 @@ const IndictmentOverview: FC = () => {
     [router, workingCase.id],
   )
 
-  const hasLawsBroken = lawsBroken.size > 0
-  const hasMergeCases =
-    workingCase.mergedCases && workingCase.mergedCases.length > 0
-
   return (
     <PageLayout
       workingCase={workingCase}
@@ -124,6 +170,21 @@ const IndictmentOverview: FC = () => {
             : formatMessage(strings.inProgressTitle)}
         </PageTitle>
         <CourtCaseInfo workingCase={workingCase} />
+        {isDefenceUser(user) &&
+          workingCase.defendants?.map((defendant) =>
+            defendant.subpoenas?.map(
+              (subpoena) =>
+                isSuccessfulServiceStatus(subpoena.serviceStatus) && (
+                  <Box marginBottom={2}>
+                    <ServiceAnnouncement
+                      key={`${defendant.id}${subpoena.id}`}
+                      defendant={defendant}
+                      subpoena={subpoena}
+                    />
+                  </Box>
+                ),
+            ),
+          )}
         {caseHasBeenReceivedByCourt &&
           workingCase.court &&
           latestDate?.date &&

libs/island-ui/core/src/lib/AlertMessage/AlertMessage.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react'
+import { FC, PropsWithChildren, ReactNode, isValidElement } from 'react'
 import { Text } from '../Text/Text'
 import { Icon } from '../IconRC/Icon'
 import { Icon as IconType } from '../IconRC/iconMap'
 import { Colors } from '@island.is/island-ui/theme'
 import { Box } from '../Box/Box'
-import { Stack } from '../Stack/Stack'
 
 export type AlertMessageType =
   | 'error'
@@ -55,33 +54,30 @@ const variantStyles: VariantStyles = {
   },
 }
 
-export interface AlertMessageProps {
+interface AlertMessageProps {
   type: AlertMessageType
   testid?: string
-  action?: React.ReactNode
 }
 
 type TitleAndOrMessage =
   | {
       title: string
-      message: string | React.ReactNode
+      message: string | ReactNode
     }
   | {
       title?: never
-      message: string | React.ReactNode
+      message: string | ReactNode
     }
   | {
       title: string
       message?: never
     }
 
-export const AlertMessage: React.FC<
-  React.PropsWithChildren<AlertMessageProps & TitleAndOrMessage>
-> = ({ type, title, message, action, testid }) => {
+export const AlertMessage: FC<
+  PropsWithChildren<AlertMessageProps & TitleAndOrMessage>
+> = ({ type, title, message, testid }) => {
   const variant = variantStyles[type]
 
-  const onlyMessage = !title && !!message
-
   return (
     <Box
       padding={[1, 1, 2]}
@@ -91,7 +87,7 @@ export const AlertMessage: React.FC<
       borderWidth="standard"
       data-testid={testid ?? 'alertMessage'}
     >
-      <Box display="flex" alignItems={onlyMessage ? 'center' : 'flexStart'}>
+      <Box display="flex" alignItems="flexStart">
         {variant.icon && (
           <Box display="flex" marginRight={[1, 1, 2]}>
             <Icon
@@ -102,34 +98,28 @@ export const AlertMessage: React.FC<
             />
           </Box>
         )}
-        <Box display="flex" width="full" flexDirection="column">
-          <Stack space={1}>
-            {!!title && (
-              <Text as="h5" variant="h5">
-                {title}
-              </Text>
-            )}
+        <Box
+          display="flex"
+          width="full"
+          flexDirection="column"
+          alignSelf="center"
+        >
+          {title && (
+            <Text as="h5" variant="h5" marginBottom={message ? 1 : 0}>
+              {title}
+            </Text>
+          )}
+          {message && (
             <Box display="flex" alignItems="center">
-              {message &&
-                (React.isValidElement(message) ? (
-                  message
-                ) : (
-                  <Box flexGrow={1}>
-                    <Text variant="small">{message}</Text>
-                  </Box>
-                ))}
-              {action && (
-                <Box
-                  display="flex"
-                  style={{ alignSelf: 'flex-end' }}
-                  justifyContent="flexEnd"
-                  alignItems="flexEnd"
-                >
-                  {action}
+              {isValidElement(message) ? (
+                message
+              ) : (
+                <Box flexGrow={1}>
+                  <Text variant="small">{message}</Text>
                 </Box>
               )}
             </Box>
-          </Stack>
+          )}
         </Box>
       </Box>
     </Box>

libs/island-ui/core/src/lib/Box/Box.tsx

@@ -30,6 +30,7 @@ export const Box = forwardRef<HTMLElement, BoxProps & TestSupport>(
       columnGap,
       rowGap,
       alignItems,
+      alignSelf,
       justifyContent,
       textAlign,
       border,
@@ -93,6 +94,7 @@ export const Box = forwardRef<HTMLElement, BoxProps & TestSupport>(
       columnGap,
       rowGap,
       alignItems,
+      alignSelf,
       justifyContent,
       textAlign,
       border,

libs/island-ui/core/src/lib/Box/useBoxStyles.css.ts

@@ -326,6 +326,46 @@ export const alignItemsXl = styleVariants(
   ),
 )
 
+const alignSelfRules = {
+  flexStart: 'flex-start',
+  center: 'center',
+  flexEnd: 'flex-end',
+  baseline: 'baseline',
+  stretch: 'stretch',
+}
+export const alignSelf = styleVariants(
+  mapToStyleProperty(alignSelfRules, 'alignSelf'),
+)
+
+export const alignSelfSm = styleVariants(
+  mapToStyleProperty(alignSelfRules, 'alignSelf', (value, propertyName) =>
+    themeUtils.responsiveStyle({
+      sm: { [propertyName]: value },
+    }),
+  ),
+)
+export const alignSelfMd = styleVariants(
+  mapToStyleProperty(alignSelfRules, 'alignSelf', (value, propertyName) =>
+    themeUtils.responsiveStyle({
+      md: { [propertyName]: value },
+    }),
+  ),
+)
+export const alignSelfLg = styleVariants(
+  mapToStyleProperty(alignSelfRules, 'alignSelf', (value, propertyName) =>
+    themeUtils.responsiveStyle({
+      lg: { [propertyName]: value },
+    }),
+  ),
+)
+export const alignSelfXl = styleVariants(
+  mapToStyleProperty(alignSelfRules, 'alignSelf', (value, propertyName) =>
+    themeUtils.responsiveStyle({
+      xl: { [propertyName]: value },
+    }),
+  ),
+)
+
 const justifyContentRules = {
   flexStart: 'flex-start',
   center: 'center',

libs/island-ui/core/src/lib/Box/useBoxStyles.ts

@@ -35,6 +35,7 @@ export interface UseBoxStylesProps {
   flexShrink?: keyof typeof styleRefs.flexShrink
   flexGrow?: keyof typeof styleRefs.flexGrow
   alignItems?: ResponsiveProp<keyof typeof styleRefs.alignItems>
+  alignSelf?: ResponsiveProp<keyof typeof styleRefs.alignSelf>
   justifyContent?: ResponsiveProp<keyof typeof styleRefs.justifyContent>
   textAlign?: ResponsiveProp<keyof typeof styleRefs.textAlign>
   columnGap?: ResponsiveSpace
@@ -98,6 +99,7 @@ export const useBoxStyles = ({
   rowGap,
   columnGap,
   alignItems,
+  alignSelf,
   justifyContent,
   textAlign,
   border,
@@ -346,6 +348,15 @@ export const useBoxStyles = ({
         styles.alignItemsLg,
         styles.alignItemsXl,
       ),
+    alignSelf !== undefined &&
+      resolveResponsiveProp(
+        alignSelf,
+        styles.alignSelf,
+        styles.alignSelfSm,
+        styles.alignSelfMd,
+        styles.alignSelfLg,
+        styles.alignSelfXl,
+      ),
     justifyContent !== undefined &&
       resolveResponsiveProp(
         justifyContent,