diff --git a/apps/web/public/img/pictograms/project-phase/completed-phase.svg b/apps/web/public/img/pictograms/project-phase/completed-phase.svg new file mode 100644 index 000000000..c85aab297 --- /dev/null +++ b/apps/web/public/img/pictograms/project-phase/completed-phase.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/img/pictograms/project-phase/construction-phase.svg b/apps/web/public/img/pictograms/project-phase/construction-phase.svg new file mode 100644 index 000000000..0e32f51e2 --- /dev/null +++ b/apps/web/public/img/pictograms/project-phase/construction-phase.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/web/public/img/pictograms/project-phase/design-phase.svg b/apps/web/public/img/pictograms/project-phase/design-phase.svg new file mode 100644 index 000000000..3966cc261 --- /dev/null +++ b/apps/web/public/img/pictograms/project-phase/design-phase.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/web/public/img/pictograms/project-phase/planning-phase.svg b/apps/web/public/img/pictograms/project-phase/planning-phase.svg new file mode 100644 index 000000000..77da020ba --- /dev/null +++ b/apps/web/public/img/pictograms/project-phase/planning-phase.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/img/pictograms/project-phase/setup-phase.svg b/apps/web/public/img/pictograms/project-phase/setup-phase.svg new file mode 100644 index 000000000..cd2eb310c --- /dev/null +++ b/apps/web/public/img/pictograms/project-phase/setup-phase.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx b/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx index 616dc2217..d118394b6 100644 --- a/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx +++ b/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx @@ -1,11 +1,11 @@ -import { FieldError, useForm } from "react-hook-form"; +import { Controller, useForm } from "react-hook-form"; import BackNextButtonsGroup from "@/shared/views/components/BackNextButtons/BackNextButtons"; -import RadioButtons from "@/shared/views/components/RadioButtons/RadioButtons"; +import HorizontalCheckableTile from "@/shared/views/components/CheckableTile/HorizontalCheckableTile"; import WizardFormLayout from "@/shared/views/layout/WizardFormLayout/WizardFormLayout"; type Props = { - projectPhaseOptions: { value: T; label: string; hintText?: string }[]; + projectPhaseOptions: { value: T; label: string; hintText?: string; pictogram?: string }[]; onSubmit: (data: FormValues) => void; onBack: () => void; }; @@ -14,21 +14,67 @@ type FormValues = { phase?: T; }; +type ProjectPhaseOptionProps = { + label: string; + hintText?: string; + pictogram?: string; + isSelected: boolean; + onChange: () => void; +}; + +const ProjectPhaseOption = ({ + label, + hintText, + pictogram, + isSelected, + onChange, +}: ProjectPhaseOptionProps) => { + return ( + + ); +}; + function ProjectPhaseForm({ projectPhaseOptions, onSubmit, onBack, }: Props) { - const { register, handleSubmit, formState, watch } = useForm>(); + const { handleSubmit, watch, control } = useForm>(); return (
- + {projectPhaseOptions.map((option) => { + return ( +
+ { + const isSelected = field.value === option.value; + return ( + { + field.onChange(option.value); + }} + /> + ); + }} + /> +
+ ); + })}
diff --git a/apps/web/src/features/create-project/views/photovoltaic-power-station/project-phase/index.tsx b/apps/web/src/features/create-project/views/photovoltaic-power-station/project-phase/index.tsx index 1f1f84c1b..3878acced 100644 --- a/apps/web/src/features/create-project/views/photovoltaic-power-station/project-phase/index.tsx +++ b/apps/web/src/features/create-project/views/photovoltaic-power-station/project-phase/index.tsx @@ -7,6 +7,7 @@ import { import { getHintTextForRenewableEnergyProjectPhase, getLabelForRenewableEnergyProjectPhase, + getPictogramForProjectPhase, } from "@/shared/domain/projectPhase"; import { useAppDispatch } from "@/shared/views/hooks/store.hooks"; @@ -19,6 +20,7 @@ function ProjectPhaseFormContainer() { value: phase, label: getLabelForRenewableEnergyProjectPhase(phase), hintText: getHintTextForRenewableEnergyProjectPhase(phase), + pictogram: getPictogramForProjectPhase(phase), })); return ( diff --git a/apps/web/src/shared/domain/projectPhase.ts b/apps/web/src/shared/domain/projectPhase.ts index fe107f612..49c300cc5 100644 --- a/apps/web/src/shared/domain/projectPhase.ts +++ b/apps/web/src/shared/domain/projectPhase.ts @@ -65,3 +65,22 @@ export const getHintTextForUrbanProjectPhase = ( return undefined; } }; + +export const getPictogramForProjectPhase = ( + projectPhase: UrbanProjectPhase | RenewableEnergyProjectPhase, +): string | undefined => { + switch (projectPhase) { + case "setup": + return "/img/pictograms/project-phase/setup-phase.svg"; + case "planning": + return "/img/pictograms/project-phase/planning-phase.svg"; + case "design": + return "/img/pictograms/project-phase/design-phase.svg"; + case "construction": + return "/img/pictograms/project-phase/construction-phase.svg"; + case "completed": + return "/img/pictograms/project-phase/completed-phase.svg"; + case "unknown": + return undefined; + } +};