added highlight and button to copy potential beneficiary email in dis…

…cussion

front/src/app/components/admin/establishments/DiscussionManageContent.tsx

@@ -4,13 +4,19 @@ import Badge from "@codegouvfr/react-dsfr/Badge";
 import Button, { ButtonProps } from "@codegouvfr/react-dsfr/Button";
 import ButtonsGroup from "@codegouvfr/react-dsfr/ButtonsGroup";
 import { Card } from "@codegouvfr/react-dsfr/Card";
+import Highlight from "@codegouvfr/react-dsfr/Highlight";
 import Input from "@codegouvfr/react-dsfr/Input";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import Select, { SelectProps } from "@codegouvfr/react-dsfr/SelectNext";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { renderContent } from "html-templates/src/components/email";
 import React from "react";
-import { DiscussionMeta, ExchangeMessage, Loader } from "react-design-system";
+import {
+  CopyButton,
+  DiscussionMeta,
+  ExchangeMessage,
+  Loader,
+} from "react-design-system";
 import { createPortal } from "react-dom";
 import { useForm } from "react-hook-form";
 import { useDispatch } from "react-redux";
@@ -231,6 +237,26 @@ const DiscussionDetails = ({
           buttonsSize="small"
           buttons={candidateContactButtons}
         />
+        <div className={fr.cx("fr-grid-row")}>
+          <div className={fr.cx("fr-col-12", "fr-col-lg-8")}>
+            <Highlight className={fr.cx("fr-ml-0", "fr-pt-2w", "fr-pb-1w")}>
+              <p className={fr.cx("fr-text--sm", "fr-mb-2w")}>
+                Vous ne parvenez pas à répondre au candidat ? Copiez dans votre
+                presse papier l’adresse email sécurisée de cette discussion et
+                utilisez-la directement depuis votre boîte mail.
+              </p>
+              <CopyButton
+                textToCopy={createOpaqueEmail(
+                  discussion.id,
+                  "potentialBeneficiary",
+                  `reply.${window.location.hostname}`,
+                )}
+                withIcon
+                label="Copier l'adresse email"
+              />
+            </Highlight>
+          </div>
+        </div>
       </header>
       {discussion.exchanges.map(({ sender, sentAt, subject, message }) => (
         <ExchangeMessage sender={sender} key={`${sender}-${sentAt}`}>

front/src/app/components/agency/CopyAgencyId.tsx

@@ -1,8 +1,8 @@
 import { Badge } from "@codegouvfr/react-dsfr/Badge";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import React from "react";
+import { useCopyButton } from "react-design-system";
 import { AgencyId } from "shared";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 
 export const CopyAgencyId = ({ agencyId }: { agencyId: AgencyId }) => {
   const { copyButtonIsDisabled, copyButtonLabel, onCopyButtonClick } =

front/src/app/components/forms/convention/ShareConventionLink.tsx

@@ -2,11 +2,11 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import React, { useState } from "react";
+import { useCopyButton } from "react-design-system";
 import { createPortal } from "react-dom";
 import { useFormContext } from "react-hook-form";
 import { ConventionReadDto, domElementIds } from "shared";
 import { useConventionTexts } from "src/app/contents/forms/convention/textSetup";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 import { match } from "ts-pattern";
 import { ShareForm } from "./ShareForm";
 

front/src/app/components/immersion-offer/TranscientPreferencesDisplay.tsx

@@ -3,6 +3,7 @@ import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import { useEffect, useState } from "react";
 import { FormOverlay } from "react-design-system";
 import {
+  ImmersionObjective,
   isStringImmersionObjective,
   keys,
   labelsForImmersionObjective,
@@ -146,7 +147,7 @@ const renderTranscientKeyValues = (data: ContactTranscientData) => {
 
 const renderValue = (
   key: keyof ContactTranscientData,
-  value: unknown,
+  value: string | boolean | number | ImmersionObjective,
 ): React.ReactNode => {
   if (typeof value === "boolean") {
     return value ? "Oui" : "Non";

front/src/app/pages/admin/technical-options-sections/ApiConsumersSection.tsx

@@ -7,6 +7,7 @@ import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
 import { Table } from "@codegouvfr/react-dsfr/Table";
 import { addYears } from "date-fns";
 import React, { Fragment, useEffect, useState } from "react";
+import { useCopyButton } from "react-design-system";
 import { createPortal } from "react-dom";
 import { useDispatch } from "react-redux";
 import {
@@ -28,7 +29,6 @@ import {
 } from "src/app/contents/admin/apiConsumer";
 import { useAdminToken } from "src/app/hooks/jwt.hooks";
 import { useAppSelector } from "src/app/hooks/reduxHooks";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 import { apiConsumerSelectors } from "src/core-logic/domain/apiConsumer/apiConsumer.selector";
 import { apiConsumerSlice } from "src/core-logic/domain/apiConsumer/apiConsumer.slice";
 import { feedbackSlice } from "src/core-logic/domain/feedback/feedback.slice";

front/src/app/pages/admin/technical-options-sections/UploadFileSection.tsx

@@ -3,8 +3,8 @@ import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import Button from "@codegouvfr/react-dsfr/Button";
 import React, { useState } from "react";
 import { File } from "react-design-system";
+import { useCopyButton } from "react-design-system";
 import { domElementIds } from "shared";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 import { outOfReduxDependencies } from "src/config/dependencies";
 
 export const UploadFileSection = () => {

front/src/app/pages/convention/ConventionConfirmationPage.tsx

@@ -6,9 +6,9 @@ import {
   SectionConventionNextStepsProps,
   SubmitConfirmationSection,
 } from "react-design-system";
+import { useCopyButton } from "react-design-system";
 import { errors, zUuidLike } from "shared";
 import { HeaderFooterLayout } from "src/app/components/layout/HeaderFooterLayout";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 import { routes } from "src/app/routes/routes";
 import { Route } from "type-route";
 import { nextStepIllustrations } from "../../../assets/img/illustrations";

front/src/app/routes/Router.tsx

@@ -85,7 +85,7 @@ const RedirectTo = ({ route }: { route: Route<typeof routes> }) => {
 };
 
 const getPageByRouteName: {
-  [K in keyof Routes]: (route: Route<Routes[K]>) => unknown;
+  [K in keyof Routes]: (route: Route<Routes[K]>) => React.ReactNode;
 } = {
   addAgency: () => <AddAgencyPage />,
   admin: (route) => (

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.tsx

@@ -93,7 +93,6 @@ export const ConventionSummary = ({
               label="Copier l'ID de convention"
               textToCopy={conventionId}
               withIcon={true}
-              withBorder={true}
               className={fr.cx("fr-my-2v")}
             />
           </div>

libs/react-design-system/src/immersionFacile/components/copy-button/CopyButton.stories.tsx

@@ -1,5 +1,4 @@
 import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { CopyButton, CopyButtonProperties } from "./CopyButton";
 
 const Component = CopyButton;
@@ -41,11 +40,3 @@ export const WithIconButNoLabel: Story = {
     withIcon: true,
   },
 };
-
-export const WithBorder: Story = {
-  args: {
-    textToCopy: "texte copié",
-    withIcon: true,
-    withBorder: true,
-  },
-};

libs/react-design-system/src/immersionFacile/components/copy-button/CopyButton.tsx

@@ -1,56 +1,38 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import React, { useState } from "react";
+import Button, { ButtonProps } from "@codegouvfr/react-dsfr/Button";
+import React from "react";
 import { useStyles } from "tss-react/dsfr";
-import Styles from "./CopyButton.styles";
+import { useCopyButton } from "./useCopyButton";
 
-export type CopyButtonProperties = {
-  textToCopy: string;
-  withBorder?: boolean;
-  className?: string;
-} & ({ label: string; withIcon: boolean } | { withIcon: true });
+export type CopyButtonProperties = ButtonProps.Common &
+  ButtonProps.AsButton & {
+    textToCopy: string;
+    label?: string;
+    withIcon?: boolean;
+  };
 
 export const CopyButton = (props: CopyButtonProperties) => {
   const { cx } = useStyles();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const onCopyButtonClick = (stringToCopy: string) => {
-    navigator.clipboard
-      .writeText(stringToCopy)
-      .then(() => {
-        setIsCopied(true);
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 3_000);
-      })
-
-      .catch((error) => console.error(error));
-  };
-
-  const copyButtonIsDisabled = isCopied;
-
-  const defaultLabel = "label" in props ? props.label : "";
-  const copyButtonLabel = isCopied ? "Copié !" : defaultLabel;
+  const { onCopyButtonClick, copyButtonIsDisabled, copyButtonLabel } =
+    useCopyButton(props.label);
 
   return (
-    <button
+    <Button
+      type="button"
       disabled={copyButtonIsDisabled}
       onClick={() => onCopyButtonClick(props.textToCopy)}
+      size="small"
+      priority="tertiary"
       className={cx(
         fr.cx(
-          "fr-btn",
-          "fr-btn--sm",
-          "fr-btn--tertiary-no-outline",
           "fr-py-0",
           "fr-px-2v",
           props.withIcon && "fr-icon-clipboard-fill",
           props.withIcon && "fr-btn--icon-left",
         ),
-        props.withBorder && Styles.copyButtonBorder,
-        props.className,
       )}
-      type="button"
     >
       {copyButtonLabel}
-    </button>
+    </Button>
   );
 };

libs/react-design-system/src/immersionFacile/components/copy-button/index.ts

@@ -1 +1,2 @@
 export * from "./CopyButton";
+export * from "./useCopyButton";