Bugfix: Feedback step should be able to navigate to a data task

src/App.tsx

@@ -10,9 +10,9 @@ import { InstanceProvider } from 'src/features/instance/InstanceContext';
 import { PartySelection } from 'src/features/instantiate/containers/PartySelection';
 import { InstanceSelectionWrapper } from 'src/features/instantiate/selection/InstanceSelection';
 import { PDFWrapper } from 'src/features/pdf/PDFWrapper';
-import { CustomReceipt, DefaultReceipt } from 'src/features/receipt/ReceiptContainer';
+import { FixWrongReceiptType } from 'src/features/receipt/FixWrongReceiptType';
+import { DefaultReceipt } from 'src/features/receipt/ReceiptContainer';
 import { TaskKeys } from 'src/hooks/useNavigatePage';
-import { PresentationType, ProcessTaskType } from 'src/types';
 
 export const App = () => (
   <Routes>
@@ -34,7 +34,7 @@ export const App = () => (
       <Route
         path=':pageKey'
         element={
-          <PresentationComponent type={PresentationType.Stateless}>
+          <PresentationComponent>
             <Form />
           </PresentationComponent>
         }
@@ -63,53 +63,16 @@ export const App = () => (
         element={<DefaultReceipt />}
       />
 
-      <Route
-        path={TaskKeys.CustomReceipt}
-        element={
-          <PresentationComponent
-            type={ProcessTaskType.Archived}
-            showNavigation={false}
-          >
-            <FormProvider>
-              <CustomReceipt />
-            </FormProvider>
-          </PresentationComponent>
-        }
-      >
-        <Route
-          index
-          element={<NavigateToStartUrl forceCurrentTask={false} />}
-        />
-        <Route path=':pageKey'>
-          <Route
-            index
-            element={
-              <PDFWrapper>
-                <Form />
-              </PDFWrapper>
-            }
-          />
-          <Route path=':componentId'>
-            <Route
-              index
-              element={<ComponentRouting />}
-            />
-            <Route
-              path='*'
-              element={<ComponentRouting />}
-            />
-          </Route>
-        </Route>
-      </Route>
-
       <Route
         path=':taskId'
         element={
-          <ProcessWrapper>
-            <FormProvider>
-              <Outlet />
-            </FormProvider>
-          </ProcessWrapper>
+          <FixWrongReceiptType>
+            <ProcessWrapper>
+              <FormProvider>
+                <Outlet />
+              </FormProvider>
+            </ProcessWrapper>
+          </FixWrongReceiptType>
         }
       >
         <Route
@@ -121,7 +84,7 @@ export const App = () => (
             index
             element={
               <PDFWrapper>
-                <PresentationComponent type={ProcessTaskType.Data}>
+                <PresentationComponent>
                   <Form />
                 </PresentationComponent>
               </PDFWrapper>

src/components/form/Form.tsx

@@ -7,6 +7,7 @@ import { MessageBanner } from 'src/components/form/MessageBanner';
 import { ErrorReport, ErrorReportList } from 'src/components/message/ErrorReport';
 import { ReadyForPrint } from 'src/components/ReadyForPrint';
 import { NavigateToStartUrl } from 'src/components/wrappers/ProcessWrapper';
+import { SearchParams } from 'src/core/routing/types';
 import { useAppName, useAppOwner } from 'src/core/texts/appTexts';
 import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { useAllAttachments } from 'src/features/attachments/hooks';
@@ -18,7 +19,7 @@ import { useLaxInstanceId } from 'src/features/instance/InstanceContext';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useOnFormSubmitValidation } from 'src/features/validation/callbacks/onFormSubmitValidation';
 import { useTaskErrors } from 'src/features/validation/selectors/taskErrors';
-import { SearchParams, useQueryKey } from 'src/hooks/navigation';
+import { useQueryKey } from 'src/hooks/navigation';
 import { useAsRef } from 'src/hooks/useAsRef';
 import { useCurrentView, useNavigatePage } from 'src/hooks/useNavigatePage';
 import { getComponentCapabilities } from 'src/layout';

src/components/form/LinkToPotentialNode.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import type { LinkProps } from 'react-router-dom';
 
-import { SearchParams } from 'src/hooks/navigation';
+import { SearchParams } from 'src/core/routing/types';
 import { useIsHidden } from 'src/utils/layout/hidden';
 import { useExternalItem } from 'src/utils/layout/hooks';
 import { splitDashedKey } from 'src/utils/splitDashedKey';

src/components/presentation/Presentation.test.tsx

@@ -5,6 +5,7 @@ import { screen } from '@testing-library/react';
 
 import { getPartyMock } from 'src/__mocks__/getPartyMock';
 import { PresentationComponent } from 'src/components/presentation/Presentation';
+import { useIsReceiptPage } from 'src/core/routing/useIsReceiptPage';
 import { renderWithInstanceAndLayout } from 'src/test/renderWithProviders';
 import { AltinnPalette } from 'src/theme/altinnAppTheme';
 import { ProcessTaskType } from 'src/types';
@@ -14,15 +15,23 @@ import type { AppQueries } from 'src/queries/types';
 
 jest.mock('axios');
 
+jest.mock('src/core/routing/useIsReceiptPage', () => ({
+  useIsReceiptPage: jest.fn(),
+}));
+
+const mockUseIsReceiptPage = useIsReceiptPage as jest.MockedFunction<typeof useIsReceiptPage>;
+
 describe('Presentation', () => {
   let realLocation: Location = window.location;
 
   beforeEach(() => {
     realLocation = window.location;
+    mockUseIsReceiptPage.mockReturnValue(false);
   });
 
   afterEach(() => {
     jest.clearAllMocks();
+    jest.restoreAllMocks();
   });
 
   it('should link to query parameter returnUrl if valid URL', async () => {
@@ -31,7 +40,7 @@ describe('Presentation', () => {
     const mockedLocation = { ...realLocation, search: `?returnUrl=${returnUrl}` };
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);
 
-    await render({ type: ProcessTaskType.Data }, { fetchReturnUrl: async () => returnUrl });
+    await render({}, { fetchReturnUrl: async () => returnUrl });
 
     const closeButton = screen.getByRole('link', {
       name: 'Tilbake',
@@ -47,7 +56,7 @@ describe('Presentation', () => {
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);
     const messageBoxUrl = getMessageBoxUrl(getPartyMock().partyId);
 
-    await render({ type: ProcessTaskType.Data });
+    await render();
 
     const closeButton = screen.getByRole('link', {
       name: 'Tilbake til innboks',
@@ -63,7 +72,7 @@ describe('Presentation', () => {
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);
     const messageBoxUrl = getMessageBoxUrl(partyId);
 
-    await render({ type: ProcessTaskType.Data });
+    await render();
 
     const closeButton = screen.getByRole('link', {
       name: 'Tilbake til innboks',
@@ -74,23 +83,24 @@ describe('Presentation', () => {
 
   it('should render children', async () => {
     await render({
-      type: ProcessTaskType.Data,
       children: <div data-testid='child-component' />,
     });
 
     expect(screen.getByTestId('child-component')).toBeInTheDocument();
   });
 
   it('the background color should be greyLight if type is "ProcessTaskType.Data"', async () => {
-    await render({ type: ProcessTaskType.Data });
+    await render();
 
     const appHeader = screen.getByTestId('AppHeader');
 
     expect(appHeader).toHaveStyle(`background-color: ${AltinnPalette.greyLight}`);
   });
 
   it('the background color should be lightGreen if type is "ProcessTaskType.Archived"', async () => {
-    await render({ type: ProcessTaskType.Archived });
+    mockUseIsReceiptPage.mockReturnValue(true);
+
+    await render();
 
     const appHeader = screen.getByTestId('AppHeader');
 

src/components/presentation/Presentation.tsx

@@ -12,6 +12,7 @@ import { NavBar } from 'src/components/presentation/NavBar';
 import classes from 'src/components/presentation/Presentation.module.css';
 import { Progress } from 'src/components/presentation/Progress';
 import { createContext } from 'src/core/contexts/context';
+import { useIsReceiptPage } from 'src/core/routing/useIsReceiptPage';
 import { RenderStart } from 'src/core/ui/RenderStart';
 import { Footer } from 'src/features/footer/Footer';
 import { useUiConfigContext } from 'src/features/form/layout/UiConfigContext';
@@ -21,33 +22,28 @@ import { Lang } from 'src/features/language/Lang';
 import { SideBarNavigation } from 'src/features/navigation/SidebarNavigation';
 import { useHasGroupedNavigation } from 'src/features/navigation/utils';
 import { AltinnPalette } from 'src/theme/altinnAppTheme';
-import { ProcessTaskType } from 'src/types';
-import type { PresentationType } from 'src/types';
 
 export interface IPresentationProvidedProps extends PropsWithChildren {
   header?: React.ReactNode;
-  type: ProcessTaskType | PresentationType;
   showNavbar?: boolean;
   showNavigation?: boolean;
 }
 
 export const PresentationComponent = ({
   header,
-  type,
   children,
   showNavbar = true,
-  showNavigation = true,
+  showNavigation: _showNavigation = true,
 }: IPresentationProvidedProps) => {
   const instanceStatus = useInstanceDataQuery({
     select: (instance) => instance.status,
   }).data;
   const { expandedWidth } = useUiConfigContext();
   const hasGroupedNavigation = useHasGroupedNavigation();
-
-  const realHeader = header || (type === ProcessTaskType.Archived ? <Lang id='receipt.receipt' /> : undefined);
-
-  const isProcessStepsArchived = Boolean(type === ProcessTaskType.Archived);
-  const backgroundColor = isProcessStepsArchived ? AltinnPalette.greenLight : AltinnPalette.greyLight;
+  const isReceipt = useIsReceiptPage();
+  const realHeader = isReceipt ? <Lang id='receipt.receipt' /> : header;
+  const backgroundColor = isReceipt ? AltinnPalette.greenLight : AltinnPalette.greyLight;
+  const showNavigation = _showNavigation && !isReceipt;
 
   useLayoutEffect(() => {
     document.body.style.background = backgroundColor;
@@ -74,7 +70,7 @@ export const PresentationComponent = ({
             className={classes.page}
             style={!showNavbar ? { marginTop: 54 } : undefined}
           >
-            {isProcessStepsArchived && instanceStatus?.substatus && (
+            {isReceipt && instanceStatus?.substatus && (
               <AltinnSubstatus
                 label={<Lang id={instanceStatus.substatus.label} />}
                 description={<Lang id={instanceStatus.substatus.description} />}
@@ -85,9 +81,7 @@ export const PresentationComponent = ({
               className={classes.modal}
               tabIndex={-1}
             >
-              <Header header={realHeader}>
-                <ProgressBar type={type} />
-              </Header>
+              <Header header={realHeader}>{!isReceipt && <ProgressBar />}</Header>
               <div className={classes.modalBody}>{children}</div>
             </section>
           </main>
@@ -98,11 +92,9 @@ export const PresentationComponent = ({
   );
 };
 
-function ProgressBar({ type }: { type: ProcessTaskType | PresentationType }) {
+function ProgressBar() {
   const { showProgress } = usePageSettings();
-  const enabled = type !== ProcessTaskType.Archived && showProgress;
-
-  if (!enabled) {
+  if (!showProgress) {
     return null;
   }