feat(ojoi): Rejected state and improvements (#16574)

* Rejected application now go to appropriate state.

* Added action cards to application, and users can directly create a new application after they submit one.

* Updating signatures markup, adding links to go navigate to screen from last screen.

* Fixed issues found during design review

* New method that fetches case data for submitted applications.

* Removed console log

* Add hardcoded string to messages

* Added more strings to messages

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/screens/OfficialJournalOfIceland/OJOISearch.tsx

@@ -257,13 +257,6 @@ const OJOISearchPage: CustomScreen<OJOISearchProps> = ({
     [debouncedSearch],
   )
 
-  const defaultDepartment = departmentsOptions.find(
-    (d) => d.value === defaultSearchParams.deild,
-  )
-
-  console.log(defaultSearchParams)
-  console.log('defaultdepartment', defaultDepartment)
-
   return (
     <OJOIWrapper
       pageTitle={formatMessage(m.search.title)}

libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.resolver.ts

@@ -25,6 +25,8 @@ import { DeleteApplicationAttachmentInput } from '../models/deleteApplicationAtt
 import type { User } from '@island.is/auth-nest-tools'
 import { GetUserInvolvedPartiesResponse } from '../models/getUserInvolvedParties.response'
 import { GetUserInvolvedPartiesInput } from '../models/getUserInvolvedParties.input'
+import { OJOIAIdInput } from '../models/id.input'
+import { OJOIAApplicationCaseResponse } from '../models/applicationCase.response'
 
 @Scopes(ApiScope.internal)
 @UseGuards(IdsUserGuard, ScopesGuard)
@@ -123,4 +125,14 @@ export class OfficialJournalOfIcelandApplicationResolver {
   ) {
     return this.ojoiApplicationService.getUserInvolvedParties(input, user)
   }
+
+  @Query(() => OJOIAApplicationCaseResponse, {
+    name: 'OJOIAGetApplicationCase',
+  })
+  getApplicationCase(
+    @Args('input') input: OJOIAIdInput,
+    @CurrentUser() user: User,
+  ) {
+    return this.ojoiApplicationService.getApplicationCase(input.id, user)
+  }
 }

libs/api/domains/official-journal-of-iceland-application/src/lib/ojoiApplication.service.ts

@@ -23,6 +23,7 @@ import {
   CommentDirection,
   GetCommentsResponse,
 } from '../models/getComments.response'
+import { OJOIAApplicationCaseResponse } from '../models/applicationCase.response'
 
 const LOG_CATEGORY = 'official-journal-of-iceland-application'
 
@@ -207,4 +208,34 @@ export class OfficialJournalOfIcelandApplicationService {
       user,
     )
   }
+
+  async getApplicationCase(
+    id: string,
+    user: User,
+  ): Promise<OJOIAApplicationCaseResponse> {
+    const { applicationCase } =
+      await this.ojoiApplicationService.getApplicationCase(
+        {
+          id,
+        },
+        user,
+      )
+
+    let title = 'Óþekkt'
+
+    if ('title' in applicationCase.status) {
+      title = applicationCase.status.title as string
+    }
+
+    const mapped: OJOIAApplicationCaseResponse = {
+      department: applicationCase.department.title,
+      type: applicationCase.type.title,
+      categories: applicationCase.categories.map((c) => c.title),
+      html: applicationCase.html,
+      status: title,
+      communicationStatus: applicationCase.communicationStatus.title,
+    }
+
+    return mapped
+  }
 }

libs/api/domains/official-journal-of-iceland-application/src/models/applicationCase.response.ts

@@ -0,0 +1,22 @@
+import { Field, ObjectType } from '@nestjs/graphql'
+
+@ObjectType('OJOIAApplicationCaseResponse')
+export class OJOIAApplicationCaseResponse {
+  @Field()
+  department!: string
+
+  @Field()
+  type!: string
+
+  @Field()
+  status!: string
+
+  @Field()
+  communicationStatus!: string
+
+  @Field(() => [String])
+  categories!: string[]
+
+  @Field()
+  html!: string
+}

libs/api/domains/official-journal-of-iceland-application/src/models/id.input.ts

@@ -0,0 +1,9 @@
+import { Field, InputType, ID } from '@nestjs/graphql'
+
+@InputType('OJOIAIdInput', {
+  description: 'Input dto that represents the id of the application',
+})
+export class OJOIAIdInput {
+  @Field(() => ID)
+  id!: string
+}

libs/application/templates/official-journal-of-iceland/src/components/communicationChannels/AddChannel.tsx

@@ -10,13 +10,15 @@ import { InputFields } from '../../lib/types'
 
 type Props = {
   applicationId: string
+  defaultName?: string
   defaultEmail?: string
   defaultPhone?: string
   defaultVisible?: boolean
 }
 
 export const AddChannel = ({
   applicationId,
+  defaultName,
   defaultEmail,
   defaultPhone,
   defaultVisible,
@@ -26,25 +28,28 @@ export const AddChannel = ({
   })
   const { formatMessage: f } = useLocale()
 
+  const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [phone, setPhone] = useState('')
   const [isVisible, setIsVisible] = useState(defaultVisible ?? false)
 
   useEffect(() => {
+    setName(defaultName ?? name)
     setEmail(defaultEmail ?? email)
     setPhone(defaultPhone ?? phone)
     setIsVisible(defaultVisible ?? false)
-  }, [defaultEmail, defaultPhone, defaultVisible])
+  }, [defaultName, defaultEmail, defaultPhone, defaultVisible])
 
   const onAddChannel = () => {
     const currentAnswers = structuredClone(application.answers)
     const currentChannels = currentAnswers.advert?.channels ?? []
     const updatedAnswers = set(currentAnswers, InputFields.advert.channels, [
       ...currentChannels,
-      { email, phone },
+      { name, email, phone },
     ])
 
     updateApplication(updatedAnswers)
+    setName('')
     setEmail('')
     setPhone('')
   }
@@ -58,6 +63,16 @@ export const AddChannel = ({
         width="full"
       >
         <Box className={styles.contentWrap} marginBottom={5}>
+          <Box className={styles.emailWrap}>
+            <Input
+              size="xs"
+              name="name"
+              type="text"
+              value={name}
+              label={f(general.name)}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Box>
           <Box className={styles.emailWrap}>
             <Input
               size="xs"
@@ -84,6 +99,7 @@ export const AddChannel = ({
             variant="ghost"
             onClick={() => {
               setIsVisible(!isVisible)
+              setName('')
               setEmail('')
               setPhone('')
             }}

libs/application/templates/official-journal-of-iceland/src/components/communicationChannels/ChannelList.tsx

@@ -4,10 +4,11 @@ import { general } from '../../lib/messages'
 import { useApplication } from '../../hooks/useUpdateApplication'
 import { InputFields } from '../../lib/types'
 import set from 'lodash/set'
+import { useAuth } from '@island.is/auth/react'
 
 type Props = {
   applicationId: string
-  onEditChannel: (email?: string, phone?: string) => void
+  onEditChannel?: (email?: string, phone?: string, name?: string) => void
 }
 
 export const ChannelList = ({ applicationId, onEditChannel }: Props) => {
@@ -17,16 +18,28 @@ export const ChannelList = ({ applicationId, onEditChannel }: Props) => {
     applicationId,
   })
 
-  const channels = application.answers.advert?.channels || []
+  const { userInfo } = useAuth()
 
-  const onRemoveChannel = (email?: string) => {
+  const defaultName = userInfo?.profile?.name
+  const defaultEmail = userInfo?.profile?.email
+  const defaultPhone = userInfo?.profile?.phone_number
+
+  const initalChannel = {
+    name: defaultName,
+    email: defaultEmail,
+    phone: defaultPhone,
+  }
+
+  const channels = application.answers.advert?.channels || [initalChannel]
+
+  const onRemoveChannel = (index?: number) => {
     const currentAnswers = structuredClone(application.answers)
     const currentChannels = currentAnswers.advert?.channels ?? []
 
     const updatedAnswers = set(
       currentAnswers,
       InputFields.advert.channels,
-      currentChannels.filter((channel) => channel.email !== email),
+      currentChannels.filter((_, i) => i !== index),
     )
 
     updateApplication(updatedAnswers)
@@ -40,35 +53,43 @@ export const ChannelList = ({ applicationId, onEditChannel }: Props) => {
     <T.Table>
       <T.Head>
         <T.Row>
+          <T.HeadData>{formatMessage(general.name)}</T.HeadData>
           <T.HeadData>{formatMessage(general.email)}</T.HeadData>
           <T.HeadData>{formatMessage(general.phoneNumber)}</T.HeadData>
           <T.HeadData></T.HeadData>
           <T.HeadData></T.HeadData>
         </T.Row>
       </T.Head>
       <T.Body>
-        {channels.map((channel, i) => (
-          <T.Row key={i}>
-            <T.Data>{channel.email}</T.Data>
-            <T.Data>{channel.phone}</T.Data>
-            <T.Data style={{ paddingInline: 0 }} align="center" width={1}>
-              <button
-                type="button"
-                onClick={() => onEditChannel(channel.email, channel.phone)}
-              >
-                <Icon color="blue400" icon="pencil" />
-              </button>
-            </T.Data>
-            <T.Data style={{ paddingInline: 0 }} align="center" width={1}>
-              <button
-                type="button"
-                onClick={() => onRemoveChannel(channel.email)}
-              >
-                <Icon color="blue400" icon="trash" />
-              </button>
-            </T.Data>
-          </T.Row>
-        ))}
+        {channels.map((channel, i) => {
+          return (
+            <T.Row key={i}>
+              <T.Data>{channel.name}</T.Data>
+              <T.Data>{channel.email}</T.Data>
+              <T.Data>{channel.phone}</T.Data>
+              <T.Data style={{ paddingInline: 0 }} align="center" width={1}>
+                {onEditChannel && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      onEditChannel(channel.name, channel.email, channel.phone)
+                    }
+                  >
+                    <Icon color="blue400" icon="pencil" />
+                  </button>
+                )}
+              </T.Data>
+
+              <T.Data style={{ paddingInline: 0 }} align="center" width={1}>
+                {onEditChannel && (
+                  <button type="button" onClick={() => onRemoveChannel(i)}>
+                    <Icon color="blue400" icon="trash" />
+                  </button>
+                )}
+              </T.Data>
+            </T.Row>
+          )
+        })}
       </T.Body>
     </T.Table>
   )

libs/application/templates/official-journal-of-iceland/src/components/form/FormScreen.tsx

@@ -2,13 +2,17 @@ import {
   AlertMessage,
   AlertMessageProps,
   Box,
+  Bullet,
+  BulletList,
+  Button,
+  Inline,
   SkeletonLoader,
   Text,
 } from '@island.is/island-ui/core'
 import * as styles from './FormScreen.css'
 import { useLocale } from '@island.is/localization'
 import { general } from '../../lib/messages'
-import { OJOI_INPUT_HEIGHT } from '../../lib/constants'
+import { OJOI_INPUT_HEIGHT, Routes } from '../../lib/constants'
 
 type WarningProps = {
   type?: AlertMessageProps['type']
@@ -23,6 +27,7 @@ type Props = {
   warning?: WarningProps
   children?: React.ReactNode
   loading?: boolean
+  goToScreen?: (screen: string) => void
 }
 
 export const FormScreen = ({
@@ -32,6 +37,7 @@ export const FormScreen = ({
   children,
   warning,
   loading,
+  goToScreen,
 }: Props) => {
   const { formatMessage } = useLocale()
 
@@ -43,6 +49,54 @@ export const FormScreen = ({
 
   return (
     <>
+      {process.env.NODE_ENV === 'development' && goToScreen && (
+        <Box marginBottom={2}>
+          <Inline flexWrap="wrap" space={2}>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.ADVERT)}
+            >
+              Grunnupplýsingar
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.ATTACHMENTS)}
+            >
+              Viðaukar og fylgiskjöl
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.PREVIEW)}
+            >
+              Forskoðun
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.ORIGINAL)}
+            >
+              Frumrit
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.PUBLISHING)}
+            >
+              Óskir um birtingu
+            </Button>
+            <Button
+              variant="text"
+              size="small"
+              onClick={() => goToScreen(Routes.SUMMARY)}
+            >
+              Samantekt
+            </Button>
+          </Inline>
+        </Box>
+      )}
       <Box className={styles.formIntro}>
         {(title || button) && (
           <Box marginBottom={2} className={styles.titleWrapper}>

libs/application/templates/official-journal-of-iceland/src/components/htmlEditor/HTMLEditor.css.ts

@@ -139,7 +139,7 @@ export const classes: EditorClasses = {
 
   editor: style({
     position: 'relative',
-    minHeight: 200,
+    minHeight: 100,
     maxHeight: 'calc(100vh - 10rem)',
     width: '100%',
     caretColor: theme.color.blue400,