diff --git a/src/components/NextButton/NextButton.tsx b/src/components/NextButton/NextButton.tsx
index d140ae16bb..6fc882649d 100644
--- a/src/components/NextButton/NextButton.tsx
+++ b/src/components/NextButton/NextButton.tsx
@@ -6,24 +6,24 @@ import styled from 'styled-components'
import Button from 'components/Button'
-const StyledButton = styled(Button)`
- margin-right: 15px !important;
+const StyledButton = styled(Button)<{ $appMode?: boolean }>`
+ ${({ $appMode }) => !$appMode && 'margin-right: 15px !important'};
`
interface Props {
- className?: string
+ appMode?: boolean
children: ReactNode
onClick: (event: BaseSyntheticEvent) => void
}
-const NextButton = ({ className = '', children, onClick }: Props) => (
+const NextButton = ({ appMode, children, onClick, ...restProps }: Props) => (
{children}
diff --git a/src/signals/incident/components/IncidentNavigation/IncidentNavigation.test.tsx b/src/signals/incident/components/IncidentNavigation/IncidentNavigation.test.tsx
index c275a42ebf..f6a943bf55 100644
--- a/src/signals/incident/components/IncidentNavigation/IncidentNavigation.test.tsx
+++ b/src/signals/incident/components/IncidentNavigation/IncidentNavigation.test.tsx
@@ -8,6 +8,7 @@ import wizardDefinition from 'signals/incident/definitions/wizard'
import { withAppContext } from 'test/utils'
import IncidentNavigation from '.'
+import configuration from '../../../../shared/services/configuration/configuration'
import { Step, Steps, Wizard } from '../StepWizard'
jest.mock('shared/services/auth/auth', () => ({
@@ -17,6 +18,8 @@ jest.mock('shared/services/auth/auth', () => ({
jest.spyOn(auth, 'getIsAuthenticated').mockImplementation(() => false)
+jest.mock('shared/services/configuration/configuration')
+
const steps = Object.keys(wizardDefinition)
.filter((key) => key !== 'opslaan')
.map((key) => `incident/${key}`)
@@ -49,6 +52,7 @@ describe('signals/incident/components/IncidentNavigation', () => {
beforeEach(() => {
handleSubmit.mockReset()
})
+
it('redirects to wizard step 1 from step 2 when refresh is hit', async () => {
const wizardDefinitionWithoutFormAction = { ...wizardDefinition }
@@ -142,6 +146,54 @@ describe('signals/incident/components/IncidentNavigation', () => {
})
})
+ it('does not render a previous button for the app version', async () => {
+ configuration.featureFlags.appMode = true
+
+ const secondStep = [...steps][1]
+
+ const { queryByTestId } = render(
+ withAppContext(
+
+
+ }
+ />
+
+
+ )
+ )
+
+ await waitFor(() => {
+ expect(queryByTestId('next-button')).toBeInTheDocument()
+ expect(queryByTestId('previous-button')).not.toBeInTheDocument()
+ })
+ })
+
+ it('renders previous button for web version', async () => {
+ configuration.featureFlags.appMode = false
+
+ const secondStep = [...steps][1]
+
+ const { queryByTestId } = render(
+ withAppContext(
+
+
+ }
+ />
+
+
+ )
+ )
+
+ await waitFor(() => {
+ expect(queryByTestId('next-button')).toBeInTheDocument()
+ expect(queryByTestId('previous-button')).toBeInTheDocument()
+ })
+ })
+
it('does not render', async () => {
const { queryByTestId } = render(
withAppContext(
diff --git a/src/signals/incident/components/IncidentNavigation/IncidentNavigation.tsx b/src/signals/incident/components/IncidentNavigation/IncidentNavigation.tsx
index 7fead6e797..4d19d26f73 100644
--- a/src/signals/incident/components/IncidentNavigation/IncidentNavigation.tsx
+++ b/src/signals/incident/components/IncidentNavigation/IncidentNavigation.tsx
@@ -17,6 +17,7 @@ import type {
} from 'signals/incident/definitions/wizard'
import type { WizardSectionProp } from 'signals/incident/definitions/wizard'
+import configuration from '../../../../shared/services/configuration/configuration'
import { WizardContext } from '../StepWizard'
const Nav = styled.div`
@@ -80,6 +81,7 @@ interface WizardStepProps extends IncidentNavigationProps {
const WizardStep = ({ wizardStep, meta, next, previous }: WizardStepProps) => {
const { handleSubmit } = meta
const navigate = useNavigate()
+ const appMode = configuration.featureFlags.appMode
useEffect(() => {
// wizardStep.formAction is undefined when a user hits the refresh and when wizard-step-1 is rendered for the first time
@@ -97,32 +99,43 @@ const WizardStep = ({ wizardStep, meta, next, previous }: WizardStepProps) => {
const { mapActive } = useSelector(makeSelectIncidentContainer)
return (
- (!mapActive && (
-
+ ))) ||
null
)
}