Status page

frontend/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = ["./src/utils/bun-test-setup.ts"]

frontend/package.json

@@ -19,27 +19,30 @@
     "@types/react-redux": "7.1.34",
     "@vitejs/plugin-react": "4.3.3",
     "typescript": "5.6.3",
-    "vite": "5.4.10",
-    "vite-tsconfig-paths": "5.1.0"
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.2"
   },
   "dependencies": {
     "@biomejs/biome": "1.9.4",
     "@grafana/faro-react": "1.11.0",
     "@grafana/faro-web-sdk": "1.11.0",
     "@grafana/faro-web-tracing": "1.11.0",
+    "@happy-dom/global-registrator": "15.11.0",
     "@navikt/aksel-icons": "7.5.1",
     "@navikt/ds-css": "7.5.1",
     "@navikt/ds-react": "7.5.1",
     "@navikt/fnrvalidator": "2.1.2",
     "@navikt/nav-dekoratoren-moduler": "3.1.1",
     "@reduxjs/toolkit": "2.3.0",
     "@styled-icons/material": "10.47.0",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.2",
     "date-fns": "4.1.0",
-    "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-redux": "9.1.2",
-    "react-router": "6.28.0",
     "react-router-dom": "6.28.0",
+    "react-router": "6.28.0",
+    "react": "18.3.1",
     "styled-components": "6.1.13"
   }
 }

frontend/src/components/case/common/digital/digital-form-container.tsx

@@ -55,7 +55,7 @@ export const DigitalFormContainer = ({
     },
     {
       disabled: isAuthenticated === false || sak.status !== CaseStatus.DONE,
-      to: '../kvittering',
+      to: '../status',
       label: label3,
     },
   ];

frontend/src/components/case/innlogget/kvittering/kvittering-loading.tsx → frontend/src/components/case/innlogget/status/status-loading.tsx

@@ -1,25 +1,39 @@
 import { Envelope } from '@app/icons/envelope';
 import { useTranslation } from '@app/language/use-translation';
 import type { CaseType } from '@app/redux-api/case/types';
-import { BodyShort, Heading } from '@navikt/ds-react';
+import { Alert, Heading } from '@navikt/ds-react';
+import { useEffect, useState } from 'react';
 import { keyframes, styled } from 'styled-components';
 
 interface Props {
-  informStillWorking: boolean;
   type: CaseType;
 }
 
-export const KvitteringLoading = ({ informStillWorking, type }: Props) => {
+export const StatusLoading = ({ type }: Props) => {
   const { skjema, icons } = useTranslation();
+  const [showStillWorking, setShowStillWorking] = useState<boolean>(false);
+
+  useEffect(() => {
+    const stillWorkingTimer = setTimeout(() => setShowStillWorking(true), 8000);
+
+    return () => {
+      clearTimeout(stillWorkingTimer);
+    };
+  }, []);
 
   return (
-    <>
+    <div>
       <BouncingEnvelope title={icons.receipt} />
-      <PageTitle size="medium" level="1" spacing>
-        {skjema.kvittering.loading.title[type]}
-      </PageTitle>
-      {informStillWorking ? <Description>{skjema.kvittering.loading.still_working}</Description> : null}
-    </>
+      <Heading level="2" size="medium" spacing={showStillWorking} align="center">
+        {skjema.status.loading.title[type]}
+      </Heading>
+
+      {showStillWorking ? (
+        <Alert variant="info" size="small">
+          {skjema.status.loading.still_working}
+        </Alert>
+      ) : null}
+    </div>
   );
 };
 
@@ -44,15 +58,3 @@ const BouncingEnvelope = styled(Envelope)`
   animation-iteration-count: infinite;
   animation-name: ${bounce};
 `;
-
-const PageTitle = styled(Heading)`
-  && {
-    text-align: center;
-  }
-`;
-
-const Description = styled(BodyShort)`
-  && {
-    text-align: center;
-  }
-`;

frontend/src/components/case/innlogget/kvittering/kvittering-page.tsx → frontend/src/components/case/innlogget/status/status-page.tsx

@@ -1,18 +1,18 @@
 import { DigitalFormContainer } from '@app/components/case/common/digital/digital-form-container';
-import { KvitteringPageLoader } from '@app/components/case/innlogget/kvittering/kvittering-page-loader';
 import { CaseLoader } from '@app/components/case/innlogget/loader';
+import { Status } from '@app/components/case/innlogget/status/status';
 import { useLanguage } from '@app/language/use-language';
 import { useTranslation } from '@app/language/use-translation';
 import { type Case, CaseStatus } from '@app/redux-api/case/types';
 import { Navigate } from 'react-router-dom';
 
-export const CaseKvitteringPage = () => <CaseLoader Component={RenderCaseKvitteringPage} />;
+export const CaseStatusPage = () => <CaseLoader Component={RenderCaseStatusPage} />;
 
 interface Props {
   data: Case;
 }
 
-const RenderCaseKvitteringPage = ({ data }: Props) => {
+const RenderCaseStatusPage = ({ data }: Props) => {
   const language = useLanguage();
   const { skjema } = useTranslation();
 
@@ -32,7 +32,7 @@ const RenderCaseKvitteringPage = ({ data }: Props) => {
       innsendingsytelse={data.innsendingsytelse}
       title_fragment={title_fragment[data.type]}
     >
-      <KvitteringPageLoader caseId={data.id} type={data.type} />
+      <Status {...data} />
     </DigitalFormContainer>
   );
 };