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 ) }