Skip to content

Commit

Permalink
fix(emailsender): add badge color for types, rework message display, …
Browse files Browse the repository at this point in the history
…add toast
  • Loading branch information
Mihoub2 committed May 22, 2024
1 parent ae094c7 commit ab21e5a
Show file tree
Hide file tree
Showing 9 changed files with 155 additions and 64 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.1",
"react-select": "^5.8.0",
"react-toastify": "^10.0.5",
"sib-api-v3-sdk": "^8.5.0"
},
"devDependencies": {
Expand All @@ -40,4 +41,4 @@
"typescript": "^5.2.2",
"vite": "^5.0.4"
}
}
}
42 changes: 19 additions & 23 deletions src/api/send-mail/index.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import { useEffect, useState } from "react";
import {
Button,
Col,
Container,
Row,
Text,
TextArea,
} from "@dataesr/dsfr-plus";
import { Button, Col, Container, Row, TextArea } from "@dataesr/dsfr-plus";
import { Contribution } from "../../types";
import { postHeaders } from "../../config/api";

import { toast } from "react-toastify";
function EmailSender({ contribution }: { contribution: Contribution }) {
const [emailSent, setEmailSent] = useState(false);
const [, setEmailSent] = useState(false);
const [userResponse, setUserResponse] = useState("");
const basePath = window.location.pathname.includes("contact")
? "contact"
Expand All @@ -26,7 +19,7 @@ function EmailSender({ contribution }: { contribution: Contribution }) {
}
}, []);
const sendEmail = async () => {
const data = {
const dataForBrevo = {
sender: {
email: "[email protected]",
name: "Debache ",
Expand All @@ -41,31 +34,35 @@ function EmailSender({ contribution }: { contribution: Contribution }) {
htmlContent: userResponse,
};

const response = await fetch("/email/", {
const responseBrevo = await fetch("/email/", {
method: "POST",
headers: {
"api-key": import.meta.env.VITE_BREVO_API_AUTHORIZATION,
},
body: JSON.stringify(data),
body: JSON.stringify(dataForBrevo),
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
if (!responseBrevo.ok) {
throw new Error(`HTTP error! status: ${responseBrevo.status}`);
}

const responsePatch = await fetch(`/api/${basePath}/${contribution._id}`, {
const dataForScanR = {
comment: userResponse,
responseFrom: selectedProfile,
};

const responseScanR = await fetch(`/api/${basePath}/${contribution._id}`, {
method: "PATCH",
headers: postHeaders,
body: JSON.stringify(data),
body: JSON.stringify(dataForScanR),
});

if (!responsePatch.ok) {
throw new Error(
`Erreur pendant la mise à jour de l'api ! status: ${response.status}`
);
if (!responseScanR.ok) {
throw new Error(`HTTP error! status: ${responseScanR.status}`);
}

setEmailSent(true);
toast.success("Mail envoyé!");
};

return (
Expand All @@ -79,12 +76,11 @@ function EmailSender({ contribution }: { contribution: Contribution }) {
rows={2}
/>
</Col>
<Col className="fr-mt-10w">
<Col>
<Button variant="secondary" onClick={sendEmail} size="sm">
{contribution.comment ? "Renvoyer un mail" : "Répondre"}
</Button>
</Col>
{emailSent && <Text>Mail envoyé!</Text>}
</Row>
</Container>
);
Expand Down
3 changes: 3 additions & 0 deletions src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import ReactDOM from "react-dom/client";
import { BrowserRouter, Link } from "react-router-dom";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";

import Router from "./router";
import "./styles.scss";
Expand All @@ -28,6 +30,7 @@ if (rootElement) {
<React.StrictMode>
<DSFRConfig routerComponent={RouterLink}>
<BrowserRouter>
<ToastContainer />
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<Router />
Expand Down
10 changes: 9 additions & 1 deletion src/pages/contribution-page/contribution-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ContributorInfo from "./contributor-info";
import StaffActions from "./staff-action";
import { Contribution } from "../../types";
import HighlightedMessage from "../../components/highlighted-message";
import { BadgeColor } from "./utils";

const ContributionItem = ({
data,
Expand Down Expand Up @@ -41,6 +42,13 @@ const ContributionItem = ({
>
{data.status}
</Badge>
<Badge
size="sm"
color={BadgeColor({ type: data.type })}
className="fr-mr-1w fr-mb-1w status"
>
{data.type}
</Badge>
</Col>
<Text size="sm">
<i className="date">
Expand Down Expand Up @@ -74,7 +82,7 @@ const ContributionItem = ({
<AccordionGroup>
<Accordion title={renderAccordion}>
{!data.comment && (
<Notice type="info" closeMode={"disallow"} className="fr-mb-2w">
<Notice type="info" closeMode={"disallow"} className="fr-mb-1w">
Aucune réponse apportée à ce message pour l'instant
</Notice>
)}
Expand Down
108 changes: 77 additions & 31 deletions src/pages/contribution-page/message-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import type { Contribution } from "../../types";
import HighlightedMessage from "../../components/highlighted-message";
import { useLocation } from "react-router-dom";
import EditModal from "../../components/edit-modal";
import { useState } from "react";
import { useState, useCallback } from "react";

const MessagePreview = ({
data,
highlightedQuery,
Expand All @@ -13,13 +14,28 @@ const MessagePreview = ({
}) => {
const location = useLocation();
const [showModal, setShowModal] = useState(false);
const [copySuccess, setCopySuccess] = useState("");

const copyToClipboard = useCallback((text, successMessage) => {
navigator.clipboard.writeText(text).then(() => {
setCopySuccess(successMessage);
setTimeout(() => setCopySuccess(""), 2000);
});
}, []);

const contributorClassName = location.pathname.includes("contributionpage")
? "contributorSide"
: "contributorSideContact";
const contributorInfoClassName = location.pathname.includes(
"contributionpage"
)
? "contributorSideInfo"
: "contributorSideContactInfo";
const handleOpenModal = () => {
setShowModal(true);
};
const contributorMessageClassName = location.pathname.includes(
"contributionpage"
)
? "contributorSideMessage"
: "contributorSideContactMessage";

const handleCloseModal = () => {
setShowModal(false);
Expand All @@ -28,16 +44,36 @@ const MessagePreview = ({
return (
<>
<EditModal isOpen={showModal} onClose={handleCloseModal} data={data} />
<Row gutters className={contributorClassName}>
<Row className={contributorInfoClassName}>
{data.id && (
<Col
md="4"
className={
data.type === "structure"
? "fr-icon-building-line"
: "fr-icon-user-line"
}
>
ID de l'objet concerné : {data.id}
<div
style={{ cursor: "pointer" }}
onClick={() => copyToClipboard(data.id, "ID copié")}
>
ID de l'objet concerné: {data.id}
{copySuccess === "ID copié" && (
<span
style={{
color: "white",
backgroundColor: "#efcb3a",
marginLeft: "10px",
padding: "2px 5px",
borderRadius: "5px",
fontSize: "0.8em",
}}
>
{copySuccess}
</span>
)}
</div>
{data.team && data.team.length > 0 && (
<Text>
Traité par : {data?.team[0]} le{" "}
Expand All @@ -46,12 +82,32 @@ const MessagePreview = ({
)}
</Col>
)}

<Col>
<Col md="4">
<Text>{data.name ? `Nom: ${data.name}` : "Nom non renseigné"}</Text>
{data.email && <Text>Email: {data.email}</Text>}
{data.email && (
<div
style={{ cursor: "pointer" }}
onClick={() => copyToClipboard(data.email, "Email copié")}
>
Email: {data.email}
{copySuccess === "Email copié" && (
<span
style={{
color: "white",
backgroundColor: "#efcb3a",
marginLeft: "10px",
padding: "2px 5px",
borderRadius: "5px",
fontSize: "0.8em",
}}
>
{copySuccess}
</span>
)}
</div>
)}
</Col>
<Col className="contributorInfo">
<Col md="4" className="contributorInfo">
{data.organisation ? (
<Text>Organisation: {data.organisation}</Text>
) : (
Expand All @@ -62,29 +118,19 @@ const MessagePreview = ({
) : (
<Text>Fonction non renseignée</Text>
)}

{data.team && data.team.length > 0 ? (
<Text>
Traité par : {data.team[0]} le{" "}
{new Date(data.modified_at).toLocaleDateString()}
</Text>
) : (
<Text>Non traité</Text>
)}
</Col>
<Col>
<Text>
<HighlightedMessage
message={data.message}
highlightedQuery={highlightedQuery}
/>
</Text>
<div>
<pre>{JSON.stringify(data || "", null, 2)}</pre>
</div>
<Button onClick={handleOpenModal}>Editer la contribution</Button>
</Col>
</Row>
<Row className={contributorMessageClassName}>
<Text>
<HighlightedMessage
message={data.message}
highlightedQuery={highlightedQuery}
/>
</Text>
</Row>
<Row className="fr-mb-2w">
<Button onClick={handleOpenModal}>Editer la contribution</Button>
</Row>
</>
);
};
Expand Down
10 changes: 4 additions & 6 deletions src/pages/contribution-page/staff-action.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,13 @@ const StaffActions = ({ data }: { data: Contribution }) => {

return (
<>
{data.comment && (
{data?.comment && (
<Col className={contributorClassName}>
<Text size="sm">Commentaire laissé par {data?.team[0]}</Text>
<Text>{data.comment}</Text>
<Text size="sm">
Réponse déjà apportée par {data?.team[0]} le{" "}
{new Date(data.modified_at).toLocaleDateString()} :
Réponse apportée par {data?.responseFrom || data.team[0]} le{" "}
{new Date(data?.modified_at).toLocaleDateString()}{" "}
</Text>
<Text>{data.message}</Text>
<Text>{data?.comment}</Text>
</Col>
)}
<EmailSender contribution={data} />
Expand Down
18 changes: 16 additions & 2 deletions src/pages/contribution-page/styles.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
.contributorSide {
.contributorSideInfo {
background-color: var(--background-alt-green-emeraude);
border: 1px solid var(--background-alt-green-emeraude);
border-radius: 10px;
margin-bottom: 20px;
padding: 20px;
}
.contributorSideMessage {
background-color: var(--background-alt-green-emeraude);
border: 1px solid var(--background-alt-green-emeraude);
border-radius: 10px;
margin-bottom: 20px;
margin-right: 250px;
padding: 20px;
}
.contributorSideContact {
.contributorSideContactInfo {
background-color: var(--background-alt-brown-caramel);
border: 1px solid var(--background-alt-brown-caramel);
border-radius: 10px;
margin-bottom: 20px;
padding: 20px;
}
.contributorSideContactMessage {
background-color: var(--background-alt-brown-caramel);
border: 1px solid var(--background-alt-brown-caramel);
border-radius: 10px;
Expand Down
23 changes: 23 additions & 0 deletions src/pages/contribution-page/utils/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export const BadgeColor = ({ type }) => {
let badgeColor;
switch (type) {
case "structures":
badgeColor = "yellow-tournesol";
break;
case "persons":
badgeColor = "orange-terre-battue";
break;
case "publications":
badgeColor = "pink-macaron";
break;
case "project":
badgeColor = "green-emeraude";
break;
case "patent":
badgeColor = "blue-ecume";
break;
default:
badgeColor = "purple-glycine";
}
return badgeColor;
};
2 changes: 2 additions & 0 deletions src/types/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export type Contribution = {
responseByMail: string;
responseFrom: string;
modified_at: string;
team: any;
_id: any;
Expand Down

0 comments on commit ab21e5a

Please sign in to comment.