feat: p2p/ahjo inspection inputs are shown based on radio selection

City-of-Helsinki · Aug 4, 2023 · 369d3b8 · 369d3b8
1 parent 8fa21be
commit 369d3b8
Showing 1 changed file with 86 additions and 30 deletions.
diff --git a/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx b/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx
@@ -5,10 +5,16 @@ import {
   PROPOSALS_FOR_DECISION,
 } from 'benefit-shared/constants';
 import { BatchProposal } from 'benefit-shared/types/application';
-import { Button, DateInput, IconArrowUndo, TextInput } from 'hds-react';
+import {
+  Button,
+  DateInput,
+  IconArrowUndo,
+  RadioButton,
+  TextInput,
+} from 'hds-react';
 import noop from 'lodash/noop';
 import { useTranslation } from 'next-i18next';
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import Modal from 'shared/components/modal/Modal';
 
@@ -33,7 +39,8 @@ const BatchActionsInspectionForm: React.FC<BatchProps> = ({
   isInspectionFormSent,
   setInspectionFormSent,
   setBatchCloseAnimation,
-}: BatchProps) => {
+}: // eslint-disable-next-line sonarjs/cognitive-complexity
+BatchProps) => {
   const { id, proposal_for_decision: proposalForDecision } = batch;
   const { t } = useTranslation();
   const { formik, yearFromNow, isSuccess, isError } = useBatchActionsInspected(
@@ -46,6 +53,8 @@ const BatchActionsInspectionForm: React.FC<BatchProps> = ({
   const [isModalBatchToCompletion, setModalBatchToCompletion] =
     React.useState(false);
 
+  const [inspectorMode, setInspectorMode] = React.useState('ahjo');
+
   React.useEffect(() => {
     if (isError) {
       setInspectionFormSent(false);
@@ -82,6 +91,10 @@ const BatchActionsInspectionForm: React.FC<BatchProps> = ({
         return false;
       });
 
+  const handleRadioButton = (event: ChangeEvent<HTMLInputElement>): void => {
+    setInspectorMode(event.target.value);
+  };
+
   const handleSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
     formik
@@ -118,6 +131,33 @@ const BatchActionsInspectionForm: React.FC<BatchProps> = ({
 
   return (
     <>
+      {proposalForDecision === PROPOSALS_FOR_DECISION.ACCEPTED ? (
+        <$FormSection>
+          <$GridCell $colSpan={2}>
+            <RadioButton
+              key={`inspector-mode-${id}-ahjo`}
+              id={`inspector-mode-${id}-ahjo`}
+              value="ahjo"
+              label="Ahjo-tarkastus"
+              name="inspector-mode"
+              checked={inspectorMode === 'ahjo'}
+              onChange={handleRadioButton}
+            />
+          </$GridCell>
+          <$GridCell $colSpan={2}>
+            <RadioButton
+              key={`inspector-mode-${id}-p2p`}
+              id={`inspector-mode-${id}-p2p`}
+              value="p2p"
+              label="P2P-tarkastus"
+              name="inspector-mode"
+              checked={inspectorMode === 'p2p'}
+              onChange={handleRadioButton}
+            />
+          </$GridCell>
+        </$FormSection>
+      ) : null}
+
       <Modal
         id={`batch-confirmation-modal-${id}`}
         isOpen={isModalBatchToDraft || isModalBatchToCompletion}
@@ -209,35 +249,51 @@ const BatchActionsInspectionForm: React.FC<BatchProps> = ({
           </$GridCell>
         </$FormSection>
 
-        <$FormSection>
-          <$GridCell $colSpan={3}>
-            <TextInput
-              onChange={formik.handleChange}
-              label={t('common:batches.form.fields.expertInspectorName')}
-              id={`expert_inspector_name${id}`}
-              name="expert_inspector_name"
-              errorText={getErrorMessage('expert_inspector_name')}
-              invalid={!!formik.errors.expert_inspector_name}
-              value={formik.values.expert_inspector_name ?? ''}
-              required
-            />
-          </$GridCell>
+        {proposalForDecision === PROPOSALS_FOR_DECISION.ACCEPTED &&
+        inspectorMode === 'ahjo' ? (
+          <$FormSection>
+            <$GridCell $colSpan={3}>
+              <TextInput
+                onChange={formik.handleChange}
+                label={t('common:batches.form.fields.expertInspectorName')}
+                id={`expert_inspector_name${id}`}
+                name="expert_inspector_name"
+                errorText={getErrorMessage('expert_inspector_name')}
+                invalid={!!formik.errors.expert_inspector_name}
+                value={formik.values.expert_inspector_name ?? ''}
+                required
+              />
+            </$GridCell>
 
-          <$GridCell $colSpan={3}>
-            <TextInput
-              onChange={formik.handleChange}
-              label={t('common:batches.form.fields.expertInspectorTitle')}
-              id={`expert_inspector_title_${id}`}
-              name="expert_inspector_title"
-              errorText={getErrorMessage('expert_inspector_title')}
-              invalid={!!formik.errors.expert_inspector_title}
-              value={formik.values.expert_inspector_title ?? ''}
-              required
-            />
-          </$GridCell>
-        </$FormSection>
+            <$GridCell $colSpan={3}>
+              <TextInput
+                onChange={formik.handleChange}
+                label={t('common:batches.form.fields.expertInspectorTitle')}
+                id={`expert_inspector_title_${id}`}
+                name="expert_inspector_title"
+                errorText={getErrorMessage('expert_inspector_title')}
+                invalid={!!formik.errors.expert_inspector_title}
+                value={formik.values.expert_inspector_title ?? ''}
+                required
+              />
+            </$GridCell>
+            <$GridCell $colSpan={3}>
+              <TextInput
+                onChange={formik.handleChange}
+                label={t('common:batches.form.fields.p2pCheckerName')}
+                id={`p2p_checker_name_${id}`}
+                name="p2p_checker_name"
+                errorText={getErrorMessage('p2p_checker_name')}
+                invalid={!!formik.errors.p2p_checker_name}
+                value={formik.values.p2p_checker_name ?? ''}
+                required
+              />
+            </$GridCell>
+          </$FormSection>
+        ) : null}
 
-        {proposalForDecision === PROPOSALS_FOR_DECISION.ACCEPTED ? (
+        {proposalForDecision === PROPOSALS_FOR_DECISION.ACCEPTED &&
+        inspectorMode === 'p2p' ? (
           <$FormSection css="border-top: 1pox solid #000;">
             <$GridCell $colSpan={3}>
               <TextInput