fix: contact support scroll to top (#89)

* fix: contact support scroll to top * fix: format ContentSurvey
InseeFr · Dec 3, 2024 · d3975d0 · d3975d0
1 parent 5c9be1c
commit d3975d0
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 133 deletions.
diff --git a/src/components/surveyHomepage/SupportForm.tsx b/src/components/surveyHomepage/SupportForm.tsx
@@ -6,6 +6,7 @@ import Button from "@codegouvfr/react-dsfr/Button";
 import { Schema, z } from "zod";
 import { UseFormRegister } from "react-hook-form";
 import { useIsAuthenticated } from "hooks/useAuth";
+import { useEffect, useRef } from "react";
 
 type Props = {
   surveyId: string;
@@ -19,145 +20,162 @@ export const SupportForm = ({ surveyId, isSuccess, errors, register, onSubmit }:
   const { t } = useTranslation("SupportForm");
   const { isAuthenticated } = useIsAuthenticated();
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const objectOptions = isAuthenticated
     ? ["affichageQuestionnaire", "comprehensionQuestionnaire", "autre"]
     : ["perteIdentifiant", "perteMotDePasse", "autre"];
 
   const { classes, cx } = useStyles();
 
+  useEffect(() => {
+    containerRef.current?.scrollIntoView({
+      block: "start",
+    });
+  }, [isSuccess]);
+
   if (isSuccess) {
     return (
-      <div className="fr-alert fr-alert--success fr-mb-5w fr-mb-md-0">
-        <p>{t("successAlert")}</p>
+      <div ref={containerRef}>
+        <h3>{t("contact support")}</h3>
+        <div className="fr-alert fr-alert--success fr-mb-5w fr-mb-md-0">
+          <p>{t("successAlert")}</p>
+        </div>
       </div>
     );
   }
+
   return (
-    <div className="fr-mb-5w fr-mb-md-0">
-      {t("FaqSupport", { surveyId })}
-      <p className="fr-text--sm">{t("address usage")}</p>
-      <p className="fr-text--sm">{t("mandatory fields")}</p>
-      <form action="#" onSubmit={onSubmit}>
-        <Select
-          label={t("object")}
-          nativeSelectProps={{
-            ...register("mailObjet"),
-            id: "object",
-            ...(errors.mailObjet ? { "aria-invalid": true, "aria-errormessage": `object-desc` } : {}),
-          }}
-          options={objectOptions.map(option => {
-            return { value: option, label: t(option as keyof typeof t) };
-          })}
-          placeholder={t("objectPlaceholder")}
-          state={errors.mailObjet ? "error" : "default"}
-          stateRelatedMessage={
-            errors.mailObjet?.message && t(errors.mailObjet?.message as keyof typeof t)
-          }
-        />
-        {!errors.mailObjet && <p className="fr-hidden" id={"object-desc"} />}
-        <Input
-          label={t("lastName")}
-          nativeInputProps={{
-            autoComplete: "family-name",
-            spellCheck: "false",
-            ...register("lastName"),
-            id: "lastName",
-            ...(errors.lastName
-              ? { "aria-invalid": true, "aria-errormessage": `lastName-desc-error` }
-              : {}),
-          }}
-        />
-        {!errors.lastName && <p className="fr-hidden" id={"lastName-desc-error"} />}
-        <Input
-          label={t("firstName")}
-          nativeInputProps={{
-            autoComplete: "given-name",
-            spellCheck: "false",
-            ...register("firstName"),
-            id: "firstName",
-            ...(errors.firstName
-              ? { "aria-invalid": true, "aria-errormessage": `firstName-desc-error` }
-              : {}),
-          }}
-        />
-        {!errors.firstName && <p className="fr-hidden" id={"firstName-desc-error"} />}
-        <Input
-          label={t("phone")}
-          nativeInputProps={{
-            autoComplete: "tel",
-            type: "tel",
-            ...register("phonenumber"),
-            id: "phone",
-            ...(errors.phonenumber
-              ? { "aria-invalid": true, "aria-errormessage": `phone-desc-error` }
-              : {}),
-          }}
-        />
-        {!errors.phonenumber && <p className="fr-hidden" id={"phone-desc-error"} />}
-        <Input
-          label={t("email")}
-          nativeInputProps={{
-            autoComplete: "email",
-            type: "email",
-            ...register("mailaddress"),
-            id: "email",
-            ...(errors.mailaddress && { "aria-invalid": true, "aria-errormessage": "email-desc-error" }),
-          }}
-          state={errors.mailaddress ? "error" : "default"}
-          stateRelatedMessage={
-            errors.mailaddress?.message && t(errors.mailaddress?.message as keyof typeof t)
-          }
-        />
-        {!errors.mailaddress && <p className="fr-hidden" id={"email-desc-error"} />}
-        <Input
-          label={t("confirmEmail")}
-          nativeInputProps={{
-            autoComplete: "email",
-            type: "email",
-            ...register("mailaddressConfirmation"),
-            id: "confirmEmail",
-            ...(errors.mailaddressConfirmation && {
-              "aria-invalid": true,
-              "aria-errormessage": "confirmEmail-desc-error",
-            }),
-          }}
-          state={errors.mailaddressConfirmation ? "error" : "default"}
-          stateRelatedMessage={
-            errors.mailaddressConfirmation?.message &&
-            t(errors.mailaddressConfirmation?.message as keyof typeof t)
-          }
-        />
-        {!errors.mailaddressConfirmation && <p className="fr-hidden" id={"confirmEmail-desc-error"} />}
-        <Input
-          label={t("idec")}
-          hintText={t("idecHintText")}
-          nativeInputProps={{
-            ...register("idec"),
-            id: "idec",
-            ...(errors.idec && { "aria-invalid": true, "aria-errormessage": "idec-desc-error" }),
-          }}
-          state={errors.idec ? "error" : "default"}
-          stateRelatedMessage={errors.idec?.message && t(errors.idec?.message as keyof typeof t)}
-        />
-        {!errors.idec && <p className="fr-hidden" id={"idec-desc-error"} />}
-        <Input
-          label={t("message")}
-          textArea
-          className={classes.inputTextArea}
-          state={errors.message ? "error" : "info"}
-          stateRelatedMessage={
-            errors.message?.message ? t(errors.message?.message as keyof typeof t) : t("messageInfo")
-          }
-          nativeTextAreaProps={register("message")}
-        />
+    <div ref={containerRef}>
+      <h3>{t("contact support")}</h3>
+      <div className="fr-mb-5w fr-mb-md-0">
+        {t("FaqSupport", { surveyId })}
+        <p className="fr-text--sm">{t("address usage")}</p>
+        <p className="fr-text--sm">{t("mandatory fields")}</p>
+        <form action="#" onSubmit={onSubmit}>
+          <Select
+            label={t("object")}
+            nativeSelectProps={{
+              ...register("mailObjet"),
+              id: "object",
+              ...(errors.mailObjet ? { "aria-invalid": true, "aria-errormessage": `object-desc` } : {}),
+            }}
+            options={objectOptions.map(option => {
+              return { value: option, label: t(option as keyof typeof t) };
+            })}
+            placeholder={t("objectPlaceholder")}
+            state={errors.mailObjet ? "error" : "default"}
+            stateRelatedMessage={
+              errors.mailObjet?.message && t(errors.mailObjet?.message as keyof typeof t)
+            }
+          />
+          {!errors.mailObjet && <p className="fr-hidden" id={"object-desc"} />}
+          <Input
+            label={t("lastName")}
+            nativeInputProps={{
+              autoComplete: "family-name",
+              spellCheck: "false",
+              ...register("lastName"),
+              id: "lastName",
+              ...(errors.lastName
+                ? { "aria-invalid": true, "aria-errormessage": `lastName-desc-error` }
+                : {}),
+            }}
+          />
+          {!errors.lastName && <p className="fr-hidden" id={"lastName-desc-error"} />}
+          <Input
+            label={t("firstName")}
+            nativeInputProps={{
+              autoComplete: "given-name",
+              spellCheck: "false",
+              ...register("firstName"),
+              id: "firstName",
+              ...(errors.firstName
+                ? { "aria-invalid": true, "aria-errormessage": `firstName-desc-error` }
+                : {}),
+            }}
+          />
+          {!errors.firstName && <p className="fr-hidden" id={"firstName-desc-error"} />}
+          <Input
+            label={t("phone")}
+            nativeInputProps={{
+              autoComplete: "tel",
+              type: "tel",
+              ...register("phonenumber"),
+              id: "phone",
+              ...(errors.phonenumber
+                ? { "aria-invalid": true, "aria-errormessage": `phone-desc-error` }
+                : {}),
+            }}
+          />
+          {!errors.phonenumber && <p className="fr-hidden" id={"phone-desc-error"} />}
+          <Input
+            label={t("email")}
+            nativeInputProps={{
+              autoComplete: "email",
+              type: "email",
+              ...register("mailaddress"),
+              id: "email",
+              ...(errors.mailaddress && {
+                "aria-invalid": true,
+                "aria-errormessage": "email-desc-error",
+              }),
+            }}
+            state={errors.mailaddress ? "error" : "default"}
+            stateRelatedMessage={
+              errors.mailaddress?.message && t(errors.mailaddress?.message as keyof typeof t)
+            }
+          />
+          {!errors.mailaddress && <p className="fr-hidden" id={"email-desc-error"} />}
+          <Input
+            label={t("confirmEmail")}
+            nativeInputProps={{
+              autoComplete: "email",
+              type: "email",
+              ...register("mailaddressConfirmation"),
+              id: "confirmEmail",
+              ...(errors.mailaddressConfirmation && {
+                "aria-invalid": true,
+                "aria-errormessage": "confirmEmail-desc-error",
+              }),
+            }}
+            state={errors.mailaddressConfirmation ? "error" : "default"}
+            stateRelatedMessage={
+              errors.mailaddressConfirmation?.message &&
+              t(errors.mailaddressConfirmation?.message as keyof typeof t)
+            }
+          />
+          {!errors.mailaddressConfirmation && <p className="fr-hidden" id={"confirmEmail-desc-error"} />}
+          <Input
+            label={t("idec")}
+            hintText={t("idecHintText")}
+            nativeInputProps={{
+              ...register("idec"),
+              id: "idec",
+              ...(errors.idec && { "aria-invalid": true, "aria-errormessage": "idec-desc-error" }),
+            }}
+            state={errors.idec ? "error" : "default"}
+            stateRelatedMessage={errors.idec?.message && t(errors.idec?.message as keyof typeof t)}
+          />
+          {!errors.idec && <p className="fr-hidden" id={"idec-desc-error"} />}
+          <Input
+            label={t("message")}
+            textArea
+            className={classes.inputTextArea}
+            state={errors.message ? "error" : "info"}
+            stateRelatedMessage={
+              errors.message?.message ? t(errors.message?.message as keyof typeof t) : t("messageInfo")
+            }
+            nativeTextAreaProps={register("message")}
+          />
 
-        <Button className={cx("fr-hidden", "fr-unhidden-md")} type="submit">
-          {t("submit")}
-        </Button>
-        <Button className={cx("fr-hidden-md", "fr-unhidden")} style={{ width: "100%" }} type="submit">
-          {t("submit")}
-        </Button>
-      </form>
+          <Button className={cx("fr-hidden", "fr-unhidden-md")} type="submit">
+            {t("submit")}
+          </Button>
+          <Button className={cx("fr-hidden-md", "fr-unhidden")} style={{ width: "100%" }} type="submit">
+            {t("submit")}
+          </Button>
+        </form>
+      </div>
     </div>
   );
 };
@@ -197,6 +215,7 @@ const { i18n } = declareComponentKeys<
   | "perteIdentifiant"
   | "perteMotDePasse"
   | "successAlert"
+  | "contact support"
   | { K: "FaqSupport"; P: { surveyId: string }; R: JSX.Element }
 >()("SupportForm");
 

diff --git a/src/i18n/resources/en.tsx b/src/i18n/resources/en.tsx
@@ -207,6 +207,7 @@ export const translations: Translations<"en"> = {
     "perteMotDePasse": "Lost password",
     "successAlert":
       "Your support request has been successfully submitted. You will receive a response by email soon.",
+    "contact support": "Contact support",
   },
   Documents: {
     "downloadEMail": "Download the email",

diff --git a/src/i18n/resources/fr.tsx b/src/i18n/resources/fr.tsx
@@ -207,6 +207,7 @@ export const translations: Translations<"fr"> = {
     "perteMotDePasse": "Perte de mot de passe",
     "successAlert":
       "Votre demande d'assistance a bien été prise en compte. Vous recevrez une réponse par mail prochainement.",
+    "contact support": "Contacter l'assistance",
   },
   Documents: {
     "downloadEMail": "Télécharger le mail",

diff --git a/src/routes/$survey/contacter-assistance/auth.tsx b/src/routes/$survey/contacter-assistance/auth.tsx
@@ -2,7 +2,6 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { Navigate, createFileRoute, useSearch } from "@tanstack/react-router";
 import { AuthenticatedSupport } from "components/surveyHomepage/AuthenticatedSupport";
 import { useIsAuthenticated } from "hooks/useAuth";
-import { useTranslation } from "i18n";
 
 type SupportSearch = {
   questioningId?: string;
@@ -18,7 +17,6 @@ export const Route = createFileRoute("/$survey/contacter-assistance/auth")({
 });
 
 function SupportPage() {
-  const { t } = useTranslation("Support");
   const search = useSearch({ from: "/$survey/contacter-assistance/auth" });
   const { survey } = Route.useParams();
   const { isAuthenticated } = useIsAuthenticated();
@@ -29,7 +27,6 @@ function SupportPage() {
 
   return (
     <section className={fr.cx("fr-col-12", "fr-col-md-6", "fr-pr-md-4w")}>
-      <h3>{t("contact support")}</h3>
       <AuthenticatedSupport surveyId={survey} questioningId={search.questioningId} />
     </section>
   );

diff --git a/src/routes/$survey/contacter-assistance/index.tsx b/src/routes/$survey/contacter-assistance/index.tsx
@@ -1,7 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { createFileRoute, useSearch } from "@tanstack/react-router";
 import { OfflineSupport } from "components/surveyHomepage/OfflineSupport";
-import { useTranslation } from "i18n";
 
 export type SupportSearch = {
   "mot-de-passe-oublie"?: boolean;
@@ -17,13 +16,11 @@ export const Route = createFileRoute("/$survey/contacter-assistance/")({
 });
 
 function SupportIndex() {
-  const { t } = useTranslation("Support");
   const search = useSearch({ from: "/$survey/contacter-assistance/" });
   const { survey } = Route.useParams();
 
   return (
     <section className={fr.cx("fr-col-12", "fr-col-md-6", "fr-pr-md-4w")}>
-      <h3>{t("contact support")}</h3>
       <OfflineSupport surveyId={survey} searchParams={search} />
     </section>
   );

diff --git a/src/types/ContentSurvey.ts b/src/types/ContentSurvey.ts
@@ -1,7 +1,7 @@
 export type ContentSurvey = {
   id: string;
   isSurveyOnline: boolean;
-  disabledOnWelcomePage?: boolean
+  disabledOnWelcomePage?: boolean;
   messageSurveyOffline: string;
   messageInfoSurveyOffline: string;
   title: string;