feat(native-app): update applications screen

apps/native/app/src/graphql/fragments/application.fragment.graphql

@@ -8,4 +8,16 @@ fragment ApplicationFragment on Application {
   name
   progress
   status
+  institution
+  actionCard {
+    draftTotalSteps
+    draftFinishedSteps
+    tag {
+      label
+      variant
+    }
+    pendingAction {
+      title
+    }
+  }
 }

apps/native/app/src/graphql/queries/applications.graphql

@@ -1,5 +1,5 @@
-query ListApplications {
-  applicationApplications {
+query ListApplications($input: ApplicationApplicationsInput, $locale: String) {
+  applicationApplications(input: $input, locale: $locale) {
     ...ApplicationFragment
   }
 }

apps/native/app/src/messages/en.ts

@@ -474,27 +474,34 @@ export const en: TranslatedMessages = {
   // applications screen
   'applications.title': 'Applications',
   'applications.bottomTabText': 'Applications',
-  'applications.searchPlaceholder': 'Search...',
-  'applications.loadingText': 'Searching...',
-  'applications.resultText': 'results',
-  'applications.singleResultText': 'result',
-  'applications.noResultText': 'No results',
-  'applications.emptyListTitle': 'There are currently no links',
-  'applications.emptyListDescription':
-    'There are no links available at the moment',
+  'applications.emptyTitle': 'No applications',
+  'applications.emptyDescription':
+    'When you apply for services from the government, they will appear here.',
+  'applications.incomplete': 'Unfinished applications',
+  'applications.completed': 'Finished applications',
+  'applications.inProgress': 'Applications in progress',
 
   // cards
   'applicationStatusCard.openButtonLabel': 'Open application',
-  'applicationStatusCard.seeMoreApplications': 'View applications',
+  'applicationStatusCard.description': `{
+    state,
+    select,
+    inprogress {The application is being processed}
+    completed {Completed}
+    rejected {Rejected}
+    other {}
+  }`,
   'applicationStatusCard.status': `{
     state,
     select,
     inprogress {In progress}
     completed {Completed}
     rejected {Rejected}
+    draft {Application in progress}
     other {Unknown status}
   }`,
-  'applicationStatusCard.noActiveApplications': 'No active applications',
+  'applicationStatusCard.draftProgress':
+    'You have completed {draftFinishedSteps} of {draftTotalSteps} steps',
 
   // edit phone
   'edit.phone.screenTitle': 'Edit Phone',

apps/native/app/src/messages/is.ts

@@ -473,28 +473,34 @@ export const is = {
   // applications screen
   'applications.title': 'Umsóknir',
   'applications.bottomTabText': 'Umsóknir',
-  'applications.searchPlaceholder': 'Leita að umsóknum...',
-  'applications.loadingText': 'Leita í skjölum...',
-  'applications.resultText': 'niðurstöður fundust',
-  'applications.singleResultText': 'niðurstaða fannst',
-  'applications.noResultText': 'Engar niðurstöður fundust',
-  'applications.emptyListTitle': 'Hér eru engir linkar sem stendur',
-  'applications.emptyListDescription':
-    'Að einhverjum ástæðum þá eru engir linkar að umsóknum aðgengilegir eins og er',
+  'applications.emptyTitle': 'Engar umsóknir',
+  'applications.emptyDescription':
+    'Þegar þú stofnar stafræna umsókn á Ísland.is birtist staða hennar hér.',
+  'applications.incomplete': 'Ókláraðar umsóknir',
+  'applications.completed': 'Afgreiddar umsóknir',
+  'applications.inProgress': 'Umsóknir í vinnslu',
 
   // cards
   'applicationStatusCard.openButtonLabel': 'Opna umsókn',
-  'applicationStatusCard.seeMoreApplications': 'Skoða umsóknir',
+  'applicationStatusCard.description': `{
+    state,
+    select,
+    inprogress {Umsókn er í afgreiðsluferli}
+    completed {Samþykkt}
+    rejected {Hafnað}
+    other {}
+  }`,
   'applicationStatusCard.status': `{
     state,
     select,
-    inprogress {Í ferli}
-    completed {Lokið}
+    inprogress {Í vinnslu}
+    completed {Afgreidd}
     rejected {Hafnað}
+    draft {Í vinnslu hjá þér}
     other {Staða óþekkt}
   }`,
-  'applicationStatusCard.noActiveApplications':
-    'Þegar þú stofnar stafræna umsókn á Ísland.is birtist staða hennar hér.',
+  'applicationStatusCard.draftProgress':
+    'Þú hefur klárað {draftFinishedSteps} af {draftTotalSteps} skrefum',
 
   // edit phone
   'edit.phone.screenTitle': 'Breyta símanúmeri',

apps/native/app/src/screens/applications/applications-completed.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { NavigationFunctionComponent } from 'react-native-navigation'
+
+import {
+  ApplicationResponseDtoStatusEnum,
+  useListApplicationsQuery,
+} from '../../graphql/types/schema'
+import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
+import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { ApplicationsList } from './components/applications-list'
+import { usePreferencesStore } from '../../stores/preferences-store'
+
+const { useNavigationOptions, getNavigationOptions } =
+  createNavigationOptionHooks(
+    (theme, intl) => ({
+      topBar: {
+        title: {
+          text: intl.formatMessage({ id: 'applications.completed' }),
+        },
+        noBorder: true,
+      },
+    }),
+    {
+      bottomTabs: {
+        visible: false,
+        drawBehind: true,
+      },
+    },
+  )
+
+export const ApplicationsCompletedScreen: NavigationFunctionComponent = ({
+  componentId,
+}) => {
+  useNavigationOptions(componentId)
+  const [refetching, setRefetching] = useState(false)
+  const { locale } = usePreferencesStore()
+
+  const applicationsRes = useListApplicationsQuery({
+    variables: {
+      input: {
+        status: [
+          ApplicationResponseDtoStatusEnum.Completed,
+          ApplicationResponseDtoStatusEnum.Rejected,
+          ApplicationResponseDtoStatusEnum.Approved,
+        ],
+      },
+      locale: locale === 'is-US' ? 'is' : 'en',
+    },
+  })
+
+  useConnectivityIndicator({
+    componentId,
+    refetching,
+    queryResult: applicationsRes,
+  })
+
+  return (
+    <ApplicationsList
+      applicationsRes={applicationsRes}
+      displayProgress={false}
+      displayDescription
+      componentId={componentId}
+      onRefetch={setRefetching}
+    />
+  )
+}
+
+ApplicationsCompletedScreen.options = getNavigationOptions

apps/native/app/src/screens/applications/applications-in-progress.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { NavigationFunctionComponent } from 'react-native-navigation'
+
+import {
+  ApplicationResponseDtoStatusEnum,
+  useListApplicationsQuery,
+} from '../../graphql/types/schema'
+import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
+import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { ApplicationsList } from './components/applications-list'
+import { usePreferencesStore } from '../../stores/preferences-store'
+
+const { useNavigationOptions, getNavigationOptions } =
+  createNavigationOptionHooks(
+    (theme, intl) => ({
+      topBar: {
+        title: {
+          text: intl.formatMessage({ id: 'applications.inProgress' }),
+        },
+        noBorder: true,
+      },
+    }),
+    {
+      bottomTabs: {
+        visible: false,
+        drawBehind: true,
+      },
+    },
+  )
+
+export const ApplicationsInProgressScreen: NavigationFunctionComponent = ({
+  componentId,
+}) => {
+  useNavigationOptions(componentId)
+  const [refetching, setRefetching] = useState(false)
+  const { locale } = usePreferencesStore()
+
+  const applicationsRes = useListApplicationsQuery({
+    variables: {
+      input: {
+        status: [ApplicationResponseDtoStatusEnum.Inprogress],
+      },
+      locale: locale === 'is-US' ? 'is' : 'en',
+    },
+  })
+
+  useConnectivityIndicator({
+    componentId,
+    refetching,
+    queryResult: applicationsRes,
+  })
+
+  return (
+    <ApplicationsList
+      applicationsRes={applicationsRes}
+      displayProgress={false}
+      displayDescription
+      componentId={componentId}
+      onRefetch={setRefetching}
+    />
+  )
+}
+
+ApplicationsInProgressScreen.options = getNavigationOptions

apps/native/app/src/screens/applications/applications-incomplete.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { NavigationFunctionComponent } from 'react-native-navigation'
+
+import {
+  ApplicationResponseDtoStatusEnum,
+  useListApplicationsQuery,
+} from '../../graphql/types/schema'
+import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks'
+import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator'
+import { ApplicationsList } from './components/applications-list'
+import { usePreferencesStore } from '../../stores/preferences-store'
+
+const { useNavigationOptions, getNavigationOptions } =
+  createNavigationOptionHooks(
+    (theme, intl) => ({
+      topBar: {
+        title: {
+          text: intl.formatMessage({ id: 'applications.incomplete' }),
+        },
+        noBorder: true,
+      },
+    }),
+    {
+      bottomTabs: {
+        visible: false,
+        drawBehind: true,
+      },
+    },
+  )
+
+export const ApplicationsIncompleteScreen: NavigationFunctionComponent = ({
+  componentId,
+}) => {
+  useNavigationOptions(componentId)
+  const [refetching, setRefetching] = useState(false)
+  const { locale } = usePreferencesStore()
+
+  const applicationsRes = useListApplicationsQuery({
+    variables: {
+      input: {
+        status: [ApplicationResponseDtoStatusEnum.Draft],
+      },
+      locale: locale === 'is-US' ? 'is' : 'en',
+    },
+  })
+
+  useConnectivityIndicator({
+    componentId,
+    refetching,
+    queryResult: applicationsRes,
+  })
+
+  return (
+    <ApplicationsList
+      applicationsRes={applicationsRes}
+      displayProgress
+      displayDescription={false}
+      componentId={componentId}
+      onRefetch={setRefetching}
+    />
+  )
+}
+
+ApplicationsIncompleteScreen.options = getNavigationOptions