fix: verification checkbox of the home preliminary form

KK-1072. Fixed the verification checkbox of the preliminary for on the home page, which didn't do anything. Now it disables the submit-button if it is unchecked and enables the submit-button when it's checked.
City-of-Helsinki · Mar 25, 2024 · 90f19fa · 90f19fa
1 parent 4661e76
commit 90f19fa
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/src/common/components/form/fields/checkbox/CheckboxField.tsx b/src/common/components/form/fields/checkbox/CheckboxField.tsx
@@ -23,9 +23,17 @@ type Props = {
 } & CheckboxProps;
 
 function CheckboxField(props: Props) {
-  const { name } = props;
+  const { name, onChange } = props;
   const { t } = useTranslation();
-  const [field, meta] = useField(name);
+  const [field, meta] = useField({ name });
+
+  // NOTE: It seems like the onChange handlers of the useInput
+  // and the custom implementation needs to be combined
+  // with a new yet another handler.
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    field.onChange(e);
+    onChange && onChange(e);
+  };
 
   return (
     <div>
@@ -35,7 +43,7 @@ function CheckboxField(props: Props) {
         type="checkbox"
         style={kukkuuCheckboxStyles}
         checked={Boolean(field.value)}
-        label={<span className={styles.listLabel}>{props.label}</span>}
+        onChange={onChangeHandler}
       />
       {meta.error && meta.touched && (
         <p className={styles.errorText}>{t(meta.error)}</p>

diff --git a/src/domain/home/__tests__/__snapshots__/Home.test.tsx.snap b/src/domain/home/__tests__/__snapshots__/Home.test.tsx.snap
@@ -552,16 +552,14 @@ exports[`<Home /> > renders snapshot correctly 1`] = `
                     class="Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3"
                     for="verifyInformation"
                   >
-                    <span
-                      class="_listLabel_be7ab7"
-                    >
-                      Vakuutan antamani tiedot oikeaksi
-                    </span>
+                    Vakuutan antamani tiedot oikeaksi
                   </label>
                 </div>
               </div>
               <button
+                aria-disabled="true"
                 class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO _submitButton_1e8528"
+                disabled=""
                 style="--color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black-90); --color-hover-focus: var(--color-black-90); --background-color: var(--color-summer); --background-color-hover: var(--color-summer-dark); --background-color-focus: var(--color-summer); --background-color-hover-focus: var(--color-summer-dark); --background-selected: var(--color-summer); --border-color: var(--color-summer); --border-color-hover: var(--color-summer-dark); --border-color-focus: var(--color-summer-dark); --border-color-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer); --border-color-selected-hover-focus: var(--color-summer);"
                 type="submit"
               >

diff --git a/src/domain/home/form/HomePreliminaryForm.tsx b/src/domain/home/form/HomePreliminaryForm.tsx
@@ -1,9 +1,10 @@
-import { FunctionComponent, Ref } from 'react';
+import React, { FunctionComponent, Ref } from 'react';
 import { Formik, Form } from 'formik';
 import { connect } from 'react-redux';
 import { useTranslation, Trans } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import * as yup from 'yup';
+import { CheckboxProps } from 'hds-react';
 
 import { loginTunnistamo } from '../../auth/authenticate';
 import styles from './homePreliminaryForm.module.scss';
@@ -39,7 +40,14 @@ const HomePreliminaryForm: FunctionComponent<Props> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const getPathname = useGetPathname();
+  const [
+    isRegistrationInformationVerified,
+    setIsRegistrationInformationVerified,
+  ] = React.useState(false);
 
+  const onChangeRegistrationInformationVerified: CheckboxProps['onChange'] = (
+    event
+  ) => setIsRegistrationInformationVerified(event.currentTarget.checked);
   const schema = yup.object().shape({
     verifyInformation: yup.boolean().required('validation.general.required'),
     child: yup.object().shape({
@@ -119,15 +127,16 @@ const HomePreliminaryForm: FunctionComponent<Props> = ({
                 <CheckboxField
                   name="verifyInformation"
                   id="verifyInformation"
-                  label={
-                    <Trans i18nKey="homePage.preliminaryForm.verifyInformation.checkbox.label" />
-                  }
+                  label={t(
+                    'homePage.preliminaryForm.verifyInformation.checkbox.label'
+                  )}
+                  onChange={onChangeRegistrationInformationVerified}
                   required
                 />
                 <Button
                   type="submit"
                   className={styles.submitButton}
-                  disabled={isSubmitting}
+                  disabled={isSubmitting || !isRegistrationInformationVerified}
                 >
                   {t('homePage.hero.buttonText')}
                 </Button>

diff --git a/src/domain/home/form/__test__/__snapshots__/HomePreliminaryForm.test.tsx.snap b/src/domain/home/form/__test__/__snapshots__/HomePreliminaryForm.test.tsx.snap
@@ -106,16 +106,14 @@ exports[`renders snapshot correctly 1`] = `
               class="Checkbox-module_label__L5AN1 checkbox_hds-checkbox__label__3HoD3"
               for="verifyInformation"
             >
-              <span
-                class="_listLabel_be7ab7"
-              >
-                Vakuutan antamani tiedot oikeaksi
-              </span>
+              Vakuutan antamani tiedot oikeaksi
             </label>
           </div>
         </div>
         <button
+          aria-disabled="true"
           class="Button-module_button__1msFE button_hds-button__2A0je Button-module_primary__2LfKB button_hds-button--primary__2NVvO _submitButton_1e8528"
+          disabled=""
           style="--color: var(--color-black); --color-hover: var(--color-black); --color-focus: var(--color-black-90); --color-hover-focus: var(--color-black-90); --background-color: var(--color-summer); --background-color-hover: var(--color-summer-dark); --background-color-focus: var(--color-summer); --background-color-hover-focus: var(--color-summer-dark); --background-selected: var(--color-summer); --border-color: var(--color-summer); --border-color-hover: var(--color-summer-dark); --border-color-focus: var(--color-summer-dark); --border-color-hover-focus: var(--color-summer-dark); --border-color-selected: var(--color-summer); --border-color-selected-hover: var(--color-summer-dark); --border-color-selected-focus: var(--color-summer); --border-color-selected-hover-focus: var(--color-summer);"
           type="submit"
         >