Main update with multiple changes

pages/persoonsgegevens/[person].tsx

@@ -24,10 +24,10 @@
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { useForm, UseFormRegister } from "react-hook-form";
 import Skeleton from "react-loading-skeleton";
-import { Aside, Checkbox2, OptionalIndicator, PageContentMain, ReservationCard } from "../../src/components";
+import { Aside, Checkbox2, PageContentMain, ReservationCard } from "../../src/components";
 import { AddressDataList } from "../../src/components/huwelijksplanner/AddressDataList";
 import { PageFooterTemplate } from "../../src/components/huwelijksplanner/PageFooterTemplate";
 import { PageHeaderTemplate } from "../../src/components/huwelijksplanner/PageHeaderTemplate";
@@ -60,12 +60,13 @@
     locale = "nl",
     push,
   } = useRouter();
-  const { register, handleSubmit, formState } = useForm<FormData>();
+  const { formState, handleSubmit, register, reset } = useForm<FormData>();
   const [marriageOptions, setMarriageOptions] = useContext(MarriageOptionsContext);
   const [persoonData] = useIngeschrevenpersoonGetByBsn(getBsnFromJWT());
   const { reservation, ambtenaar, productId } = marriageOptions;
   const [loading, setLoading] = useState(false);
   const pageInitialized = useRef(false);
+  const invalidStateDescriptionId = useId();
 
   const initializeMarriage = useCallback(() => {
     if (!reservation) return;
@@ -111,7 +112,13 @@
     }
   }, [huwelijkId, initializeMarriage, marriageOptions, reservation, setMarriageOptions]);
 
+  useEffect(() => {
+    if (formState.isDirty)
+      reset(undefined, { keepValues: true, keepErrors: true, keepIsValid: true, keepIsSubmitted: false });
+  });
+
   const onContactDetailsSubmit = (data: FormData) => {
+    setLoading(true);
     if (huwelijkId) {
       HuwelijkService.huwelijkPatchItem({
         id: huwelijkId as string,
@@ -131,6 +138,7 @@
         },
       }).then(() => {
         push(`/persoonsgegevens/succes?huwelijkId=${huwelijkId}`);
+        setLoading(false);
       });
     } else {
       AssentService.assentPatchItem({
@@ -148,6 +156,7 @@
         },
       }).then(() => {
         push("/voorgenomen-huwelijk/partner");
+        setLoading(false);
       });
     }
   };
@@ -199,23 +208,20 @@
                   <p>Deze gegevens kun je zelf invullen of wijzigen.</p>
                   <FormField>
                     <p className="utrecht-form-field__label">
-                      <FormLabel htmlFor="tel">
-                        {t("form:tel")} <OptionalIndicator title={t("form:optional")} />
-                      </FormLabel>
+                      <FormLabel htmlFor="tel">{t("form:tel")}</FormLabel>
                     </p>
                     <Textbox
                       className="utrecht-form-field__input"
                       id="tel"
                       type="tel"
                       autoComplete="tel"
-                      {...register("phoneNumber")}
+                      invalid={formState.errors.phoneNumber && formState.isSubmitted}
+                      {...register("phoneNumber", { required: true })}
                     />
                   </FormField>
                   <FormField>
                     <p className="utrecht-form-field__label">
-                      <FormLabel htmlFor="email">
-                        {t("form:email")} <OptionalIndicator title={t("form:optional")} />
-                      </FormLabel>
+                      <FormLabel htmlFor="email">{t("form:email")}</FormLabel>
                     </p>
                     <FormFieldDescription id="email-description">
                       We sturen je een bevestiging naar dit e-mailadres.
@@ -228,18 +234,34 @@
                       type="email"
                       autoComplete="email"
                       aria-describedby="email-description"
-                      {...register("email")}
+                      invalid={formState.errors.email && formState.isSubmitted}
+                      {...register("email", { required: true })}
                     />
                   </FormField>
                   <DeclarationCheckboxGroup register={register} checkboxData={checkboxData} />
                   <Button
-                    disabled={!formState.isValid || loading}
                     type="submit"
+                    disabled={loading}
                     name="type"
                     appearance="primary-action-button"
+                    aria-describedby={invalidStateDescriptionId}
+                    busy={loading}
                   >
                     Contactgegevens opslaan
                   </Button>
+                  {!formState.isValid && (
+                    <>
+                      {!formState.isSubmitted ? (
+                        <FormFieldDescription id={invalidStateDescriptionId} hidden>
+                          <Paragraph>Vul eerst alle gegevens in.</Paragraph>
+                        </FormFieldDescription>
+                      ) : (
+                        <FormFieldDescription id={invalidStateDescriptionId} invalid aria-live={"assertive"}>
+                          <Paragraph>Nog niet alle gegevens zijn ingevuld.</Paragraph>
+                        </FormFieldDescription>
+                      )}
+                    </>
+                  )}
                 </section>
                 <Aside>
                   <Heading2>Meer informatie</Heading2>
@@ -335,7 +357,7 @@
 };
 
 const mapToContactObject = (email?: string, phoneNumber?: string) => {
   const contactObject: any = {};
 
   if (email) {
     contactObject.emails = [

pages/voorgenomen-huwelijk/getuigen/index.tsx

@@ -192,8 +192,7 @@ const mapWitnesses = (witnesses: Witness[]) => {
 
 const WitnessFieldset = ({ index }: { index: number }) => {
   const { t } = useTranslation(["form"]);
-  const { register, formState, watch } = useFormContext<WitnessFormData>();
-  const witnessId = useId();
+  const { register, formState } = useFormContext<WitnessFormData>();
   const nameId = useId();
   const emailId = useId();
 
@@ -215,8 +214,8 @@ const WitnessFieldset = ({ index }: { index: number }) => {
         <Textbox
           id={nameId}
           type="text"
-          autoComplete={`name ${witnessId}`}
           invalid={nameInvalid}
+          autoComplete={`section-witness-${index} name`}
           {...register(`witnesses.${index}.name`)}
         />
       </FormField>
@@ -230,8 +229,8 @@ const WitnessFieldset = ({ index }: { index: number }) => {
         <Textbox
           id={emailId}
           type="email"
-          autoComplete={`email ${witnessId}`}
           invalid={emailInvalid}
+          autoComplete={`section-witness-${index} email`}
           {...register(`witnesses.${index}.email`)}
         />
       </FormField>

src/components/HeaderDivider.scss

@@ -0,0 +1,5 @@
+.utrecht-page-header-divider {
+  background-color: var(--utrecht-topnav-list-background-color);
+  grid-area: nav;
+  height: 2px;
+}

src/components/HeaderDivider.tsx

@@ -0,0 +1,3 @@
+export const HeaderDivider = () => {
+  return <div className={"utrecht-page-header-divider"}></div>;
+};

src/components/HeaderNav.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { FC, ForwardedRef, forwardRef, HTMLAttributes } from "react";
+import { FC, ForwardedRef, forwardRef, HTMLAttributes } from "react";
 import { Link, LinkProps } from "./Link";
 
 export const HeaderNavLink: FC<LinkProps> = forwardRef(

src/components/huwelijksplanner/PageHeaderTemplate.tsx

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { HeaderNav, HeaderNavLink, LanguageToggleButtons, Link, Paragraph, UtrechtLogo } from "../index";
+import { HeaderDivider, LanguageToggleButtons, Link, Paragraph, UtrechtLogo } from "../index";
 
 export const PageHeaderTemplate = () => (
   <>
@@ -13,12 +13,6 @@ export const PageHeaderTemplate = () => (
       </Link>
     </Paragraph>
     <LanguageToggleButtons headingLevel={2} className="utrecht-page-header__alternate-lang-nav" />
-    <HeaderNav className="utrecht-page-header__nav">
-      <HeaderNavLink href="https://www.utrecht.nl/wonen-en-leven">Wonen en Leven</HeaderNavLink>
-      <HeaderNavLink href="https://www.utrecht.nl/zorg-en-onderwijs/">Zorg en Onderwijs</HeaderNavLink>
-      <HeaderNavLink href="https://www.utrecht.nl/werk-en-inkomen/">Werk en Inkomen</HeaderNavLink>
-      <HeaderNavLink href="https://www.utrecht.nl/ondernemen/">Ondernemen</HeaderNavLink>
-      <HeaderNavLink href="https://www.utrecht.nl/bestuur-en-organisatie/">Bestuur en Organisatie</HeaderNavLink>
-    </HeaderNav>
+    <HeaderDivider />
   </>
 );

src/components/index.ts

@@ -29,6 +29,7 @@ export { ReservationCard } from './huwelijksplanner/ReservationCard';
 export { SkipLink } from './SkipLink';
 export { UtrechtLogo } from './UtrechtLogo';
 export { ValueCurrency } from './ValueCurrency';
+export { HeaderDivider } from './HeaderDivider';
 export { PreHeading } from './PreHeading';
 export { HeadingGroup } from './HeadingGroup';
 export { FeedbackSection } from './FeedbackSection';

styles/globals.scss

@@ -7,6 +7,7 @@
 @import "./src/components/Email";
 @import "./src/components/FeedbackSection";
 @import "./src/components/FormContent";
+@import "./src/components/HeaderDivider";
 @import "./src/components/HeadingGroup";
 @import "./src/components/PageContentMain";
 @import "./pages/gateway-login/index";