Feat/33 refactor stepper #33

src/app/[locale]/components/FormProgress.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Button, Heading } from '@utrecht/component-library-react'
+import { useTranslations } from 'next-intl'
+import { useStepperStore } from '@/store/stepper_store'
+import { useFormStore } from '@/store/form_store'
+import { steps, useRouter } from '@/routing/navigation'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
+import { FormStep } from '@/types/form'
+
+const FormProgress = () => {
+  const t = useTranslations('stepper')
+  const {
+    step,
+    goToStep,
+    setNavToSummary,
+    visitedSteps,
+    resetVisitedSteps,
+    setGoBack,
+  } = useStepperStore()
+  const { resetForm } = useFormStore()
+  const router = useRouter()
+
+  const [percentage, setPercentage] = useState<number>(1)
+
+  useEffect(() => {
+    setPercentage((step / 4) * 100)
+  }, [step])
+
+  const resetState = () => {
+    resetVisitedSteps()
+    goToStep(FormStep.STEP_1_DESCRIPTION)
+    resetForm()
+    router.push(steps[FormStep.STEP_1_DESCRIPTION])
+  }
+
+  if (!visitedSteps.includes(FormStep.STEP_4_SUMMARY)) {
+    return (
+      <div className="relative flex flex-col-reverse sm:flex-col">
+        <div>
+          {step > FormStep.STEP_1_DESCRIPTION && (
+            <Button
+              appearance={'subtle-button'}
+              className="sm:absolute sm:left-0 sm:-top-2 stepper-button-hover pl-0-overwrite"
+              onClick={() => setGoBack(true)}
+            >
+              <FaChevronLeft />
+              {t('back')}
+            </Button>
+          )}
+
+          {step < FormStep.STEP_4_SUMMARY &&
+            visitedSteps.includes(FormStep.STEP_3_CONTACT) && (
+              <Button
+                className="absolute right-0 sm:-top-2 stepper-button-hover pr-0-overwrite"
+                appearance={'subtle-button'}
+                onClick={() => setNavToSummary(true)}
+              >
+                {t('to_summary')}
+                <FaChevronRight />
+              </Button>
+            )}
+        </div>
+
+        <div className="flex flex-col justify-center sm:items-center gap-3 pb-2">
+          <Heading level={4}>
+            {t('step', { currentStep: step, totalSteps: 4 })}
+          </Heading>
+          <div className="overflow-hidden bg-gray-200 w-full">
+            {/*todo: check how to set primary color */}
+            <div
+              style={{ width: `${percentage}%` }}
+              className="h-1  bg-green-700"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+  return <Button onClick={() => resetState()}>{t('new_notification')}</Button>
+}
+
+export default FormProgress

src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx

@@ -6,8 +6,8 @@ import { fetchAdditionalQuestions } from '@/services/additional-questions'
 import { useFormStore } from '@/store/form_store'
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useStepperStore } from '@/store/stepper_store'
-import { useRouter } from '@/routing/navigation'
-import { PublicQuestion } from '@/types/form'
+import { steps, useRouter } from '@/routing/navigation'
+import { FormStep, PublicQuestion } from '@/types/form'
 import { Paragraph } from '@/components/index'
 import { RenderSingleField } from '@/app/[locale]/incident/add/components/questions/RenderSingleField'
 import { LocationSelect } from '@/app/[locale]/incident/add/components/questions/LocationSelect'
@@ -20,7 +20,15 @@ export const IncidentQuestionsLocationForm = () => {
   const [additionalQuestions, setAdditionalQuestions] = useState<
     PublicQuestion[]
   >([])
-  const { addOneStep, setLastCompletedStep } = useStepperStore()
+  const {
+    addOneStep,
+    addVisitedStep,
+    navToSummary,
+    setNavToSummary,
+    goToStep,
+    goBack,
+    setGoBack,
+  } = useStepperStore()
   const router = useRouter()
   const methods = useForm()
   const t = useTranslations('general.errors')
@@ -105,12 +113,31 @@ export const IncidentQuestionsLocationForm = () => {
       extra_properties: answers,
     })
 
-    setLastCompletedStep(2)
+    addVisitedStep(FormStep.STEP_2_ADD)
     addOneStep()
-
-    router.push('/incident/contact')
+    router.push(steps[FormStep.STEP_3_CONTACT])
   }
 
+  useEffect(() => {
+    if (navToSummary) {
+      // todo: finish update form when component it fixed
+      // updateForm({})
+
+      goToStep(FormStep.STEP_4_SUMMARY)
+      router.push(steps[FormStep.STEP_4_SUMMARY])
+      setNavToSummary(false)
+    }
+  }, [navToSummary])
+
+  useEffect(() => {
+    if (goBack) {
+      // updateForm
+      goToStep(FormStep.STEP_1_DESCRIPTION)
+      router.push(steps[FormStep.STEP_1_DESCRIPTION])
+      setGoBack(false)
+    }
+  }, [goBack])
+
   return (
     <FormProvider {...methods}>
       <form

src/app/[locale]/incident/components/IncidentDescriptionForm.tsx

@@ -4,22 +4,21 @@ import * as z from 'zod'
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
-  FormDescription,
 } from '@/components/ui/Form'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useStepperStore } from '@/store/stepper_store'
-import { useRouter } from '@/routing/navigation'
-import { useEffect } from 'react'
+import { steps, useRouter } from '@/routing/navigation'
+import React, { useEffect } from 'react'
 import { getCategoryForDescription } from '@/services/classification'
 import { debounce } from 'lodash'
 import { useFormStore } from '@/store/form_store'
-import React from 'react'
 import {
   ACCEPTED_IMAGE_TYPES,
   FileUpload,
@@ -30,11 +29,18 @@ import {
 
 import { FormFieldTextarea } from '@utrecht/component-library-react/dist/css-module'
 import { Label } from '@amsterdam/design-system-react'
+import { FormStep } from '@/types/form'
 
 export const IncidentDescriptionForm = () => {
   const t = useTranslations('describe-report.form')
   const { updateForm, formState } = useFormStore()
-  const { addOneStep, setLastCompletedStep } = useStepperStore()
+  const {
+    addOneStep,
+    navToSummary,
+    setNavToSummary,
+    goToStep,
+    addVisitedStep,
+  } = useStepperStore()
   const router = useRouter()
 
   useEffect(() => {
@@ -108,12 +114,25 @@ export const IncidentDescriptionForm = () => {
       attachments: values.files,
     })
 
-    setLastCompletedStep(1)
+    addVisitedStep(FormStep.STEP_1_DESCRIPTION)
     addOneStep()
-
-    router.push('/incident/add')
+    router.push(steps[FormStep.STEP_2_ADD])
   }
 
+  useEffect(() => {
+    if (navToSummary) {
+      updateForm({
+        ...formState,
+        description: form.getValues('description'),
+        attachments: form.getValues('files'),
+      })
+
+      goToStep(FormStep.STEP_4_SUMMARY)
+      router.push(steps[FormStep.STEP_4_SUMMARY])
+      setNavToSummary(false)
+    }
+  }, [navToSummary])
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
     if (files && files.length > 0) {