[feat-6288]: Restyle submit button for the app version (#3018)

* Restyle Next Button for the APP Version * Added test for checking if previous button gets rendered for app version * Add mocking of appMode configuration * Sort props alphabetically * Use prop instead of loading config for next button * Remove unnecessary mocks * Fix conditional styling, remove unnecessary style rule --------- Co-authored-by: alimpens <[email protected]>
Amsterdam · Nov 25, 2024 · 572f207 · 572f207
1 parent 185a6fd
commit 572f207
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 33 deletions.
diff --git 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) => (
   <StyledButton
-    className={className}
-    data-testid="next-button"
+    {...restProps}
+    $appMode={appMode}
     onClick={onClick}
-    taskflow
+    taskflow={!appMode}
     type="submit"
-    variant="secondary"
+    variant={appMode ? 'primary' : 'secondary'}
   >
     {children}
   </StyledButton>

diff --git 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(
+        <Wizard>
+          <Steps>
+            <Step
+              id={secondStep}
+              render={() => <IncidentNavigation {...props} />}
+            />
+          </Steps>
+        </Wizard>
+      )
+    )
+
+    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(
+        <Wizard>
+          <Steps>
+            <Step
+              id={secondStep}
+              render={() => <IncidentNavigation {...props} />}
+            />
+          </Steps>
+        </Wizard>
+      )
+    )
+
+    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
@@ -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 && (
-      <Nav className="incident-navigation">
-        {wizardStep.nextButtonLabel && (
-          <NextButton
-            onClick={(e) => {
-              handleSubmit(e, next, wizardStep.formAction)
-            }}
-            data-testid="next-button"
-          >
-            <span className="value">{wizardStep.nextButtonLabel}</span>
-          </NextButton>
-        )}
+    (!mapActive &&
+      (appMode ? (
+        <NextButton
+          appMode
+          onClick={(e) => {
+            handleSubmit(e, next, wizardStep.formAction)
+          }}
+          data-testid="next-button"
+        >
+          <span className="value">{wizardStep.nextButtonLabel}</span>
+        </NextButton>
+      ) : (
+        <Nav className="incident-navigation">
+          {wizardStep.nextButtonLabel && (
+            <NextButton
+              onClick={(e) => {
+                handleSubmit(e, next, wizardStep.formAction)
+              }}
+              data-testid="next-button"
+            >
+              <span className="value">{wizardStep.nextButtonLabel}</span>
+            </NextButton>
+          )}
 
-        {wizardStep.previousButtonLabel ? (
-          <PreviousButton
-            className={wizardStep.previousButtonClass}
-            onClick={previous}
-            data-testid="previous-button"
-          >
-            {wizardStep.previousButtonLabel}
-          </PreviousButton>
-        ) : (
-          <span />
-        )}
-      </Nav>
-    )) ||
+          {!appMode && wizardStep.previousButtonLabel ? (
+            <PreviousButton
+              className={wizardStep.previousButtonClass}
+              onClick={previous}
+              data-testid="previous-button"
+            >
+              {wizardStep.previousButtonLabel}
+            </PreviousButton>
+          ) : (
+            <span />
+          )}
+        </Nav>
+      ))) ||
     null
   )
 }