feat(native-app): add barcode session error

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

@@ -270,6 +270,8 @@ export const en: TranslatedMessages = {
   'walletPass.barcodeErrorNotConnected':
     'Not possible to scan barcode if the device is not connected to the internet.',
   'walletPass.barcodeErrorFailedToFetch': 'Could not fetch barcode',
+  'walletPass.barcodeErrorBadSession':
+    'Too little time since license was accessed on another device',
   'walletPass.validLicense': 'Valid',
   'walletPass.expiredLicense': 'Expired',
   'walletPass.passportNumber': 'Passport number: {licenseNumber}',

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

@@ -406,6 +406,8 @@ export const is = {
   'walletPass.barcodeErrorNotConnected':
     'Ekki er hægt að skanna skírteini nema að tækið sé nettengt.',
   'walletPass.barcodeErrorFailedToFetch': 'Ekki tókst að sækja barkóða',
+  'walletPass.barcodeErrorBadSession':
+    'Of stutt síðan skírteini var sótt á öðru tæki',
   'walletPass.validLicense': 'Í gildi',
   'walletPass.expiredLicense': 'Útrunnið',
   'walletPass.passportNumber': 'Númer vegabréfs: {licenseNumber}',

apps/native/app/src/screens/wallet-pass/wallet-pass.tsx

@@ -401,7 +401,7 @@ export const WalletPassScreen: NavigationFunctionComponent<{
           type={licenseType}
           title={data?.payload?.metadata?.name ?? undefined}
           loading={res.loading}
-          error={!!res.error}
+          error={res.error}
           logo={
             isBarcodeEnabled &&
             data?.license?.type === GenericLicenseType.DriversLicense

apps/native/app/src/ui/lib/card/license-card.tsx

@@ -8,6 +8,7 @@ import {
   ViewStyle,
 } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
+import { ApolloError } from '@apollo/client'
 
 import { Barcode } from '../barcode/barcode'
 import { Skeleton } from '../skeleton/skeleton'
@@ -22,6 +23,10 @@ import { dynamicColor } from '../../utils/dynamic-color'
 import { Typography } from '../typography/typography'
 import { screenWidth } from '../../../utils/dimensions'
 import { BARCODE_MAX_WIDTH } from '../../../screens/wallet-pass/wallet-pass.constants'
+import {
+  findProblemInApolloError,
+  ProblemType,
+} from '@island.is/shared/problem'
 
 const Host = styled(Animated.View)`
   position: relative;
@@ -123,7 +128,7 @@ interface LicenseCardProps {
   backgroundColor?: string
   showBarcodeOfflineMessage?: boolean
   loading?: boolean
-  error?: boolean
+  error?: ApolloError
   barcode?: {
     value?: string | null
     loading?: boolean
@@ -166,6 +171,10 @@ export function LicenseCard({
     : screenWidth - theme.spacing[4] * 2 - theme.spacing.smallGutter * 2
   const barcodeHeight = barcodeWidth / 3
 
+  const badSessionError = error
+    ? findProblemInApolloError(error as any, [ProblemType.BAD_SESSION])
+    : undefined
+
   return (
     <Host>
       <BackgroundImage
@@ -297,7 +306,9 @@ export function LicenseCard({
             <OfflineMessage variant="body3" style={{ opacity: 1 }}>
               {intl.formatMessage({
                 id: error
-                  ? 'walletPass.barcodeErrorFailedToFetch'
+                  ? badSessionError
+                    ? 'walletPass.barcodeErrorBadSession'
+                    : 'walletPass.barcodeErrorFailedToFetch'
                   : 'walletPass.barcodeErrorNotConnected',
               })}
             </OfflineMessage>

libs/shared/problem/src/utils/findProblemInApolloError.spec.ts

@@ -74,13 +74,44 @@ describe('findProblemInApolloError', () => {
     expect(problem).toMatchObject({ type: ProblemType.HTTP_NOT_FOUND })
   })
 
+  it('return first problem matching types when problem is nested in exception object', () => {
+    // Arrange
+    const error = new ApolloError({
+      graphQLErrors: [
+        new GraphQLError('Error', null, null, null, null, null, {
+          exception: {
+            problem: { type: ProblemType.HTTP_BAD_REQUEST },
+          },
+        }),
+        new GraphQLError('Error', null, null, null, null, null, {
+          exception: {
+            problem: { type: ProblemType.HTTP_NOT_FOUND },
+          },
+        }),
+      ],
+    })
+
+    // Act
+    const problem = findProblemInApolloError(error, [
+      ProblemType.HTTP_NOT_FOUND,
+    ])
+
+    // Assert
+    expect(problem).toMatchObject({ type: ProblemType.HTTP_NOT_FOUND })
+  })
+
   it('return undefined if no problem matches types', () => {
     // Arrange
     const error = new ApolloError({
       graphQLErrors: [
         new GraphQLError('Error', null, null, null, null, null, {
           problem: { type: ProblemType.HTTP_BAD_REQUEST },
         }),
+        new GraphQLError('Error', null, null, null, null, null, {
+          exception: {
+            problem: { type: ProblemType.HTTP_BAD_REQUEST },
+          },
+        }),
       ],
     })
 

libs/shared/problem/src/utils/findProblemInApolloError.ts

@@ -1,22 +1,34 @@
 import type { ApolloError } from '@apollo/client'
 import { Problem } from '../Problem'
 
+interface ProblemExtensions {
+  problem?: Problem
+  exception?: {
+    problem?: Problem
+  }
+}
+
 export const findProblemInApolloError = (
   error: ApolloError | undefined,
   types?: string[],
 ): Problem | undefined => {
   if (!error) {
     return undefined
   }
-  const graphQLError = error.graphQLErrors.find((value) => {
-    const problem = value.extensions?.problem as Problem | undefined
-    return problem && (!types || types.includes(problem.type))
-  })
 
-  if (!graphQLError) {
+  const problems = error.graphQLErrors
+    .map((value) => {
+      const extensions = value.extensions as ProblemExtensions | undefined
+      const problem = extensions?.problem || extensions?.exception?.problem
+      if (problem && (!types || types.includes(problem.type))) {
+        return problem
+      }
+    })
+    .filter((problem) => problem) as Problem[]
+
+  if (problems.length === 0) {
     return undefined
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return graphQLError.extensions!.problem as Problem
+  return problems[0]
 }