feat: form alerts

docker-compose.yaml

@@ -44,10 +44,20 @@ services:
     ports:
       - "5433:5432"
 
+  redis:
+    image: redis:8.6-alpine
+    restart: always
+    ports:
+      - "6379:6379"
+    command: redis-server --save 60 1 --loglevel warning
+    volumes:
+      - cache:/data
+
 networks:
   elastic:
 
 volumes:
   jdma_kibana_data:
   jdma_es_data:
   jdma_es_certs:
+  cache:

webapp-backoffice/.env.example

@@ -41,3 +41,9 @@ PROCONNECT_CLIENT_SECRET=""
 #INSEE
 INSEE_API_URL="https://api.insee.fr"
 INSEE_API_KEY=""
+
+# Redis (BullMQ queue)
+REDIS_URL=redis://localhost:6379
+
+# Alert worker tuning
+ALERT_WORKER_CONCURRENCY=5

webapp-backoffice/react-email/emails/components/JdmaLayout.tsx → webapp-backoffice/emails/components/JdmaLayout.tsx

@@ -8,7 +8,7 @@ import {
 	Preview,
 	Section,
 	Text
-} from '@react-email/components';
+} from 'react-email';
 import * as React from 'react';
 
 interface JdmaLayoutProps {

webapp-backoffice/react-email/emails/interface.ts → webapp-backoffice/emails/interface.ts

@@ -73,3 +73,13 @@ export interface JdmaUserRequestRefusedEmailProps {
 	message?: string;
 	baseUrl?: string;
 }
+
+export interface JdmaAlertEmailProps {
+	userId?: number;
+	productTitle?: string;
+	formTitle?: string;
+	totalNbReviews?: number;
+	nbReviewsWithComments?: number;
+	reviewsUrl?: string;
+	baseUrl?: string;
+}

webapp-backoffice/emails/jdma-alert-email.tsx

@@ -0,0 +1,105 @@
+import { Button, Hr, Link, Section, Text } from 'react-email';
+import * as React from 'react';
+import { JdmaLayout } from './components/JdmaLayout';
+import { JdmaAlertEmailProps } from './interface';
+
+const formatNumber = (num: number) => {
+	return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+};
+
+export const JdmaAlertEmail = ({
+	userId = 1,
+	productTitle = 'Service de démonstration',
+	formTitle = 'Formulaire de satisfaction',
+	totalNbReviews = 3,
+	nbReviewsWithComments = 2,
+	reviewsUrl = 'https://jedonnemonavis.numerique.gouv.fr/administration/dashboard/product/1/forms/1?tab=reviews',
+	baseUrl = 'https://jedonnemonavis.numerique.gouv.fr'
+}: JdmaAlertEmailProps) => {
+	const reviewsLabel =
+		totalNbReviews === 1 ? 'nouvelle réponse' : 'nouvelles réponses';
+	const formattedTotal = formatNumber(totalNbReviews);
+
+	return (
+		<JdmaLayout
+			preview={`${formattedTotal} ${reviewsLabel} sur le formulaire ${formTitle}`}
+			baseUrl={baseUrl}
+		>
+			<Text style={paragraph}>Bonjour,</Text>
+
+			<Text style={paragraph}>
+				Vous avez reçu&nbsp;
+				<strong>
+					{formattedTotal} {reviewsLabel}
+				</strong>
+				{' nécessitant votre attention sur le formulaire '}
+				<strong>{formTitle}</strong>
+				{' du service '}
+				<strong>{productTitle}</strong>
+				{nbReviewsWithComments > 0
+					? `, dont ${formatNumber(nbReviewsWithComments)} avec ${
+							nbReviewsWithComments === 1 ? 'commentaire' : 'commentaires'
+					  }.`
+					: '.'}
+			</Text>
+
+			<Section style={ctaSection}>
+				<Button href={reviewsUrl} style={ctaButton}>
+					Voir les nouvelles réponses
+				</Button>
+			</Section>
+
+			<Hr style={hr} />
+
+			<Text style={paragraph}>
+				Pour changer la fréquence de cette alerte ou ne plus la recevoir du
+				tout,&nbsp;
+				<Link
+					href={`${baseUrl}/administration/dashboard/user/${userId}/notifications`}
+					target="_blank"
+					style={linkStyle}
+				>
+					modifiez vos paramètres de notification
+				</Link>
+				.
+			</Text>
+		</JdmaLayout>
+	);
+};
+
+export default JdmaAlertEmail;
+
+// Styles
+const paragraph: React.CSSProperties = {
+	fontSize: '14px',
+	lineHeight: '1.5',
+	color: '#333333',
+	marginBottom: '16px'
+};
+
+const linkStyle: React.CSSProperties = {
+	color: '#000091',
+	textDecoration: 'underline'
+};
+
+const ctaSection: React.CSSProperties = {
+	textAlign: 'center' as const,
+	marginTop: '24px',
+	marginBottom: '24px'
+};
+
+const ctaButton: React.CSSProperties = {
+	backgroundColor: '#000091',
+	color: '#ffffff',
+	fontSize: '14px',
+	fontWeight: 'bold',
+	padding: '10px 20px',
+	textDecoration: 'none',
+	display: 'inline-block'
+};
+
+const hr: React.CSSProperties = {
+	borderColor: '#e0e0e0',
+	marginTop: '24px',
+	marginBottom: '24px'
+};

webapp-backoffice/react-email/emails/jdma-closed-button-or-form-email.tsx → webapp-backoffice/emails/jdma-closed-button-or-form-email.tsx

@@ -1,4 +1,4 @@
-import { Column, Img, Link, Row, Section, Text } from '@react-email/components';
+import { Column, Img, Link, Row, Section, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaClosedButtonOrFormEmailProps } from './interface';
@@ -24,7 +24,9 @@ export const JdmaClosedButtonOrFormEmail = ({
 
 	return (
 		<JdmaLayout
-			preview={`Fermeture ${buttonTitle ? "d'un lien d'intégration" : "d'un formulaire"} du service « ${product.title} »`}
+			preview={`Fermeture ${
+				buttonTitle ? "d'un lien d'intégration" : "d'un formulaire"
+			} du service « ${product.title} »`}
 			baseUrl={baseUrl}
 		>
 			<Text style={paragraph}>Bonjour,</Text>

webapp-backoffice/react-email/emails/jdma-invite-email.tsx → webapp-backoffice/emails/jdma-invite-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaInviteEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-notifications-email.tsx → webapp-backoffice/emails/jdma-notifications-email.tsx

@@ -1,4 +1,4 @@
-import { Column, Link, Row, Section, Text } from '@react-email/components';
+import { Column, Link, Row, Section, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaNotificationsEmailProps } from './interface';
@@ -44,17 +44,23 @@ export const JdmaNotificationsEmail = ({
 			case 'daily':
 				return `en date du ${formatDate(startDate)}`;
 			case 'weekly':
-				return `dans les 7 derniers jours (du ${formatDate(startDate)} au ${formatDate(endDate)})`;
+				return `dans les 7 derniers jours (du ${formatDate(
+					startDate
+				)} au ${formatDate(endDate)})`;
 			case 'monthly':
-				return `dans le dernier mois calendaire (du ${formatDate(startDate)} au ${formatDate(endDate)})`;
+				return `dans le dernier mois calendaire (du ${formatDate(
+					startDate
+				)} au ${formatDate(endDate)})`;
 			default:
 				return `en date du ${formatDate(startDate)}`;
 		}
 	};
 
 	return (
 		<JdmaLayout
-			preview={`${formatNumber(totalNbReviews)} ${totalNbReviews === 1 ? 'nouvelle réponse' : 'nouvelles réponses'} sur vos services`}
+			preview={`${formatNumber(totalNbReviews)} ${
+				totalNbReviews === 1 ? 'nouvelle réponse' : 'nouvelles réponses'
+			} sur vos services`}
 			baseUrl={baseUrl}
 		>
 			<Text style={paragraph}>Bonjour,</Text>

webapp-backoffice/react-email/emails/jdma-otp-email.tsx → webapp-backoffice/emails/jdma-otp-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaOtpEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-product-archived-email.tsx → webapp-backoffice/emails/jdma-product-archived-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaProductArchivedEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-product-restored-email.tsx → webapp-backoffice/emails/jdma-product-restored-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaProductRestoredEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-register-email.tsx → webapp-backoffice/emails/jdma-register-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaTokenEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-reset-password-email.tsx → webapp-backoffice/emails/jdma-reset-password-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaTokenEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-user-invite-email.tsx → webapp-backoffice/emails/jdma-user-invite-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaUserInviteEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-user-request-accepted-email.tsx → webapp-backoffice/emails/jdma-user-request-accepted-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaTokenEmailProps } from './interface';

webapp-backoffice/react-email/emails/jdma-user-request-refused-email.tsx → webapp-backoffice/emails/jdma-user-request-refused-email.tsx

@@ -1,4 +1,4 @@
-import { Link, Text } from '@react-email/components';
+import { Link, Text } from 'react-email';
 import * as React from 'react';
 import { JdmaLayout } from './components/JdmaLayout';
 import { JdmaUserRequestRefusedEmailProps } from './interface';