feat(react-spa): New modal when user switches from child to self

libs/react-spa/bff/src/lib/BffNewUserSameSessionModal.tsx

@@ -0,0 +1,25 @@
+import { BffProblemTemplateModal } from './BffProblemTemplateModal'
+
+type BffSessionExpiredModalProps = {
+  /**
+   * Reload callback
+   */
+  onReload(): void
+}
+
+/**
+ * This screen is unfortunately not translated because at this point we don't have a user locale.
+ */
+export const BffNewUserSameSessionModal = ({
+  onReload,
+}: BffSessionExpiredModalProps) => (
+  <BffProblemTemplateModal
+    title="Nýr notandi"
+    action={{
+      prefixText: 'Þú hefur skipt um notanda. Viltu',
+      text: 'endurhlaða',
+      postfixText: 'síðunni?',
+      onClick: onReload,
+    }}
+  />
+)

libs/react-spa/bff/src/lib/BffProblemTemplateModal.tsx

@@ -0,0 +1,43 @@
+import { Box, Button, ProblemTemplate } from '@island.is/island-ui/core'
+import { fullScreen } from './ErrorScreen.css'
+
+export type BffProblemTemplateModalProps = {
+  title: string
+  action: {
+    prefixText: string
+    text: string
+    postfixText: string
+    onClick(): void
+  }
+}
+
+/**
+ * Reusable warning screen for BFF
+ */
+export const BffProblemTemplateModal = ({
+  title,
+  action: { prefixText, text, postfixText, onClick },
+}: BffProblemTemplateModalProps) => (
+  <Box
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    padding={[0, 6]}
+    className={fullScreen}
+  >
+    <ProblemTemplate
+      variant="warning"
+      expand
+      title={title}
+      message={
+        <>
+          {prefixText}{' '}
+          <Button variant="text" onClick={onClick}>
+            {text}
+          </Button>{' '}
+          {postfixText}
+        </>
+      }
+    />
+  </Box>
+)

libs/react-spa/bff/src/lib/BffProvider.tsx

@@ -3,12 +3,17 @@ import { ReactNode, useCallback, useEffect, useReducer, useState } from 'react'
 
 import { LoadingScreen } from '@island.is/react/components'
 import { BffContext } from './BffContext'
+import { BffNewUserSameSessionModal } from './BffNewUserSameSessionModal'
 import { BffPoller } from './BffPoller'
 import { BffSessionExpiredModal } from './BffSessionExpiredModal'
 import { ErrorScreen } from './ErrorScreen'
 import { BffBroadcastEvents, useBffBroadcaster } from './bff.hooks'
 import { ActionType, LoggedInState, initialState, reducer } from './bff.state'
-import { createBffUrlGenerator, isNewSession } from './bff.utils'
+import {
+  createBffUrlGenerator,
+  isNewSession,
+  isNewUserWithSameSession,
+} from './bff.utils'
 
 const BFF_SERVER_UNAVAILABLE = 'BFF_SERVER_UNAVAILABLE'
 
@@ -27,11 +32,12 @@ export const BffProvider = ({
   mockedInitialState,
 }: BffProviderProps) => {
   const [showSessionExpiredScreen, setSessionExpiredScreen] = useState(false)
+  const [showNewUserScreen, setNewUserScreen] = useState(false)
+
   const bffUrlGenerator = createBffUrlGenerator(applicationBasePath)
-  const [state, dispatch] = useReducer(
-    reducer,
-    mockedInitialState ?? initialState,
-  )
+  const [state, dispatch] = useReducer(reducer, {
+    ...(mockedInitialState ?? initialState),
+  })
 
   const { authState } = state
   const showErrorScreen = authState === 'error'
@@ -42,12 +48,14 @@ export const BffProvider = ({
   const isLoggedIn = authState === 'logged-in'
 
   const { postMessage } = useBffBroadcaster((event) => {
-    if (
-      isLoggedIn &&
-      event.data.type === BffBroadcastEvents.NEW_SESSION &&
-      isNewSession(state.userInfo, event.data.userInfo)
-    ) {
-      setSessionExpiredScreen(true)
+    if (isLoggedIn && event.data.type === BffBroadcastEvents.NEW_SESSION) {
+      if (isNewSession(state.userInfo, event.data.userInfo)) {
+        setSessionExpiredScreen(true)
+      } else if (
+        isNewUserWithSameSession(state.userInfo, event.data.userInfo)
+      ) {
+        setNewUserScreen(true)
+      }
     } else if (event.data.type === BffBroadcastEvents.LOGOUT) {
       // We will wait 1 seconds before we dispatch logout action.
       // The reason is that IDS will not log the user out immediately.
@@ -217,6 +225,16 @@ export const BffProvider = ({
       return <BffSessionExpiredModal onLogin={signIn} />
     }
 
+    if (showNewUserScreen) {
+      return (
+        <BffNewUserSameSessionModal
+          onReload={() => {
+            window.location.reload()
+          }}
+        />
+      )
+    }
+
     if (isLoggedIn) {
       return <BffPoller newSessionCb={newSessionCb}>{children}</BffPoller>
     }

libs/react-spa/bff/src/lib/BffSessionExpiredModal.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, ProblemTemplate } from '@island.is/island-ui/core'
-import { fullScreen } from './ErrorScreen.css'
+import { BffProblemTemplateModal } from './BffProblemTemplateModal'
 
 type BffSessionExpiredModalProps = {
   /**
@@ -14,27 +13,13 @@ type BffSessionExpiredModalProps = {
 export const BffSessionExpiredModal = ({
   onLogin,
 }: BffSessionExpiredModalProps) => (
-  <Box
-    display="flex"
-    justifyContent="center"
-    alignItems="center"
-    padding={[0, 6]}
-    className={fullScreen}
-  >
-    <ProblemTemplate
-      variant="warning"
-      expand
-      tag=""
-      title="Innskráning útrunnin"
-      message={
-        <>
-          Þú hefur skráð þig inn í öðru umboði. Viltu{' '}
-          <Button variant="text" onClick={onLogin}>
-            skrá þig
-          </Button>{' '}
-          aftur inn?
-        </>
-      }
-    />
-  </Box>
+  <BffProblemTemplateModal
+    title="Innskráning útrunnin"
+    action={{
+      prefixText: 'Þú hefur skráð þig inn í öðru umboði. Viltu',
+      text: 'skrá þig',
+      postfixText: 'aftur inn?',
+      onClick: onLogin,
+    }}
+  />
 )

libs/react-spa/bff/src/lib/bff.utils.ts

@@ -37,12 +37,27 @@ export const createQueryStr = (params: Record<string, string>) => {
   return new URLSearchParams(params).toString()
 }
 
+type UserCheckFn = (oldUser: BffUser, newUser: BffUser) => boolean
+
 /**
  *  This method checks if the user has a new session
  */
-export const isNewSession = (oldUser: BffUser, newUser: BffUser) => {
+export const isNewSession: UserCheckFn = (oldUser, newUser) => {
   const oldSid = oldUser.profile.sid
   const newSid = newUser.profile.sid
 
-  return oldSid && newSid && oldSid !== newSid
+  return !!(oldSid && newSid && oldSid !== newSid)
+}
+
+/**
+ * Checks if the user is a new user with the same session
+ */
+export const isNewUserWithSameSession: UserCheckFn = (oldUser, newUser) => {
+  const isSameSession = !isNewSession(oldUser, newUser)
+
+  if (isSameSession) {
+    return oldUser.profile.nationalId !== newUser.profile.nationalId
+  }
+
+  return false
 }