refactor: accept terms / send application display errors

apps/ui/components/application/ViewApplication.tsx

@@ -24,15 +24,15 @@ import {
 type ViewApplicationProps = {
   application: ApplicationCommonFragment;
   tos: Maybe<TermsOfUseTextFieldsFragment>;
-  acceptTermsOfUse?: boolean;
-  setAcceptTermsOfUse?: (value: boolean) => void;
+  isTermsAccepted?: { general: boolean; specific: boolean };
+  setIsTermsAccepted?: (key: "general" | "specific", val: boolean) => void;
 };
 
 export function ViewApplication({
   application,
   tos,
-  acceptTermsOfUse,
-  setAcceptTermsOfUse,
+  isTermsAccepted,
+  setIsTermsAccepted,
 }: ViewApplicationProps): JSX.Element {
   const { t, i18n } = useTranslation();
   const lang = convertLanguageCode(i18n.language);
@@ -61,6 +61,13 @@ export function ViewApplication({
           <TermsBox
             id="preview.acceptTermsOfUse"
             body={<Sanitize html={getTranslationSafe(tos, "text", lang)} />}
+            acceptLabel={t("application:preview.userAcceptsGeneralTerms")}
+            accepted={isTermsAccepted?.general}
+            setAccepted={
+              setIsTermsAccepted
+                ? (val) => setIsTermsAccepted("general", val)
+                : undefined
+            }
           />
         </Accordion>
       )}
@@ -69,9 +76,13 @@ export function ViewApplication({
           <TermsBox
             id="preview.acceptServiceSpecificTerms"
             body={<Sanitize html={getTranslationSafe(tos2, "text", lang)} />}
-            acceptLabel={t("application:preview.userAcceptsTerms")}
-            accepted={acceptTermsOfUse}
-            setAccepted={setAcceptTermsOfUse}
+            acceptLabel={t("application:preview.userAcceptsSpecificTerms")}
+            accepted={isTermsAccepted?.specific}
+            setAccepted={
+              setIsTermsAccepted
+                ? (val) => setIsTermsAccepted("specific", val)
+                : undefined
+            }
           />
         </Accordion>
       )}

apps/ui/pages/applications/[id]/page3.tsx

@@ -24,7 +24,6 @@ import { ApplicationPageWrapper } from "@/components/application/ApplicationPage
 import { useApplicationUpdate } from "@/hooks/useApplicationUpdate";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { base64encode, ignoreMaybeArray, toNumber } from "common/src/helpers";
-import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
 import {
   Button,
@@ -41,6 +40,7 @@ import { FormSubHeading, SpanFullRow } from "@/components/application/styled";
 import { createApolloClient } from "@/modules/apolloClient";
 import { gql } from "@apollo/client";
 import { ApplicationFormTextInput } from "@/components/application/ApplicationFormTextInput";
+import { useDisplayError } from "@/hooks/useDisplayError";
 
 function Page3Form(): JSX.Element | null {
   const { options } = useOptions();
@@ -107,13 +107,14 @@ function Page3({ application }: PropsNarrowed): JSX.Element {
 
   const { t } = useTranslation();
   const [update] = useApplicationUpdate();
+  const dislayError = useDisplayError();
 
   const onSubmit = async (values: ApplicationPage3FormValues) => {
     try {
       const pk = await update(transformPage3Application(values));
       router.push(getApplicationPath(pk, "preview"));
-    } catch (e) {
-      errorToast({ text: t("common:error.dataError") });
+    } catch (err) {
+      dislayError(err);
     }
   };
 

apps/ui/pages/applications/[id]/preview.tsx

@@ -17,7 +17,6 @@ import {
   getGenericTerms,
 } from "@/modules/serverUtils";
 import { base64encode, ignoreMaybeArray, toNumber } from "common/src/helpers";
-import { errorToast } from "common/src/common/toast";
 import { getApplicationPath } from "@/modules/urls";
 import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";
 import { ButtonContainer, Flex } from "common/styles/util";
@@ -28,6 +27,7 @@ import {
   IconArrowLeft,
   LoadingSpinner,
 } from "hds-react";
+import { useDisplayError } from "@/hooks/useDisplayError";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -36,16 +36,29 @@ type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
 // This uses separate Send mutation (not update) so no onNext like the other pages
 // we could also remove the FormContext here
 function Preview({ application, tos }: PropsNarrowed): JSX.Element {
-  const [acceptTermsOfUse, setAcceptTermsOfUse] = useState(false);
   const router = useRouter();
-
+  const dislayError = useDisplayError();
   const { t } = useTranslation();
 
+  const [isTermsAccepted, setIsTermsAccepted] = useState({
+    general: false,
+    specific: false,
+  });
+
+  const handleTermsAcceptedChange = (
+    key: "general" | "specific",
+    val: boolean
+  ) => {
+    setIsTermsAccepted({ ...isTermsAccepted, [key]: val });
+  };
+
   const [send, { loading: isMutationLoading }] = useSendApplicationMutation();
 
+  const hasTermsAccepted = isTermsAccepted.general && isTermsAccepted.specific;
+
   const onSubmit = async (evt: React.FormEvent) => {
     evt.preventDefault();
-    if (!acceptTermsOfUse) {
+    if (!hasTermsAccepted) {
       return;
     }
     try {
@@ -67,8 +80,8 @@ function Preview({ application, tos }: PropsNarrowed): JSX.Element {
       }
 
       router.push(getApplicationPath(resPk, "sent"));
-    } catch (e) {
-      errorToast({ text: t("errors:applicationMutation.Validation error") });
+    } catch (err) {
+      dislayError(err);
     }
   };
 
@@ -81,8 +94,8 @@ function Preview({ application, tos }: PropsNarrowed): JSX.Element {
         <ViewApplication
           application={application}
           tos={tos}
-          acceptTermsOfUse={acceptTermsOfUse}
-          setAcceptTermsOfUse={setAcceptTermsOfUse}
+          isTermsAccepted={isTermsAccepted}
+          setIsTermsAccepted={handleTermsAcceptedChange}
         />
         <ButtonContainer>
           <ButtonLikeLink href={getApplicationPath(application.pk, "page3")}>
@@ -97,7 +110,7 @@ function Preview({ application, tos }: PropsNarrowed): JSX.Element {
             }
             iconStart={isMutationLoading ? <LoadingSpinner /> : undefined}
             size={ButtonSize.Small}
-            disabled={!acceptTermsOfUse || isMutationLoading}
+            disabled={!hasTermsAccepted || isMutationLoading}
           >
             {t("common:submit")}
           </Button>

apps/ui/public/locales/en/application.json

@@ -186,7 +186,8 @@
     },
     "reservationUnitTerms": "Additional booking conditions",
     "termsOfService": "Booking conditions for City of Helsinki spaces and equipment",
-    "userAcceptsTerms": "I have read and I accept the Terms of Agreement and the Additional booking conditions.",
+    "userAcceptsGeneralTerms": "I have read and I accept the Terms of Agreement.",
+    "userAcceptsSpecificTerms": "I have read and I accept the Additional booking conditions.",
     "subHeading": {
       "applicationInfo": "Application information"
     },

apps/ui/public/locales/en/errors.json

@@ -38,6 +38,7 @@
     "validation": {
       "RESERVATION_UNIT_ADULT_RESERVEE_REQUIRED": "The person making the reservation must be 18 years old",
       "APPLICATION_ADULT_RESERVEE_REQUIRED": "The applicant must be 18 years old.",
+      "invalid": "Invalid value.",
       "generic_validation_error": "An error occurred."
     }
   }

apps/ui/public/locales/fi/application.json

@@ -185,7 +185,8 @@
     },
     "reservationUnitTerms": "Täydentävät varausehdot",
     "termsOfService": "Helsingin kaupungin tilojen ja laitteiden varausehdot",
-    "userAcceptsTerms": "Olen lukenut ja hyväksyn sopimusehdot ja täydentävät varausehdot.",
+    "userAcceptsGeneralTerms": "Olen lukenut ja hyväksyn sopimusehdot.",
+    "userAcceptsSpecificTerms": "Olen lukenut ja hyväksyn täydentävät varausehdot.",
     "reservationDeleted": "Varaus peruttu.",
     "applicationSectionCancelled": "Peruttu {{ cancelled }} / {{ future }} varausta.",
     "applicationSectionCancelledAll": "Peruttu kaikki {{ cancelled }} varausta."

apps/ui/public/locales/fi/errors.json

@@ -38,6 +38,7 @@
     "validation": {
       "RESERVATION_UNIT_ADULT_RESERVEE_REQUIRED":  "Varaajan on oltava täysi-ikäinen.",
       "APPLICATION_ADULT_RESERVEE_REQUIRED": "Hakijan on oltava täysi-ikäinen.",
+      "invalid": "Virheellinen arvo.",
       "generic_validation_error": "Tapahtui virhe."
     }
   }

apps/ui/public/locales/sv/application.json

@@ -183,7 +183,8 @@
     },
     "reservationUnitTerms": "Kompletterande bokningssvillkor",
     "termsOfService": "Bokningsvillkor för Helsingfors stads lokaler och utrustning",
-    "userAcceptsTerms": "Jag har läst avtalsvillkoren och de kompletterande bokningsvillkoren och godkänner dessa.",
+    "userAcceptsGeneralTerms": "Jag har läst och godkänner avtalsvillkoren.",
+    "userAcceptsSpecificTerms": "Jag har läst och godkänner de kompletterande bokningsvillkoren.",
     "reservationDeleted": "Bokning avbruten.",
     "applicationSectionCancelled": "Avbruten {{ cancelled }} / {{ future }} bokning.",
     "applicationSectionCancelledAll": "Avbruten alla {{ cancelled }} bokning."

apps/ui/public/locales/sv/errors.json

@@ -38,6 +38,7 @@
     "validation": {
       "RESERVATION_UNIT_ADULT_RESERVEE_REQUIRED": "Personen som gör bokningen måste vara myndig.",
       "APPLICATION_ADULT_RESERVEE_REQUIRED": "Sökanden måste vara myndig.",
+      "invalid": "Ogiltigt värde.",
       "generic_validation_error": "Ett fel uppstod."
     }
   }